diff --git a/_config.yml b/_config.yml index dc37ba19..87e013e4 100644 --- a/_config.yml +++ b/_config.yml @@ -8,6 +8,7 @@ searchIndexName: Crawler-DBR-Docs-New searchNeedFilter: true useVersionTree: true +useJSVersionV3: true features: /barcode-reader/docs/core/programming/features/ usecases: /barcode-reader/docs/core/programming/usecases/ diff --git a/_data/full_tree.yml b/_data/full_tree.yml index 77a9c90a..bcfae504 100644 --- a/_data/full_tree.yml +++ b/_data/full_tree.yml @@ -1,36 +1,9 @@ tree_file_list: - sidelist-full-tree.html - sidelist-programming/sidelist-architecture.html - - sidelist-programming/sidelist-architecture-v10.5.3000.html - sidelist-programming/sidelist-performance.html - sidelist-programming/sidelist-parameters-organization.html - sidelist-programming/sidelist-parameter-reference.html - sidelist-programming/sidelist-parameters.html - - sidelist-programming/sidelist-parameters-v10.5.3000.html - sidelist-programming/sidelist-understanding.html - - sidelist-programming/sidelist-understanding-v10.4.3100.html - - sidelist-programming/sidelist-understanding-v10.5.3000.html - - sidelist-programming/programming-javascript.html - - sidelist-programming/programming-javascript-v10.5.3000.html - - sidelist-programming/programming-javascript-v10.4.3100.html - - sidelist-programming/programming-javascript-v10.2.1000.html - - sidelist-programming/programming-javascript-v10.0.21.html - - sidelist-programming/programming-javascript-v9.6.42.html - - sidelist-programming/programming-javascript-v9.6.11.html - - sidelist-programming/programming-javascript-v9.0.2.html - - sidelist-programming/programming-javascript-v8.8.7.html - - sidelist-programming/programming-javascript-v8.8.5.html - - sidelist-programming/programming-javascript-v8.8.3.html - - sidelist-programming/programming-javascript-v8.6.3.html - - sidelist-programming/programming-javascript-v8.6.0.html - - sidelist-programming/programming-javascript-v8.4.0.html - - sidelist-programming/programming-javascript-v8.2.5.html - - sidelist-programming/programming-javascript-v8.2.3.html - - sidelist-programming/programming-javascript-v8.2.1.html - - sidelist-programming/programming-javascript-v8.2.0.html - - sidelist-programming/programming-javascript-v8.1.3.html - - sidelist-programming/programming-javascript-v8.1.2.html - - sidelist-programming/programming-javascript-v8.1.0.html - - sidelist-programming/programming-javascript-v8.0.0.html - - sidelist-programming/programming-javascript-v7.6.0.html - - sidelist-programming/programming-javascript-v7.5.0.html \ No newline at end of file + - sidelist-programming/programming-javascript.html \ No newline at end of file diff --git a/_data/product_version.yml b/_data/product_version.yml index 8d0dac0d..b2fc7d16 100644 --- a/_data/product_version.yml +++ b/_data/product_version.yml @@ -1,59 +1,6 @@ useGroupedVersion: true version_info_list_js: - - value: latest version(11.0.6000) - - value: 11.x - child: - - 11.0.3000 + - value: latest version - value: 10.x - child: - - 10.5.3000 - - 10.4.3100 - - 10.4.2002 - - 10.2.1000 - - 10.0.21 - - 10.0.20 - - value: 9.x - child: - - 9.6.42 - - 9.6.40 - - 9.6.33 - - 9.6.32 - - 9.6.31 - - 9.6.30 - - 9.6.21 - - 9.6.20 - - 9.6.11 - - 9.6.10 - - 9.6.2 - - 9.6.1 - - 9.6.0 - - 9.3.1 - - 9.3.0 - - 9.2.13 - - 9.2.12 - - 9.2.11 - - 9.0.2 - - 9.0.1 - - 9.0.0 - - value: 8.x - child: - - 8.8.7 - - 8.8.5 - - 8.8.3 - - 8.8.0 - - 8.6.3 - - 8.6.0 - - 8.4.0 - - 8.2.5 - - 8.2.3 - - 8.2.1 - - 8.2.0 - - 8.1.3 - - 8.1.2 - - 8.1.0 - - 8.0.0 - - value: 7.x - child: - - 7.6.0 - - 7.5.0 + - value: 9.x or older diff --git a/_includes/sidelist-programming/programming-javascript-v10.0.21.html b/_includes/sidelist-programming/programming-javascript-v10.0.21.html deleted file mode 100644 index 847517ac..00000000 --- a/_includes/sidelist-programming/programming-javascript-v10.0.21.html +++ /dev/null @@ -1,1165 +0,0 @@ -
  • - Introduction -
    • -
  • DEVELOPMENT
    • -
  • - User Guide - -
    • -
  • - Samples and Demos - -
    • -
  • - API Reference - -
    • -
  • USEFUL RESOURCES
    • -
  • - Release Notes - -
    • -
  • - Upgrade Instructions - -
    • - -
  • - FAQ - -
    • -
  • OTHERS
    • -
  • - Develop for Mobile or Server/Desktop -
    • diff --git a/_includes/sidelist-programming/programming-javascript-v10.2.1000.html b/_includes/sidelist-programming/programming-javascript-v10.2.1000.html deleted file mode 100644 index 9140bd94..00000000 --- a/_includes/sidelist-programming/programming-javascript-v10.2.1000.html +++ /dev/null @@ -1,1599 +0,0 @@ -
  • - Introduction -
    • -
  • DEVELOPMENT
    • -
  • - User Guide - -
    • -
  • - Samples and Demos - -
    • -
  • - API Reference - -
    • -
  • USEFUL RESOURCES
    • -
  • - Release Notes - -
    • -
  • - Upgrade Instructions - -
    • - -
  • - FAQ - -
    • -
  • OTHERS
    • -
  • - Develop for Mobile or Server/Desktop -
    • diff --git a/_includes/sidelist-programming/programming-javascript-v10.4.3100.html b/_includes/sidelist-programming/programming-javascript-v10.4.3100.html deleted file mode 100644 index 0114cb1c..00000000 --- a/_includes/sidelist-programming/programming-javascript-v10.4.3100.html +++ /dev/null @@ -1,1687 +0,0 @@ -
  • - Introduction -
    • -
  • DEVELOPMENT
    • -
  • - User Guide - -
    • -
  • - Samples and Demos - -
    • -
  • - API Reference - -
    • -{%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-understanding.html" -%} -
  • USEFUL RESOURCES
    • -
  • - Release Notes - -
    • -
  • - Upgrade Instructions - -
    • - -
  • - FAQ - -
    • -
  • License Initialization
    • - diff --git a/_includes/sidelist-programming/programming-javascript-v10.5.3000.html b/_includes/sidelist-programming/programming-javascript-v10.5.3000.html deleted file mode 100644 index 89446655..00000000 --- a/_includes/sidelist-programming/programming-javascript-v10.5.3000.html +++ /dev/null @@ -1,1627 +0,0 @@ -
  • - Introduction -
    • -
  • DEVELOPMENT
    • -
  • - User Guide - -
    • -
  • - Samples and Demos -
    • -
  • - API Reference - -
    • -{%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-understanding.html" -%} -
  • USEFUL RESOURCES
    • -
  • - Release Notes - -
    • -
  • - Upgrade Instructions - -
    • - -
  • - FAQ - -
    • -
  • License Initialization
    • - diff --git a/_includes/sidelist-programming/programming-javascript-v7.5.0.html b/_includes/sidelist-programming/programming-javascript-v7.5.0.html deleted file mode 100644 index ddf0a8ae..00000000 --- a/_includes/sidelist-programming/programming-javascript-v7.5.0.html +++ /dev/null @@ -1,54 +0,0 @@ -
  • - Introduction -
    • -
  • DEVELOPMENT
    • -
  • User Guide - -
    • -
  • API Reference - -
    • -
  • USEFUL RESOURCES
    • -
  • Release Notes - -
    • \ No newline at end of file diff --git a/_includes/sidelist-programming/programming-javascript-v7.6.0.html b/_includes/sidelist-programming/programming-javascript-v7.6.0.html deleted file mode 100644 index ddf0a8ae..00000000 --- a/_includes/sidelist-programming/programming-javascript-v7.6.0.html +++ /dev/null @@ -1,54 +0,0 @@ -
  • - Introduction -
    • -
  • DEVELOPMENT
    • -
  • User Guide - -
    • -
  • API Reference - -
    • -
  • USEFUL RESOURCES
    • -
  • Release Notes - -
    • \ No newline at end of file diff --git a/_includes/sidelist-programming/programming-javascript-v8.0.0.html b/_includes/sidelist-programming/programming-javascript-v8.0.0.html deleted file mode 100644 index ddf0a8ae..00000000 --- a/_includes/sidelist-programming/programming-javascript-v8.0.0.html +++ /dev/null @@ -1,54 +0,0 @@ -
  • - Introduction -
    • -
  • DEVELOPMENT
    • -
  • User Guide - -
    • -
  • API Reference - -
    • -
  • USEFUL RESOURCES
    • -
  • Release Notes - -
    • \ No newline at end of file diff --git a/_includes/sidelist-programming/programming-javascript-v8.1.0.html b/_includes/sidelist-programming/programming-javascript-v8.1.0.html deleted file mode 100644 index ddf0a8ae..00000000 --- a/_includes/sidelist-programming/programming-javascript-v8.1.0.html +++ /dev/null @@ -1,54 +0,0 @@ -
  • - Introduction -
    • -
  • DEVELOPMENT
    • -
  • User Guide - -
    • -
  • API Reference - -
    • -
  • USEFUL RESOURCES
    • -
  • Release Notes - -
    • \ No newline at end of file diff --git a/_includes/sidelist-programming/programming-javascript-v8.1.2.html b/_includes/sidelist-programming/programming-javascript-v8.1.2.html deleted file mode 100644 index ddf0a8ae..00000000 --- a/_includes/sidelist-programming/programming-javascript-v8.1.2.html +++ /dev/null @@ -1,54 +0,0 @@ -
  • - Introduction -
    • -
  • DEVELOPMENT
    • -
  • User Guide - -
    • -
  • API Reference - -
    • -
  • USEFUL RESOURCES
    • -
  • Release Notes - -
    • \ No newline at end of file diff --git a/_includes/sidelist-programming/programming-javascript-v8.1.3.html b/_includes/sidelist-programming/programming-javascript-v8.1.3.html deleted file mode 100644 index ddf0a8ae..00000000 --- a/_includes/sidelist-programming/programming-javascript-v8.1.3.html +++ /dev/null @@ -1,54 +0,0 @@ -
  • - Introduction -
    • -
  • DEVELOPMENT
    • -
  • User Guide - -
    • -
  • API Reference - -
    • -
  • USEFUL RESOURCES
    • -
  • Release Notes - -
    • \ No newline at end of file diff --git a/_includes/sidelist-programming/programming-javascript-v8.2.0.html b/_includes/sidelist-programming/programming-javascript-v8.2.0.html deleted file mode 100644 index ddf0a8ae..00000000 --- a/_includes/sidelist-programming/programming-javascript-v8.2.0.html +++ /dev/null @@ -1,54 +0,0 @@ -
  • - Introduction -
    • -
  • DEVELOPMENT
    • -
  • User Guide - -
    • -
  • API Reference - -
    • -
  • USEFUL RESOURCES
    • -
  • Release Notes - -
    • \ No newline at end of file diff --git a/_includes/sidelist-programming/programming-javascript-v8.2.1.html b/_includes/sidelist-programming/programming-javascript-v8.2.1.html deleted file mode 100644 index ddf0a8ae..00000000 --- a/_includes/sidelist-programming/programming-javascript-v8.2.1.html +++ /dev/null @@ -1,54 +0,0 @@ -
  • - Introduction -
    • -
  • DEVELOPMENT
    • -
  • User Guide - -
    • -
  • API Reference - -
    • -
  • USEFUL RESOURCES
    • -
  • Release Notes - -
    • \ No newline at end of file diff --git a/_includes/sidelist-programming/programming-javascript-v8.2.3.html b/_includes/sidelist-programming/programming-javascript-v8.2.3.html deleted file mode 100644 index ddf0a8ae..00000000 --- a/_includes/sidelist-programming/programming-javascript-v8.2.3.html +++ /dev/null @@ -1,54 +0,0 @@ -
  • - Introduction -
    • -
  • DEVELOPMENT
    • -
  • User Guide - -
    • -
  • API Reference - -
    • -
  • USEFUL RESOURCES
    • -
  • Release Notes - -
    • \ No newline at end of file diff --git a/_includes/sidelist-programming/programming-javascript-v8.2.5.html b/_includes/sidelist-programming/programming-javascript-v8.2.5.html deleted file mode 100644 index 3b00b1de..00000000 --- a/_includes/sidelist-programming/programming-javascript-v8.2.5.html +++ /dev/null @@ -1,68 +0,0 @@ -
  • - Introduction -
    • -
  • DEVELOPMENT
    • -
  • User Guide - -
    • -
  • API Reference - -
    • -
  • USEFUL RESOURCES
    • -
  • Release Notes - -
    • \ No newline at end of file diff --git a/_includes/sidelist-programming/programming-javascript-v8.4.0.html b/_includes/sidelist-programming/programming-javascript-v8.4.0.html deleted file mode 100644 index b6522b6a..00000000 --- a/_includes/sidelist-programming/programming-javascript-v8.4.0.html +++ /dev/null @@ -1,121 +0,0 @@ -
  • - Introduction -
    • -
  • DEVELOPMENT
    • -
  • User Guide - -
    • -
  • Samples and Demos - -
    • -
  • API Reference - -
    • -
  • USEFUL RESOURCES
    • -
  • Release Notes - -
    • -
  • Upgrade Instructions
    • \ No newline at end of file diff --git a/_includes/sidelist-programming/programming-javascript-v8.6.0.html b/_includes/sidelist-programming/programming-javascript-v8.6.0.html deleted file mode 100644 index b6522b6a..00000000 --- a/_includes/sidelist-programming/programming-javascript-v8.6.0.html +++ /dev/null @@ -1,121 +0,0 @@ -
  • - Introduction -
    • -
  • DEVELOPMENT
    • -
  • User Guide - -
    • -
  • Samples and Demos - -
    • -
  • API Reference - -
    • -
  • USEFUL RESOURCES
    • -
  • Release Notes - -
    • -
  • Upgrade Instructions
    • \ No newline at end of file diff --git a/_includes/sidelist-programming/programming-javascript-v8.6.1.html b/_includes/sidelist-programming/programming-javascript-v8.6.1.html deleted file mode 100644 index b6522b6a..00000000 --- a/_includes/sidelist-programming/programming-javascript-v8.6.1.html +++ /dev/null @@ -1,121 +0,0 @@ -
  • - Introduction -
    • -
  • DEVELOPMENT
    • -
  • User Guide - -
    • -
  • Samples and Demos - -
    • -
  • API Reference - -
    • -
  • USEFUL RESOURCES
    • -
  • Release Notes - -
    • -
  • Upgrade Instructions
    • \ No newline at end of file diff --git a/_includes/sidelist-programming/programming-javascript-v8.6.3.html b/_includes/sidelist-programming/programming-javascript-v8.6.3.html deleted file mode 100644 index b6522b6a..00000000 --- a/_includes/sidelist-programming/programming-javascript-v8.6.3.html +++ /dev/null @@ -1,121 +0,0 @@ -
  • - Introduction -
    • -
  • DEVELOPMENT
    • -
  • User Guide - -
    • -
  • Samples and Demos - -
    • -
  • API Reference - -
    • -
  • USEFUL RESOURCES
    • -
  • Release Notes - -
    • -
  • Upgrade Instructions
    • \ No newline at end of file diff --git a/_includes/sidelist-programming/programming-javascript-v8.8.3.html b/_includes/sidelist-programming/programming-javascript-v8.8.3.html deleted file mode 100644 index ea272c38..00000000 --- a/_includes/sidelist-programming/programming-javascript-v8.8.3.html +++ /dev/null @@ -1,140 +0,0 @@ -
  • - Introduction -
    • -
  • DEVELOPMENT
    • -
  • User Guide - -
    • -
  • Samples and Demos - -
    • -
  • API Reference - -
    • -
  • USEFUL RESOURCES
    • -
  • Release Notes - -
    • -
  • Upgrade Instructions
    • \ No newline at end of file diff --git a/_includes/sidelist-programming/programming-javascript-v8.8.5.html b/_includes/sidelist-programming/programming-javascript-v8.8.5.html deleted file mode 100644 index ea272c38..00000000 --- a/_includes/sidelist-programming/programming-javascript-v8.8.5.html +++ /dev/null @@ -1,140 +0,0 @@ -
  • - Introduction -
    • -
  • DEVELOPMENT
    • -
  • User Guide - -
    • -
  • Samples and Demos - -
    • -
  • API Reference - -
    • -
  • USEFUL RESOURCES
    • -
  • Release Notes - -
    • -
  • Upgrade Instructions
    • \ No newline at end of file diff --git a/_includes/sidelist-programming/programming-javascript-v8.8.7.html b/_includes/sidelist-programming/programming-javascript-v8.8.7.html deleted file mode 100644 index ca4f6d8f..00000000 --- a/_includes/sidelist-programming/programming-javascript-v8.8.7.html +++ /dev/null @@ -1,140 +0,0 @@ -
  • - Introduction -
    • -
  • DEVELOPMENT
    • -
  • User Guide - -
    • -
  • Samples and Demos - -
    • -
  • API Reference - -
    • -
  • USEFUL RESOURCES
    • -
  • Release Notes - -
    • -
  • Upgrade Instructions
    • \ No newline at end of file diff --git a/_includes/sidelist-programming/programming-javascript-v9.0.2.html b/_includes/sidelist-programming/programming-javascript-v9.0.2.html deleted file mode 100644 index ba829622..00000000 --- a/_includes/sidelist-programming/programming-javascript-v9.0.2.html +++ /dev/null @@ -1,142 +0,0 @@ -
  • - Introduction -
    • -
  • DEVELOPMENT
    • -
  • User Guide - -
    • -
  • Samples and Demos - -
    • -
  • API Reference - -
    • -
  • USEFUL RESOURCES
    • -
  • Release Notes - -
    • -
  • Upgrade Instructions
    • -
  • FAQ
    • \ No newline at end of file diff --git a/_includes/sidelist-programming/programming-javascript-v9.6.11.html b/_includes/sidelist-programming/programming-javascript-v9.6.11.html deleted file mode 100644 index f10ac450..00000000 --- a/_includes/sidelist-programming/programming-javascript-v9.6.11.html +++ /dev/null @@ -1,309 +0,0 @@ -
  • - Introduction -
    • -
  • DEVELOPMENT
    • -
  • User Guide - -
    • -
  • Samples and Demos - -
    • -
  • API Reference - -
    • -
  • USEFUL RESOURCES
    • -
  • Release Notes - -
    • -
  • Upgrade Instructions
    • -
  • FAQ - -
    • -
  • OTHERS
    • -
  • Develop for Mobile or Server/Desktop
    • \ No newline at end of file diff --git a/_includes/sidelist-programming/programming-javascript-v9.6.42.html b/_includes/sidelist-programming/programming-javascript-v9.6.42.html deleted file mode 100644 index a57c2041..00000000 --- a/_includes/sidelist-programming/programming-javascript-v9.6.42.html +++ /dev/null @@ -1,394 +0,0 @@ -
  • - Introduction -
    • -
  • DEVELOPMENT
    • -
  • User Guide - -
    • -
  • Samples and Demos - -
    • -
  • API Reference - -
    • -
  • USEFUL RESOURCES
    • -
  • Release Notes - -
    • -
  • Upgrade Instructions - -
    • -
  • FAQ - -
    • -
  • OTHERS
    • -
  • Develop - for Mobile or Server/Desktop
    • \ No newline at end of file diff --git a/_includes/sidelist-programming/programming-javascript.html b/_includes/sidelist-programming/programming-javascript.html index ba15d3af..4cc4c5e9 100644 --- a/_includes/sidelist-programming/programming-javascript.html +++ b/_includes/sidelist-programming/programming-javascript.html @@ -1388,6 +1388,10 @@ 10.x
  • Version 9.x
    • +
  • Version + 8.x
    • +
  • Version + 7.6.0 and below
  • diff --git a/_includes/sidelist-programming/programming-js.html b/_includes/sidelist-programming/programming-js.html deleted file mode 100644 index a85ade9c..00000000 --- a/_includes/sidelist-programming/programming-js.html +++ /dev/null @@ -1,1563 +0,0 @@ -
  • DEVELOPMENT
    • -
  • - User Guide - -
    • -
  • - API Reference - -
    • -{%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-understanding.html" -%} -
  • USEFUL RESOURCES
    • -
  • - Release Notes - -
    • -
  • License Initialization
    • \ No newline at end of file diff --git a/_includes/sidelist-programming/sidelist-architecture-v10.5.3000.html b/_includes/sidelist-programming/sidelist-architecture-v10.5.3000.html deleted file mode 100644 index 295c5c28..00000000 --- a/_includes/sidelist-programming/sidelist-architecture-v10.5.3000.html +++ /dev/null @@ -1,87 +0,0 @@ -
  • - Architecture - -
    • \ No newline at end of file diff --git a/_includes/sidelist-programming/sidelist-parameter-reference-v10.4.2002.html b/_includes/sidelist-programming/sidelist-parameter-reference-v10.4.2002.html deleted file mode 100644 index 25e0ef11..00000000 --- a/_includes/sidelist-programming/sidelist-parameter-reference-v10.4.2002.html +++ /dev/null @@ -1,204 +0,0 @@ -
  • - Parameter Reference - -
    • \ No newline at end of file diff --git a/_includes/sidelist-programming/sidelist-parameters-v10.5.3000.html b/_includes/sidelist-programming/sidelist-parameters-v10.5.3000.html deleted file mode 100644 index 6720abbf..00000000 --- a/_includes/sidelist-programming/sidelist-parameters-v10.5.3000.html +++ /dev/null @@ -1,207 +0,0 @@ -
  • - Parameters - -
    • \ No newline at end of file diff --git a/_includes/sidelist-programming/sidelist-understanding-v10.4.3100.html b/_includes/sidelist-programming/sidelist-understanding-v10.4.3100.html deleted file mode 100644 index 3f1297a8..00000000 --- a/_includes/sidelist-programming/sidelist-understanding-v10.4.3100.html +++ /dev/null @@ -1,6 +0,0 @@ -
  • UNDERSTANDING DBR
    • -
  • Overview of DCV
    • -{%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-architecture.html" -%} -{%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-performance.html" -%} -{%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-parameters-organization.html" -%} -{%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-parameter-reference.html" -%} \ No newline at end of file diff --git a/_includes/sidelist-programming/sidelist-understanding-v10.5.3000.html b/_includes/sidelist-programming/sidelist-understanding-v10.5.3000.html deleted file mode 100644 index 1f72e895..00000000 --- a/_includes/sidelist-programming/sidelist-understanding-v10.5.3000.html +++ /dev/null @@ -1,5 +0,0 @@ -
  • UNDERSTANDING DBR
    • -
  • Overview of DCV
    • -{%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-architecture.html" -%} -{%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-performance.html" -%} -{%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-parameters.html" -%} \ No newline at end of file diff --git a/assets/js/dbrWebVersionSearch.json b/assets/js/dbrWebVersionSearch.json deleted file mode 100644 index 7d4c2a70..00000000 --- a/assets/js/dbrWebVersionSearch.json +++ /dev/null @@ -1,214 +0,0 @@ -[ - { - "version": "11.0.6000", - "matchVersion": { - "javascript": "3.0.6000" - } - }, - { - "version": "11.0.3000", - "matchVersion": { - "javascript": "3.0.3001" - } - }, - { - "version": "10.5.3000", - "matchVersion": { - "javascript": "2.6.1000" - } - }, - { - "version": "10.4.3100", - "matchVersion": { - "javascript": "2.6.1000" - } - }, - { - "version": "10.4.2002", - "matchVersion": { - "javascript": "2.4.2200" - } - }, - { - "version": "10.2.1000", - "matchVersion": { - "javascript": "2.2.3000" - } - }, - { - "version": "10.0.21", - "matchList": { - "javascript": { - "dcvRepoWeb": [ - { - "path": "/programming/javascript/api-reference/utility", - "version": "1.0.20" - }, - { - "path": "/programming/javascript/api-reference/license", - "version": "3.0.30" - }, - { - "path": "/programming/javascript/api-reference/capture-vision-router", - "version": "2.0.20" - }, - { - "path": "/programming/javascript/api-reference/core", - "version": "3.0.20" - }, - { - "path": "/programming/javascript/api-reference/image-processing", - "version": "2.0.20" - } - ], - "dcvRepoCore": [ - { - "path": "/enums/capture-vision-router", - "version": "2.0.20" - }, - { - "path": "/enums/core", - "version": "3.0.20" - }, - { - "path": "/parameters/reference/capture-vision-template", - "version": "2.0.20" - }, - { - "path": "/parameters/reference/target-roi-def", - "version": "2.0.20" - }, - { - "path": "/parameters/reference/barcode-reader-task-settings", - "version": "10.0.20" - }, - { - "path": "/parameters/reference/image-parameter", - "version": "2.0.20" - }, - { - "path": "/parameters/reference/barcode-format-specification", - "version": "3.0.20" - }, - { - "path": "/parameters/reference/image-source-options", - "version": "3.0.20" - }, - { - "path": "/parameters/reference/global-parameter", - "version": "2.0.20" - } - ], - "dce": "4.0.1" - } - } - }, - { - "version": "10.0.20", - "matchList": { - "javascript": { - "dcvRepoWeb": [ - { - "path": "/programming/javascript/api-reference/utility", - "version": "1.0.20" - }, - { - "path": "/programming/javascript/api-reference/license", - "version": "3.0.30" - }, - { - "path": "/programming/javascript/api-reference/capture-vision-router", - "version": "2.0.20" - }, - { - "path": "/programming/javascript/api-reference/core", - "version": "3.0.20" - }, - { - "path": "/programming/javascript/api-reference/image-processing", - "version": "2.0.20" - } - ], - "dcvRepoCore": [ - { - "path": "/enums/capture-vision-router", - "version": "2.0.20" - }, - { - "path": "/enums/core", - "version": "3.0.20" - }, - { - "path": "/parameters/reference/capture-vision-template", - "version": "2.0.20" - }, - { - "path": "/parameters/reference/target-roi-def", - "version": "2.0.20" - }, - { - "path": "/parameters/reference/barcode-reader-task-settings", - "version": "10.0.20" - }, - { - "path": "/parameters/reference/image-parameter", - "version": "2.0.20" - }, - { - "path": "/parameters/reference/barcode-format-specification", - "version": "3.0.20" - }, - { - "path": "/parameters/reference/image-source-options", - "version": "3.0.20" - }, - { - "path": "/parameters/reference/global-parameter", - "version": "2.0.20" - } - ], - "dce": "4.0.1" - } - } - }, - { - "version": "9.6.42", - "matchList": { - "javascript": { - "dce": "3.3.10" - } - } - }, - { - "version": "9.6.40", - "matchList": { - "javascript": { - "dce": "3.3.10" - } - } - }, - { - "version": "9.6.33", - "matchList": { - "javascript": { - "dce": "3.3.10" - } - } - }, - { - "version": "9.6.32", - "matchList": { - "javascript": { - "dce": "3.3.9" - } - } - }, - { - "version": "9.6.31", - "matchList": { - "javascript": { - "dce": "3.3.8" - } - } - } -] \ No newline at end of file diff --git a/programming-old/javascript/api-reference/BarcodeReader-v8.2.5.md b/programming-old/javascript/api-reference/BarcodeReader-v8.2.5.md deleted file mode 100644 index 2ddad1d5..00000000 --- a/programming-old/javascript/api-reference/BarcodeReader-v8.2.5.md +++ /dev/null @@ -1,496 +0,0 @@ ---- -layout: default-layout -title: v8.2.5 BarcodeReader - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows the BarcodeReader Class of Dynamsoft Barcode Reader JavaScript SDK 8.2.5. -keywords: BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -noTitleIndex: true -breadcrumbText: BarcodeReader -permalink: /programming/javascript/api-reference/BarcodeReader-v8.2.5.html ---- - - -# BarcodeReader - -* `class BarcodeReader` - - The `BarcodeReader` class is used for decoding barcodes from images. - - ```js - let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); - let results = await reader.decode(imageSource); - for(let result of results){ - console.log(result.barcodeText); - } - ``` - -## Index - -[**Initialize the Engine**](#initialize-the-engine) - -| Static Property | Description | -|----------------------|-------------| -| [engineResourcePath](#engineresourcepath) | Specifies the WASM engine URL. | -| [_bUseFullFeature](#_busefullfeature) | If set to `true`, uses the full WASM engine. | - -| Static Method | Description | -|----------------------|-------------| -| [isLoaded](#isloaded) | Checks if the decoding module is loaded. | -| [loadWasm](#loadwasm) | Manually loads and compiles the decoding WASM module. | - -
    - -[**Create and Destroy Instance**](#create-and-destroy-instance) - -| Property | Description | -|----------------------|-------------| -| [bDestroyed](#bdestroyed) | Indicates whether the instance has been destroyed. | - -| Static Method | Description | -|----------------------|-------------| -| [createInstance](#createinstance) | Creates a `BarcodeReader` instance. | - -| Method | Description | -|----------------------|-------------| -| [destroy](#destroy) | Destroies the `BarcodeReader` instance. | - -
    - -[**Decode Barcodes**](#decode-barcode) - -| Method | Description | -|----------------------|-------------| -| [decode](#decode) | Decodes barcodes from images, binary data, URLs, and more. | -| [decodeBase64String](#decodebase64string) | Decodes barcodes from a base64 encoded string. | -| [decodeUrl](#decodeurl) | Decodes barcodes from a URL. | -| [decodeBuffer](#decodebuffer) | Decodes barcodes from raw image data. | - -
    - -[**Decoding Settings**](#decoding-settings) - -| Method | Description | -|----------------------|-------------| -| [getRuntimeSettings](#getruntimesettings) | Gets current runtime settings. | -| [updateRuntimeSettings](#updateruntimesettings) | Modifies and updates the current runtime settings. | -| [resetRuntimeSettings](#resetruntimesettings) | Resets runtime settings to default. | -| [getModeArgument](#getmodeargument) | Gets argument value for the specified mode parameter. | -| [setModeArgument](#setmodeargument) | Sets argument value for the specified mode parameter. | - -
    - -[**License**](#license) - -| Property | Description | -|---------------------|-------------| -| [productKeys](#productkeys) | Gets or sets the Dynamsoft Barcode Reader SDK product keys. | -| [licenseServer](#licenseserver) | Specifies the license server URL. | -| [handshakeCode](#handshakecode) | Uses Handshake Code to get authentication. | -| [organizationID](#organizationid) | Uses Organization ID to get authentication. | -| [sessionPassword](#sessionpassword) | Specifies a password to protect the Handshake Code from abuse. | - -
    - -[**Others**](#other) - -| Static Property | Description | -|---------------------|-------------| -| [version](#version) | Gets the current product version. | - -| Property | Description | -|---------------------|-------------| -| [bSaveOriCanvas](#bsaveoricanvas) | If set to `true`, saves the original image in `oriCanvas` . | -| [oriCanvas](#oricanvas) | An [canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas) object that holds the original image. | - -| Static Method | Description | -|----------------------|-------------| -| [detectEnvironment](#detectenvironment) | Detects environments and gets a report. | - -## Initialize the Engine - -### engineResourcePath - -* `static` engineResourcePath: *string* - - Manually specifies the URL of Barcode Reader SDK engine (WASM) . The property needs to be set before [loadWasm](#loadwasm). - - ```js - Dynamsoft.DBR.BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.2.5/dist/"; - await Dynamsoft.DBR.BarcodeReader.loadWasm(); - ``` - -
    - -### _bUseFullFeature - -* `static` _bUseFullFeature: *boolean* = false - - Whether to use full WASM engine. The property needs to be set before [loadWasm](#loadwasm). The default is 'false'. - - ```js - DBR.BarcodeReader._bUseFullFeature = true; - await DBR.BarcodeReader.loadWasm(); - ``` - Learn more about [differences between compact and full WASM engines](../user-guide/?ver=8.2.5#specify-which-engine-to-use). - -
    - -### isLoaded - -* `static` isLoaded(): *boolean* - - Checks if the decoding module is loaded. - -
    - -### loadWasm - -* `static` loadWasm(): *Promise<void>* - - Before most operations, `loadWasm` needs to be excuted firstly. - - Most time, you do not need excute `loadWasm` manually. Because when you excute [createInstance](#createinstance), `loadWasm` will be excuted implicitly. - - Some properties can't be changed after `loadWasm`. - - Calling `loadWasm` in advance can avoid the long wait when `createInstance`. - - ```js - window.addEventListener('DOMContentLoaded', (event) => { - DBR.BarcodeReader.loadWasm(); - }); - ``` - -
    - -## Create and Destroy Instance - -### bDestroyed - -* bDestroyed: *boolean* - - Indicates whether the instance has been destroyed. - -
    - -### createInstance - -* `static` createInstance(): *Promise<[BarcodeReader](#barcodereader)>* - - Create a `BarcodeReader` instance. - - ```js - let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); - ``` - -
    - -### destroy - -* destroy(): *Promise<void>* - - Destroies the `BarcodeReader` instance. If your page needs to create new instances from time to time, don't forget to destroy unused old instances to avoid possible memory leaks. - -
    - -## Decode Barcode - -### decode - -* decode (source: *[Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob) | [Buffer](https://nodejs.org/api/buffer.html#buffer_class_buffer) | [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) | [Uint8Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) | [Uint8ClampedArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray)*
    - - *| [HTMLImageElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement) | [HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) | [HTMLVideoElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement)*
    - - *| string*): *Promise<[TextResult](./interface/TextResult.md)[]>* - - Decodes barcodes from an image. - - The main decoding method can accept a variety of data types, including binary data, images, base64 (with MIME), URL, etc. - - The image format can be `png`, `jpeg`, `bmp`, `gif` and a few others (some browsers support `webp`, `tif`). - - ```js - let results = await reader.decode(blob); - for(let result of results){ - console.log(result.barcodeText); - } - - let results2 = await reader.decode(htmlImageElement); - let results2 = await reader.decode(url); - - // like `data:image/png;base64,iV************` - let results3 = await reader.decode(strBase64WithMime); - ``` - - And you can get a frame from the `HTMLVideoElement` for barcode scanning. - - ```js - // The frame currently played will be decoded. - let results; - try{ - results = await reader.decode(htmlVideoElement); - }catch(ex){ - // If no frame in the video, throws an exception. - } - ``` - If you need to continuously decode a video, you can use [BarcodeScanner](./BarcodeScanner.md) instead. - - *@see* [decodeBase64String](#decodebase64string), [decodeUrl](#decodeurl) - -
    - -### decodeBase64String - -* decodeBase64String(base64: *string*): *Promise<[TextResult](./interface/TextResult.md)[]>* - - The decoding method can accept base64 with or without MIME. - e.g. `data:image/jpg;base64,Xfjshekk....` or `Xfjshekk...`. - - ```js - let results = await reader.decodeBase64String(strBase64); - for(let result of results){ - console.log(result.barcodeText); - } - ``` - -
    - -### decodeUrl - -* decodeUrl(url: *string*): *Promise<[TextResult](./interface/TextResult.md)[]>* - - The decoding method can accept an URL. The URL source needs to be in the same domain or allowed Cross-Origin Resource Sharing (CORS). - - ```js - let results = await reader.decodeUrl("./1.png"); - for(let result of results){ - console.log(result.barcodeText); - } - ``` - -
    - -### decodeBuffer - -* decodeBuffer(
    -     buffer: *[Uint8Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) | [Uint8ClampedArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray) | [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) | [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob) | [Buffer](https://nodejs.org/api/buffer.html#buffer_class_buffer)*,
    -     width: *number*, height: *number*, stride: *number*,
    -     format: *[EnumImagePixelFormat](./enum/EnumImagePixelFormat.md)*
    - ): *Promise<[TextResult](./interface/TextResult.md)[]>* - - Decodes barcodes from raw image data. - -
    - -## Decoding Settings - -### getRuntimeSettings - -* getRuntimeSettings(): *Promise<[RuntimeSettings](./interface/RuntimeSettings.md)>* - - Gets current runtime settings. - - ```js - let settings = await reader.getRuntimeSettings(); - settings.deblurLevel = 5; - await reader.updateRuntimeSettings(settings); - ``` - -
    - -### updateRuntimeSettings - -* updateRuntimeSettings(settings: *[RuntimeSettings](./interface/RuntimeSettings.md) | string*): *Promise<void>* - - Updates runtime settings with a given struct or a string of `speed`, `balance` or `coverage` to use preset settings for `BarcodeReader`. - - The default runtime setting for BarcodeReader is `coverage`. - - ```js - await reader.updateRuntimeSettings('balance'); - let settings = await reader.getRuntimeSettings(); - settings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_ONED; - await reader.updateRuntimeSettings(settings); - ``` - -
    - -### resetRuntimeSettings - -* resetRuntimeSettings(): *Promise<void>* - - Resets all parameters to default values. - - ```js - await reader.resetRuntimeSettings(); - ``` - -
    - -### getModeArgument - -* getModeArgument(modeName: *string*, index: *number*, argumentName: *string*): *Promise<string>* - - Gets argument value for the specified mode parameter. - - ```js - let argumentValue = await reader.getModeArgument("BinarizationModes", 0, "EnableFillBinaryVacancy"); - ``` - - *@see* [C++ getModeArgument](https://www.dynamsoft.com/barcode-reader/programming/cplusplus/api-reference/cbarcodereader-methods/parameter-and-runtime-settings-basic.html?ver=8.2.5#getmodeargument) - -
    - -### setModeArgument - -* setModeArgument(modeName: *string*, index: *number*, argumentName: *string*, argumentValue: *string*): *Promise<string>* - - Sets argument value for the specified mode parameter. - - ```js - await reader.setModeArgument("BinarizationModes", 0, "EnableFillBinaryVacancy", "1"); - ``` - - *@see* [C++ setModeArgument](https://www.dynamsoft.com/barcode-reader/programming/cplusplus/api-reference/cbarcodereader-methods/parameter-and-runtime-settings-basic.html?ver=8.2.5#setmodeargument) - -
    - -## License - -### productKeys - -* `static` productKeys: *string* - - Gets or sets the Dynamsoft Barcode Reader SDK product keys. - - ```js - Dynamsoft.DBR.BarcodeReader.productKeys = "PRODUCT-KEYS"; - ``` - For convenience, you can set `productKeys` in `script` tag instead. - - ```html - - ``` - -
    - -### licenseServer - -* `static` licenseServer: *string[] | string* - - Specifies the license server URL. - -
    - -### handshakeCode - -* `static` handshakeCode: *string* - - Gets or sets the Dynamsoft Barcode Reader SDK handshake code. The `handshakeCode` is an alias of `productKeys`. Specifically refers to the key that requires network authentication. - - ```js - Dynamsoft.DBR.BarcodeReader.handshakeCode = "123****-mytest"; - ``` - For convenience, you can set `handshakeCode` in `script` tag instead. - - ```html - - ``` - -
    - -### organizationID - -* `static` organizationID: *string* - - Use organization ID to get authentication from network. Keep handshakeCode empty if you want to use default [handshake](#handshakecode) of the organization. - - ```js - Dynamsoft.DBR.BarcodeReader.organizationID = "123****"; - ``` - For convenience, you can set `organizationID` in `script` tag instead. - - ```html - - ``` - -
    - -### sessionPassword - -* `static` sessionPassword: *string* - - Specifies a password to protect the [Handshake Code](#handshakeCode). - - ```js - Dynamsoft.DBR.BarcodeReader.handshakeCode = "123****-mytest"; - Dynamsoft.DBR.BarcodeReader.sessionPassword = "@#$%****"; - ``` - For convenience, you can set `organizationID` in `script` tag instead. - - ```html - - ``` - -
    - -## Other - -### bSaveOriCanvas - -* bSaveOriCanvas: *boolean* = false; - - Whether to save the original image into canvas. - - ```js - reader.bSaveOriCanvas = true; - let results = await reader.decode(source); - document.body.append(reader.oriCanvas); - ``` - -
    - -### oriCanvas - -* `readonly` oriCanvas: *[HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) | [OffscreenCanvas](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas)* - - A [canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas) object that holds the original image. - - ```js - reader.bSaveOriCanvas = true; - let results = await reader.decode(source); - document.body.append(reader.oriCanvas); - ``` - -
    - -### version - -* `readonly` `static` version: *string* - - Gets the current product version. - Needs to call after [loadWasm](#loadwasm). - - ```js - console.log(Dynamsoft.DBR.BarcodeReader.version); // "loading...(JS 8.2.5.20210426)" - await Dynamsoft.DBR.BarcodeReader.loadWasm(); - console.log(Dynamsoft.DBR.BarcodeReader.version); // "8.4.0.8960(JS 8.2.5.20210426)" - ``` - -
    - -### detectEnvironment - -* `static` detectEnvironment(): *Promise<any>* - - Detects environments and gets a report. - - ```js - console.log(Dynamsoft.DBR.BarcodeReader.detectEnvironment()); - // {"wasm":true, "worker":true, "getUserMedia":true, "camera":true, "browser":"Chrome", "version":90, "OS":"Windows"} - ``` - -
    - - diff --git a/programming-old/javascript/api-reference/BarcodeReader-v8.4.0.md b/programming-old/javascript/api-reference/BarcodeReader-v8.4.0.md deleted file mode 100644 index 46788268..00000000 --- a/programming-old/javascript/api-reference/BarcodeReader-v8.4.0.md +++ /dev/null @@ -1,463 +0,0 @@ ---- -layout: default-layout -title: v8.4.0 BarcodeReader - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows the BarcodeReader Class of Dynamsoft Barcode Reader JavaScript SDK v 8.4.0. -keywords: BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -noTitleIndex: true -breadcrumbText: BarcodeReader -permalink: /programming/javascript/api-reference/BarcodeReader-v8.4.0.html ---- - -# BarcodeReader for Images - -A low-level barcode reader that processes still images and return barcode results. The following code snippet shows its basic usage. - -```js -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -let results = await reader.decode(imageSource); -for(let result of results){ - console.log(result.barcodeText); -} -``` - - - -## API Index - -### Create and Destroy Instances - -| API Name | Description | -|---|---| -| [createInstance](#createinstance) | Creates a `BarcodeReader` instance. | -| [destroy](#destroy) | Destroies the BarcodeReader instance. | -| [bDestroyed](#bdestroyed) | Indicates whether the instance has been destroyed. | - -### Decode Barcodes - -| API Name | Description | -|---|---| -| [decode](#decode) | Decodes barcodes from an image. | -| [decodeBase64String](#decodebase64string) | Decodes barcodes from a base64-encoded image (with or without MIME). | -| [decodeUrl](#decodeurl) | Decodes barcodes from an image specified by its URL. | -| [decodeBuffer](#decodebuffer) | Decodes barcodes from raw image data. | - -### Change Settings - -| API Name | Description | -|---|---| -| [getRuntimeSettings](#getruntimesettings) | Returns the current runtime settings. | -| [updateRuntimeSettings](#updateruntimesettings) | Updates runtime settings with a given struct or a preset template. | -| [resetRuntimeSettings](#resetruntimesettings) | Resets all parameters to default values. | -| [getModeArgument](#getmodeargument) | Returns the argument value for the specified mode parameter. | -| [setModeArgument](#setmodeargument) | Sets the argument value for the specified mode parameter. | - -### Auxiliary - -| API Name | Description | -|---|---| -| [bSaveOriCanvas](#bsaveoricanvas) | Whether to save the original image into a <canvas> element. | -| [oriCanvas](#oricanvas) | An `HTMLCanvasElement` that holds the original image. | - - - -## createInstance - -Creates a `BarcodeReader` instance. - -```typescript -static createInstance(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise resolving to the created `BarcodeReader` object. - -**Code snippet** - -```js -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -``` - - - -## destroy - -Destroies the `BarcodeReader` instance. If your page needs to create new instances from time to time, don't forget to destroy unused old instances. - -```typescript -destroy(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code snippet** - -```js -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -// ... decode ... -reader.destroy(); -``` - - - -## bDestroyed - -Indicates whether the instance has been destroyed. - -```typescript -readonly bDestroyed: boolean -``` - - - -## decode - -Decodes barcodes from an image. - -```typescript -decode(source: Blob | Buffer | ArrayBuffer | Uint8Array | Uint8ClampedArray | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | string): Promise -``` - -**Parameters** - -`source`: specifies the image to decode. The supported image formats include `png`, `jpeg`, `bmp`, `gif` and a few others (some browsers support `webp`, `tif`). Also note that the image can be specified in a lot of ways including binary data, base64 string (with MIME), URL, etc. - -**Return value** - -A promise resolving to a `TextResult` object that contains all the barcode results found in this image. - -**Code snippet** - -```js -let results1 = await reader.decode(blob); -let results2 = await reader.decode(htmlImageElement); -let results3 = await reader.decode(url); -let results4 = await reader.decode(strBase64WithMime); // like `data:image/png;base64,iV************` -``` - -You can even use an `HTMLVideoElement` as the source. If the video is playing, the current frame will be decoded. - -```js -let results; -try{ - // The current frame will be decoded. - results = await reader.decode(htmlVideoElement); -}catch(ex){ - // If no frame in the video, throws an exception. -} -``` - -**See also** - -* [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob) -* [Buffer](https://nodejs.org/api/buffer.html#buffer_class_buffer) -* [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) -* [Uint8Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) -* [Uint8ClampedArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray) -* [HTMLImageElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement) -* [HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) -* [HTMLVideoElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement) -* [TextResult](./interface/TextResult.md) - - - -## decodeBase64String - -Decodes barcodes from a base64-encoded image (with or without MIME). - -```typescript -decodeBase64String(base64Str: string): Promise -``` - -**Parameters** - -`base64Str`: specifies the image represented by a string. - -**Return value** - -A promise resolving to a `TextResult` object that contains all the barcode results found in this image. - -**Code snippet** - -```js -let results = await reader.decodeBase64String(strBase64); //e.g. `data:image/jpg;base64,Xfjshekk....` or `Xfjshekk...`. -for(let result of results){ - console.log(result.barcodeText); -} -``` - -**See also** - -* [TextResult](./interface/TextResult.md) - - - -## decodeUrl - -Decodes barcodes from an image specified by its URL. Note that the image should either be from the same domain or has the 'Access-Control-Allow-Origin' header set to allow access from your current domain. - -```typescript -decodeUrl(url: string): Promise -``` - -**Parameters** - -`url`: specifies the image with its URL. - -**Return value** - -A promise resolving to a `TextResult` object that contains all the barcode results found in this image. - -**Code snippet** - -```js -let results = await reader.decodeUrl("https://www.yourdomain.com/imageWithBarcodes.png"); -for(let result of results){ - console.log(result.barcodeText); -} -``` - -**See also** - -* [TextResult](./interface/TextResult.md) - - - -## decodeBuffer - -Decodes barcodes from raw image data. - -```typescript -decodeBuffer(buffer: Blob | Buffer | ArrayBuffer | Uint8Array | Uint8ClampedArray, width: number, height: number, stride: number, format: EnumImagePixelFormat): Promise -``` - -**Parameters** - -`buffer`: specifies the image represented by a `Uint8Array`, `Uint8ClampedArray`, `ArrayBuffer`, `Blob` or `Buffer` object. - -**Return value** - -A promise resolving to a `TextResult` object that contains all the barcode results found in this image. - -**See also** - -* [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob) -* [Buffer](https://nodejs.org/api/buffer.html#buffer_class_buffer) -* [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) -* [Uint8Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) -* [Uint8ClampedArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray) -* [EnumImagePixelFormat](./enum/EnumImagePixelFormat.md) -* [TextResult](./interface/TextResult.md) - - - -## getRuntimeSettings - -Returns the current runtime settings. - -```typescript -getRuntimeSettings(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise resolving to a `RuntimeSettings` object that contains the settings for barcode reading. - -**Code snippet** - -```js -let settings = await reader.getRuntimeSettings(); -settings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE; // Decodes only QR code. -await reader.updateRuntimeSettings(settings); -``` - -**See also** - -* [RuntimeSettings](./interface/RuntimeSettings.md) - - - -## updateRuntimeSettings - -Updates runtime settings with a given struct or a preset template represented by one of the following strings -- `speed`: fast but may miss a few codes; -- `coverage`: slow but try to find all codes, this is the default setting for a `BarcodeReader` instance; -- `balance`: between `speed` and `coverage`; -- `single`: optimized for scanning one single barcode from a video input, this is supported only by the sub-class [BarcodeScanner](./BarcodeScanner.md) and is also the default setting for a `BarcodeScanner` instance. - -```typescript -updateRuntimeSettings(settings: RuntimeSettings | string): Promise -``` - -**Parameters** - -`settings`: a `RuntimeSettings` object that contains the new settings for barcode reading. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code snippet** - -```js -await reader.updateRuntimeSettings('balance'); -let settings = await reader.getRuntimeSettings(); -settings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_ONED; -await reader.updateRuntimeSettings(settings); -``` - -**See also** - -* [RuntimeSettings](./interface/RuntimeSettings.md) - - - -## resetRuntimeSettings - -Resets all parameters to default values. - -For a `BarcodeReader` instance, it is equivalent to setting the `coverage` template. - -For a [BarcodeScanner](./BarcodeScanner.md) instance, it is equivalent to setting the `speed` template. - -```typescript -resetRuntimeSettings(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code snippet** - -```js -await reader.resetRuntimeSettings(); -``` - - - -## getModeArgument - -Returns the argument value for the specified mode parameter. - -```typescript -getModeArgument(modeName: string, index: number, argumentName: string): Promise -``` - -**Parameters** - -`modeName`: specifies the mode which contains one or multiple elements. -`index`: specifies an element of the mode by its index. -`argumentName`: specifies the argument. - -**Return value** - -A promise resolving to a string which represents the value of the argument. - -**Code snippet** - -```js -let argumentValue = await reader.getModeArgument("BinarizationModes", 0, "EnableFillBinaryVacancy"); -``` - -**See also** - -* [C++ getModeArgument](https://www.dynamsoft.com/barcode-reader/programming/cplusplus/api-reference/cbarcodereader-methods/parameter-and-runtime-settings-basic.html?ver=8.4.0#getmodeargument) - - - -## setModeArgument - -Sets the argument value for the specified mode parameter. - -```typescript -setModeArgument(modeName: string, index: number, argumentName: string, argumentValue: string): Promise -``` - -**Parameters** - -`modeName`: specifies the mode which contains one or multiple elements. -`index`: specifies an element of the mode by its index. -`argumentName`: specifies the argument. -`argumentValue`: specifies the value. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code snippet** - -```js -await reader.setModeArgument("BinarizationModes", 0, "EnableFillBinaryVacancy", "1"); -``` - -**See also** - -* [C++ setModeArgument](https://www.dynamsoft.com/barcode-reader/programming/cplusplus/api-reference/cbarcodereader-methods/parameter-and-runtime-settings-basic.html?ver=8.4.0#setmodeargument) - - - -## bSaveOriCanvas - -Whether to save the original image into a <canvas> element. The original image refers to the actual image the library tried to read barcodes from. - -Note that the result is an `HTMLCanvasElement` element and you can insert it into the DOM to show the image. - -```typescript -bSaveOriCanvas: boolean; -``` - -**Default value** - -`false` - -**Code snippet** - -```js -reader.bSaveOriCanvas = true; -let results = await reader.decode(source); -document.body.append(reader.oriCanvas); -``` - - - -## oriCanvas - -An [HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/Canvas) that holds the original image. The original image refers to the actual image the library tried to read barcodes from. - -```typescript -readonly oriCanvas: HTMLCanvasElement | OffscreenCanvas -``` - -**Code snippet** - -```js -reader.bSaveOriCanvas = true; -let results = await reader.decode(source); -document.body.append(reader.oriCanvas); -``` - -**See also** - -* [HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) -* [OffscreenCanvas](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas) diff --git a/programming-old/javascript/api-reference/BarcodeReader-v8.8.7.md b/programming-old/javascript/api-reference/BarcodeReader-v8.8.7.md deleted file mode 100644 index 42432056..00000000 --- a/programming-old/javascript/api-reference/BarcodeReader-v8.8.7.md +++ /dev/null @@ -1,468 +0,0 @@ ---- -layout: default-layout -title: v8.8.7 BarcodeReader - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows the BarcodeReader Class of Dynamsoft Barcode Reader JavaScript SDK v 8.8.7. -keywords: BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -noTitleIndex: true -breadcrumbText: BarcodeReader -permalink: /programming/javascript/api-reference/BarcodeReader-v8.8.7.html ---- - -# BarcodeReader for Images - -A low-level barcode reader that processes still images and return barcode results. The following code snippet shows its basic usage. - -```js -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -let results = await reader.decode(imageSource); -for(let result of results){ - console.log(result.barcodeText); -} -``` - - - -## API Index - -### Create and Destroy Instances - -| API Name | Description | -|---|---| -| [createInstance()](#createinstance) | Creates a `BarcodeReader` instance. | -| [destroyContext()](#destroycontext) | Destroies the BarcodeReader instance. | -| [isContextDestroyed()](#iscontextdestroyed) | Indicates whether the instance has been destroyed. | - -### Decode Barcodes - -| API Name | Description | -|---|---| -| [decode()](#decode) | Decodes barcodes from an image. | -| [decodeBase64String()](#decodebase64string) | Decodes barcodes from a base64-encoded image (with or without MIME). | -| [decodeUrl()](#decodeurl) | Decodes barcodes from an image specified by its URL. | -| [decodeBuffer()](#decodebuffer) | Decodes barcodes from raw image data. | - -### Change Settings - -| API Name | Description | -|---|---| -| [getRuntimeSettings()](#getruntimesettings) | Returns the current runtime settings. | -| [updateRuntimeSettings()](#updateruntimesettings) | Updates runtime settings with a given struct or a preset template. | -| [resetRuntimeSettings()](#resetruntimesettings) | Resets all parameters to default values. | -| [getModeArgument()](#getmodeargument) | Returns the argument value for the specified mode parameter. | -| [setModeArgument()](#setmodeargument) | Sets the argument value for the specified mode parameter. | - -### Auxiliary - -| API Name | Description | -|---|---| -| [ifSaveOriginalImageInACanvas](#ifsaveoriginalimageinacanvas) | Whether to save the original image into a <canvas> element. | -| [getOriginalImageInACanvas()](#getoriginalimageinacanvas) | Returns an `HTMLCanvasElement` that holds the original image. | - -## createInstance - -Creates a `BarcodeReader` instance. - -```typescript -static createInstance(): Promise -``` - -**Return value** - -A promise resolving to the created `BarcodeReader` object. - -**Code snippet** - -```js -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -``` - - - -## destroyContext - -Destroies the `BarcodeReader` instance. If your page needs to create new instances from time to time, don't forget to destroy unused old instances. - -```typescript -destroyContext(): void -``` - -**Code snippet** - -```js -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -// ... decode ... -reader.destroyContext(); -``` - - - -## isContextDestroyed - -Returns whether the instance has been destroyed. - -```typescript -isContextDestroyed(): boolean -``` - -## decode - -Decodes barcodes from an image. - -```typescript -decode(source: Blob | Buffer | ArrayBuffer | Uint8Array | Uint8ClampedArray | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | string): Promise -``` - -**Parameters** - -`source`: specifies the image to decode. The supported image formats include `png`, `jpeg`, `bmp`, `gif` and a few others (some browsers support `webp`, `tif`). Also note that the image can be specified in a lot of ways including binary data, base64 string (with MIME), URL, etc. - -> To speed up the reading, the image will be scaled down when it exceeds a size limit either horizontally or vertically. The limit is 2048 pixels on mobile devices and 4096 on other devices. -> -> If the content in the binary data is raw img data, such as `RGBA`, please refer to [decodeBuffer()](#decodebuffer). - - -**Return value** - -A promise resolving to a `TextResult\[\]` object that contains all the barcode results found in this image. - -**Code snippet** - -```js -let results1 = await reader.decode(blob); -let results2 = await reader.decode(htmlImageElement); -let results3 = await reader.decode(url); -let results4 = await reader.decode(strBase64WithMime); // like `data:image/png;base64,iV************` -``` - -You can even use an `HTMLVideoElement` as the source. If the video is playing, the current frame will be decoded. - -```js -let results; -try{ - // The current frame will be decoded. - results = await reader.decode(htmlVideoElement); -}catch(ex){ - // If there is no frame in the video, throw an exception. -} -``` - -**See also** - -* [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob) -* [Buffer](https://nodejs.org/api/buffer.html#buffer_class_buffer) -* [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) -* [Uint8Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) -* [Uint8ClampedArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray) -* [HTMLImageElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement) -* [HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) -* [HTMLVideoElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement) -* [TextResult](./interface/TextResult.md) - - - -## decodeBase64String - -Decodes barcodes from a base64-encoded image (with or without MIME). - -```typescript -decodeBase64String(base64Str: string): Promise -``` - -**Parameters** - -`base64Str`: specifies the image represented by a string. - -**Return value** - -A promise resolving to a `TextResult\[\]` object that contains all the barcode results found in this image. - -**Code snippet** - -```js -let results = await reader.decodeBase64String(strBase64); //e.g. `data:image/jpg;base64,Xfjshekk....` or `Xfjshekk...`. -for(let result of results){ - console.log(result.barcodeText); -} -``` - -**See also** - -* [TextResult](./interface/TextResult.md) - - - -## decodeUrl - -Decodes barcodes from an image specified by its URL. Note that the image should either be from the same domain or has the 'Access-Control-Allow-Origin' header set to allow access from your current domain. - -```typescript -decodeUrl(url: string): Promise -``` - -**Parameters** - -`url`: specifies the image by its URL. - -**Return value** - -A promise resolving to a `TextResult\[\]` object that contains all the barcode results found in this image. - -**Code snippet** - -```js -let results = await reader.decodeUrl("https://www.yourdomain.com/imageWithBarcodes.png"); -for(let result of results){ - console.log(result.barcodeText); -} -``` - -**See also** - -* [TextResult](./interface/TextResult.md) - - - -## decodeBuffer - -Decodes barcodes from raw image data. It is an advanced API, if you don't know what you are doing, use [decode](#decode) instead. - -```typescript -decodeBuffer(buffer: Blob | Buffer | ArrayBuffer | Uint8Array | Uint8ClampedArray, width: number, height: number, stride: number, format: EnumImagePixelFormat): Promise -``` - -**Parameters** - -`buffer`: specifies the raw image represented by a `Uint8Array`, `Uint8ClampedArray`, `ArrayBuffer`, `Blob` or `Buffer` object. - -`width`: image width. - -`height`: image height. - -`stride`: `image-width * pixel-byte-length`. - -`format`: pixel format. - -**Return value** - -A promise resolving to a `TextResult\[\]` object that contains all the barcode results found in this image. - -**Code snippet** - -```js -let results = await reader.decodeBuffer(u8RawImage, 1280, 720, 1280 * 4, Dynamsoft.DBR.EnumImagePixelFormat.IPF_ABGR_8888); -for(let result of results){ - console.log(result.barcodeText); -} -``` - -**See also** - -* [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob) -* [Buffer](https://nodejs.org/api/buffer.html#buffer_class_buffer) -* [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) -* [Uint8Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) -* [Uint8ClampedArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray) -* [EnumImagePixelFormat](./enum/EnumImagePixelFormat.md) -* [TextResult](./interface/TextResult.md) - - - -## getRuntimeSettings - -Returns the current runtime settings. - -```typescript -getRuntimeSettings(): Promise -``` - -**Return value** - -A promise resolving to a `RuntimeSettings` object that contains the settings for barcode reading. - -**Code snippet** - -```js -let settings = await reader.getRuntimeSettings(); -settings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE; // Decodes only QR code. -await reader.updateRuntimeSettings(settings); -``` - -**See also** - -* [RuntimeSettings](./interface/RuntimeSettings.md) - - - -## updateRuntimeSettings - -Updates runtime settings with a given struct or a preset template represented by one of the following strings -- `speed`: fast but may miss a few codes; -- `coverage`: slow but try to find all codes, this is the default setting for a `BarcodeReader` instance; -- `balance`: between `speed` and `coverage`; -- `single`: optimized for scanning one single barcode from a video input, this is supported only by the sub-class [BarcodeScanner](./BarcodeScanner.md) and is also the default setting for a `BarcodeScanner` instance. - - -> NOTE -> -> If the settings `barcodeFormatIds`, `barcodeFormatIds_2` and `region` have been changed by the customer, changing the template will preserve the previous settings. - -```typescript -updateRuntimeSettings(settings: RuntimeSettings | string): Promise -``` - -**Parameters** - -`settings`: a `RuntimeSettings` object that contains the new settings for barcode reading. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code snippet** - -```js -await reader.updateRuntimeSettings('balance'); -let settings = await reader.getRuntimeSettings(); -settings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_ONED; -await reader.updateRuntimeSettings(settings); -``` - -**See also** - -* [RuntimeSettings](./interface/RuntimeSettings.md) - - - -## resetRuntimeSettings - -Resets all parameters to default values. - -For a `BarcodeReader` instance, it is equivalent to setting the `coverage` template. - -For a [BarcodeScanner](./BarcodeScanner.md) instance, it is equivalent to setting the `speed` template. - -```typescript -resetRuntimeSettings(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code snippet** - -```js -await reader.resetRuntimeSettings(); -``` - - - -## getModeArgument - -Returns the argument value for the specified mode parameter. - -```typescript -getModeArgument(modeName: string, index: number, argumentName: string): Promise -``` - -**Parameters** - -`modeName`: specifies the mode which contains one or multiple elements. -`index`: specifies an element of the mode by its index. -`argumentName`: specifies the argument. - -**Return value** - -A promise resolving to a string which represents the value of the argument. - -**Code snippet** - -```js -let argumentValue = await reader.getModeArgument("BinarizationModes", 0, "EnableFillBinaryVacancy"); -``` - -**See also** - -* [C++ getModeArgument](https://www.dynamsoft.com/barcode-reader/programming/cplusplus/api-reference/cbarcodereader-methods/parameter-and-runtime-settings-basic.html?ver=latest#getmodeargument) - - - -## setModeArgument - -Sets the argument value for the specified mode parameter. - -```typescript -setModeArgument(modeName: string, index: number, argumentName: string, argumentValue: string): Promise -``` - -**Parameters** - -`modeName`: specifies the mode which contains one or multiple elements. -`index`: specifies an element of the mode by its index. -`argumentName`: specifies the argument. -`argumentValue`: specifies the value. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code snippet** - -```js -await reader.setModeArgument("BinarizationModes", 0, "EnableFillBinaryVacancy", "1"); -``` - -**See also** - -* [C++ setModeArgument](https://www.dynamsoft.com/barcode-reader/programming/cplusplus/api-reference/cbarcodereader-methods/parameter-and-runtime-settings-basic.html?ver=latest#setmodeargument) - - - -## ifSaveOriginalImageInACanvas - -Whether to save the original image into a <canvas> element. The original image refers to the actual image the library tried to read barcodes from. - -Note that the result is an `HTMLCanvasElement` element and you can insert it into the DOM to show the image. - -```typescript -ifSaveOriginalImageInACanvas: boolean; -``` - -**Default value** - -`false` - -**Code snippet** - -```js -reader.ifSaveOriginalImageInACanvas = true; -let results = await reader.decode(source); -document.body.append(reader.getOriginalImageInACanvas()); -``` - -## getOriginalImageInACanvas - -An [HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/Canvas) that holds the original image. The original image refers to the actual image the library tried to read barcodes from. - -```typescript -getOriginalImageInACanvas(): HTMLCanvasElement | OffscreenCanvas -``` - -**Code snippet** - -```js -reader.ifSaveOriginalImageInACanvas = true; -let results = await reader.decode(source); -document.body.append(reader.getOriginalImageInACanvas()); -``` - -**See also** - -* [HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) -* [OffscreenCanvas](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas) diff --git a/programming-old/javascript/api-reference/BarcodeReader-v9.0.2.md b/programming-old/javascript/api-reference/BarcodeReader-v9.0.2.md deleted file mode 100644 index 8695c4aa..00000000 --- a/programming-old/javascript/api-reference/BarcodeReader-v9.0.2.md +++ /dev/null @@ -1,681 +0,0 @@ ---- -layout: default-layout -title: v9.0.2 BarcodeReader - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows the BarcodeReader Class of Dynamsoft Barcode Reader JavaScript SDK v 9.0.2. -keywords: BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -noTitleIndex: true -breadcrumbText: BarcodeReader -permalink: /programming/javascript/api-reference/BarcodeReader-v9.0.2.html ---- - -# BarcodeReader for Images - -A low-level barcode reader that processes still images and return barcode results. The following code snippet shows its basic usage. - -```js -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -let results = await reader.decode(imageSource); -for(let result of results){ - console.log(result.barcodeText); -} -``` - -## API Index - -### Create and Destroy Instances - -| API Name | Description | -|---|---| -| [createInstance()](#createinstance) | Creates a `BarcodeReader` instance. | -| [destroyContext()](#destroycontext) | Destroies the BarcodeReader instance. | -| [isContextDestroyed()](#iscontextdestroyed) | Indicates whether the instance has been destroyed. | - -### Decode Barcodes - -| API Name | Description | -|---|---| -| [decode()](#decode) | Decodes barcodes from an image. | -| [decodeBase64String()](#decodebase64string) | Decodes barcodes from a base64-encoded image (with or without MIME). | -| [decodeUrl()](#decodeurl) | Decodes barcodes from an image specified by its URL. | -| [decodeBuffer()](#decodebuffer) | Decodes barcodes from raw image data. | - -### Decode Barcodes on multiple images from an Image Source - -| API Name | Description | -|---|---| -| [setImageSource](#setimagesource) | Sets an image source for continous scanning. | -| [onUniqueRead](#onuniqueread) | This event is triggered when a new, unduplicated barcode is found. | -| [onImageRead](#onimageread) | This event is triggered after the library finishes scanning an image. | -| [startScanning()](#startscanning) | Starts continuous scanning of incoming images. | -| [stopScanning()](#stopscanning) | Stops continuous scanning. | -| [pauseScanning()](#pausescanning) | Pause continuous scanning but keep the video stream. | -| [resumeScanning()](#resumescanning) | Resumes continuous scanning. | -| [getScanSettings()](#getscansettings) | Returns the current scan settings. | -| [updateScanSettings()](#updatescansettings) | Changes scan settings with the object passed in. | - -### Change Settings - -| API Name | Description | -|---|---| -| [getRuntimeSettings()](#getruntimesettings) | Returns the current runtime settings. | -| [updateRuntimeSettings()](#updateruntimesettings) | Updates runtime settings with a given struct or a preset template. | -| [resetRuntimeSettings()](#resetruntimesettings) | Resets all parameters to default values. | -| [outputRuntimeSettingsToString()](#outputruntimesettingstostring) | Return the current RuntimeSettings in the form of a string. | -| [getModeArgument()](#getmodeargument) | Returns the argument value for the specified mode parameter. | -| [setModeArgument()](#setmodeargument) | Sets the argument value for the specified mode parameter. | - -### Auxiliary - -| API Name | Description | -|---|---| -| [ifSaveOriginalImageInACanvas](#ifsaveoriginalimageinacanvas) | Whether to save the original image into a <canvas> element. | -| [getOriginalImageInACanvas()](#getoriginalimageinacanvas) | Returns an `HTMLCanvasElement` that holds the original image. | - -## createInstance - -Creates a `BarcodeReader` instance. - -```typescript -static createInstance(): Promise -``` - -### Return Value - -A promise resolving to the created `BarcodeReader` object. - -### Code Snippet - -```js -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -``` - -## destroyContext - -Destroies the `BarcodeReader` instance. If your page needs to create new instances from time to time, don't forget to destroy unused old instances. - -```typescript -destroyContext(): void -``` - -### Code Snippet - -```js -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -// ... decode ... -reader.destroyContext(); -``` - -## isContextDestroyed - -Returns whether the instance has been destroyed. - -```typescript -isContextDestroyed(): boolean -``` - -## decode - -Decodes barcodes from an image. - -```typescript -decode(source: Blob | Buffer | ArrayBuffer | Uint8Array | Uint8ClampedArray | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | string): Promise -``` - -### Parameters - -`source`: specifies the image to decode. The supported image formats include `png`, `jpeg`, `bmp`, `gif` and a few others (some browsers support `webp`, `tif`). Also note that the image can be specified in a lot of ways including binary data, base64 string (with MIME), URL, etc. - -> To speed up the reading, the image will be scaled down when it exceeds a size limit either horizontally or vertically. The limit is 2048 pixels on mobile devices and 4096 on other devices. -> -> If the content in the binary data is raw img data, such as `RGBA`, please refer to [decodeBuffer()](#decodebuffer). - -### Return Value - -A promise resolving to a `TextResult\[\]` object that contains all the barcode results found in this image. - -### Code Snippet - -```js -let results1 = await reader.decode(blob); -let results2 = await reader.decode(htmlImageElement); -let results3 = await reader.decode(url); -let results4 = await reader.decode(strBase64WithMime); // like `data:image/png;base64,iV************` -``` - -You can even use an `HTMLVideoElement` as the source. If the video is playing, the current frame will be decoded. - -```js -let results; -try{ - // The current frame will be decoded. - results = await reader.decode(htmlVideoElement); -}catch(ex){ - // If there is no frame in the video, throw an exception. -} -``` - -### See Also - -* [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob) -* [Buffer](https://nodejs.org/api/buffer.html#buffer_class_buffer) -* [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) -* [Uint8Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) -* [Uint8ClampedArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray) -* [HTMLImageElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement) -* [HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) -* [HTMLVideoElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement) -* [TextResult](./interface/TextResult.md) - -## decodeBase64String - -Decodes barcodes from a base64-encoded image (with or without MIME). - -```typescript -decodeBase64String(base64Str: string): Promise -``` - -### Parameters - -`base64Str`: specifies the image represented by a string. - -### Return Value - -A promise resolving to a `TextResult\[\]` object that contains all the barcode results found in this image. - -### Code Snippet - -```js -let results = await reader.decodeBase64String(strBase64); //e.g. `data:image/jpg;base64,Xfjshekk....` or `Xfjshekk...`. -for(let result of results){ - console.log(result.barcodeText); -} -``` - -### See Also - -* [TextResult](./interface/TextResult.md) - -## decodeUrl - -Decodes barcodes from an image specified by its URL. Note that the image should either be from the same domain or has the 'Access-Control-Allow-Origin' header set to allow access from your current domain. - -```typescript -decodeUrl(url: string): Promise -``` - -### Parameters - -`url`: specifies the image by its URL. - -### Return Value - -A promise resolving to a `TextResult\[\]` object that contains all the barcode results found in this image. - -### Code Snippet - -```js -let results = await reader.decodeUrl("https://www.yourdomain.com/imageWithBarcodes.png"); -for(let result of results){ - console.log(result.barcodeText); -} -``` - -### See Also - -* [TextResult](./interface/TextResult.md) - -## decodeBuffer - -Decodes barcodes from raw image data. It is an advanced API, if you don't know what you are doing, use [decode](#decode) instead. - -```typescript -decodeBuffer(buffer: Blob | Buffer | ArrayBuffer | Uint8Array | Uint8ClampedArray, width: number, height: number, stride: number, format: EnumImagePixelFormat): Promise -``` - -### Parameters - -`buffer`: specifies the raw image represented by a `Uint8Array`, `Uint8ClampedArray`, `ArrayBuffer`, `Blob` or `Buffer` object. - -`width`: image width. - -`height`: image height. - -`stride`: `image-width * pixel-byte-length`. - -`format`: pixel format. - -### Return Value - -A promise resolving to a `TextResult\[\]` object that contains all the barcode results found in this image. - -### Code Snippet - -```js -let results = await reader.decodeBuffer(u8RawImage, 1280, 720, 1280 * 4, Dynamsoft.DBR.EnumImagePixelFormat.IPF_ABGR_8888); -for(let result of results){ - console.log(result.barcodeText); -} -``` - -### See Also - -* [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob) -* [Buffer](https://nodejs.org/api/buffer.html#buffer_class_buffer) -* [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) -* [Uint8Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) -* [Uint8ClampedArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray) -* [EnumImagePixelFormat](./enum/EnumImagePixelFormat.md) -* [TextResult](./interface/TextResult.md) - -## getRuntimeSettings - -Returns the current runtime settings. - -```typescript -getRuntimeSettings(): Promise -``` - -### Return Value - -A promise resolving to a `RuntimeSettings` object that contains the settings for barcode reading. - -### Code Snippet - -```js -let settings = await reader.getRuntimeSettings(); -settings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE; // Decodes only QR code. -await reader.updateRuntimeSettings(settings); -``` - -### See Also - -* [RuntimeSettings](./interface/RuntimeSettings.md) - -## updateRuntimeSettings - -Updates runtime settings with a given struct or a preset template represented by one of the following strings - -* `speed`: fast but may miss a few codes; -* `coverage`: slow but try to find all codes, this is the default setting for a `BarcodeReader` instance; -* `balance`: between `speed` and `coverage`; -* `single`: optimized for scanning one single barcode from a video input, this is supported only by the sub-class [BarcodeScanner](./BarcodeScanner.md) and is also the default setting for a `BarcodeScanner` instance. - -> NOTE -> -> If the settings `barcodeFormatIds`, `barcodeFormatIds_2` and `region` have been changed by the customer, changing the template will preserve the previous settings. - -```typescript -updateRuntimeSettings(settings: RuntimeSettings | string): Promise -``` - -### Parameters - -`settings`: a `RuntimeSettings` object that contains the new settings for barcode reading. - -### Return Value - -A promise that resolves when the operation succeeds. - -### Code Snippet - -```js -await reader.updateRuntimeSettings('balance'); -let settings = await reader.getRuntimeSettings(); -settings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_ONED; -await reader.updateRuntimeSettings(settings); -``` - -### See Also - -* [RuntimeSettings](./interface/RuntimeSettings.md) - -## resetRuntimeSettings - -Resets all parameters to default values. - -For a `BarcodeReader` instance, it is equivalent to setting the `coverage` template. - -For a [BarcodeScanner](./BarcodeScanner.md) instance, it is equivalent to setting the `speed` template. - -```typescript -resetRuntimeSettings(): Promise -``` - -### Parameters - -None. - -### Return Value - -A promise that resolves when the operation succeeds. - -### Code Snippet - -```js -await reader.resetRuntimeSettings(); -``` - -## outputRuntimeSettingsToString - -Return the current RuntimeSettings in the form of a string. - -```typescript -outputRuntimeSettingsToString(): Promise -``` - -### Return Value - -A promise resolving to a string which represents the current RuntimeSettings. - -## getModeArgument - -Returns the argument value for the specified mode parameter. - -```typescript -getModeArgument(modeName: string, index: number, argumentName: string): Promise -``` - -### Parameters - -`modeName`: specifies the mode which contains one or multiple elements. -`index`: specifies an element of the mode by its index. -`argumentName`: specifies the argument. - -### Return Value - -A promise resolving to a string which represents the value of the argument. - -### Code Snippet - -```js -let argumentValue = await reader.getModeArgument("BinarizationModes", 0, "EnableFillBinaryVacancy"); -``` - -## setModeArgument - -Sets the argument value for the specified mode parameter. - -```typescript -setModeArgument(modeName: string, index: number, argumentName: string, argumentValue: string): Promise -``` - -### Parameters - -`modeName`: specifies the mode which contains one or multiple elements. -`index`: specifies an element of the mode by its index. -`argumentName`: specifies the argument. -`argumentValue`: specifies the value. - -### Return Value - -A promise that resolves when the operation succeeds. - -### Code Snippet - -```js -await reader.setModeArgument("BinarizationModes", 0, "EnableFillBinaryVacancy", "1"); -``` - -## ifSaveOriginalImageInACanvas - -Whether to save the original image into a <canvas> element. The original image refers to the actual image the library tried to read barcodes from. - -Note that the result is an `HTMLCanvasElement` element and you can insert it into the DOM to show the image. - -```typescript -ifSaveOriginalImageInACanvas: boolean; -``` - -**Default value** - -`false` - -### Code Snippet - -```js -reader.ifSaveOriginalImageInACanvas = true; -let results = await reader.decode(source); -document.body.append(reader.getOriginalImageInACanvas()); -``` - -## getOriginalImageInACanvas - -An [HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/Canvas) that holds the original image. The original image refers to the actual image the library tried to read barcodes from. - -```typescript -getOriginalImageInACanvas(): HTMLCanvasElement -``` - -### Code Snippet - -```js -reader.ifSaveOriginalImageInACanvas = true; -let results = await reader.decode(source); -document.body.append(reader.getOriginalImageInACanvas()); -``` - -### See Also - -* [HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) - -## setImageSource - -Sets an image source for continous scanning. - -```typescript -setImageSource(imageSource: ImageSource): void; -``` - -### Arguments - -`imageSource` : Specifies the image source. - -### Code Snippet - -```javascript -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -let enhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(); -await enhancer.setUIElement(Dynamsoft.DBR.BarcodeReader.defaultUIElementURL); -reader.setImageSource(enhancer); -reader.onUniqueRead = (txt, result) => { - console.log(txt); -} -await reader.startScanning(true); -``` - -## onUniqueRead - -This event is triggered when a new, unduplicated label is found. - -```typescript -onUniqueRead: (txt: string, result: TextResult) => void -``` - -### Arguments - -`txt` : a string that holds the label text (one single line). - -`result` : a `TextResult` object that contains more detailed info about the returned text. - -### Code Snippet - -```javascript -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -let enhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(); -await enhancer.setUIElement(Dynamsoft.DBR.BarcodeReader.defaultUIElementURL); -reader.setImageSource(enhancer); -reader.onUniqueRead = (txt, result) => { - console.log(txt); -} -reader.startScanning(true); -``` - -### See Also - -* [TextResult](./interface/TextResult.md) - -## onImageRead - -This event is triggered after the library finishes scanning a image. - -```typescript -onImageRead: (results: TextResult[]) => void -``` - -### Arguments - -`results` : `TextResult` objects that contain all the label results in this image. - -### Code Snippet - -```js -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -let enhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(); -await enhancer.setUIElement(Dynamsoft.DBR.BarcodeReader.defaultUIElementURL); -reader.setImageSource(enhancer); -reader.onImageRead = results => { - for (let result of results) { - console.log(result.barcodeText); - } -}; -reader.startScanning(true); -``` - -### See Also - -* [TextResult](./interface/TextResult.md) - -## startScanning - -Open the camera and starts continuous scanning of incoming images. - -```typescript -startScanning(appendOrShowUI?: boolean): Promise; -``` - -### Parameters - -`appendOrShowUI` : this parameter specifies how to handle the UI that comes with the bound CameraEnhancer instance. When set to true, if the UI doesn't exist in the DOM tree, the CameraEnhancer instance will append it in the DOM and show it; if the UI already exists in the DOM tree but is hidden, it'll be displayed. When not set or set to false, it means not to change the original state of that UI: if it doesn't exist in the DOM tree, nothing shows up on the page; if it exists in the DOM tree, it may or may not show up depending on its original state. - -### Return Value - -A promise resolving to a `PlayCallbackInfo` object which contains the resolution of the video. - -### Code Snippet - -```js -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -let enhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(); -await enhancer.setUIElement(Dynamsoft.DBR.BarcodeReader.defaultUIElementURL); -reader.setImageSource(enhancer); -reader.onUniqueRead = (txt, result) => { - console.log(txt); -} -reader.startScanning(true); -``` - -### See Also - -* [TextResult](./interface/TextResult.md) - -## pauseScanning - -Pause continuous scanning but keep the video stream. - -```typescript -pauseScanning(): void; -``` - -## resumeScanning - -Resumes continuous scanning. - -```typescript -resumeScanning(): void; -``` - -## stopScanning - -Stops continuous scanning and closes the video stream. - -```typescript -stopScanning(hideUI?: boolean): void; -``` - -### Parameters - -`hideUI` : this parameter specifies how to handle the UI that comes with the bound CameraEnhancer instance. When set to true, if the UI doesn't exist in the DOM tree or it exists but is hidden, nothing is done; if the UI already exists in the DOM tree and is shown, it'll be hidden. When not set or set to false, it means not to change the original state of that UI: if it doesn't exist in the DOM tree, nothing happens; if it exists in the DOM tree, it may or may not be hidden depending on its original state. - -### Code Snippet - -```js -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -let enhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(); -await enhancer.setUIElement(Dynamsoft.DBR.BarcodeReader.defaultUIElementURL); -reader.setImageSource(enhancer); -reader.onUniqueRead = (txt, result) => { - console.log(txt); - reader.stopScanning(true); -} -await reader.startScanning(true); -``` - -### See Also - -* [TextResult](./interface/TextResult.md) - -## getScanSettings - -Returns the current scan settings. - -```typescript -getScanSettings(): Promise -``` - -### Return Value - -A promise resolving to a `ScanSettings` . - -### Code Snippet - -```js -let scanSettings = await reader.getScanSettings(); -scanSettings.intervalTime = 50; -scanSettings.duplicateForgetTime = 1000; -await reader.updateScanSettings(scanSettings); -``` - -### See Also - -* [ScanSettings](./interface/ScanSettings.md) - -## updateScanSettings - -Changes scan settings with the object passed in. - -```typescript -updateScanSettings(settings: ScanSettings): Promise -``` - -**Parameters** - -`settings` : specifies the new scan settings. - -### Return Value - -A promise that resolves when the operation succeeds. - -### Code Snippet - -```js -let scanSettings = await reader.getScanSettings(); -scanSettings.intervalTime = 50; -scanSettings.duplicateForgetTime = 1000; -await reader.updateScanSettings(scanSettings); -``` - -### See Also - -* [ScanSettings](./interface/ScanSettings.md) diff --git a/programming-old/javascript/api-reference/BarcodeReader-v9.2.12.md b/programming-old/javascript/api-reference/BarcodeReader-v9.2.12.md deleted file mode 100644 index b6861a63..00000000 --- a/programming-old/javascript/api-reference/BarcodeReader-v9.2.12.md +++ /dev/null @@ -1,725 +0,0 @@ ---- -layout: default-layout -title: v9.2.12 BarcodeReader - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows the BarcodeReader Class of Dynamsoft Barcode Reader JavaScript SDK v 9.2.12. -keywords: BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -noTitleIndex: true -breadcrumbText: BarcodeReader -permalink: /programming/javascript/api-reference/BarcodeReader-v9.2.12.html ---- - -# BarcodeReader for Images - -A low-level barcode reader that processes still images and return barcode results. The following code snippet shows its basic usage. - -```js -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -let results = await reader.decode(imageSource); -for (let result of results) { - console.log(result.barcodeText); -} -``` - -## API Index - -### Create and Destroy Instances - -| API Name | Description | -|---|---| -| [createInstance()](#createinstance) | Creates a `BarcodeReader` instance. | -| [destroyContext()](#destroycontext) | Destroies the BarcodeReader instance. | -| [isContextDestroyed()](#iscontextdestroyed) | Indicates whether the instance has been destroyed. | - -### Decode Barcodes - -| API Name | Description | -|---|---| -| [decode()](#decode) | Decodes barcodes from an image. | -| [decodeBase64String()](#decodebase64string) | Decodes barcodes from a base64-encoded image (with or without MIME). | -| [decodeUrl()](#decodeurl) | Decodes barcodes from an image specified by its URL. | -| [decodeBuffer()](#decodebuffer) | Decodes barcodes from raw image data. | - -### Decode Barcodes on multiple images from an Image Source - -| API Name | Description | -|---|---| -| [setImageSource](#setimagesource) | Sets an image source for continous scanning. | -| [onUniqueRead](#onuniqueread) | This event is triggered when a new, unduplicated barcode is found. | -| [onImageRead](#onimageread) | This event is triggered after the library finishes scanning an image. | -| [startScanning()](#startscanning) | Starts continuous scanning of incoming images. | -| [stopScanning()](#stopscanning) | Stops continuous scanning. | -| [pauseScanning()](#pausescanning) | Pauses continuous scanning but keep the video stream. | -| [resumeScanning()](#resumescanning) | Resumes continuous scanning. | -| [getScanSettings()](#getscansettings) | Returns the current scan settings. | -| [updateScanSettings()](#updatescansettings) | Changes scan settings with the object passed in. | - -### Change Settings - -| API Name | Description | -|---|---| -| [getRuntimeSettings()](#getruntimesettings) | Returns the current runtime settings. | -| [initRuntimeSettingsWithString](#initruntimesettingswithstring) | Initializes the Runtime Settings with the settings in the given JSON string. | -| [updateRuntimeSettings()](#updateruntimesettings) | Updates runtime settings with a given struct or a preset template. | -| [resetRuntimeSettings()](#resetruntimesettings) | Resets all parameters to default values. | -| [outputRuntimeSettingsToString()](#outputruntimesettingstostring) | Returns the current RuntimeSettings in the form of a string. | -| [getModeArgument()](#getmodeargument) | Returns the argument value for the specified mode parameter. | -| [setModeArgument()](#setmodeargument) | Sets the argument value for the specified mode parameter. | - -### Auxiliary - -| API Name | Description | -|---|---| -| [ifSaveOriginalImageInACanvas](#ifsaveoriginalimageinacanvas) | Whether to save the original image into a < canvas> element. | -| [getOriginalImageInACanvas()](#getoriginalimageinacanvas) | Returns an `HTMLCanvasElement` that holds the original image. | - -## createInstance - -Creates a `BarcodeReader` instance. - -```typescript -static createInstance(): Promise -``` - -### Return Value - -A promise resolving to the created `BarcodeReader` object. - -### Code Snippet - -```js -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -``` - -## destroyContext - -Destroies the `BarcodeReader` instance. If your page needs to create new instances from time to time, don't forget to destroy unused old instances. - -```typescript -destroyContext(): void -``` - -### Code Snippet - -```js -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -// ... decode ... -reader.destroyContext(); -``` - -## isContextDestroyed - -Returns whether the instance has been destroyed. - -```typescript -isContextDestroyed(): boolean -``` - -## decode - -Decodes barcodes from an image. - -```typescript -decode(source: Blob | Buffer | ArrayBuffer | Uint8Array | Uint8ClampedArray | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | DCEFrame | DSImage | string): Promise -``` - -> If the content in the binary data is raw img data, such as `RGBA` , use [decodeBuffer()](#decodebuffer) instead. - -### Parameters - -`source` : specifies the image to decode. The supported image formats include `png` , `jpeg` , `bmp` , `gif` and a few others (some browsers support `webp` , `tif` ). Also note that the image can be specified in a lot of ways including binary data, base64 string (with MIME), URL, etc. - -> To speed up the reading, the image will be scaled down when it exceeds a size limit either horizontally or vertically. -> -> * The limit is 2048 pixels on mobile devices and 4096 on other devices. -> * If the template "dense" or "distance" is used, the limit is 4096 regardless of which device is used. -> -> Therefore, setting a very high resolution will not help with the scanning. - -### Return Value - -A promise resolving to a `TextResult[]` object that contains all the barcode results found in this image. - -### Code Snippet - -```js -let results1 = await reader.decode(blob); -let results2 = await reader.decode(htmlImageElement); -let results3 = await reader.decode(url); -let results4 = await reader.decode(strBase64WithMime); // like `data:image/png;base64,iV************` -``` - -You can even use an `HTMLVideoElement` as the source. If the video is playing, the current frame will be decoded. - -```js -let results; -try { - // The current frame will be decoded. - results = await reader.decode(htmlVideoElement); -} catch (ex) { - // If there is no frame in the video, throw an exception. -} -``` - -### See Also - -* [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob) -* [Buffer](https://nodejs.org/api/buffer.html#buffer_class_buffer) -* [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) -* [Uint8Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) -* [Uint8ClampedArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray) -* [HTMLImageElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement) -* [HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) -* [HTMLVideoElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement) -* [TextResult](./interface/TextResult.md) -* [DSImage](./interface/dsimage.md) -* [DCEFrame](https://www.dynamsoft.com/camera-enhancer/docs/programming/javascript/api-reference/interface/dceframe.html?ver=latest) - -## decodeBase64String - -Decodes barcodes from a base64-encoded image (with or without MIME). - -```typescript -decodeBase64String(base64Str: string): Promise -``` - -### Parameters - -`base64Str` : specifies the image represented by a string. - -### Return Value - -A promise resolving to a `TextResult[]` object that contains all the barcode results found in this image. - -### Code Snippet - -```js -let results = await reader.decodeBase64String(strBase64); //e.g. `data:image/jpg;base64,Xfjshekk....` or `Xfjshekk...`. -for (let result of results) { - console.log(result.barcodeText); -} -``` - -### See Also - -* [TextResult](./interface/TextResult.md) - -## decodeUrl - -Decodes barcodes from an image specified by its URL. Note that the image should either be from the same domain or has the 'Access-Control-Allow-Origin' header set to allow access from your current domain. - -```typescript -decodeUrl(url: string): Promise -``` - -### Parameters - -`url` : specifies the image by its URL. - -### Return Value - -A promise resolving to a `TextResult[]` object that contains all the barcode results found in this image. - -### Code Snippet - -```js -let results = await reader.decodeUrl("https://www.yourdomain.com/imageWithBarcodes.png"); -for (let result of results) { - console.log(result.barcodeText); -} -``` - -### See Also - -* [TextResult](./interface/TextResult.md) - -## decodeBuffer - -Decodes barcodes from raw image data. It is an advanced API, if you don't know what you are doing, use [decode](#decode) instead. - -```typescript -decodeBuffer(buffer: Blob | Buffer | ArrayBuffer | Uint8Array | Uint8ClampedArray, width: number, height: number, stride: number, format: EnumImagePixelFormat): Promise -``` - -### Parameters - -`buffer` : specifies the raw image represented by a `Uint8Array` , `Uint8ClampedArray` , `ArrayBuffer` , `Blob` or `Buffer` object. - -`width` : image width. - -`height` : image height. - -`stride` : `image-width * pixel-byte-length` . - -`format` : pixel format. - -### Return Value - -A promise resolving to a `TextResult[]` object that contains all the barcode results found in this image. - -### Code Snippet - -```js -let results = await reader.decodeBuffer(u8RawImage, 1280, 720, 1280 * 4, Dynamsoft.DBR.EnumImagePixelFormat.IPF_ABGR_8888); -for (let result of results) { - console.log(result.barcodeText); -} -``` - -### See Also - -* [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob) -* [Buffer](https://nodejs.org/api/buffer.html#buffer_class_buffer) -* [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) -* [Uint8Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) -* [Uint8ClampedArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray) -* [EnumImagePixelFormat](./enum/EnumImagePixelFormat.md) -* [TextResult](./interface/TextResult.md) - -## getRuntimeSettings - -Returns the current runtime settings. - -```typescript -getRuntimeSettings(): Promise -``` - -### Return Value - -A promise resolving to a `RuntimeSettings` object that contains the settings for barcode reading. - -### Code Snippet - -```js -let settings = await reader.getRuntimeSettings(); -settings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE; // Decodes only QR code. -await reader.updateRuntimeSettings(settings); -``` - -### See Also - -* [RuntimeSettings](./interface/RuntimeSettings.md) - -## initRuntimeSettingsWithString - -Initializes the Runtime Settings with the settings in the given JSON string. - -```typescript -initRuntimeSettingsWithString(template: string): Promise -``` - -### Parameters - -`template` : a string representing the template. - -### Return Value - -A promise resolving to `void`. - -## updateRuntimeSettings - -Updates runtime settings with a given struct or a preset template represented by one of the following strings - -* `speed`: fast but may miss a few codes; -* `coverage`: slow but try to find all codes, this is the default setting for a `BarcodeReader` instance; -* `balance`: between `speed` and `coverage`; -* `single`: optimized for scanning one single barcode from a video input, this is supported only by the sub-class [BarcodeScanner](./BarcodeScanner.md) and is also the default setting for a `BarcodeScanner` instance; -* `dense`: optimized for scanning dense barcodes such as the PDF417 on driver's license; -* `distance`: optimized for scanning a barcode that is placed far from the device and appear small in the video stream. - -> NOTE -> -> If the settings `barcodeFormatIds` , `barcodeFormatIds_2` and `region` have been changed by the customer, changing the template will preserve the previous settings. - -```typescript -updateRuntimeSettings(settings: RuntimeSettings | string): Promise -``` - -### Parameters - -`settings` : a `RuntimeSettings` object that contains the new settings for barcode reading. - -### Return Value - -A promise that resolves when the operation succeeds. - -### Code Snippet - -```js -await reader.updateRuntimeSettings('balance'); -let settings = await reader.getRuntimeSettings(); -settings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_ONED; -await reader.updateRuntimeSettings(settings); -``` - -### See Also - -* [RuntimeSettings](./interface/RuntimeSettings.md) - -## resetRuntimeSettings - -Resets all parameters to default values. - -For a `BarcodeReader` instance, it is equivalent to setting the `coverage` template. - -For a [ `BarcodeScanner` ](./BarcodeScanner.md) instance, it is equivalent to setting the `speed` template. - -```typescript -resetRuntimeSettings(): Promise -``` - -### Parameters - -None. - -### Return Value - -A promise that resolves when the operation succeeds. - -### Code Snippet - -```js -await reader.resetRuntimeSettings(); -``` - -## outputRuntimeSettingsToString - -Return the current RuntimeSettings in the form of a string. - -```typescript -outputRuntimeSettingsToString(): Promise -``` - -### Return Value - -A promise resolving to a string which represents the current RuntimeSettings. - -## getModeArgument - -Returns the argument value for the specified mode parameter. - -```typescript -getModeArgument(modeName: string, index: number, argumentName: string): Promise -``` - -### Parameters - -`modeName` : specifies the mode which contains one or multiple elements. - -`index` : specifies an element of the mode by its index. - -`argumentName` : specifies the argument. - -### Return Value - -A promise resolving to a string which represents the value of the argument. - -### Code Snippet - -```js -let argumentValue = await reader.getModeArgument("BinarizationModes", 0, "EnableFillBinaryVacancy"); -``` - -## setModeArgument - -Sets the argument value for the specified mode parameter. - -```typescript -setModeArgument(modeName: string, index: number, argumentName: string, argumentValue: string): Promise -``` - -### Parameters - -`modeName` : specifies the mode which contains one or multiple elements. - -`index` : specifies an element of the mode by its index. - -`argumentName` : specifies the argument. - -`argumentValue` : specifies the value. - -### Return Value - -A promise that resolves when the operation succeeds. - -### Code Snippet - -```js -await reader.setModeArgument("BinarizationModes", 0, "EnableFillBinaryVacancy", "1"); -``` - -## ifSaveOriginalImageInACanvas - -Whether to save the original image into a < canvas> element. The original image refers to the actual image the library tried to read barcodes from. - -Note that the result is an `HTMLCanvasElement` element and you can insert it into the DOM to show the image. - -```typescript -ifSaveOriginalImageInACanvas: boolean; -``` - -**Default value** - - `false` - -### Code Snippet - -```js -reader.ifSaveOriginalImageInACanvas = true; -let results = await reader.decode(source); -document.body.append(reader.getOriginalImageInACanvas()); -``` - -## getOriginalImageInACanvas - -An [HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/Canvas) that holds the original image. The original image refers to the actual image the library tried to read barcodes from. - -```typescript -getOriginalImageInACanvas(): HTMLCanvasElement -``` - -### Code Snippet - -```js -reader.ifSaveOriginalImageInACanvas = true; -let results = await reader.decode(source); -document.body.append(reader.getOriginalImageInACanvas()); -``` - -### See Also - -* [HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) - -## setImageSource - -Sets an image source for continous scanning. - -```typescript -setImageSource(imageSource: ImageSource, options?: object): Promise; -``` - -### Parameters - -`imageSource` : Specifies the image source. - -`options` : Options to help with the usage of the `ImageSource` object. At present, it only contains one property `resultsHighlightBaseShapes` that accepts `Dynamsoft.DCE.DrawingItem` as its value to help with the highlighting of barcode regions as shown in the code snippet below. More properties will be added as needed in the future. - -### Code Snippet - -```javascript -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -let enhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(); -let options = { - resultsHighlightBaseShapes: Dynamsoft.DCE.DrawingItem -}; -await reader.setImageSource(enhancer, options); -reader.onUniqueRead = (txt, result) => { - console.log(txt); -} -await reader.startScanning(true); -``` - -## onUniqueRead - -This event is triggered when a new, unduplicated label is found. - -```typescript -onUniqueRead: (txt: string, result: TextResult) => void -``` - -### Arguments - -`txt` : a string that holds the label text (one single line). - -`result` : a `TextResult` object that contains more detailed info about the returned text. - -### Code Snippet - -```javascript -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -let enhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(); -let options = { - resultsHighlightBaseShapes: Dynamsoft.DCE.DrawingItem -}; -await reader.setImageSource(enhancer, options); -reader.onUniqueRead = (txt, result) => { - console.log(txt); -} -await reader.startScanning(true); -``` - -### See Also - -* [TextResult](./interface/TextResult.md) - -## onImageRead - -This event is triggered after the library finishes scanning a image. - -```typescript -onImageRead: (results: TextResult[]) => void -``` - -### Arguments - -`results` : `TextResult` objects that contain all the label results in this image. - -### Code Snippet - -```js -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -let enhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(); -let options = { - resultsHighlightBaseShapes: Dynamsoft.DCE.DrawingItem -}; -await reader.setImageSource(enhancer, options); -reader.onUniqueRead = (txt, result) => { - console.log(txt); -} -await reader.startScanning(true); -``` - -### See Also - -* [TextResult](./interface/TextResult.md) - -## startScanning - -Open the camera and starts continuous scanning of incoming images. - -```typescript -startScanning(appendOrShowUI?: boolean): Promise; -``` - -### Parameters - -`appendOrShowUI` : this parameter specifies how to handle the UI that comes with the bound CameraEnhancer instance. When set to true, if the UI doesn't exist in the DOM tree, the CameraEnhancer instance will append it in the DOM and show it; if the UI already exists in the DOM tree but is hidden, it'll be displayed. When not set or set to false, it means not to change the original state of that UI: if it doesn't exist in the DOM tree, nothing shows up on the page; if it exists in the DOM tree, it may or may not show up depending on its original state. - -### Return Value - -A promise resolving to a `PlayCallbackInfo` object which contains the resolution of the video. - -### Code Snippet - -```js -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -let enhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(); -let options = { - resultsHighlightBaseShapes: Dynamsoft.DCE.DrawingItem -}; -await reader.setImageSource(enhancer, options); -reader.onUniqueRead = (txt, result) => { - console.log(txt); -} -await reader.startScanning(true); -``` - -### See Also - -* [TextResult](./interface/TextResult.md) - -## pauseScanning - -Pause continuous scanning but keep the video stream. - -```typescript -pauseScanning(options?: object): void; -``` - -**Parameters** - -`options`: Options to configure how the pause works. At present, it only contains one property `keepResultsHighlighted` which, when set to **true**, will keep the barcodes found on the frame (at the time of the pause) highlighted. - -## resumeScanning - -Resumes continuous scanning. - -```typescript -resumeScanning(): void; -``` - -## stopScanning - -Stops continuous scanning and closes the video stream. - -```typescript -stopScanning(hideUI?: boolean): void; -``` - -### Parameters - -`hideUI` : this parameter specifies how to handle the UI that comes with the bound CameraEnhancer instance. When set to true, if the UI doesn't exist in the DOM tree or it exists but is hidden, nothing is done; if the UI already exists in the DOM tree and is shown, it'll be hidden. When not set or set to false, it means not to change the original state of that UI: if it doesn't exist in the DOM tree, nothing happens; if it exists in the DOM tree, it may or may not be hidden depending on its original state. - -### Code Snippet - -```js -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -let enhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(); -let options = { - resultsHighlightBaseShapes: Dynamsoft.DCE.DrawingItem -}; -await reader.setImageSource(enhancer, options); -reader.onUniqueRead = (txt, result) => { - console.log(txt); -} -await reader.startScanning(true); -``` - -### See Also - -* [TextResult](./interface/TextResult.md) - -## getScanSettings - -Returns the current scan settings. - -```typescript -getScanSettings(): Promise -``` - -### Return Value - -A promise resolving to a `ScanSettings` . - -### Code Snippet - -```js -let scanSettings = await reader.getScanSettings(); -scanSettings.intervalTime = 50; -scanSettings.duplicateForgetTime = 1000; -await reader.updateScanSettings(scanSettings); -``` - -### See Also - -* [ScanSettings](./interface/ScanSettings.md) - -## updateScanSettings - -Changes scan settings with the object passed in. - -```typescript -updateScanSettings(settings: ScanSettings): Promise -``` - -**Parameters** - -`settings` : specifies the new scan settings. - -### Return Value - -A promise that resolves when the operation succeeds. - -### Code Snippet - -```js -let scanSettings = await reader.getScanSettings(); -scanSettings.intervalTime = 50; -scanSettings.duplicateForgetTime = 1000; -await reader.updateScanSettings(scanSettings); -``` - -### See Also - -* [ScanSettings](./interface/ScanSettings.md) diff --git a/programming-old/javascript/api-reference/BarcodeReader-v9.6.2.md b/programming-old/javascript/api-reference/BarcodeReader-v9.6.2.md deleted file mode 100644 index 82d91e65..00000000 --- a/programming-old/javascript/api-reference/BarcodeReader-v9.6.2.md +++ /dev/null @@ -1,730 +0,0 @@ ---- -layout: default-layout -title: BarcodeReader - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows the BarcodeReader Class of Dynamsoft Barcode Reader JavaScript SDK v 9.6.2. -keywords: BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -noTitleIndex: true -breadcrumbText: BarcodeReader -permalink: /programming/javascript/api-reference/BarcodeReader-v9.6.2.html ---- - -# BarcodeReader for Images - -A low-level barcode reader that processes still images and return barcode results. The following code snippet shows its basic usage. - -```js -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -let results = await reader.decode(imageSource); -for (let result of results) { - console.log(result.barcodeText); -} -``` - -## API Index - -### Create and Destroy Instances - -| API Name | Description | -|---|---| -| [createInstance()](#createinstance) | Creates a `BarcodeReader` instance. | -| [destroyContext()](#destroycontext) | Destroies the BarcodeReader instance. | -| [isContextDestroyed()](#iscontextdestroyed) | Indicates whether the instance has been destroyed. | - -### Decode Barcodes - -| API Name | Description | -|---|---| -| [decode()](#decode) | Decodes barcodes from an image. | -| [decodeBase64String()](#decodebase64string) | Decodes barcodes from a base64-encoded image (with or without MIME). | -| [decodeUrl()](#decodeurl) | Decodes barcodes from an image specified by its URL. | -| [decodeBuffer()](#decodebuffer) | Decodes barcodes from raw image data. | - -### Decode Barcodes on multiple images from an Image Source - -| API Name | Description | -|---|---| -| [setImageSource](#setimagesource) | Sets an image source for continous scanning. | -| [onUniqueRead](#onuniqueread) | This event is triggered when a new, unduplicated barcode is found. | -| [onImageRead](#onimageread) | This event is triggered after the library finishes scanning an image. | -| [startScanning()](#startscanning) | Starts continuous scanning of incoming images. | -| [stopScanning()](#stopscanning) | Stops continuous scanning. | -| [pauseScanning()](#pausescanning) | Pauses continuous scanning but keep the video stream. | -| [resumeScanning()](#resumescanning) | Resumes continuous scanning. | -| [getScanSettings()](#getscansettings) | Returns the current scan settings. | -| [updateScanSettings()](#updatescansettings) | Changes scan settings with the object passed in. | - -### Change Settings - -| API Name | Description | -|---|---| -| [getRuntimeSettings()](#getruntimesettings) | Returns the current runtime settings. | -| [initRuntimeSettingsWithString](#initruntimesettingswithstring) | Initializes the Runtime Settings with the settings in the given JSON string. | -| [updateRuntimeSettings()](#updateruntimesettings) | Updates runtime settings with a given struct or a preset template. | -| [resetRuntimeSettings()](#resetruntimesettings) | Resets all parameters to default values. | -| [outputRuntimeSettingsToString()](#outputruntimesettingstostring) | Returns the current RuntimeSettings in the form of a string. | -| [getModeArgument()](#getmodeargument) | Returns the argument value for the specified mode parameter. | -| [setModeArgument()](#setmodeargument) | Sets the argument value for the specified mode parameter. | - -### Auxiliary - -| API Name | Description | -|---|---| -| [ifSaveOriginalImageInACanvas](#ifsaveoriginalimageinacanvas) | Whether to save the original image into a < canvas> element. | -| [getOriginalImageInACanvas()](#getoriginalimageinacanvas) | Returns an `HTMLCanvasElement` that holds the original image. | - -## createInstance - -Creates a `BarcodeReader` instance. - -```typescript -static createInstance(): Promise -``` - -### Return Value - -A promise resolving to the created `BarcodeReader` object. - -### Code Snippet - -```js -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -``` - -## destroyContext - -Destroies the `BarcodeReader` instance. If your page needs to create new instances from time to time, don't forget to destroy unused old instances. - -```typescript -destroyContext(): void -``` - -### Code Snippet - -```js -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -// ... decode ... -reader.destroyContext(); -``` - -## isContextDestroyed - -Returns whether the instance has been destroyed. - -```typescript -isContextDestroyed(): boolean -``` - -## decode - -Decodes barcodes from an image. - -```typescript -decode(source: Blob | Buffer | ArrayBuffer | Uint8Array | Uint8ClampedArray | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | DCEFrame | DSImage | string): Promise -``` - -> If the content in the binary data is raw img data, such as `RGBA` , use [decodeBuffer()](#decodebuffer) instead. - -### Parameters - -`source` : specifies the image to decode. The supported image formats include `png` , `jpeg` , `bmp` , `gif` and a few others (some browsers support `webp` , `tif` ). Also note that the image can be specified in a lot of ways including binary data, base64 string (with MIME), URL, etc. - -> To speed up the reading, the image will be scaled down when it exceeds a size limit either horizontally or vertically. -> -> * The limit is 2048 pixels on mobile devices and 4096 on other devices. -> * If the template "dense" or "distance" is used, the limit is 4096 regardless of which device is used. -> -> Therefore, setting a very high resolution will not help with the scanning. - -### Return Value - -A promise resolving to a `TextResult[]` object that contains all the barcode results found in this image. - -### Code Snippet - -```js -let results1 = await reader.decode(blob); -let results2 = await reader.decode(htmlImageElement); -let results3 = await reader.decode(url); -let results4 = await reader.decode(strBase64WithMime); // like `data:image/png;base64,iV************` -``` - -You can even use an `HTMLVideoElement` as the source. If the video is playing, the current frame will be decoded. - -```js -let results; -try { - // The current frame will be decoded. - results = await reader.decode(htmlVideoElement); -} catch (ex) { - // If there is no frame in the video, throw an exception. -} -``` - -### See Also - -* [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob) -* [Buffer](https://nodejs.org/api/buffer.html#buffer_class_buffer) -* [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) -* [Uint8Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) -* [Uint8ClampedArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray) -* [HTMLImageElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement) -* [HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) -* [HTMLVideoElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement) -* [TextResult](./interface/TextResult.md) -* [DSImage](./interface/dsimage.md) -* [DCEFrame](https://www.dynamsoft.com/camera-enhancer/docs/programming/javascript/api-reference/interface/dceframe.html?ver=latest) - -## decodeBase64String - -Decodes barcodes from a base64-encoded image (with or without MIME). - -```typescript -decodeBase64String(base64Str: string): Promise -``` - -### Parameters - -`base64Str` : specifies the image represented by a string. - -### Return Value - -A promise resolving to a `TextResult[]` object that contains all the barcode results found in this image. - -### Code Snippet - -```js -let results = await reader.decodeBase64String(strBase64); //e.g. `data:image/jpg;base64,Xfjshekk....` or `Xfjshekk...`. -for (let result of results) { - console.log(result.barcodeText); -} -``` - -### See Also - -* [TextResult](./interface/TextResult.md) - -## decodeUrl - -Decodes barcodes from an image specified by its URL. Note that the image should either be from the same domain or has the 'Access-Control-Allow-Origin' header set to allow access from your current domain. - -```typescript -decodeUrl(url: string): Promise -``` - -### Parameters - -`url` : specifies the image by its URL. - -### Return Value - -A promise resolving to a `TextResult[]` object that contains all the barcode results found in this image. - -### Code Snippet - -```js -let results = await reader.decodeUrl("https://www.yourdomain.com/imageWithBarcodes.png"); -for (let result of results) { - console.log(result.barcodeText); -} -``` - -### See Also - -* [TextResult](./interface/TextResult.md) - -## decodeBuffer - -Decodes barcodes from raw image data. It is an advanced API, if you don't know what you are doing, use [decode](#decode) instead. - -```typescript -decodeBuffer(buffer: Blob | Buffer | ArrayBuffer | Uint8Array | Uint8ClampedArray, width: number, height: number, stride: number, format: EnumImagePixelFormat): Promise -``` - -### Parameters - -`buffer` : specifies the raw image represented by a `Uint8Array` , `Uint8ClampedArray` , `ArrayBuffer` , `Blob` or `Buffer` object. - -`width` : image width. - -`height` : image height. - -`stride` : `image-width * pixel-byte-length` . - -`format` : pixel format. - -### Return Value - -A promise resolving to a `TextResult[]` object that contains all the barcode results found in this image. - -### Code Snippet - -```js -let results = await reader.decodeBuffer(u8RawImage, 1280, 720, 1280 * 4, Dynamsoft.DBR.EnumImagePixelFormat.IPF_ABGR_8888); -for (let result of results) { - console.log(result.barcodeText); -} -``` - -### See Also - -* [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob) -* [Buffer](https://nodejs.org/api/buffer.html#buffer_class_buffer) -* [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) -* [Uint8Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) -* [Uint8ClampedArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray) -* [EnumImagePixelFormat](./enum/EnumImagePixelFormat.md) -* [TextResult](./interface/TextResult.md) - -## getRuntimeSettings - -Returns the current runtime settings. - -```typescript -getRuntimeSettings(): Promise -``` - -### Return Value - -A promise resolving to a `RuntimeSettings` object that contains the settings for barcode reading. - -### Code Snippet - -```js -let settings = await reader.getRuntimeSettings(); -settings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE; // Decodes only QR code. -await reader.updateRuntimeSettings(settings); -``` - -### See Also - -* [RuntimeSettings](./interface/RuntimeSettings.md) - -## initRuntimeSettingsWithString - -Initializes the Runtime Settings with the settings in the given JSON string. - -```typescript -initRuntimeSettingsWithString(template: string): Promise -``` - -### Parameters - -`template` : a string representing the template. - -### Return Value - -A promise resolving to `void`. - -## updateRuntimeSettings - -Updates runtime settings with a given struct or a preset template represented by one of the following strings - -* `speed`: fast but may miss a few codes; -* `coverage`: slow but try to find all codes, this is the default setting for a `BarcodeReader` instance; -* `balance`: between `speed` and `coverage`; -* `single`: optimized for scanning one single barcode from a video input, this is supported only by the sub-class [BarcodeScanner](./BarcodeScanner.md) and is also the default setting for a `BarcodeScanner` instance; -* `dense`: optimized for scanning dense barcodes such as the PDF417 on driver's license; -* `distance`: optimized for scanning a barcode that is placed far from the device and appear small in the video stream. - -> NOTE -> -> If the settings `barcodeFormatIds` , `barcodeFormatIds_2` and `region` have been changed by the customer, changing the template will preserve the previous settings. - -```typescript -updateRuntimeSettings(settings: RuntimeSettings | string): Promise -``` - -### Parameters - -`settings` : a `RuntimeSettings` object that contains the new settings for barcode reading. - -### Return Value - -A promise that resolves when the operation succeeds. - -### Code Snippet - -```js -await reader.updateRuntimeSettings('balance'); -let settings = await reader.getRuntimeSettings(); -settings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_ONED; -await reader.updateRuntimeSettings(settings); -``` - -### See Also - -* [RuntimeSettings](./interface/RuntimeSettings.md) - -## resetRuntimeSettings - -Resets all parameters to default values. - -For a `BarcodeReader` instance, it is equivalent to setting the `coverage` template. - -For a [ `BarcodeScanner` ](./BarcodeScanner.md) instance, it is equivalent to setting the `single` template. - -```typescript -resetRuntimeSettings(): Promise -``` - -### Parameters - -None. - -### Return Value - -A promise that resolves when the operation succeeds. - -### Code Snippet - -```js -await reader.resetRuntimeSettings(); -``` - -## outputRuntimeSettingsToString - -Return the current RuntimeSettings in the form of a string. - -```typescript -outputRuntimeSettingsToString(): Promise -``` - -### Return Value - -A promise resolving to a string which represents the current RuntimeSettings. - -## getModeArgument - -Returns the argument value for the specified mode parameter. - -```typescript -getModeArgument(modeName: string, index: number, argumentName: string): Promise -``` - -### Parameters - -`modeName` : specifies the mode which contains one or multiple elements. - -`index` : specifies an element of the mode by its index. - -`argumentName` : specifies the argument. - -### Return Value - -A promise resolving to a string which represents the value of the argument. - -### Code Snippet - -```js -let argumentValue = await reader.getModeArgument("BinarizationModes", 0, "EnableFillBinaryVacancy"); -``` - -## setModeArgument - -Sets the argument value for the specified mode parameter. - -```typescript -setModeArgument(modeName: string, index: number, argumentName: string, argumentValue: string): Promise -``` - -### Parameters - -`modeName` : specifies the mode which contains one or multiple elements. - -`index` : specifies an element of the mode by its index. - -`argumentName` : specifies the argument. - -`argumentValue` : specifies the value. - -### Return Value - -A promise that resolves when the operation succeeds. - -### Code Snippet - -```js -await reader.setModeArgument("BinarizationModes", 0, "EnableFillBinaryVacancy", "1"); -``` - -## ifSaveOriginalImageInACanvas - -Whether to save the original image into a < canvas> element. The original image refers to the actual image the library tried to read barcodes from. - -Note that the result is an `HTMLCanvasElement` element and you can insert it into the DOM to show the image. - -```typescript -ifSaveOriginalImageInACanvas: boolean; -``` - -**Default value** - - `false` - -### Code Snippet - -```js -reader.ifSaveOriginalImageInACanvas = true; -let results = await reader.decode(source); -document.body.append(reader.getOriginalImageInACanvas()); -``` - -## getOriginalImageInACanvas - -An [HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/Canvas) that holds the original image. The original image refers to the actual image the library tried to read barcodes from. - -```typescript -getOriginalImageInACanvas(): HTMLCanvasElement -``` - -### Code Snippet - -```js -reader.ifSaveOriginalImageInACanvas = true; -let results = await reader.decode(source); -document.body.append(reader.getOriginalImageInACanvas()); -``` - -### See Also - -* [HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) - -## setImageSource - -Sets an image source for continous scanning. - -```typescript -setImageSource: (imageSource: ImageSource, options?: object)=>Promise; -``` - -### Parameters - -`imageSource` : Specifies the image source. - -`options` : Options to help with the usage of the `ImageSource` object. At present, it only contains one property `resultsHighlightBaseShapes` that accepts `Dynamsoft.DCE.DrawingItem` as its value to help with the highlighting of barcode regions as shown in the code snippet below. More properties will be added as needed in the future. - -### Code Snippet - -```javascript -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -let enhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(); -let options = { - resultsHighlightBaseShapes: Dynamsoft.DCE.DrawingItem -}; -await reader.setImageSource(enhancer, options); -reader.onUniqueRead = (txt, result) => { - console.log(txt); -} -await reader.startScanning(true); -``` - -## onUniqueRead - -This event is triggered when a new, unduplicated label is found. - -```typescript -onUniqueRead: (txt: string, result: TextResult) => void -``` - -### Arguments - -`txt` : a string that holds the label text (one single line). - -`result` : a `TextResult` object that contains more detailed info about the returned text. - -### Code Snippet - -```javascript -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -let enhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(); -let options = { - resultsHighlightBaseShapes: Dynamsoft.DCE.DrawingItem -}; -await reader.setImageSource(enhancer, options); -reader.onUniqueRead = (txt, result) => { - console.log(txt); -} -await reader.startScanning(true); -``` - -### See Also - -* [TextResult](./interface/TextResult.md) - -## onImageRead - -This event is triggered after the library finishes scanning a image. - -```typescript -onImageRead: (results: TextResult[]) => void -``` - -### Arguments - -`results` : `TextResult` objects that contain all the label results in this image. - -### Code Snippet - -```js -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -let enhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(); -let options = { - resultsHighlightBaseShapes: Dynamsoft.DCE.DrawingItem -}; -await reader.setImageSource(enhancer, options); -reader.onImageRead = (results) => { - if (results.length > 0) { - results.forEach(result => { - console.log(result.barcodeText); - }); - } -} -await reader.startScanning(true); -``` - -### See Also - -* [TextResult](./interface/TextResult.md) - -## startScanning - -Open the camera and starts continuous scanning of incoming images. - -```typescript -startScanning(appendOrShowUI?: boolean): Promise; -``` - -### Parameters - -`appendOrShowUI` : this parameter specifies how to handle the UI that comes with the bound CameraEnhancer instance. When set to true, if the UI doesn't exist in the DOM tree, the CameraEnhancer instance will append it in the DOM and show it; if the UI already exists in the DOM tree but is hidden, it'll be displayed. When not set or set to false, it means not to change the original state of that UI: if it doesn't exist in the DOM tree, nothing shows up on the page; if it exists in the DOM tree, it may or may not show up depending on its original state. - -### Return Value - -A promise resolving to a `PlayCallbackInfo` object which contains the resolution of the video. - -### Code Snippet - -```js -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -let enhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(); -let options = { - resultsHighlightBaseShapes: Dynamsoft.DCE.DrawingItem -}; -await reader.setImageSource(enhancer, options); -reader.onUniqueRead = (txt, result) => { - console.log(txt); -} -await reader.startScanning(true); -``` - -### See Also - -* [TextResult](./interface/TextResult.md) - -## pauseScanning - -Pause continuous scanning but keep the video stream. - -```typescript -pauseScanning(options?: object): void; -``` - -**Parameters** - -`options`: Options to configure how the pause works. At present, it only contains one property `keepResultsHighlighted` which, when set to **true**, will keep the barcodes found on the frame (at the time of the pause) highlighted. - -## resumeScanning - -Resumes continuous scanning. - -```typescript -resumeScanning(): void; -``` - -## stopScanning - -Stops continuous scanning and closes the video stream. - -```typescript -stopScanning(hideUI?: boolean): void; -``` - -### Parameters - -`hideUI` : this parameter specifies how to handle the UI that comes with the bound CameraEnhancer instance. When set to true, if the UI doesn't exist in the DOM tree or it exists but is hidden, nothing is done; if the UI already exists in the DOM tree and is shown, it'll be hidden. When not set or set to false, it means not to change the original state of that UI: if it doesn't exist in the DOM tree, nothing happens; if it exists in the DOM tree, it may or may not be hidden depending on its original state. - -### Code Snippet - -```js -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -let enhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(); -let options = { - resultsHighlightBaseShapes: Dynamsoft.DCE.DrawingItem -}; -await reader.setImageSource(enhancer, options); -reader.onUniqueRead = (txt, result) => { - console.log(txt); - reader.stopScanning(true); -} -await reader.startScanning(true); -``` - -### See Also - -* [TextResult](./interface/TextResult.md) - -## getScanSettings - -Returns the current scan settings. - -```typescript -getScanSettings(): Promise -``` - -### Return Value - -A promise resolving to a `ScanSettings` . - -### Code Snippet - -```js -let scanSettings = await reader.getScanSettings(); -scanSettings.intervalTime = 50; -scanSettings.duplicateForgetTime = 1000; -await reader.updateScanSettings(scanSettings); -``` - -### See Also - -* [ScanSettings](./interface/ScanSettings.md) - -## updateScanSettings - -Changes scan settings with the object passed in. - -```typescript -updateScanSettings(settings: ScanSettings): Promise -``` - -**Parameters** - -`settings` : specifies the new scan settings. - -### Return Value - -A promise that resolves when the operation succeeds. - -### Code Snippet - -```js -let scanSettings = await reader.getScanSettings(); -scanSettings.intervalTime = 50; -scanSettings.duplicateForgetTime = 1000; -await reader.updateScanSettings(scanSettings); -``` - -### See Also - -* [ScanSettings](./interface/ScanSettings.md) diff --git a/programming-old/javascript/api-reference/BarcodeReader.md b/programming-old/javascript/api-reference/BarcodeReader.md deleted file mode 100644 index 9e978b41..00000000 --- a/programming-old/javascript/api-reference/BarcodeReader.md +++ /dev/null @@ -1,796 +0,0 @@ ---- -layout: default-layout -title: BarcodeReader - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows the BarcodeReader Class of Dynamsoft Barcode Reader JavaScript SDK. -keywords: BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -noTitleIndex: true -breadcrumbText: BarcodeReader -permalink: /programming/javascript/api-reference/BarcodeReader.html ---- - -# BarcodeReader for Images - -A low-level barcode reader that processes still images and return barcode results. The following code snippet shows its basic usage. - -```js -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -let results = await reader.decode(imageSource); -for (let result of results) { - console.log(result.barcodeText); -} -``` - -## API Index - -### Create and Destroy Instances - -| API Name | Description | -|---|---| -| [createInstance()](#createinstance) | Creates a `BarcodeReader` instance. | -| [destroyContext()](#destroycontext) | Destroies the BarcodeReader instance. | -| [isContextDestroyed()](#iscontextdestroyed) | Indicates whether the instance has been destroyed. | - -### Decode Barcodes - -| API Name | Description | -|---|---| -| [decode()](#decode) | Decodes barcodes from an image. | -| [decodeBase64String()](#decodebase64string) | Decodes barcodes from a base64-encoded image (with or without MIME). | -| [decodeUrl()](#decodeurl) | Decodes barcodes from an image specified by its URL. | -| [decodeBuffer()](#decodebuffer) | Decodes barcodes from raw image data. | - -### Decode Barcodes on multiple images from an Image Source - -| API Name | Description | -|---|---| -| [setImageSource()](#setimagesource) | Sets an image source for continous scanning. | -| [onUniqueRead](#onuniqueread) | This event is triggered when a new, unduplicated barcode is found. | -| [onImageRead](#onimageread) | This event is triggered after the library finishes scanning an image. | -| [startScanning()](#startscanning) | Starts continuous scanning of incoming images. | -| [stopScanning()](#stopscanning) | Stops continuous scanning. | -| [pauseScanning()](#pausescanning) | Pauses continuous scanning but keep the video stream. | -| [resumeScanning()](#resumescanning) | Resumes continuous scanning. | -| [getScanSettings()](#getscansettings) | Returns the current scan settings. | -| [updateScanSettings()](#updatescansettings) | Changes scan settings with the object passed in. | - -### Change Settings - -| API Name | Description | -|---|---| -| [getRuntimeSettings()](#getruntimesettings) | Returns the current runtime settings. | -| [initRuntimeSettingsWithString()](#initruntimesettingswithstring) | Initializes the Runtime Settings with the settings in the given JSON string. | -| [updateRuntimeSettings()](#updateruntimesettings) | Updates runtime settings with a given struct or a preset template. | -| [resetRuntimeSettings()](#resetruntimesettings) | Resets all parameters to default values. | -| [outputRuntimeSettingsToString()](#outputruntimesettingstostring) | Returns the current RuntimeSettings in the form of a string. | -| [getModeArgument()](#getmodeargument) | Returns the argument value for the specified mode parameter. | -| [setModeArgument()](#setmodeargument) | Sets the argument value for the specified mode parameter. | - -### Auxiliary - -| API Name | Description | -|---|---| -| [ifSaveOriginalImageInACanvas](#ifsaveoriginalimageinacanvas) | Whether to save the original image into a < canvas> element. | -| [getOriginalImageInACanvas()](#getoriginalimageinacanvas) | Returns an `HTMLCanvasElement` that holds the original image. | - -## createInstance - -Creates a `BarcodeReader` instance. - -```typescript -static createInstance(): Promise -``` - -### Return Value - -A promise resolving to the created `BarcodeReader` object. - -### Code Snippet - -```js -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -``` - -### See Also - -* [destroyContext](#destroyContext) - -## destroyContext - -Destroies the `BarcodeReader` instance. If your page needs to create new instances from time to time, don't forget to destroy unused old instances. - -```typescript -destroyContext(): void -``` - -### Code Snippet - -```js -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -// ... decode ... -reader.destroyContext(); -``` - -### See Also - -* [isContextDestroyed](#isContextDestroyed) - -## isContextDestroyed - -Returns whether the instance has been destroyed. - -```typescript -isContextDestroyed(): boolean -``` - -### See Also - -* [destroyContext](#destroyContext) - -## decode - -Decodes barcodes from an image. - -```typescript -decode(source: Blob | Buffer | ArrayBuffer | Uint8Array | Uint8ClampedArray | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | DCEFrame | DSImage | string): Promise -``` - -> If the content in the binary data is raw img data, such as `RGBA` , use [decodeBuffer()](#decodebuffer) instead. - -### Parameters - -`source` : specifies the image to decode. The supported image formats include `png` , `jpeg` , `bmp` , `gif` and a few others (some browsers support `webp` , `tif` ). Also note that the image can be specified in a lot of ways including binary data, base64 string (with MIME), URL, etc. - -> To speed up the reading, the image will be scaled down when it exceeds a size limit either horizontally or vertically. -> -> * The limit is 2048 pixels on mobile devices and 4096 on other devices. -> * If the template "dense" or "distance" is used, the limit is 4096 regardless of which device is used. -> -> Therefore, setting a very high resolution will not help with the scanning. - -### Return Value - -A promise resolving to an array of `TextResult` object that contains the barcode results found in this image. - -### Code Snippet - -```js -let results1 = await reader.decode(blob); -let results2 = await reader.decode(htmlImageElement); -let results3 = await reader.decode(url); -let results4 = await reader.decode(strBase64WithMime); // like `data:image/png;base64,iV************` -``` - -You can even use an `HTMLVideoElement` as the source. If the video is playing, the current frame will be decoded. - -```js -let results; -try { - // The current frame will be decoded. - results = await reader.decode(htmlVideoElement); -} catch (ex) { - // If there is no frame in the video, throw an exception. -} -``` - -### See Also - -* [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob) -* [Buffer](https://nodejs.org/api/buffer.html#buffer_class_buffer) -* [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) -* [Uint8Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) -* [Uint8ClampedArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray) -* [HTMLImageElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement) -* [HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) -* [HTMLVideoElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement) -* [TextResult](./interface/TextResult.md) -* [DSImage](./interface/dsimage.md) -* [DCEFrame](https://www.dynamsoft.com/camera-enhancer/docs/programming/javascript/api-reference/interface/dceframe.html?ver=latest) - -## decodeBase64String - -Decodes barcodes from a base64-encoded image (with or without MIME). - -```typescript -decodeBase64String(base64Str: string): Promise -``` - -### Parameters - -`base64Str` : specifies the image represented by a string. - -### Return Value - -A promise resolving to an array of `TextResult` object that contains the barcode results found in this image. - -### Code Snippet - -```js -let results = await reader.decodeBase64String(strBase64); //e.g. `data:image/jpg;base64,Xfjshekk....` or `Xfjshekk...`. -for (let result of results) { - console.log(result.barcodeText); -} -``` - -### See Also - -* [TextResult](./interface/TextResult.md) - -## decodeUrl - -Decodes barcodes from an image specified by its URL. - -Note that the image should either be from the same domain or has the 'Access-Control-Allow-Origin' header set to allow access from your current domain. - -```typescript -decodeUrl(url: string): Promise -``` - -### Parameters - -`url` : specifies the image by its URL. - -### Return Value - -A promise resolving to an array of `TextResult` object that contains the barcode results found in this image. - -### Code Snippet - -```js -let results = await reader.decodeUrl("https://www.yourdomain.com/imageWithBarcodes.png"); -for (let result of results) { - console.log(result.barcodeText); -} -``` - -### See Also - -* [TextResult](./interface/TextResult.md) - -## decodeBuffer - -Decodes barcodes from raw image data. It is an advanced API, if you don't know what you are doing, use [decode](#decode) instead. - -```typescript -decodeBuffer(buffer: Blob | Buffer | ArrayBuffer | Uint8Array | Uint8ClampedArray, width: number, height: number, stride: number, format: EnumImagePixelFormat, orientation?: number): Promise -``` - -### Parameters - -`buffer` : specifies the raw image represented by a `Uint8Array` , `Uint8ClampedArray` , `ArrayBuffer` , `Blob` or `Buffer` object. - -`width` : image width. - -`height` : image height. - -`stride` : `image-width * pixel-byte-length` . - -`format` : pixel format. - -`orientation`: specifies the oritation of the image data. - -### Return Value - -A promise resolving to an array of `TextResult` object that contains the barcode results found in this image. - -### Code Snippet - -```js -let results = await reader.decodeBuffer(u8RawImage, 1280, 720, 1280 * 4, Dynamsoft.DBR.EnumImagePixelFormat.IPF_ABGR_8888); -for (let result of results) { - console.log(result.barcodeText); -} -``` - -### See Also - -* [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob) -* [Buffer](https://nodejs.org/api/buffer.html#buffer_class_buffer) -* [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) -* [Uint8Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) -* [Uint8ClampedArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray) -* [EnumImagePixelFormat](./enum/EnumImagePixelFormat.md) -* [TextResult](./interface/TextResult.md) - -## getRuntimeSettings - -Returns the current runtime settings. - -```typescript -getRuntimeSettings(): Promise -``` - -### Return Value - -A promise resolving to a `RuntimeSettings` object that contains the settings for barcode reading. - -### Code Snippet - -```js -let settings = await reader.getRuntimeSettings(); -settings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE; // Decodes only QR code. -await reader.updateRuntimeSettings(settings); -``` - -### See Also - -* [RuntimeSettings](./interface/RuntimeSettings.md) -* [updateRuntimeSettings](#updateRuntimeSettings) -* [resetRuntimeSettings](#resetRuntimeSettings) - -## initRuntimeSettingsWithString - -Initializes the `RuntimeSettings` with the settings in the given JSON string. - -```typescript -initRuntimeSettingsWithString(template: string): Promise -``` - -### Parameters - -`template` : a string representing the template. - -### Return Value - -A promise that resolves when the operation succeeds. - -### See Also - -* [RuntimeSettings](./interface/RuntimeSettings.md) -* [updateRuntimeSettings](#updateRuntimeSettings) - -## updateRuntimeSettings - -Updates runtime settings with a given struct or a preset template represented by one of the following strings: - -* `speed`: fast but may miss a few codes; -* `coverage`: slow but try to find all codes, this is the default setting for a `BarcodeReader` instance; -* `balance`: between `speed` and `coverage`; -* `single`: optimized for scanning one single barcode from a video input, this is supported only by the sub-class [BarcodeScanner](./BarcodeScanner.md) and is also the default setting for a `BarcodeScanner` instance; -* `dense`: optimized for scanning dense barcodes such as the PDF417 on driver's license; -* `distance`: optimized for scanning a barcode that is placed far from the device and appear small in the video stream. - -> NOTE -> -> If the settings `barcodeFormatIds` , `barcodeFormatIds_2` and `region` have been changed by the customer, changing the template will preserve the previous settings. - -```typescript -updateRuntimeSettings(settings: RuntimeSettings | string): Promise -``` - -### Parameters - -`settings` : a `RuntimeSettings` object that contains the new settings for barcode reading. - -### Return Value - -A promise that resolves when the operation succeeds. - -### Code Snippet - -```js -await reader.updateRuntimeSettings('balance'); -let settings = await reader.getRuntimeSettings(); -settings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_ONED; -await reader.updateRuntimeSettings(settings); -``` - -### See Also - -* [RuntimeSettings](./interface/RuntimeSettings.md) -* [getRuntimeSettings](#getRuntimeSettings) -* [resetRuntimeSettings](#resetRuntimeSettings) - -## resetRuntimeSettings - -Resets all parameters to default values. - -For a `BarcodeReader` instance, it is equivalent to setting the `coverage` template. - -For a [ `BarcodeScanner` ](./BarcodeScanner.md) instance, it is equivalent to setting the `single` template. - -```typescript -resetRuntimeSettings(): Promise -``` - -### Parameters - -None. - -### Return Value - -A promise that resolves when the operation succeeds. - -### Code Snippet - -```js -await reader.resetRuntimeSettings(); -``` - -## outputRuntimeSettingsToString - -Return the current `RuntimeSettings` in the form of a string. - -```typescript -outputRuntimeSettingsToString(): Promise -``` - -### Return Value - -A promise resolving to a string which represents the current `RuntimeSettings`. - -### See Also - -* [RuntimeSettings](./interface/RuntimeSettings.md) -* [getRuntimeSettings](#getRuntimeSettings) - -## getModeArgument - -Returns the argument value for the specified mode parameter. - -```typescript -getModeArgument(modeName: string, index: number, argumentName: string): Promise -``` - -### Parameters - -`modeName` : specifies the mode which contains one or multiple elements. - -`index` : specifies an element of the mode by its index. - -`argumentName` : specifies the argument. - -### Return Value - -A promise resolving to a string which represents the value of the argument. - -### Code Snippet - -```js -let argumentValue = await reader.getModeArgument("BinarizationModes", 0, "EnableFillBinaryVacancy"); -``` - -### See Also - -* [setModeArgument](#setModeArgument) - -## setModeArgument - -Sets the argument value for the specified mode parameter. - -```typescript -setModeArgument(modeName: string, index: number, argumentName: string, argumentValue: string): Promise -``` - -### Parameters - -`modeName` : specifies the mode which contains one or multiple elements. - -`index` : specifies an element of the mode by its index. - -`argumentName` : specifies the argument. - -`argumentValue` : specifies the value. - -### Return Value - -A promise that resolves when the operation succeeds. - -### Code Snippet - -```js -await reader.setModeArgument("BinarizationModes", 0, "EnableFillBinaryVacancy", "1"); -``` - -### See Also - -* [getModeArgument](#getModeArgument) - -## ifSaveOriginalImageInACanvas - -Whether to save the original image into a <canvas> element. The original image refers to the actual image the library tried to read barcodes from. It can be returned by 'getOriginalImageInACanvas()'. - -```typescript -ifSaveOriginalImageInACanvas: boolean; -``` - -**Default value** - -`false` - -### Code Snippet - -```js -reader.ifSaveOriginalImageInACanvas = true; -let results = await reader.decode(source); -document.body.append(reader.getOriginalImageInACanvas()); -``` - -### See Also - -* [getOriginalImageInACanvas](#getoriginalimageinacanvas) - -## getOriginalImageInACanvas - -An [HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/Canvas) that holds the original image. The original image refers to the actual image the library tried to read barcodes from. - -```typescript -getOriginalImageInACanvas(): HTMLCanvasElement -``` - -### Code Snippet - -```js -reader.ifSaveOriginalImageInACanvas = true; -let results = await reader.decode(source); -document.body.append(reader.getOriginalImageInACanvas()); -``` - -### See Also - -* [ifSaveOriginalImageInACanvas](#ifSaveOriginalImageInACanvas) -* [HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) - -## setImageSource - -Sets an image source for continous scanning. - -```typescript -setImageSource: (imageSource: ImageSource, options?: object)=>Promise; -``` - -### Parameters - -`imageSource` : Specifies the image source. - -`options` : Options to help with the usage of the `ImageSource` object. At present, it only contains one property `resultsHighlightBaseShapes` that accepts `Dynamsoft.DCE.DrawingItem` as its value to help with the highlighting of barcode regions as shown in the code snippet below. More properties will be added as needed in the future. - -### Return Value - -A promise that resolves when the operation succeeds. - -### Code Snippet - -```javascript -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -let enhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(); -let options = { - resultsHighlightBaseShapes: Dynamsoft.DCE.DrawingItem -}; -await reader.setImageSource(enhancer, options); -reader.onUniqueRead = (txt, result) => { - console.log(txt); -}; -await reader.startScanning(true); -``` - -### See Also - -* [ImageSource](interface/imagesource.md) - -## onUniqueRead - -This event is triggered when a new, unduplicated label is found. - -```typescript -onUniqueRead: (txt: string, result: TextResult) => void -``` - -### Arguments - -`txt` : a string that holds the label text (one single line). - -`result` : a `TextResult` object that contains more detailed info about the returned text. - -### Code Snippet - -```javascript -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -let enhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(); -let options = { - resultsHighlightBaseShapes: Dynamsoft.DCE.DrawingItem -}; -await reader.setImageSource(enhancer, options); -reader.onUniqueRead = (txt, result) => { - console.log(txt); -} -await reader.startScanning(true); -``` - -### See Also - -* [TextResult](./interface/TextResult.md) -* [onImageRead](#onImageRead) - -## onImageRead - -This event is triggered after the library finishes scanning a image. - -```typescript -onImageRead: (results: TextResult[]) => void -``` - -### Arguments - -`results` : an array of `TextResult` object that contains the barcode results in this image. - -### Code Snippet - -```js -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -let enhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(); -let options = { - resultsHighlightBaseShapes: Dynamsoft.DCE.DrawingItem -}; -await reader.setImageSource(enhancer, options); -reader.onImageRead = (results) => { - if (results.length > 0) { - results.forEach(result => { - console.log(result.barcodeText); - }); - } -}; -await reader.startScanning(true); -``` - -### See Also - -* [TextResult](./interface/TextResult.md) -* [onUniqueRead](#onUniqueRead) - -## startScanning - -Open the camera and starts continuous scanning of incoming images. - -```typescript -startScanning(appendOrShowUI?: boolean): Promise; -``` - -### Parameters - -`appendOrShowUI` : this parameter specifies how to handle the UI that comes with the bound `CameraEnhancer` instance. When set to true, if the UI doesn't exist in the DOM tree, the `CameraEnhancer` instance will append it in the DOM and show it; if the UI already exists in the DOM tree but is hidden, it'll be displayed. When not set or set to false, it means not to change the original state of that UI: if it doesn't exist in the DOM tree, nothing shows up on the page; if it exists in the DOM tree, it may or may not show up depending on its original state. - -### Return Value - -A promise resolving to a `ScannerPlayCallbackInfo` object which contains the resolution of the video. - -### Code Snippet - -```js -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -let enhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(); -let options = { - resultsHighlightBaseShapes: Dynamsoft.DCE.DrawingItem -}; -await reader.setImageSource(enhancer, options); -reader.onUniqueRead = (txt, result) => { - console.log(txt); -} -await reader.startScanning(true); -``` - -### See Also - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) -* [stopScanning](#stopScanning) -* [pauseScanning](#pauseScanning) -* [resumeScannig](#resumeScannig) - -## pauseScanning - -Pause continuous scanning but keep the video stream. - -```typescript -pauseScanning(options?: object): void; -``` - -### Parameters - -`options`: options to configure how the pause works. At present, it only contains one property `keepResultsHighlighted` which, when set to **true**, will keep the barcodes found on the frame (at the time of the pause) highlighted. - -### See Also - -* [resumeScanning](#resumeScanning) - -## resumeScanning - -Resumes continuous scanning. - -```typescript -resumeScanning(): void; -``` - -### See Also - -* [pauseScanning](#pauseScanning) - -## stopScanning - -Stops continuous scanning and closes the video stream. - -```typescript -stopScanning(hideUI?: boolean): void; -``` - -### Parameters - -`hideUI` : this parameter specifies how to handle the UI that comes with the bound `CameraEnhancer` instance. When set to true, if the UI doesn't exist in the DOM tree or it exists but is hidden, nothing is done; if the UI already exists in the DOM tree and is shown, it'll be hidden. When not set or set to false, it means not to change the original state of that UI: if it doesn't exist in the DOM tree, nothing happens; if it exists in the DOM tree, it may or may not be hidden depending on its original state. - -### Code Snippet - -```js -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -let enhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(); -let options = { - resultsHighlightBaseShapes: Dynamsoft.DCE.DrawingItem -}; -await reader.setImageSource(enhancer, options); -reader.onUniqueRead = (txt, result) => { - console.log(txt); - reader.stopScanning(true); -} -await reader.startScanning(true); -``` - -### See Also - -* [startScanning](#startScanning) -* [pauseScanning](#pauseScanning) -* [resumeScannig](#resumeScannig) - -## getScanSettings - -Returns the current scan settings. - -```typescript -getScanSettings(): Promise -``` - -### Return Value - -A promise resolving to a `ScanSettings` . - -### Code Snippet - -```js -let scanSettings = await reader.getScanSettings(); -scanSettings.intervalTime = 50; -scanSettings.duplicateForgetTime = 1000; -await reader.updateScanSettings(scanSettings); -``` - -### See Also - -* [ScanSettings](./interface/ScanSettings.md) -* [updateScanSettings](#updateScanSettings) - -## updateScanSettings - -Changes scan settings with the object passed in. - -```typescript -updateScanSettings(settings: ScanSettings): Promise -``` - -### Parameters - -`settings` : specifies the new scan settings. - -### Return Value - -A promise that resolves when the operation succeeds. - -### Code Snippet - -```js -let scanSettings = await reader.getScanSettings(); -scanSettings.intervalTime = 50; -scanSettings.duplicateForgetTime = 1000; -await reader.updateScanSettings(scanSettings); -``` - -### See Also - -* [ScanSettings](./interface/ScanSettings.md) -* [getScanSettings](#getScanSettings) \ No newline at end of file diff --git a/programming-old/javascript/api-reference/BarcodeReader/accessors.md b/programming-old/javascript/api-reference/BarcodeReader/accessors.md deleted file mode 100644 index 452c7e86..00000000 --- a/programming-old/javascript/api-reference/BarcodeReader/accessors.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -layout: default-layout -title: BarcodeReader Accessors - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows BarcodeReader Accessors of Dynamsoft Barcode Reader JavaScript SDK. -keywords: engineResourcePath, productKeys, version, accessors, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: false -permalink: /programming/javascript/api-reference/BarcodeReader/accessors.html ---- - - -> This page is applicable to version 8.2.3 - -# Javascript API Reference - `BarcodeReader` Accessors - -| Accessors | Description | -|----------------------|-------------| -| [engineResourcePath](#engineresourcepath) | Get or set the engine (WASM) location. | -| [productKeys](#productkeys) | Get or set the Dynamsoft Barcode Reader SDK product keys. | -| [version](#version) | Get current version. | - ---- - -## engineResourcePath - -Get or set the Barcode Reader SDK engine path. The path should lead to a folder containing the distributed JS and WASM files. - -```javascript -engineResourcePath = value -``` - -#### Property Value - -`value` *string* - -#### Sample - -```javascript -Dynamsoft.BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@7.4.0-v1/dist/"; - -await Dynamsoft.BarcodeReader.loadWasm(); -``` - -## productKeys - -Get or set the Barcode Reader SDK product key. Please visit our [user portal](https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js) to obtain a trial license. - -### get - -```javascript -productKeys = keys -``` - -#### Property Value - -`keys` *string* - -#### Sample - -```javascript - -``` - -## version - -Get the currently used version of Barcode Reader SDK. - -```javascript -version returns string -``` - -#### Return Value - -`string` diff --git a/programming-old/javascript/api-reference/BarcodeReader/index.md b/programming-old/javascript/api-reference/BarcodeReader/index.md deleted file mode 100644 index 29fa83d9..00000000 --- a/programming-old/javascript/api-reference/BarcodeReader/index.md +++ /dev/null @@ -1,72 +0,0 @@ ---- -layout: default-layout -title: BarcodeReader Index Page - Dynamsoft Barcode Reader JavaScript Edition API -description: Get started with barcode reading from images using this API reference guide containing an index for essential barcode reading functionality in Javascript. -keywords: BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -breadcrumbText: BarcodeReader -permalink: /programming/javascript/api-reference/BarcodeReader/index.html ---- - - -> This page is applicable to version 8.2.3 - -# Dynamsoft Barcode Reader SDK - Javascript BarcodeReader Class - -The `BarcodeReader` class is used for **image** decoding. - -## `BarcodeReader` Methods - -### Initialize and Destroy - -The following methods are related to initializing and destroying the `BarcodeReader` object. - -| Method | Description | -|----------------------|-------------| -| [createInstance()](methods/initialize-and-destroy.md#createinstance) | Create a `BarcodeReader` object. | -| [destroy()](methods/initialize-and-destroy.md#destroy) | Destroy the `BarcodeReader` object. | -| [detectEnvironment()](methods/initialize-and-destroy.md#detectenvironment) | Detect the current environment. | -| [isLoaded()](methods/initialize-and-destroy.md#isloaded) | Check if the decoding module is loaded. | -| [loadWasm()](methods/initialize-and-destroy.md#loadwasm) | Manually load and compile the decoding WASM module. | - -### Decode - -The following methods are related to decoding barcodes. - -| Method | Description | -|----------------------|-------------| -| [decode()](methods/decode.md#decode) | Decode barcodes from images, binary data, URLs, and more. | -| [decodeBase64String()](methods/decode.md#decodebase64string) | Decode barcodes from a base64 encoded string. | -| [decodeBuffer()](methods/decode.md#decodebuffer) | Decode barcodes from raw buffer. | -| [decodeUrl()](methods/decode.md#decodeurl) | Decode barcodes from a URL. | - -### Parameter and Runtime Settings - -The following methods are related to customizing mode and runtime settings. - -| Method | Description | -|----------------------|-------------| -| [getModeArgument()](methods/parameter-and-runtime-settings.md#getmodeargument) | Get argument value for the specified mode parameter. | -| [setModeArgument()](methods/parameter-and-runtime-settings.md#setmodeargument) | Set argument value for the specified mode parameter. | -| [getRuntimeSettings()](methods/parameter-and-runtime-settings.md#getruntimesettings) | Get current runtime settings. | -| [resetRuntimeSettings()](methods/parameter-and-runtime-settings.md#resetruntimesettings) | Reset runtime settings to default. | -| [updateRuntimeSettings()](methods/parameter-and-runtime-settings.md#updateruntimesettings) | Modify and update the current runtime settings. | - -## `BarcodeReader` Properties - -| Property | Description | -|----------------------|-------------| -| [_bUseFullFeature](properties.md#_busefullfeature) | If set to `false`, use the compact-featured WASM module. | -| `bDestroyed` | Indicates whether a `BarcodeScanner` object has been destroyed. | -| `bSaveOriCanvas` | If set to `true`, save the original image to canvas. | -| `oriCanvas` | The original canvas element. | - - -## `BarcodeReader` Accessors - -| Accessors | Description | -|----------------------|-------------| -| [engineResourcePath](accessors.md#engineresourcepath) | Get or set the engine (WASM) location. | -| [productKeys](accessors.md#productkeys) | Get or set the Dynamsoft Barcode Reader SDK product keys. | -| [version](accessors.md#version) | Get current version. | - diff --git a/programming-old/javascript/api-reference/BarcodeReader/methods/decode.md b/programming-old/javascript/api-reference/BarcodeReader/methods/decode.md deleted file mode 100644 index 68643abd..00000000 --- a/programming-old/javascript/api-reference/BarcodeReader/methods/decode.md +++ /dev/null @@ -1,111 +0,0 @@ ---- -layout: default-layout -title: BarcodeReader Decode Methods - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows BarcodeReader Decode methods of Dynamsoft Barcode Reader JavaScript SDK. -keywords: decode, decodeBase64String, decodeBuffer, decodeUrl, decode methods, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: false -permalink: /programming/javascript/api-reference/BarcodeReader/methods/decode.html ---- - - - -> This page is applicable to version 8.2.3 - -# Javascript API Reference - `BarcodeReader` Decode Methods - -| Method | Description | -|----------------------|-------------| -| [decode()](#decode) | Decode barcodes from images, binary data, URLs, and more. | -| [decodeBase64String()](#decodebase64string) | Decode barcodes from a base64 encoded string. | -| [decodeBuffer()](#decodebuffer) | Decode barcodes from raw buffer. | -| [decodeUrl()](#decodeurl) | Decode barcodes from a URL. | - ---- - -## decode - -Decode barcodes from various sources, including binary data, images, base64 (with MIME type), URLs, etc. - -```javascript -decode(source) returns Promise -``` - -### Parameters - -`source` *Blob | Buffer | ArrayBuffer | Uint8Array | Uint8ClampedArray | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | string* - -### Return Value - -Promise<[TextResult[]](../../global-interfaces.md#textresult)> - -### Sample - -[Read barcodes from live camera](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html) - -## decodeBase64String - -Decode barcodes from a base64 string with or without MIME type. For example, with MIME type specified: `data:image/jpg;base64,Xfjshekk...` and without: `Xfjshekk....` - -```javascript -decodeBase64String(base64) returns Promise -``` - -### Parameters - -`base64` *string* - -### Return Value - -Promise<[TextResult[]](../../global-interfaces.md#textresult)> - - -### Sample - -[Read barcodes from live camera](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html) - -## decodeBuffer - -Decode barcodes from raw buffer. - -```javascript -decodeBuffer(buffer, width, height, stride, format, config) returns Promise -``` - -### Parameters - -`buffer` *Uint8Array | Uint8ClampedArray | ArrayBuffer | Blob | Buffer* -`width` *number* -`height` *number* -`stride` *number* -`format` *[EnumImagePixelFormat]({{ site.enumerations }}other-enums.html#imagepixelformat)* -`config`optional *any* - -### Return Value - -`Promise` - -### Sample - -[Read barcodes from live camera](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html) - -## decodeUrl - -Decode barcodes from URLs. The URL source must be in the same domain or allows Cross-Origin Resource Sharing (CORS). - -```javascript -decodeUrl(url) returns Promise -``` - -### Parameters - -`url` *string* - -### Return Value - -Promise<[TextResult[]](../../global-interfaces.md#textresult)> - -### Sample - -[Read barcodes from live camera](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html) - diff --git a/programming-old/javascript/api-reference/BarcodeReader/methods/index.md b/programming-old/javascript/api-reference/BarcodeReader/methods/index.md deleted file mode 100644 index 14fee575..00000000 --- a/programming-old/javascript/api-reference/BarcodeReader/methods/index.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -layout: default-layout -title: BarcodeReader Methods Index - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows BarcodeReader methods of Dynamsoft Barcode Reader JavaScript SDK. -keywords: methods, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -breadcrumbText: Methods -permalink: /programming/javascript/api-reference/BarcodeReader/methods/index.html ---- - - -> This page is applicable to version 8.2.3 - -# Dynamsoft Barcode Reader SDK - Javascript BarcodeReader Methods - -## Initialize and Destroy - -The following methods are related to initializing and destroying the `BarcodeReader` object. - -| Method | Description | -|----------------------|-------------| -| [createInstance()](initialize-and-destroy.md#createinstance) | Create a `BarcodeReader` object. | -| [destroy()](initialize-and-destroy.md#destroy) | Destroy the `BarcodeReader` object. | -| [detectEnvironment()](initialize-and-destroy.md#detectenvironment) | Detect the current environment. | -| [isLoaded()](initialize-and-destroy.md#isloaded) | Check if the decoding module is loaded. | -| [loadWasm()](initialize-and-destroy.md#loadwasm) | Manually load and compile the decoding WASM module. | - -## Decode - -The following methods are related to decoding barcodes. - -| Method | Description | -|----------------------|-------------| -| [decode()](decode.md#decode) | Decode barcodes from images, binary data, URLs, and more. | -| [decodeBase64String()](decode.md#decodebase64string) | Decode barcodes from a base64 encoded string. | -| [decodeBuffer()](decode.md#decodebuffer) | Decode barcodes from raw buffer. | -| [decodeUrl()](decode.md#decodeurl) | Decode barcodes from a URL. | - -## Parameter and Runtime Settings - -The following methods are related to customizing mode and runtime settings. - -| Method | Description | -|----------------------|-------------| -| [getModeArgument()](parameter-and-runtime-settings.md#getmodeargument) | Get argument value for the specified mode parameter. | -| [setModeArgument()](parameter-and-runtime-settings.md#setmodeargument) | Set argument value for the specified mode parameter. | -| [getRuntimeSettings()](parameter-and-runtime-settings.md#getruntimesettings) | Get current runtime settings. | -| [resetRuntimeSettings()](parameter-and-runtime-settings.md#resetruntimesettings) | Reset runtime settings to default. | -| [updateRuntimeSettings()](parameter-and-runtime-settings.md#updateruntimesettings) | Modify and update the current runtime settings. | diff --git a/programming-old/javascript/api-reference/BarcodeReader/methods/initialize-and-destroy.md b/programming-old/javascript/api-reference/BarcodeReader/methods/initialize-and-destroy.md deleted file mode 100644 index 19a5fe3a..00000000 --- a/programming-old/javascript/api-reference/BarcodeReader/methods/initialize-and-destroy.md +++ /dev/null @@ -1,106 +0,0 @@ ---- -layout: default-layout -title: BarcodeReader Initialize and Destroy Methods - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows BarcodeReader Initialize and Destroy methods of Dynamsoft Barcode Reader JavaScript SDK. -keywords: createInstance, destroy, detectEnvironment, isLoaded, loadWasm, initialize and destroy methods, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: false -permalink: /programming/javascript/api-reference/BarcodeReader/methods/initialize-and-destroy.html ---- - - -> This page is applicable to version 8.2.3 - -# Javascript API Reference - `BarcodeReader` Initialize and Destroy Methods - -| Method | Description | -|----------------------|-------------| -| [createInstance()](#createinstance) | Create a `BarcodeReader` object. | -| [destroy()](#destroy) | Destroy the `BarcodeReader` object. | -| [detectEnvironment()](#detectenvironment) | Detect the current environment. | -| [isLoaded()](#isloaded) | Check if the decoding module is loaded. | -| [loadWasm()](#loadwasm) | Manually load and compile the decoding WASM module. | - ---- - -## createInstance - -Create a `BarcodeReader` object. - -```javascript -createInstance() returns Promise -``` - -### Return Value - -Promise<BarcodeReader> - -### Sample - -```javascript -let reader = await Dynamsoft.BarcodeReader.createInstance(); -``` - -[Read barcodes from live camera](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html) - -## destroy - -Destroy the `BarcodeReader` object. Equivalent to the previous method `deleteInstance()`. - -```javascript -destroy() returns Promise -``` - -### Return Value - -`Promise` - -## detectEnvironment - -Detect the current device environment. - -```javascript -detectEnvironment() returns Promise -``` - -### Return Value - -`Promise` - -### Sample - -[Read barcodes from live camera](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html) - -## isLoaded - -Check if the decoding module is loaded. - -```javascript -isLoaded() returns Boolean -``` - -### Return Value - -`Boolean` - -### Sample - -```javascript -Dynamsoft.BarcodeReader.isLoaded() -``` - -## loadWasm - -Manually load and compile the decoding module. This method can be used to preload the decoding module to avoid lengthy lazy loading. - -```javascript -loadWasm() returns Promise -``` - -### Return Value - -`Promise` - -### Sample - -[Read barcodes from live camera](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html) diff --git a/programming-old/javascript/api-reference/BarcodeReader/methods/parameter-and-runtime-settings.md b/programming-old/javascript/api-reference/BarcodeReader/methods/parameter-and-runtime-settings.md deleted file mode 100644 index 12b53c0c..00000000 --- a/programming-old/javascript/api-reference/BarcodeReader/methods/parameter-and-runtime-settings.md +++ /dev/null @@ -1,134 +0,0 @@ ---- -layout: default-layout -title: BarcodeReader Parameter and Runtime Settings Methods - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows BarcodeReader Parameter and Runtime Settings methods of Dynamsoft Barcode Reader JavaScript SDK. -keywords: getModeArgument, setModeArgument, getRuntimeSettings, resetRuntimeSettings, updateRuntimeSettings, parameter and runtime settings methods, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: false -permalink: /programming/javascript/api-reference/BarcodeReader/methods/parameter-and-runtime-settings.html ---- - - -> This page is applicable to version 8.2.3 - -# Javascript API Reference - `BarcodeReader` Parameter and Runtime Settings Methods - -| Method | Description | -|----------------------|-------------| -| [getModeArgument()](#getmodeargument) | Get argument value for the specified mode parameter. | -| [setModeArgument()](#setmodeargument) | Set argument value for the specified mode parameter. | -| [getRuntimeSettings()](#getruntimesettings) | Get current runtime settings. | -| [resetRuntimeSettings()](#resetruntimesettings) | Reset runtime settings to default. | -| [updateRuntimeSettings()](#updateruntimesettings) | Modify and update the current runtime settings. | - ---- - -## getModeArgument - -Get the argument value for the specified mode parameter. - -```javascript -getModeArgument(modeName, index, argumentName) returns Promise -``` - -### Parameters - -`modeName` *string* -`index` *number* -`argumentName` *string* - -### Return Value - -`Promise` - -### Sample - -[Read barcodes from live camera](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html) - -## setModeArgument - -Set the argument value for the specified mode parameter. - -```javascript -setModeArgument(modeName, index, argumentName, argumentValue) returns Promise -``` - -### Parameters - -- `modeName` *string* -- `index` *number* -- `argumentName` *string* -- `argumentValue` *string* - -### Return Value - -`Promise` - -### Sample - -```javascript -await reader.setModeArgument("BinarizationModes", 0, "EnableFillBinaryVacancy", "1"); -``` - -[Read barcodes from live camera](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html) - -## getRuntimeSettings - -Get the current runtime settings. - -```javascript -getRuntimeSettings() returns Promise -``` - -### Return Value - -Promise<[RuntimeSettings](../../global-interfaces.md#runtimesettings)> - - -### Sample - -[Read barcodes from live camera](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html) - -## resetRuntimeSettings - -Reset all runtime settings to default values. - -```javascript -resetRuntimeSettings() returns Promise -``` - -### Return Value - -`Promise` - -### Sample - -[Read barcodes from live camera](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html) - -## updateRuntimeSettings - -Update the runtime settings with a given object or use the string `speed`, `balance`, or `coverage` to use our preset settings for `BarcodeReader`. The default setting is `coverage`. - -```javascript -updateRuntimeSettings(settings) returns Promise -``` - -### Parameters - -`settings` [*RuntimeSettings*](../../global-interfaces.md#runtimesettings) | *string* - -### Return Value - -`Promise` - -### Sample - -```javascript -await reader.updateRuntimeSettings('balance'); -let settings = await reader.getRuntimeSettings(); -settings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_ONED; -await reader.updateRuntimeSettings(settings); -``` - -[Read barcodes from live camera](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html) - diff --git a/programming-old/javascript/api-reference/BarcodeReader/methods/results.md b/programming-old/javascript/api-reference/BarcodeReader/methods/results.md deleted file mode 100644 index f28552c7..00000000 --- a/programming-old/javascript/api-reference/BarcodeReader/methods/results.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -layout: default-layout -title: BarcodeReader Result Methods - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows BarcodeReader Result methods of Dynamsoft Barcode Reader JavaScript SDK. -keywords: getIntermediateResults, result methods, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: false -permalink: /programming/javascript/api-reference/BarcodeReader/methods/results.html ---- - - -> This page is applicable to version 8.2.3 - -# Javascript API Reference - `BarcodeReader` Result Methods - -| Method | Description | -|----------------------|-------------| -| [getIntermediateResults()](#getintermediateresults) | Get intermediate results. | - ---- - -## getIntermediateResults - -Get the intermediate results containing the original image, colour clustered image, binarized image, contours, lines, etc. - -The method is only supported in the **full feature edition**. - -```javascript -getIntermediateResults() returns Promise -``` - -### Return Value - -`Promise` - -### Sample - -[Read barcodes from live camera](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html) diff --git a/programming-old/javascript/api-reference/BarcodeReader/properties.md b/programming-old/javascript/api-reference/BarcodeReader/properties.md deleted file mode 100644 index 0892bc22..00000000 --- a/programming-old/javascript/api-reference/BarcodeReader/properties.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -layout: default-layout -title: BarcodeReader Properties - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows BarcodeReader Properties of Dynamsoft Barcode Reader JavaScript SDK. -keywords: _bUseFullFeature, bDestroyed, bSaveOriCanvas, oriCanvas, properties, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: false -permalink: /programming/javascript/api-reference/BarcodeReader/properties.html ---- - - -> This page is applicable to version 8.2.3 - -# Javascript API Reference - `BarcodeReader` Properties - -| Property | Description | -|----------------------|-------------| -| [_bUseFullFeature](#_busefullfeature) | If set to `false`, use the compact-featured WASM module. | -| `bDestroyed` | Indicates whether a `BarcodeReader` object has been destroyed. | -| `bSaveOriCanvas` | If set to `true`, save the original image to canvas. | -| `oriCanvas` | The original canvas element. | - ---- - -## _bUseFullFeature - -Set usage of compact or full featured SDK. If set to `false`, use the compact-featured WASM module. - -*Note: this API may change in the future.* - -```javascript -Dynamsoft.BarcodeReader._bUseFullFeature = Boolean -``` - -### Default Value - -`false` for web - -### Sample - -```javascript -Dynamsoft.BarcodeReader._bUseFullFeature = false; -await Dynamsoft.BarcodeReader.loadWasm(); -``` - -### :+1: Tips and Tricks - -* Check out [what features are included](../../user-guide/features-requirements.md#compact-and-full-editions) in compact and full version. -* This property **must** be set before [loadWasm](methods/initialize-and-destroy.md#loadwasm). -* We recommend using the compact version in video decoding for its small size and quick initialization. -* This property cannot be set in NodeJS and will always use the fully featured version. diff --git a/programming-old/javascript/api-reference/BarcodeScanner-v8.2.5.md b/programming-old/javascript/api-reference/BarcodeScanner-v8.2.5.md deleted file mode 100644 index ea4322e5..00000000 --- a/programming-old/javascript/api-reference/BarcodeScanner-v8.2.5.md +++ /dev/null @@ -1,943 +0,0 @@ ---- -layout: default-layout -title: v8.2.5 BarcodeScanner - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows the BarcodeScanner class of Dynamsoft Barcode Reader JavaScript SDK v 8.2.5. -keywords: BarcodeScanner, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -noTitleIndex: true -breadcrumbText: BarcodeScanner -permalink: /programming/javascript/api-reference/BarcodeScanner-v8.2.5.html ---- - - -# BarcodeScanner - -* `class` BarcodeScanner *extends [BarcodeReader](./BarcodeReader.md)* - -> The `BarcodeScanner` class is used for **video** decoding. -> `Node.js` does not support `BarcodeScanner`. -> ```js -> let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -> scanner.onUnduplicatedRead = txt => console.log(txt); -> await scanner.show(); -> ``` - -
    - -## Index - -> [**Initialize the Engine** *(Inherited from BarcodeReader)*](BarcodeReader.md#initialize-the-engine) -> -> | Static Property | Description | -> |----------------------|-------------| -> | [engineResourcePath *(BarcodeReader)*](BarcodeReader.md#engineresourcepath) | Specify the engine (WASM) url. | -> | [_bUseFullFeature *(BarcodeReader)*](BarcodeReader.md#_busefullfeature) | If set to `true`, use the full-featured WASM module. | -> -> | Static Method | Description | -> |----------------------|-------------| -> | [isLoaded *(BarcodeReader)*](BarcodeReader.md#isloaded) | Check if the decoding module is loaded. | -> | [loadWasm *(BarcodeReader)*](BarcodeReader.md#loadwasm) | Manually load and compile the decoding WASM module. | - -
    - -> [**Create and Destroy Instance**](#create-and-destroy-instance) -> -> | Property | Description | -> |----------------------|-------------| -> | [bDestroyed](#bdestroyed) | Indicates whether the `BarcodeScanner` instance has been destroyed. | -> -> | Static Method | Description | -> |----------------------|-------------| -> | [createInstance](#createinstance) | Create a `BarcodeScanner` instance. | -> -> | Method | Description | -> |----------------------|-------------| -> | [destroy](#destroy) | Destroy the `BarcodeScanner` instance. | - -
    - -> [**Decode Barcode**](#decode-barcode) -> -> | Event | Description | -> |----------------------|-------------| -> | [onUnduplicatedRead](#onunduplicatedread) | Triggered when a new, unduplicated barcode is found. | -> | [onFrameRead](#onframeread) | Triggered after a frame has been scanned. | -> -> | Method | Description | -> |----------------------|-------------| -> | [decodeCurrentFrame](#decodecurrentframe) | Decode barcodes from the current frame of the video. | - -
    - -> [**Open and Close**](#open-and-close) -> -> Changing the barcode decoding process will affect the speed and accuracy. -> -> | Method | Description | -> |----------------------|-------------| -> |[open](#open)|Bind UI, open the camera, start decoding.| -> |[close](#close)|Stop decoding, release camera, unbind UI.| -> |[show](#show)|Bind UI, open the camera, start decoding, and remove the `UIElement` `display` style if the original style is `display:none;`| -> |[hide](#hide)|Stop decoding, release camera, unbind UI, and set the Element as `display:none;`.| -> |[openVideo](#open)|Bind UI, open the camera, but not decode.| -> |[showVideo](#show)|Bind UI, open the camera, but not decode, and remove the UIElement `display` style if the original style is `display:none;`.| -> |[isOpen](#isopen)|Check if the scanner is open.| - -
    - -> [**Play and Pause**](#play-and-pause) -> -> Changing the barcode decoding process will affect the speed and accuracy. -> -> | Event | Description | -> |----------------------|-------------| -> | [onPlayed](#onplayed) | Triggered when the camera video stream is played. | -> -> | Method | Description | -> |----------------------|-------------| -> |[play](#play)|Continue the video.| -> |[pause](#pause)|Pause the video. Do not release the camera.| -> |[stop](#stop)|Stop the video, and release the camera.| -> |[pauseScan](#pausescan)|Pause the decoding process.| -> |[resumeScan](#resumescan)|Resume the decoding process.| - -
    - -> [**UI**](#ui) -> -> Changing the barcode decoding process will affect the speed and accuracy. -> -> | Property | Description | -> |----------------------|-------------| -> |[defaultUIElementURL](#defaultuielementurl)|The url of the default scanner UI.| -> |[regionMaskFillStyle](#regionmaskfillstyle)|Set the style used when filling the mask beyond the region.| -> |[regionMaskStrokeStyle](#regionmaskstrokestyle)|Set the style of the region border.| -> |[regionMaskLineWidth](#regionmasklinewidth)|Set the width of the region border.| -> |[barcodeFillStyle](#barcodefillstyle)|Set the style used when filling in located barcode.| -> |[barcodeStrokeStyle](#barcodestrokestyle)|Set the style of the located barcode border.| -> |[barcodeLineWidth](#barcodelinewidth)|Set the width of the located barcode border.| -> -> | Method | Description | -> |----------------------|-------------| -> |[getUIElement](#getuielement)|Get HTML element containing the `BarcodeScanner` instance.| -> |[setUIElement](#setuielement)|Set HTML element containing the `BarcodeScanner` instance.| - -
    - -> [**Camera Settings**](#camera-settings) -> -> Changing the barcode decoding process will affect the speed and accuracy. -> -> | Method | Description | -> |----------------------|-------------| -> |[getAllCameras](#getallcameras)|Get infomation of all available cameras on the device.| -> |[getCurrentCamera](#getcurrentcamera)|Get information about the currently used camera.| -> |[setCurrentCamera](#setcurrentcamera)|Choose the camera and play it by its information or devide id.| -> |[getResolution](#getresolution)|Get current camera resolution.| -> |[setResolution](#setresolution)|Set current camera resolution.| -> |[getVideoSettings](#getvideosettings)|Get current video settings.| -> |[updateVideoSettings](#updatevideosettings)|Modify and update video settings.| -> |[getCapabilities](#getcapabilities)|Get the camera capabilities.| -> |[turnOnTorch](#turnontorch)|Turn on the torch/flashlight.| -> |[turnOffTorch](#turnofftorch)|Turn off the torch/flashlight.| -> |[setColorTemperature](#setcolortemperature)|Adjusts the color temperature.| -> |[setExposureCompensation](#setexposurecompensation)|Adjusts the exposure level.| -> |[setZoom](#setzoom)|Adjusts the zoom ratio.| -> |[setFrameRate](#setframerate)|Adjusts the frame rate.| - -
    - -> [**Decoding Settings**](#decoding-settings) -> -> Changing the barcode decoding process will affect the speed and accuracy. -> -> | Method | Description | -> |----------------------|-------------| -> | [getRuntimeSettings](#getruntimesettings) | Get current runtime settings. | -> | [updateRuntimeSettings](#updateruntimesettings) | Modify and update the current runtime settings. | -> | [resetRuntimeSettings](#resetruntimesettings) | Reset runtime settings to default. | -> | [getModeArgument](#getmodeargument) | Get argument value for the specified mode parameter. | -> | [setModeArgument](#setmodeargument) | Set argument value for the specified mode parameter. | - -
    - -> [**License** *(Inherited from BarcodeReader)*](BarcodeReader.md#license) -> -> | Property | Description | -> |---------------------|-------------| -> | [productKeys *(BarcodeReader)*](BarcodeReader.md#productkeys) | Get or set the Dynamsoft Barcode Reader SDK product keys. | -> | [licenseServer *(BarcodeReader)*](BarcodeReader.md#licenseserver) | Specify the license server URL. | -> | [handshakeCode *(BarcodeReader)*](BarcodeReader.md#handshakecode) | Use Handshake Code to get authentication from network. | -> | [organizationID *(BarcodeReader)*](BarcodeReader.md#organizationid) | Use organization ID to get authentication from network. | -> | [sessionPassword *(BarcodeReader)*](BarcodeReader.md#sessionpassword) | Specify a password to protect the Handshake Code from abuse. | - -
    - -> [**Other**](#other) -> -> | Static Property | Description | -> |---------------------|-------------| -> | [version *(BarcodeReader)*](BarcodeReader.md#version) | Get the current version. | -> -> | Property | Description | -> |---------------------|-------------| -> | [bSaveOriCanvas](#bsaveoricanvas) | If set to `true`, save the original image in `oriCanvas`. | -> | [oriCanvas](#oricanvas) | An [canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas) object that holds the original image. | -> |[bPlaySoundOnSuccessfulRead](#bplaysoundonsuccessfulread)|Whether to play sound when the scanner reads a barcode successfully.| -> |[soundOnSuccessfullRead](#soundonsuccessfullread)|The sound to play when the scanner get successfull read.| -> |[bVibrateOnSuccessfulRead](#bvibrateonsuccessfulread)|Whether to vibrate when the scanner reads a barcode successfully.| -> |[vibrateDuration](#vibrateduration)|Get or set how long (ms) the vibration lasts.| -> -> | Static Method | Description | -> |----------------------|-------------| -> | [detectEnvironment *(BarcodeReader)*](BarcodeReader.md#detectenvironment) | Detect environment and get a report. | -> -> | Method | Description | -> |----------------------|-------------| -> | [getScanSettings](#getscansettings) | Get current scan settings. | -> | [updateScanSettings](#updatescansettings) | Modify and update scan settings. | - -
    - -## Create and Destroy Instance - -### bDestroyed - -* bDestroyed: *boolean* - -> Indicates whether the instance has been destroyed. - -
    - -### createInstance - -* `static` createInstance(): *Promise<[BarcodeScanner](#barcodescanner)>* - -> Create a `BarcodeScanner` instance. -> -> ```js -> let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -> ``` - -
    - -### destroy - -* destroy(): *Promise<void>* - -> Destroy the `BarcodeScanner` instance. If your page needs to create new instances from time to time, don't forget to destroy unused old instances, otherwise it will cause memory leaks. - -
    - -## Decode Barcode - -### onUnduplicatedRead - -* `event` onUnduplicatedRead?: *(txt: string, result: [TextResult](interface/TextResult.md)) => void* - -> This event is triggered when a new, unduplicated barcode is found. -> `txt` holds the barcode text string. `result` contains more info. -> Old barcodes will be remembered for [duplicateForgetTime](interface/ScanSettings.md). -> -> ```js -> scanner.onUnduplicatedRead = (txt, result) => { -> alert(txt); -> console.log(result); -> } -> ``` - -
    - -### onFrameRead - -* `event` onFrameRead?: *(results: [TextResult](interface/TextResult.md)[]) => void* - -> The event is triggered after a frame has been scanned. -> The results object contains all the barcode results in this frame. -> -> ```js -> scanner.onFrameRead = results => { -> for(let result of results){ -> console.log(result.barcodeText); -> } -> }; -> ``` - -
    - -### decodeCurrentFrame - -* decodeCurrentFrame(): *Promise<[TextResult](interface/TextResult.md)[]>* - -> Decode barcodes from the current frame of the video. -> -> ```js -> await scanner.showVideo(); -> console.log(await scanner.decodeCurrentFrame()); -> ``` - -## Open and Close - -### open - -* open(): *Promise<[ScannerPlayCallbackInfo](interface/ScannerPlayCallbackInfo.md)>* - -> Bind UI, open the camera, start decoding. -> -> ```js -> await scanner.setUIElement(document.getElementById("my-barcode-scanner")); -> scanner.onUnduplicatedRead = (txt, result) => { alert(txt); console.log(result); }; -> await scanner.open(); -> ``` -> -> *@see* [show](#show) - -
    - -### close - -* close(): *Promise<void>* - -> Stop decoding, release camera, unbind UI. -> -> ```js -> await scanner.open(); -> await scanner.close(); -> -> await scanner.openVideo(); -> await scanner.close(); -> ``` - -
    - -### show - -* show(): *Promise<[ScannerPlayCallbackInfo](interface/ScannerPlayCallbackInfo.md)>* - -> Bind UI, open the camera, start decoding, and remove the UIElement `display` style if the original style is `display:none;`. -> -> ```js -> await scanner.setUIElement("https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.2.5/dist/dbr.scanner.html"); -> scanner.onUnduplicatedRead = (txt, result) => { alert(txt); console.log(result); }; -> await scanner.show(); -> ``` - -
    - -### hide - -* hide(): *Promise<void>* - -> Stop decoding, release camera, unbind UI. -> -> ```js -> await scanner.open(); -> await scanner.hide(); -> -> await scanner.openVideo(); -> await scanner.hide(); -> ``` - -
    - -### openVideo - -* openVideo(): *Promise<[ScannerPlayCallbackInfo](interface/ScannerPlayCallbackInfo.md)>* - -> Bind UI, open the camera, but not decode. -> -> ```js -> await scanner.setUIElement(document.getElementById("my-barcode-scanner")); -> await scanner.openVideo(); -> console.log(await scanner.decodeCurrentFrame()); -> ``` - -
    - -### showVideo - -* showVideo(): *Promise<[ScannerPlayCallbackInfo](interface/ScannerPlayCallbackInfo.md)>* - -> Bind UI, open the camera, but not decode. -> -> ```js -> await scanner.setUIElement("https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.2.5/dist/dbr.scanner.html"); -> await scanner.showVideo(); -> console.log(await scanner.decodeCurrentFrame()); -> ``` - -
    - -### isOpen - -* isOpen(): *boolean* - -> Check if the scanner is open. - -
    - -## Play and Pause - -### onPlayed - -* `event` onPlayed?: *(info: [ScannerPlayCallbackInfo](interface/ScannerPlayCallbackInfo.md)) => void* - -> Triggered when the camera video stream is played. -> -> ```js -> scanner.onplayed = rsl=>{ console.log(rsl.width+'x'+rsl.height) }; -> await scanner.show(); // or open, play, setCurrentCamera, like these. -> ``` - -
    - -### play - -* play(deviceId?: *string*, width?: *number*, height?: *number*): *Promise<[ScannerPlayCallbackInfo](interface/ScannerPlayCallbackInfo.md)>* - -> Continue the video. -> -> ```js -> scanner.pause(); -> \\*** a lot of work *** -> await scanner.play(); -> ``` - -
    - -### pause - -* pause(): *void* - -> Pause the video. Do not release the camera. - -
    - -### stop - -* stop(): *void* - -> Stop the video, and release the camera. - -
    - -### pauseScan - -* pauseScan(): *void* - -> Pause the decoding process. - -
    - -### resumeScan - -* resumeScan(): *void* - -> Resume the decoding process. - -
    - -## UI - -### defaultUIElementURL - -* `static` defaultUIElementURL: *string* - -> The url of the default scanner UI. -> -> Can only be changed before [createInstance](#createinstance). -> -> ```js -> Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.2.5/dist/dbr.scanner.html"; -> let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -> await scanner.show(); -> ``` - -
    - -### regionMaskFillStyle - -* regionMaskFillStyle: *string = "rgba(0,0,0,0.5)"* - -> Set the style used when filling the mask beyond the region. - -
    - -### regionMaskStrokeStyle - -* regionMaskStrokeStyle: *string = "rgb(254,142,20)"* - -> Set the style of the region border. - -
    - -### regionMaskLineWidth - -* regionMaskLineWidth: *number = 2* - -> Set the style used when filling in located barcode. - -
    - -### barcodeFillStyle - -* barcodeFillStyle: *string = "rgba(254,180,32,0.3)"* - -> Set the style used when filling in located barcode. - -
    - -### barcodeStrokeStyle - -* barcodeStrokeStyle: *string = "rgba(254,180,32,0.9)"* - -> Set the style of the located barcode border. - -
    - -### barcodeLineWidth - -* barcodeLineWidth: *number = 1* - -> Set the width of the located barcode border. - -
    - -### getUIElement - -* getUIElement(): *HTMLElement* - -> Get HTML element containing the [BarcodeScanner](#barcodescanner) instance. - -
    - -### setUIElement - -* setUIElement(elementOrUrl: *HTMLElement | string*): *Promise<void>* - -> Set html element containing the `BarcodeScanner` instance. -> -> ```html -> -> -> ``` -> -> ```html -> -> -> ``` - -
    - -## Camera Settings - -### getAllCameras - -* getAllCameras(): *Promise<[VideoDeviceInfo](interface/VideoDeviceInfo.md)[]>* - -> Get infomation of all available cameras on the device. -> -> ```js -> let cameras = await scanner.getAllCameras(); -> if(cameras.length){ -> await scanner.setCurrentCamera(cameras[0]); -> } -> ``` - -
    - -### getCurrentCamera - -* getCurrentCamera(): *Promise<[VideoDeviceInfo](interface/VideoDeviceInfo.md) | null>* - -> Get information about the currently used camera. -> -> ```js -> let camera = await scanner.getCurrentCamera(); -> ``` - -
    - -### setCurrentCamera - -* setCurrentCamera(cameraInfoOrDeviceId: *any*): *Promise<[ScannerPlayCallbackInfo](interface/ScannerPlayCallbackInfo.md)>* - -> Choose the camera and play it by its information or devide id. -> -> ```js -> let cameras = await scanner.getAllCameras(); -> if(cameras.length){ -> await scanner.setCurrentCamera(cameras[0]); -> } -> ``` - -
    - -### getResolution - -* getResolution(): *number[]* - -> Get current camera resolution. -> -> ```js -> let rsl = await scanner.getResolution(); -> console.log(rsl.width + " x " + rsl.height); -> ``` - -
    - -### setResolution - -* setResolution(width: *number | number[]*, height: *number*) - -> Set current camera resolution. -> ```js -> await scanner.setResolution(width, height); -> ``` - -
    - -### getVideoSettings - -* getVideoSettings(): *[MediaStreamConstraints](https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints)* - -> Get current video settings. - -
    - -### updateVideoSettings - -* updateVideoSettings([MediaStreamConstraints](https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints): *any*): *Promise<[ScannerPlayCallbackInfo](interface/ScannerPlayCallbackInfo.md) | void>* - -> Modify and update video settings. -> -> ```js -> await scanner.updateVideoSettings({ video: {width: {ideal: 1280}, height: {ideal: 720}, facingMode: {ideal: 'environment'}} }); -> ``` - -
    - -### getCapabilities - -* getCapabilities(): *[MediaTrackCapabilities](https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/getCapabilities)* - -> Gets the camera capabilities. -> -> This method should be called when the camera is turned on. Note that it only works with Chromium-based browsers such as Edge and Chrome on Windows or Android. Other browsers such as Firefox or Safari are not supported. Note that all browsers on iOS (including Chrome) use WebKit as the rendering engine and are not supported. -> -> ```console -> > scanner.getCapabilities() -> < { -> "aspectRatio":{"max":3840,"min":0.000462962962962963}, -> "colorTemperature":{max: 7000, min: 2850, step: 50}, -> "deviceId":"1e...3af7", -> "exposureCompensation": {max: 2.0000040531158447, min: -2.0000040531158447, step: 0.16666699945926666}, -> "exposureMode":["continuous","manual"], -> "facingMode":["environment"], -> "focusMode":["continuous","single-shot","manual"], -> "frameRate":{"max":30,"min":0}, -> "groupId":"71...a935", -> "height":{"max":2160,"min":1}, -> "resizeMode":["none","crop-and-scale"], -> "torch":true, -> "whiteBalanceMode":["continuous","manual"], -> "width":{"max":3840,"min":1}, -> "zoom":{max: 606, min: 100, step: 2} -> } -> ``` - -
    - -### turnOnTorch - -* turnOnTorch(): *Promise<void>* - -> Turns off the Torch. -> -> This method should be called when the camera is turned on. Note that it only works with Chromium-based browsers such as Edge and Chrome on Windows or Android. Other browsers such as Firefox or Safari are not supported. Note that all browsers on iOS (including Chrome) use WebKit as the rendering engine and are not supported. -> -> ```js -> await scanner.turnOnTorch(); -> ``` -> -> *@see* [turnOffTorch](#turnofftorch) [getCapabilities](#getcapabilities) - -
    - -### turnOffTorch - -* turnOffTorch(): *Promise<void>* - -> Turns off the torch. -> -> This method should be called when the camera is turned on. Note that it only works with Chromium-based browsers such as Edge and Chrome on Windows or Android. Other browsers such as Firefox or Safari are not supported. Note that all browsers on iOS (including Chrome) use WebKit as the rendering engine and are not supported. -> -> ```js -> await scanner.turnOffTorch(); -> ``` -> -> *@see* [turnOnTorch](#turnontorch) [getCapabilities](#getcapabilities) - -
    - -### setColorTemperature - -* setColorTemperature(value: *number*): *Promise<void>* - -> Adjusts the color temperature. -> -> This method should be called when the camera is turned on. Note that it only works with Chromium-based browsers such as Edge and Chrome on Windows or Android. Other browsers such as Firefox or Safari are not supported. Note that all browsers on iOS (including Chrome) use WebKit as the rendering engine and are not supported. -> -> ```js -> await scanner.setColorTemperature(5000); -> ``` -> -> *@see* [getCapabilities](#getcapabilities) - -
    - -### setExposureCompensation - -* setExposureCompensation(value: *number*): *Promise<void>* - -> Adjusts the exposure level. -> -> This method should be called when the camera is turned on. Note that it only works with Chromium-based browsers such as Edge and Chrome on Windows or Android. Other browsers such as Firefox or Safari are not supported. Note that all browsers on iOS (including Chrome) use WebKit as the rendering engine and are not supported. -> -> ```js -> await scanner.setExposureCompensation(-0.7); -> ``` -> -> *@see* [getCapabilities](#getcapabilities) - -
    - -### setZoom - -* setZoom(value: *number*): *Promise<void>* - -> Adjusts the zoom ratio. -> -> This method should be called when the camera is turned on. Note that it only works with Chromium-based browsers such as Edge and Chrome on Windows or Android. Other browsers such as Firefox or Safari are not supported. Note that all browsers on iOS (including Chrome) use WebKit as the rendering engine and are not supported. -> -> ```js -> await scanner.setZoom(400); -> ``` -> -> *@see* [getCapabilities](#getcapabilities) - -
    - -### setFrameRate - -* setFrameRate(value: *number*): *Promise<void>* - -> Adjusts the frame rate. -> -> This method should be called when the camera is turned on. Note that it only works with Chromium-based browsers such as Edge and Chrome on Windows or Android. Other browsers such as Firefox or Safari are not supported. Note that all browsers on iOS (including Chrome) use WebKit as the rendering engine and are not supported. -> -> ```js -> await scanner.setFrameRate(10); -> ``` -> -> *@see* [getCapabilities](#getcapabilities) - -
    - -## Decoding Settings - -### getRuntimeSettings - -* getRuntimeSettings(): *Promise<[RuntimeSettings](interface/RuntimeSettings.md)>* - -> Gets current runtime settings. -> ```js -> let settings = await scanner.getRuntimeSettings(); -> settings.deblurLevel = 5; -> await scanner.updateRuntimeSettings(settings); -> ``` - -
    - -### updateRuntimeSettings - -* updateRuntimeSettings(settings: *[RuntimeSettings](interface/RuntimeSettings.md) | string*): *Promise<void>* - -> Update runtime settings with a given struct, or a string of `speed`, `balance`, `coverage` and `single` to use preset settings for BarcodeScanner. -> -> We recommend using the speed-optimized `single` preset if scanning only one barcode at a time. The `single` is only available in `BarcodeScanner`. -> -> The default settings for BarcodeScanner is `single`. -> -> ```js -> await scanner.updateRuntimeSettings('balance'); -> let settings = await scanner.getRuntimeSettings(); -> settings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_ONED; -> await scanner.updateRuntimeSettings(settings); -> ``` -> *@see* [RuntimeSettings](interface/RuntimeSettings.md) - -
    - -### resetRuntimeSettings - -* resetRuntimeSettings(): *Promise<void>* - -> Resets all parameters to default values. -> ```js -> await scanner.resetRuntimeSettings(); -> ``` - -
    - -### getModeArgument - -* getModeArgument(modeName: *string*, index: *number*, argumentName: *string*): *Promise<string>* - -> Get argument value for the specified mode parameter. -> -> ```js -> let argumentValue = await scanner.getModeArgument("BinarizationModes", 0, "EnableFillBinaryVacancy"); -> ``` -> -> *@see* [C++ getModeArgument](https://www.dynamsoft.com/barcode-reader/programming/cplusplus/api-reference/cbarcodereader-methods/parameter-and-runtime-settings-basic.html?ver=latest#getmodeargument) - -
    - -### setModeArgument - -* setModeArgument(modeName: *string*, index: *number*, argumentName: *string*, argumentValue: *string*): *Promise<string>* - -> Set argument value for the specified mode parameter. -> -> ```js -> await scanner.setModeArgument("BinarizationModes", 0, "EnableFillBinaryVacancy", "1"); -> ``` -> -> *@see* [C++ setModeArgument](https://www.dynamsoft.com/barcode-reader/programming/cplusplus/api-reference/cbarcodereader-methods/parameter-and-runtime-settings-basic.html?ver=latest#setmodeargument) - -
    - -## Other - -### bSaveOriCanvas - -* bSaveOriCanvas: *boolean* = false; - -> Whether to save the original image into canvas. -> ```js -> scanner.bSaveOriCanvas = true; -> let results = await scanner.decode(source); -> document.body.append(scanner.oriCanvas); -> ``` - -
    - -### oriCanvas - -* `readonly` oriCanvas: *[HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) | [OffscreenCanvas](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas)* - -> An [canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas) object that holds the original image. -> ```js -> scanner.bSaveOriCanvas = true; -> let results = await scanner.decode(source); -> document.body.append(scanner.oriCanvas); -> ``` - -
    - -### bPlaySoundOnSuccessfulRead - -* bPlaySoundOnSuccessfulRead: *(boolean | string) = false*; - -> Whether to play sound when the scanner reads a barcode successfully. -> Default value is `false`, which does not play sound. -> Use `frame` or `true` to play a sound when any barcode is found within a frame. -> Use `unduplicated` to play a sound only when any unique/unduplicated barcode is found within a frame. -> ```js -> // A user gesture required. https://developer.chrome.com/blog/autoplay/#chrome-enterprise-policies -> startPlayButton.addEventListener('click', function() { -> scanner.bPlaySoundOnSuccessfulRead = true; -> }); -> ``` -> refer: `favicon bug` https://bugs.chromium.org/p/chromium/issues/detail?id=1069731&q=favicon&can=2 - -
    - -### soundOnSuccessfullRead - -* soundOnSuccessfullRead: [HTMLAudioElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement) - -> The sound to play when the scanner get successfull read. -> ```js -> scanner.soundOnSuccessfullRead = new Audio("./pi.mp3"); -> ``` - -
    - -### bVibrateOnSuccessfulRead - -* bVibrateOnSuccessfulRead: *(boolean | string) = false* - -> Whether to vibrate when the scanner reads a barcode successfully. -> Default value is `false`, which does not vibrate. -> Use `frame` or `true` to vibrate when any barcode is found within a frame. -> Use `unduplicated` to vibrate only when any unique/unduplicated barcode is found within a frame. -> ```js -> // Can I use? https://caniuse.com/?search=vibrate -> // A user gesture required. https://developer.chrome.com/blog/autoplay/#chrome-enterprise-policies -> startVibrateButton.addEventListener('click', function() { -> scanner.bVibrateOnSuccessfulRead = true; -> }); -> ``` - -
    - -### vibrateDuration - -* vibrateDuration: *number = 300* - -> Get or set how long (ms) the vibration lasts. -> -> *@see* [bVibrateOnSuccessfulRead](#bvibrateonsuccessfulread) - -
    - -### getScanSettings - -* getScanSettings(): *Promise<[ScanSettings](interface/ScanSettings.md)>* - -> Get current scan settings. -> ```js -> let scanSettings = await scanner.getScanSettings(); -> scanSettings.intervalTime = 50; -> scanSettings.duplicateForgetTime = 1000; -> await scanner.updateScanSettings(scanSettings); -> ``` - -
    - -### updateScanSettings - -* updateScanSettings(settings: *[ScanSettings](interface/ScanSettings.md)*): *Promise<void>* - -> Modify and update scan settings. -> ```js -> let scanSettings = await scanner.getScanSettings(); -> scanSettings.intervalTime = 50; -> scanSettings.duplicateForgetTime = 1000; -> await scanner.updateScanSettings(scanSettings); -> ``` - -
    - - diff --git a/programming-old/javascript/api-reference/BarcodeScanner-v8.4.0.md b/programming-old/javascript/api-reference/BarcodeScanner-v8.4.0.md deleted file mode 100644 index 339548e9..00000000 --- a/programming-old/javascript/api-reference/BarcodeScanner-v8.4.0.md +++ /dev/null @@ -1,1309 +0,0 @@ ---- -layout: default-layout -title: v8.4.0 BarcodeScanner - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows the BarcodeScanner class of Dynamsoft Barcode Reader JavaScript SDK v8.4.0. -keywords: BarcodeScanner, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -noTitleIndex: true -breadcrumbText: BarcodeScanner -permalink: /programming/javascript/api-reference/BarcodeScanner-v8.4.0.html ---- - -# BarcodeScanner for Video - -A barcode scanner object gets access to a camera via the [MediaDevices](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices) interface, then uses its built-in UI to show the camera input and perform continuous barcode scanning on the incoming frames. - -The default built-in UI of each barcode scanner is defined in the file "dbr.scanner.html". If used directly, the UI will fit the entire page and sit on top. There are a few ways to customize it, read more on how to [Customize the UI](../user-guide/#customize-the-ui). - -Although a barcode scanner is designed to scan barcodes from a video input, it also supports a special mode called [singleFrameMode](#singleframemode) which allows the user to select a still image or take a shot with the mobile camera for barcode scanning. - -The `BarcodeScanner` is a child class of [BarcodeReader](./BarcodeReader.md) and inherits all its methods and properties which will not be covered in this article. - -The following code snippet shows the basic usage of the `BarcodeScanner` class. - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -scanner.onUnduplicatedRead = txt => console.log(txt); -await scanner.show(); -``` - - - -## API Index - -### Create and Destroy Instances - -| API Name | Description | -|---|---| -| [createInstance](#createinstance) | Creates a `BarcodeScanner` instance. | -| [destroy](#destroy) | Destroys the `BarcodeScanner` instance. | -| [bDestroyed](#bdestroyed) | Indicates whether the instance has been destroyed. | - -### Decode Barcodes - -| API Name | Description | -|---|---| -| [onUnduplicatedRead](#onunduplicatedread) | This event is triggered when a new, unduplicated barcode is found. | -| [onFrameRead](#onframeread) | This event is triggered after the library finishes scanning a frame. | -| [decodeCurrentFrame](#decodecurrentframe) | Scans the current frame of the video for barcodes. | - -### Basic Interaction - -| API Name | Description | -|---|---| -| [show](#show) | Binds and shows UI, opens the camera and starts decoding. | -| [hide](#hide) | Stops decoding, releases camera and unbinds UI. | -| [pauseScan](#pausescan) | Pauses the decoding process. | -| [resumeScan](#resumescan) | Resumes the decoding process. | - -### Scan Settings - -| API Name | Description | -|---|---| -| [bPlaySoundOnSuccessfulRead](#bplaysoundonsuccessfulread) | Whether and when to play sound on barcode recognition. | -| [soundOnSuccessfullRead](#soundonsuccessfullread) | Specifies the sound to play on barcode recognition. | -| [bVibrateOnSuccessfulRead](#bvibrateonsuccessfulread) | Whether and when to vibrate on barcode recognition. | -| [vibrateDuration](#vibrateduration) | Returns or sets how long the vibration lastsin milliseconds. | -| [singleFrameMode](#singleframemode) | Returns or sets whether to enable the singe-frame mode. | | -| [getScanSettings](#getscansettings) | Returns the current scan settings. | -| [updateScanSettings](#updatescansettings) | Changes scan settings with the object passed in. | - -### UI Control - -| API Name | Description | -|---|---| -| [getUIElement](#getuielement) | Returns the HTML element that is used by the `BarcodeScanner` instance. | -| [setUIElement](#setuielement) | Specifies an HTML element for the `BarcodeScanner` instance to use as its UI. | -| [defaultUIElementURL](#defaultuielementurl) | Returns or sets the URL of the .html file that defines the default UI Element. | -| [barcodeFillStyle](#barcodefillstyle) | Specifies the color used inside the shape which highlights a found barcode. | -| [barcodeStrokeStyle](#barcodestrokestyle) | Specifies the color used to paint the outline of the shape which highlights a found barcode. | -| [barcodeLineWidth](#barcodelinewidth) | Specifies the line width of the outline of the shape which highlights a found barcode. | -| [regionMaskFillStyle](#regionmaskfillstyle) | Specifies the color used in the square-loop shape between the actual scanning area and the boundary of the video input. | -| [regionMaskStrokeStyle](#regionmaskstrokestyle) | Specifies the color used to paint the outline of the scanning region. | -| [regionMaskLineWidth](#regionmasklinewidth) | Specifies the width of the outline of the scanning region. | - -### Camera Control - -| API Name | Description | -|---|---| -| [getAllCameras](#getallcameras) | Returns infomation of all available cameras on the device. | -| [getCurrentCamera](#getcurrentcamera) | Returns information about the current camera. | -| [setCurrentCamera](#setcurrentcamera) | Chooses a camera as the video source. | -| [getResolution](#getresolution) | Returns the resolution of the current video input. | -| [setResolution](#setresolution) | Sets the resolution of the current video input. | -| [getVideoSettings](#getvideosettings) | Returns the current video settings. | -| [updateVideoSettings](#updatevideosettings) | Changes the video input. | -| [openVideo](#openvideo) | Binds UI and opens the camera to show the video stream. | -| [showVideo](#showvideo) | Similar to openVideo but will also show the UI Element if it is hidden. | -| [play](#play) | Play the video if it is already open but paused or stopped. | -| [onPlayed](#onplayed) | This event is triggered when the video stream starts playing. | -| [pause](#pause) | Pauses the video without releasing the camera. | -| [stop](#stop) | Stops the video and releases the camera. | - -### Advanced Camera Control - -| API Name | Description | -|---|---| -| [getCapabilities](#getcapabilities) | Inspects and returns the capabilities of the current camera. | -| [getCameraSettings](#getcamerasettings) | Returns the current values for each constrainable property of the current camera. | -| [setFrameRate](#setframerate) | Adjusts the frame rate. | -| [setColorTemperature](#setcolortemperature) | Adjusts the color temperature. | -| [setExposureCompensation](#setexposurecompensation) | Sets the exposure compensation index. | -| [setZoom](#setzoom) | Sets the exposure compensation index. | -| [turnOnTorch](#turnontorch) | Turns on the torch/flashlight. | -| [turnOffTorch](#turnofftorch) | Turns off the torch/flashlight. | - -The following are inherited from the `BarcodeReader` Class. - -### Change Settings - -| API Name | Description | -|---|---| -| [getRuntimeSettings](./BarcodeReader.md#getruntimesettings) | Returns the current runtime settings. | -| [updateRuntimeSettings](./BarcodeReader.md#updateruntimesettings) | Updates runtime settings with a given struct or a preset template. | -| [resetRuntimeSettings](./BarcodeReader.md#resetruntimesettings) | Resets all parameters to default values. | -| [getModeArgument](./BarcodeReader.md#getmodeargument) | Returns the argument value for the specified mode parameter. | -| [setModeArgument](./BarcodeReader.md#setmodeargument) | Sets the argument value for the specified mode parameter. | - -### Auxiliary - -| API Name | Description | -|---|---| -| [bSaveOriCanvas](./BarcodeReader.md#bsaveoricanvas) | Whether to save the original image into a < canvas> element. | -| [oriCanvas](./BarcodeReader.md#oricanvas) | An `HTMLCanvasElement` that holds the original image. | - - - -## createInstance - -Creates a `BarcodeScanner` instance. - -```typescript -static createInstance(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise resolving to the created `BarcodeScanner` object. - -**Code Snippet** - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -``` - - - -## destroy - -Destroys the `BarcodeScanner` instance. If your page needs to create a new instance from time to time, don't forget to destroy unused old instances. - -```typescript -destroy(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -// ... decode ... -scanner.destroy(); -``` - - - - -## bDestroyed - -Indicates whether the instance has been destroyed. - -```typescript -readonly bDestroyed: boolean -``` - - - -## onUnduplicatedRead - -This event is triggered when a new, unduplicated barcode is found. - -The library keeps each barcode result (type and value) in the buffer for a period of time (can be set with [duplicateForgetTime](./interface/ScanSettings.md)) during which if a new result is an exact match, it's seen as a duplicate and will again be kept for that period of time while the old result is removed and so on. - -```typescript -onUnduplicatedRead: (txt: string, result: TextResult) => void -``` - -**Arguments** - -`txt` : a string that holds the barcode text. - -`result` : a `TextResult` object that contains more detailed info. - -**Code Snippet** - -```js -scanner.onUnduplicatedRead = (txt, result) = { - alert(txt); - console.log(result); -} -``` - -**See also** - -* [TextResult](./interface/TextResult.md) - - - -## onFrameRead - -This event is triggered after the library finishes scanning a frame. - -```typescript -onFrameRead: (results: TextResult[]) => void -``` - -**Arguments** - -`results` : a `TextResult` object that contains all the barcode results in this frame. - -**Code Snippet** - -```js -scanner.onFrameRead = results => { - for (let result of results) { - console.log(result.barcodeText); - } -}; -``` - -**See also** - -* [TextResult](./interface/TextResult.md) - - - -## decodeCurrentFrame - -Scans the current frame of the video for barcodes. - -```typescript -decodeCurrentFrame(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise resolving to a `TextResult` object that contains all the barcode results found in this frame. - -**Code Snippet** - -```js -await scanner.showVideo(); -console.log(await scanner.decodeCurrentFrame()); -``` - -**See also** - -* [TextResult](./interface/TextResult.md) - - - -## show - -Binds and shows UI, opens the camera and starts decoding. - -```typescript -show(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -scanner.onUnduplicatedRead = (txt, result) => { - alert(txt); - console.log(result); -}; -await scanner.show(); -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - - - -## hide - -Stops decoding, releases camera and unbinds UI. - -```typescript -hide(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.show(); -//...scan barcodes -await scanner.hide(); -``` - - - -## pauseScan - -Pauses the decoding process. - -```typescript -pauseScan(): void -``` - -**Parameters** - -None. - -**Return value** - -None. - - - -## resumeScan - -Resumes the decoding process. - -```typescript -resumeScan(): void -``` - -**Parameters** - -None. - -**Return value** - -None. - - - -## bPlaySoundOnSuccessfulRead - -Whether and when to play sound on barcode recognition (user input is required on iOS or [Chrome](https://developer.chrome.com/blog/autoplay/#chrome-enterprise-policies) for any sound to play). Allowed values are - -* `false`: never play sound, the default value; -* `true`: play sound when one or multiple barcodes are found on a frame; -* `frame`: same as `true`; -* `unduplicated`: play sound when a unique/unduplicated barcode is found (if multiple unique barcodes are found on the same frame, play only once). - -```typescript -bPlaySoundOnSuccessfulRead: (boolean | string) -``` - -**Default value** - - `false` - -**Code Snippet** - -```js -// A user gesture required. -startPlayButton.addEventListener('click', function() { - scanner.bPlaySoundOnSuccessfulRead = true; -}); -``` - - - -## soundOnSuccessfullRead - -Specifies the sound to play on barcode recognition. If not specified, the default one is used. - -```typescript -soundOnSuccessfullRead: HTMLAudioElement -``` - -**Code Snippet** - -```js -scanner.soundOnSuccessfullRead = new Audio("./pi.mp3"); -``` - -**See also** - -* [HTMLAudioElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement) -* [bPlaySoundOnSuccessfulRead](#bplaysoundonsuccessfulread) - - - -## bVibrateOnSuccessfulRead - -Whether and when to vibrate on barcode recognition (user input is required on iOS or [Chrome](https://developer.chrome.com/blog/autoplay/#chrome-enterprise-policies) for the vibration). Allowed values are - -* `false`: never vibrate, the default value; -* `true`: vibrate when one or multiple barcodes are found on a frame; -* `frame`: same as `true`; -* `unduplicated`: vibrate when a unique/unduplicated barcode is found (if multiple unique barcodes are found on the same frame, vibrate only once). - -```typescript -bVibrateOnSuccessfulRead: (boolean | string) -``` - -**Default value** - - `false` - -**Code Snippet** - -```js -// Can I use? https://caniuse.com/?search=vibrate -startVibrateButton.addEventListener('click', function() { - scanner.bVibrateOnSuccessfulRead = true; -}); -``` - - - -## vibrateDuration - -Returns or sets how long the vibration lasts in milliseconds. The default value is `300` . - -```typescript -vibrateDuration: number -``` - -**See also** - -* [bVibrateOnSuccessfulRead](#bvibrateonsuccessfulread) - - - -## singleFrameMode - -Returns or sets the status of the single-frame mode. If enabled, the video input will not be played and the user can choose to take a picture with the system camera or select an existing image for barcode reading. - -The single-frame mode can only be enabled or disabled before the video input starts playing. - -```typescript -singleFrameMode: boolean -``` - - - -## getScanSettings - -Returns the current scan settings. - -```typescript -getScanSettings(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise resolving to a `ScanSettings` . - -**Code Snippet** - -```js -let scanSettings = await scanner.getScanSettings(); -scanSettings.intervalTime = 50; -scanSettings.duplicateForgetTime = 1000; -await scanner.updateScanSettings(scanSettings); -``` - -**See also** - -* [ScanSettings](./interface/ScanSettings.md) - - - -## updateScanSettings - -Changes scan settings with the object passed in. - -```typescript -updateScanSettings(settings: ScanSettings): Promise -``` - -**Parameters** - -`settings` : specifies the new scan settings. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -let scanSettings = await scanner.getScanSettings(); -scanSettings.intervalTime = 50; -scanSettings.duplicateForgetTime = 1000; -await scanner.updateScanSettings(scanSettings); -``` - -**See also** - -* [ScanSettings](./interface/ScanSettings.md) - - - -## getUIElement - -Returns the HTML element that is used by the [BarcodeScanner](#barcodescanner) instance. - -```typescript -getUIElement(): HTMLElement -``` - - - -## setUIElement - -Specifies an HTML element for the [BarcodeScanner](#barcodescanner) instance to use as its UI. The structure inside the element determines the appearance of the UI. See more on [how to customize the UI](../user-guide/#customize-the-ui). - -```typescript -setUIElement(elementOrURL: HTMLElement | string): Promise -``` - -**Parameters** - -`elementOrURL` : specifies the element. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```html - - - -``` - -```html - - -``` - - - -## defaultUIElementURL - -Returns or sets the URL of the *.html* file that defines the default UI Element. The URL can only be set before the API [createInstance](#createinstance) is called. - -```typescript -static defaultUIElementURL: string -``` - -**Code Snippet** - -```js -Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.4.0/dist/dbr.scanner.html"; -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -await scanner.show(); -``` - - - -## barcodeFillStyle - -Specifies the color used inside the shape which highlights a found barcode. The default value is `rgba(254, 180, 32, 0.3)` . - -```typescript -barcodeFillStyle: string -``` - - - -## barcodeStrokeStyle - -Specifies the color used to paint the outline of the shape which highlights a found barcode. The default value is `rgba(254,180,32,0.9)`. - -```typescript -barcodeStrokeStyle: string -``` - - - -## barcodeLineWidth - -Specifies the line width of the outline of the shape which highlights a found barcode. The default value is `1`. - -```typescript -barcodeLineWidth: number -``` - - - -## regionMaskFillStyle - -Specifies the color used in the square-loop shape between the actual scanning area and the boundary of the video input. This shape only appears when the barcode scanning is limited to a specified region. The default value is `rgba(0,0,0,0.5)`. - -```typescript -regionMaskFillStyle: string -``` - -**See also** - -* [Read a specific area/region](../user-guide/advanced-usage.html#read-a-specific-arearegion) - - - -## regionMaskStrokeStyle - -Specifies the color used to paint the outline of the scanning region. This outline only appears when the barcode scanning is limited to a specified region. The default value is `rgb(254,142,20)`. - -```typescript -regionMaskStrokeStyle: string -``` - -**See also** - -* [Read a specific area/region](../user-guide/advanced-usage.html#read-a-specific-arearegion) - - - -## regionMaskLineWidth - -Specifies the width of the outline of the scanning region. This outline only appears when the barcode scanning is limited to a specified region. The default value is `2`. - -```typescript -regionMaskLineWidth: number -``` - -**See also** - -* [Read a specific area/region](../user-guide/advanced-usage.html#read-a-specific-arearegion) - - - -## getAllCameras - -Returns infomation of all available cameras on the device. - -```typescript -getAllCameras(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise resolving to an array of `VideoDeviceInfo` objects. - -**Code Snippet** - -```js -let cameras = await scanner.getAllCameras(); -if(cameras.length){ - await scanner.setCurrentCamera(cameras[0]); -} -``` - -**See also** - -* [VideoDeviceInfo](./interface/VideoDeviceInfo.md) - - - -## getCurrentCamera - -Returns information about the current camera. - -```typescript -getCurrentCamera(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise resolving to a `VideoDeviceInfo` object. - -**Code Snippet** - -```js -let camera = await scanner.getCurrentCamera(); -``` - -**See also** - -* [VideoDeviceInfo](./interface/VideoDeviceInfo.md) - - - -## setCurrentCamera - -Chooses a camera as the video source. - -```typescript -setCurrentCamera(deviceID: string): Promise -``` - -**Parameters** - -`deviceID`: specifies the camera. - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -let cameras = await scanner.getAllCameras(); -if(cameras.length){ - await scanner.setCurrentCamera(cameras[0]); -} -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - - - -## getResolution - -Returns the resolution of the current video input. - -```typescript -getResolution(): number[] -``` - -**Parameters** - -None. - -**Return value** - -An array of two numbers representing the resolution. - -**Code Snippet** - -```js -let rsl = await scanner.getResolution(); -console.log(rsl.width + " x " + rsl.height); -``` - - - -## setResolution - -Sets the resolution of the current video input. If the specified resolution is not exactly supported, the closest resolution will be applied. - -```typescript -setResolution(width: number, height: number): Promise -``` - -**Parameters** - -`width`: specifies the horizontal resolution. -`height`: specifies the vertical resolution. - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -await scanner.setResolution(width, height); -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - - - -## getVideoSettings - -Returns the current video settings. - -```typescript -getVideoSettings(): MediaStreamConstraints -``` - -**Parameters** - -None. - -**Return value** - -A `MediaStreamConstraints` object. - -**See also** - -* [MediaStreamConstraints](https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints) - - - -## updateVideoSettings - -Changes the video input. - -```typescript -updateVideoSettings(constraints: MediaStreamConstraints): Promise -``` - -**Parameters** - -`constraints`: specifies the new video settings. - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -await scanner.updateVideoSettings({ video: {width: {ideal: 1280}, height: {ideal: 720}, facingMode: {ideal: 'environment'}} }); -``` - -**See also** - -* [MediaStreamConstraints](https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints) -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - - - -## openVideo - -Binds UI and opens the camera to show the video stream. - -```typescript -openVideo(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -await scanner.setUIElement("https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.4.0/dist/dbr.scanner.html"); -await scanner.openVideo(); // The video will start playing but it may not be visible on the page -console.log(await scanner.decodeCurrentFrame()); -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - - - -## showVideo - -Similar to [openVideo](#openvideo) but will also show the UI Element if it is hidden. - -```typescript -showVideo(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -await scanner.setUIElement("https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.4.0/dist/dbr.scanner.html"); -await scanner.showVideo(); // The video will start playing and show up on the page -console.log(await scanner.decodeCurrentFrame()); -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - - - -## play - -Play the video if it is already open but paused or stopped. If the video is already playing, it will start again. - -```typescript -play(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -scanner.pause(); -//..doing other things without the video -await scanner.play(); -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - - - -## onPlayed - -This event is triggered when the video stream starts playing. - -```typescript -event onPlayed: (info: ScannerPlayCallbackInfo) => void -``` - -**Arguments** - -info: a `ScannerPlayCallbackInfo` object which describes the resolution of the video input. - -**Code Snippet** - -```js -scanner.onplayed = rsl=>{ console.log(rsl.width+'x'+rsl.height) }; -await scanner.show(); // or open(), play(), setCurrentCamera(), etc. -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - - - -## pause - -Pauses the video without releasing the camera. - -```typescript -pause(): void -``` - -**Parameters** - -None. - -**Return value** - -None. - - - -## stop - -Stops the video and releases the camera. - -```typescript -stop(): void -``` - -**Parameters** - -None. - -**Return value** - -None. - - - -## getCapabilities - -Inspects and returns the capabilities of the current camera. - -Right now, this method only works in Chrome and should be called when the scanner is open. - -```typescript -getCapabilities(): MediaTrackCapabilities -``` - -**Parameters** - -None. - -**Return value** - -A `MediaTrackCapabilities` object which specifies the values or range of values for each constrainable property of the current camera. - -**Code Snippet** - -```js -scanner.getCapabilities(); -/* Result sample -{ - aspectRatio: {max: 1280, min: 0.001388888888888889}, - brightness: {max: 64, min: -64, step: 1}, - colorTemperature: {max: 6500, min: 2800, step: 10}, - contrast: {max: 95, min: 0, step: 1}, - deviceId: "3a505c29a3312600ea0afd79f8e2b4ba4fba3e539257801ff1de8718c27f2bed", - exposureMode: ["continuous", "manual"], - exposureTime: {max: 10000, min: 39.0625, step: 39.0625}, - facingMode: [], - focusDistance: {max: 1024, min: 0, step: 10}, - focusMode: ["continuous", "manual"], - frameRate: {max: 30, min: 0}, - groupId: "35a82dcb7d5b0ef5bda550718d194f04a812c976175e926ccb81fb9d235d010f", - height: {max: 720, min: 1}, - resizeMode: ["none", "crop-and-scale"], - saturation: {max: 100, min: 0, step: 1}, - sharpness: {max: 7, min: 1, step: 1}, - whiteBalanceMode: ["continuous", "manual"], - width: {max: 1280, min: 1} -} -*/ -``` - -**See also** - -* [MediaTrackCapabilities](https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/getCapabilities) - - - -## getCameraSettings - -Returns the current values for each constrainable property of the current camera. - -Right now, this method only works in Chrome and should be called when the scanner is open. - -```typescript -getCameraSettings(): any -``` - -**Parameters** - -None. - -**Return value** - -The current values for each constrainable property of the current camera - -**Code Snippet** - -```js -scanner.getCameraSettings(); -/* Result sample -{ - aspectRatio: 1.3333333333333333, - brightness: 0, - colorTemperature: 4600, - contrast: 0, - deviceId: "3a505c29a3312600ea0afd79f8e2b4ba4fba3e539257801ff1de8718c27f2bed", - exposureMode: "continuous", - exposureTime: 156.25, - focusDistance: 120, - focusMode: "continuous", - frameRate: 30, - groupId: "35a82dcb7d5b0ef5bda550718d194f04a812c976175e926ccb81fb9d235d010f", - height: 480, - resizeMode: "none", - saturation: 73, - sharpness: 2, - whiteBalanceMode: "continuous", - width: 640 -} -*/ -``` - -**See also** - -* [getCapabilities](#getcapabilities) - - - -## setFrameRate - -Adjusts the frame rate. - -Right now, this method only works in Chrome and should be called when the scanner is open. - -```typescript -setFrameRate(rate: number): Promise -``` - -**Parameters** - -`rate`: specifies the new frame rate. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setFrameRate(10); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - - - -## setColorTemperature - -Adjusts the color temperature. - -Right now, this method only works in Chrome and should be called when the scanner is open. - -```typescript -setColorTemperature(colorTemperatur: number): Promise -``` - -**Parameters** - -`colorTemperatur`: specifies the new color temperature. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setColorTemperature(5000); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - - - -## setExposureCompensation - -Sets the exposure compensation index. - -Right now, this method only works in Chrome and should be called when the scanner is open. - -```typescript -setExposureCompensation(exposureCompensation: number): Promise -``` - -**Parameters** - -`exposureCompensation`: specifies the new exposure compensation index. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setExposureCompensation(-0.7); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - - - -## setZoom - -Sets current zoom value. - -```typescript -setZoom(zoomValue: number): Promise -``` - -**Parameters** - -`zoomValue`: specifies the new zoom value. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setZoom(400); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - - -## turnOnTorch - -Turns on the torch/flashlight. - -> This method should be called when the camera is turned on. Note that it only works with Chromium-based browsers such as Edge and Chrome on Windows or Android. Other browsers such as Firefox or Safari are not supported. Note that all browsers on iOS (including Chrome) use WebKit as the rendering engine and are not supported. - -```typescript -turnOnTorch(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.turnOnTorch(); -``` - -**See also** - -* [turnOffTorch](#turnofftorch) -* [getCapabilities](#getcapabilities) - - - -## turnOffTorch - -Turns off the torch/flashlight. - -Right now, this method only works in Chrome and should be called when the scanner is open. - -```typescript -turnOffTorch(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.turnOffTorch(); -``` - -**See also** - -* [turnOnTorch](#turnontorch) -* [getCapabilities](#getcapabilities) diff --git a/programming-old/javascript/api-reference/BarcodeScanner-v8.6.0.md b/programming-old/javascript/api-reference/BarcodeScanner-v8.6.0.md deleted file mode 100644 index 0c9f8d04..00000000 --- a/programming-old/javascript/api-reference/BarcodeScanner-v8.6.0.md +++ /dev/null @@ -1,1295 +0,0 @@ ---- -layout: default-layout -title: v8.6.0 BarcodeScanner - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows the BarcodeScanner class of Dynamsoft Barcode Reader JavaScript SDK v8.6.0. -keywords: BarcodeScanner, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -noTitleIndex: true -breadcrumbText: BarcodeScanner -permalink: /programming/javascript/api-reference/BarcodeScanner-v8.6.0.html ---- - -# BarcodeScanner for Video - -A barcode scanner object gets access to a camera via the [MediaDevices](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices) interface, then uses its built-in UI to show the camera input and perform continuous barcode scanning on the incoming frames. - -The default built-in UI of each barcode scanner is defined in the file "dbr.scanner.html". If used directly, the UI will fit the entire page and sit on top. There are a few ways to customize it, read more on how to [Customize the UI](../user-guide/#customize-the-ui). - -Although a barcode scanner is designed to scan barcodes from a video input, it also supports a special mode called [singleFrameMode](#singleframemode) which allows the user to select a still image or take a shot with the mobile camera for barcode scanning. - -The `BarcodeScanner` is a child class of [BarcodeReader](./BarcodeReader.md) and inherits all its methods and properties which will not be covered in this article. - -The following code snippet shows the basic usage of the `BarcodeScanner` class. - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -scanner.onUnduplicatedRead = txt => console.log(txt); -await scanner.show(); -``` - - - -## API Index - -### Create and Destroy Instances - -| API Name | Description | -|---|---| -| [createInstance](#createinstance) | Creates a `BarcodeScanner` instance. | -| [destroyContext](#destroycontext) | Destroys the `BarcodeScanner` instance. | -| [isContextDestroyed](#iscontextdestroyed) | Indicates whether the instance has been destroyed. | - -### Decode Barcodes - -| API Name | Description | -|---|---| -| [onUnduplicatedRead](#onunduplicatedread) | This event is triggered when a new, unduplicated barcode is found. | -| [onFrameRead](#onframeread) | This event is triggered after the library finishes scanning a frame. | -| [decodeCurrentFrame](#decodecurrentframe) | Scans the current frame of the video for barcodes. | - -### Basic Interaction - -| API Name | Description | -|---|---| -| [show](#show) | Binds and shows UI, opens the camera and starts decoding. | -| [hide](#hide) | Stops decoding, releases camera and unbinds UI. | -| [pauseScan](#pausescan) | Pauses the decoding process. | -| [resumeScan](#resumescan) | Resumes the decoding process. | - -### Scan Settings - -| API Name | Description | -|---|---| -| [whenToPlaySoundforSuccessfulRead](#whentoplaysoundforsuccessfulread) | Sets when to play sound on barcode recognition. | -| [soundOnSuccessfullRead](#soundonsuccessfullread) | Specifies the sound to play on barcode recognition. | -| [whenToVibrateforSuccessfulRead](#whentovibrateforsuccessfulread) | Sets when to vibrate on barcode recognition. | -| [vibrateDuration](#vibrateduration) | Returns or sets how long the vibration lastsin milliseconds. | -| [singleFrameMode](#singleframemode) | Returns or sets whether to enable the singe-frame mode. | -| [getScanSettings](#getscansettings) | Returns the current scan settings. | -| [updateScanSettings](#updatescansettings) | Changes scan settings with the object passed in. | - -### UI Control - -| API Name | Description | -|---|---| -| [getUIElement](#getuielement) | Returns the HTML element that is used by the `BarcodeScanner` instance. | -| [setUIElement](#setuielement) | Specifies an HTML element for the `BarcodeScanner` instance to use as its UI. | -| [defaultUIElementURL](#defaultuielementurl) | Returns or sets the URL of the .html file that defines the default UI Element. | -| [barcodeFillStyle](#barcodefillstyle) | Specifies the color used inside the shape which highlights a found barcode. | -| [barcodeStrokeStyle](#barcodestrokestyle) | Specifies the color used to paint the outline of the shape which highlights a found barcode. | -| [barcodeLineWidth](#barcodelinewidth) | Specifies the line width of the outline of the shape which highlights a found barcode. | -| [regionMaskFillStyle](#regionmaskfillstyle) | Specifies the color used in the square-loop shape between the actual scanning area and the boundary of the video input. | -| [regionMaskStrokeStyle](#regionmaskstrokestyle) | Specifies the color used to paint the outline of the scanning region. | -| [regionMaskLineWidth](#regionmasklinewidth) | Specifies the width of the outline of the scanning region. | - -### Camera Control - -| API Name | Description | -|---|---| -| [getAllCameras](#getallcameras) | Returns infomation of all available cameras on the device. | -| [getCurrentCamera](#getcurrentcamera) | Returns information about the current camera. | -| [setCurrentCamera](#setcurrentcamera) | Chooses a camera as the video source. | -| [getResolution](#getresolution) | Returns the resolution of the current video input. | -| [setResolution](#setresolution) | Sets the resolution of the current video input. | -| [getVideoSettings](#getvideosettings) | Returns the current video settings. | -| [updateVideoSettings](#updatevideosettings) | Changes the video input. | -| [openVideo](#openvideo) | Binds UI and opens the camera to show the video stream. | -| [showVideo](#showvideo) | Similar to openVideo but will also show the UI Element if it is hidden. | -| [play](#play) | Play the video if it is already open but paused or stopped. | -| [onPlayed](#onplayed) | This event is triggered when the video stream starts playing. | -| [pause](#pause) | Pauses the video without releasing the camera. | -| [stop](#stop) | Stops the video and releases the camera. | - -### Advanced Camera Control - -| API Name | Description | -|---|---| -| [getCapabilities](#getcapabilities) | Inspects and returns the capabilities of the current camera. | -| [getCameraSettings](#getcamerasettings) | Returns the current values for each constrainable property of the current camera. | -| [setFrameRate](#setframerate) | Adjusts the frame rate. | -| [setColorTemperature](#setcolortemperature) | Adjusts the color temperature. | -| [setExposureCompensation](#setexposurecompensation) | Sets the exposure compensation index. | -| [setZoom](#setzoom) | Sets the exposure compensation index. | -| [turnOnTorch](#turnontorch) | Turns on the torch/flashlight. | -| [turnOffTorch](#turnofftorch) | Turns off the torch/flashlight. | - -The following are inherited from the `BarcodeReader` Class. - -### Change Settings - -| API Name | Description | -|---|---| -| [getRuntimeSettings](./BarcodeReader.md#getruntimesettings) | Returns the current runtime settings. | -| [updateRuntimeSettings](./BarcodeReader.md#updateruntimesettings) | Updates runtime settings with a given struct or a preset template. | -| [resetRuntimeSettings](./BarcodeReader.md#resetruntimesettings) | Resets all parameters to default values. | -| [getModeArgument](./BarcodeReader.md#getmodeargument) | Returns the argument value for the specified mode parameter. | -| [setModeArgument](./BarcodeReader.md#setmodeargument) | Sets the argument value for the specified mode parameter. | - -### Auxiliary - -| API Name | Description | -|---|---| -| [bSaveOriCanvas](./BarcodeReader.md#bsaveoricanvas) | Whether to save the original image into a < canvas> element. | -| [oriCanvas](./BarcodeReader.md#oricanvas) | An `HTMLCanvasElement` that holds the original image. | - - - -## createInstance - -Creates a `BarcodeScanner` instance. - -```typescript -static createInstance(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise resolving to the created `BarcodeScanner` object. - -**Code Snippet** - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -``` - - - -## destroyContext - -Destroys the `BarcodeScanner` instance. If your page needs to create a new instance from time to time, don't forget to destroy unused old instances. - -```typescript -destroyContext(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -// ... decode ... -scanner.destroyContext(); -``` - -## isContextDestroyed - -Returns whether the instance has been destroyed. - -```typescript -isContextDestroyed(): boolean -``` - -## onUnduplicatedRead - -This event is triggered when a new, unduplicated barcode is found. - -The library keeps each barcode result (type and value) in the buffer for a period of time (can be set with [duplicateForgetTime](./interface/ScanSettings.md)) during which if a new result is an exact match, it's seen as a duplicate and will again be kept for that period of time while the old result is removed and so on. - -```typescript -onUnduplicatedRead: (txt: string, result: TextResult) => void -``` - -**Arguments** - -`txt` : a string that holds the barcode text. - -`result` : a `TextResult` object that contains more detailed info. - -**Code Snippet** - -```js -scanner.onUnduplicatedRead = (txt, result) = { - alert(txt); - console.log(result); -} -``` - -**See also** - -* [TextResult](./interface/TextResult.md) - - - -## onFrameRead - -This event is triggered after the library finishes scanning a frame. - -```typescript -onFrameRead: (results: TextResult[]) => void -``` - -**Arguments** - -`results` : a `TextResult` object that contains all the barcode results in this frame. - -**Code Snippet** - -```js -scanner.onFrameRead = results => { - for (let result of results) { - console.log(result.barcodeText); - } -}; -``` - -**See also** - -* [TextResult](./interface/TextResult.md) - - - -## decodeCurrentFrame - -Scans the current frame of the video for barcodes. - -```typescript -decodeCurrentFrame(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise resolving to a `TextResult` object that contains all the barcode results found in this frame. - -**Code Snippet** - -```js -await scanner.showVideo(); -console.log(await scanner.decodeCurrentFrame()); -``` - -**See also** - -* [TextResult](./interface/TextResult.md) - - - -## show - -Binds and shows UI, opens the camera and starts decoding. - -```typescript -show(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -scanner.onUnduplicatedRead = (txt, result) => { - alert(txt); - console.log(result); -}; -await scanner.show(); -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - - - -## hide - -Stops decoding, releases camera and unbinds UI. - -```typescript -hide(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.show(); -//...scan barcodes -await scanner.hide(); -``` - - - -## pauseScan - -Pauses the decoding process. - -```typescript -pauseScan(): void -``` - -**Parameters** - -None. - -**Return value** - -None. - - - -## resumeScan - -Resumes the decoding process. - -```typescript -resumeScan(): void -``` - -**Parameters** - -None. - -**Return value** - -None. - - - -## whenToPlaySoundforSuccessfulRead - -Sets when to play sound on barcode recognition (user input is required on iOS or [Chrome](https://developer.chrome.com/blog/autoplay/#chrome-enterprise-policies) for any sound to play). Allowed values are - -* `never`: never play sound, the default value; -* `frame`: play sound when one or multiple barcodes are found on a frame; -* `unduplicated`: play sound when a unique/unduplicated barcode is found (if multiple unique barcodes are found on the same frame, play only once). - -```typescript -bPlaySoundOnSuccessfulRead: (boolean | string) -``` - -**Default value** - - `false` - -**Code Snippet** - -```js -// A user gesture required. -startPlayButton.addEventListener('click', function() { - scanner.bPlaySoundOnSuccessfulRead = true; -}); -``` - - - -## soundOnSuccessfullRead - -Specifies the sound to play on barcode recognition. If not specified, the default one is used. - -```typescript -soundOnSuccessfullRead: HTMLAudioElement -``` - -**Code Snippet** - -```js -scanner.soundOnSuccessfullRead = new Audio("./pi.mp3"); -``` - -**See also** - -* [HTMLAudioElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement) -* [bPlaySoundOnSuccessfulRead](#bplaysoundonsuccessfulread) - -## whenToVibrateforSuccessfulRead - -Sets when to vibrate on barcode recognition (user input is required on iOS or [Chrome](https://developer.chrome.com/blog/autoplay/#chrome-enterprise-policies) for the vibration). Allowed values are - -* `never`: never vibrate, the default value; -* `frame`: vibrate when one or multiple barcodes are found on a frame; -* `unduplicated`: vibrate when a unique/unduplicated barcode is found (if multiple unique barcodes are found on the same frame, vibrate only once). - -```typescript -bVibrateOnSuccessfulRead: (boolean | string) -``` - -**Default value** - - `false` - -**Code Snippet** - -```js -// Can I use? https://caniuse.com/?search=vibrate -startVibrateButton.addEventListener('click', function() { - scanner.bVibrateOnSuccessfulRead = true; -}); -``` - -## vibrateDuration - -Returns or sets how long the vibration lasts in milliseconds. The default value is `300` . - -```typescript -vibrateDuration: number -``` - -**See also** - -* [bVibrateOnSuccessfulRead](#bvibrateonsuccessfulread) - -## singleFrameMode - -Returns or sets the status of the single-frame mode. If enabled, the video input will not be played and the user can choose to take a picture with the system camera or select an existing image for barcode reading. - -The single-frame mode can only be enabled or disabled before the video input starts playing. - -```typescript -singleFrameMode: boolean -``` - - - -## getScanSettings - -Returns the current scan settings. - -```typescript -getScanSettings(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise resolving to a `ScanSettings` . - -**Code Snippet** - -```js -let scanSettings = await scanner.getScanSettings(); -scanSettings.intervalTime = 50; -scanSettings.duplicateForgetTime = 1000; -await scanner.updateScanSettings(scanSettings); -``` - -**See also** - -* [ScanSettings](./interface/ScanSettings.md) - - - -## updateScanSettings - -Changes scan settings with the object passed in. - -```typescript -updateScanSettings(settings: ScanSettings): Promise -``` - -**Parameters** - -`settings` : specifies the new scan settings. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -let scanSettings = await scanner.getScanSettings(); -scanSettings.intervalTime = 50; -scanSettings.duplicateForgetTime = 1000; -await scanner.updateScanSettings(scanSettings); -``` - -**See also** - -* [ScanSettings](./interface/ScanSettings.md) - - - -## getUIElement - -Returns the HTML element that is used by the [BarcodeScanner](#barcodescanner) instance. - -```typescript -getUIElement(): HTMLElement -``` - - - -## setUIElement - -Specifies an HTML element for the [BarcodeScanner](#barcodescanner) instance to use as its UI. The structure inside the element determines the appearance of the UI. See more on [how to customize the UI](../user-guide/#customize-the-ui). - -```typescript -setUIElement(elementOrURL: HTMLElement | string): Promise -``` - -**Parameters** - -`elementOrURL` : specifies the element. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```html - - - -``` - -```html - - -``` - - - -## defaultUIElementURL - -Returns or sets the URL of the *.html* file that defines the default UI Element. The URL can only be set before the API [createInstance](#createinstance) is called. - -```typescript -static defaultUIElementURL: string -``` - -**Code Snippet** - -```js -Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.6.0/dist/dbr.scanner.html"; -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -await scanner.show(); -``` - - - -## barcodeFillStyle - -Specifies the color used inside the shape which highlights a found barcode. The default value is `rgba(254, 180, 32, 0.3)` . - -```typescript -barcodeFillStyle: string -``` - - - -## barcodeStrokeStyle - -Specifies the color used to paint the outline of the shape which highlights a found barcode. The default value is `rgba(254,180,32,0.9)`. - -```typescript -barcodeStrokeStyle: string -``` - - - -## barcodeLineWidth - -Specifies the line width of the outline of the shape which highlights a found barcode. The default value is `1`. - -```typescript -barcodeLineWidth: number -``` - - - -## regionMaskFillStyle - -Specifies the color used in the square-loop shape between the actual scanning area and the boundary of the video input. This shape only appears when the barcode scanning is limited to a specified region. The default value is `rgba(0,0,0,0.5)`. - -```typescript -regionMaskFillStyle: string -``` - -**See also** - -* [Read a specific area/region](../user-guide/advanced-usage.html#read-a-specific-arearegion) - - - -## regionMaskStrokeStyle - -Specifies the color used to paint the outline of the scanning region. This outline only appears when the barcode scanning is limited to a specified region. The default value is `rgb(254,142,20)`. - -```typescript -regionMaskStrokeStyle: string -``` - -**See also** - -* [Read a specific area/region](../user-guide/advanced-usage.html#read-a-specific-arearegion) - - - -## regionMaskLineWidth - -Specifies the width of the outline of the scanning region. This outline only appears when the barcode scanning is limited to a specified region. The default value is `2`. - -```typescript -regionMaskLineWidth: number -``` - -**See also** - -* [Read a specific area/region](../user-guide/advanced-usage.html#read-a-specific-arearegion) - - - -## getAllCameras - -Returns infomation of all available cameras on the device. - -```typescript -getAllCameras(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise resolving to an array of `VideoDeviceInfo` objects. - -**Code Snippet** - -```js -let cameras = await scanner.getAllCameras(); -if(cameras.length){ - await scanner.setCurrentCamera(cameras[0]); -} -``` - -**See also** - -* [VideoDeviceInfo](./interface/VideoDeviceInfo.md) - - - -## getCurrentCamera - -Returns information about the current camera. - -```typescript -getCurrentCamera(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise resolving to a `VideoDeviceInfo` object. - -**Code Snippet** - -```js -let camera = await scanner.getCurrentCamera(); -``` - -**See also** - -* [VideoDeviceInfo](./interface/VideoDeviceInfo.md) - - - -## setCurrentCamera - -Chooses a camera as the video source. - -```typescript -setCurrentCamera(deviceID: string): Promise -``` - -**Parameters** - -`deviceID`: specifies the camera. - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -let cameras = await scanner.getAllCameras(); -if(cameras.length){ - await scanner.setCurrentCamera(cameras[0]); -} -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - - - -## getResolution - -Returns the resolution of the current video input. - -```typescript -getResolution(): number[] -``` - -**Parameters** - -None. - -**Return value** - -An array of two numbers representing the resolution. - -**Code Snippet** - -```js -let rsl = await scanner.getResolution(); -console.log(rsl.width + " x " + rsl.height); -``` - - - -## setResolution - -Sets the resolution of the current video input. If the specified resolution is not exactly supported, the closest resolution will be applied. - -```typescript -setResolution(width: number, height: number): Promise -``` - -**Parameters** - -`width`: specifies the horizontal resolution. -`height`: specifies the vertical resolution. - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -await scanner.setResolution(width, height); -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - - - -## getVideoSettings - -Returns the current video settings. - -```typescript -getVideoSettings(): MediaStreamConstraints -``` - -**Parameters** - -None. - -**Return value** - -A `MediaStreamConstraints` object. - -**See also** - -* [MediaStreamConstraints](https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints) - - - -## updateVideoSettings - -Changes the video input. - -```typescript -updateVideoSettings(constraints: MediaStreamConstraints): Promise -``` - -**Parameters** - -`constraints`: specifies the new video settings. - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -await scanner.updateVideoSettings({ video: {width: {ideal: 1280}, height: {ideal: 720}, facingMode: {ideal: 'environment'}} }); -``` - -**See also** - -* [MediaStreamConstraints](https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints) -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - - - -## openVideo - -Binds UI and opens the camera to show the video stream. - -```typescript -openVideo(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -await scanner.setUIElement("https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.6.0/dist/dbr.scanner.html"); -await scanner.openVideo(); // The video will start playing but it may not be visible on the page -console.log(await scanner.decodeCurrentFrame()); -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - - - -## showVideo - -Similar to [openVideo](#openvideo) but will also show the UI Element if it is hidden. - -```typescript -showVideo(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -await scanner.setUIElement("https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.6.0/dist/dbr.scanner.html"); -await scanner.showVideo(); // The video will start playing and show up on the page -console.log(await scanner.decodeCurrentFrame()); -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - - - -## play - -Play the video if it is already open but paused or stopped. If the video is already playing, it will start again. - -```typescript -play(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -scanner.pause(); -//..doing other things without the video -await scanner.play(); -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - - - -## onPlayed - -This event is triggered when the video stream starts playing. - -```typescript -event onPlayed: (info: ScannerPlayCallbackInfo) => void -``` - -**Arguments** - -info: a `ScannerPlayCallbackInfo` object which describes the resolution of the video input. - -**Code Snippet** - -```js -scanner.onplayed = rsl=>{ console.log(rsl.width+'x'+rsl.height) }; -await scanner.show(); // or open(), play(), setCurrentCamera(), etc. -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - - - -## pause - -Pauses the video without releasing the camera. - -```typescript -pause(): void -``` - -**Parameters** - -None. - -**Return value** - -None. - - - -## stop - -Stops the video and releases the camera. - -```typescript -stop(): void -``` - -**Parameters** - -None. - -**Return value** - -None. - - - -## getCapabilities - -Inspects and returns the capabilities of the current camera. - -Right now, this method only works in Chrome and should be called when the scanner is open. - -```typescript -getCapabilities(): MediaTrackCapabilities -``` - -**Parameters** - -None. - -**Return value** - -A `MediaTrackCapabilities` object which specifies the values or range of values for each constrainable property of the current camera. - -**Code Snippet** - -```js -scanner.getCapabilities(); -/* Result sample -{ - aspectRatio: {max: 1280, min: 0.001388888888888889}, - brightness: {max: 64, min: -64, step: 1}, - colorTemperature: {max: 6500, min: 2800, step: 10}, - contrast: {max: 95, min: 0, step: 1}, - deviceId: "3a505c29a3312600ea0afd79f8e2b4ba4fba3e539257801ff1de8718c27f2bed", - exposureMode: ["continuous", "manual"], - exposureTime: {max: 10000, min: 39.0625, step: 39.0625}, - facingMode: [], - focusDistance: {max: 1024, min: 0, step: 10}, - focusMode: ["continuous", "manual"], - frameRate: {max: 30, min: 0}, - groupId: "35a82dcb7d5b0ef5bda550718d194f04a812c976175e926ccb81fb9d235d010f", - height: {max: 720, min: 1}, - resizeMode: ["none", "crop-and-scale"], - saturation: {max: 100, min: 0, step: 1}, - sharpness: {max: 7, min: 1, step: 1}, - whiteBalanceMode: ["continuous", "manual"], - width: {max: 1280, min: 1} -} -*/ -``` - -**See also** - -* [MediaTrackCapabilities](https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/getCapabilities) - - - -## getCameraSettings - -Returns the current values for each constrainable property of the current camera. - -Right now, this method only works in Chrome and should be called when the scanner is open. - -```typescript -getCameraSettings(): any -``` - -**Parameters** - -None. - -**Return value** - -The current values for each constrainable property of the current camera - -**Code Snippet** - -```js -scanner.getCameraSettings(); -/* Result sample -{ - aspectRatio: 1.3333333333333333, - brightness: 0, - colorTemperature: 4600, - contrast: 0, - deviceId: "3a505c29a3312600ea0afd79f8e2b4ba4fba3e539257801ff1de8718c27f2bed", - exposureMode: "continuous", - exposureTime: 156.25, - focusDistance: 120, - focusMode: "continuous", - frameRate: 30, - groupId: "35a82dcb7d5b0ef5bda550718d194f04a812c976175e926ccb81fb9d235d010f", - height: 480, - resizeMode: "none", - saturation: 73, - sharpness: 2, - whiteBalanceMode: "continuous", - width: 640 -} -*/ -``` - -**See also** - -* [getCapabilities](#getcapabilities) - - - -## setFrameRate - -Adjusts the frame rate. - -Right now, this method only works in Chrome and should be called when the scanner is open. - -```typescript -setFrameRate(rate: number): Promise -``` - -**Parameters** - -`rate`: specifies the new frame rate. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setFrameRate(10); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - - - -## setColorTemperature - -Adjusts the color temperature. - -Right now, this method only works in Chrome and should be called when the scanner is open. - -```typescript -setColorTemperature(colorTemperatur: number): Promise -``` - -**Parameters** - -`colorTemperatur`: specifies the new color temperature. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setColorTemperature(5000); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - - - -## setExposureCompensation - -Sets the exposure compensation index. - -Right now, this method only works in Chrome and should be called when the scanner is open. - -```typescript -setExposureCompensation(exposureCompensation: number): Promise -``` - -**Parameters** - -`exposureCompensation`: specifies the new exposure compensation index. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setExposureCompensation(-0.7); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - - - -## setZoom - -Sets current zoom value. - -```typescript -setZoom(zoomValue: number): Promise -``` - -**Parameters** - -`zoomValue`: specifies the new zoom value. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setZoom(400); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - -## turnOnTorch - -Turns on the torch/flashlight. - -> This method should be called when the camera is turned on. Note that it only works with Chromium-based browsers such as Edge and Chrome on Windows or Android. Other browsers such as Firefox or Safari are not supported. Note that all browsers on iOS (including Chrome) use WebKit as the rendering engine and are not supported. - -```typescript -turnOnTorch(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.turnOnTorch(); -``` - -**See also** - -* [turnOffTorch](#turnofftorch) -* [getCapabilities](#getcapabilities) - - - -## turnOffTorch - -Turns off the torch/flashlight. - -Right now, this method only works in Chrome and should be called when the scanner is open. - -```typescript -turnOffTorch(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.turnOffTorch(); -``` - -**See also** - -* [turnOnTorch](#turnontorch) -* [getCapabilities](#getcapabilities) diff --git a/programming-old/javascript/api-reference/BarcodeScanner-v8.8.7.md b/programming-old/javascript/api-reference/BarcodeScanner-v8.8.7.md deleted file mode 100644 index 964d6dd2..00000000 --- a/programming-old/javascript/api-reference/BarcodeScanner-v8.8.7.md +++ /dev/null @@ -1,1293 +0,0 @@ ---- -layout: default-layout -title: v8.8.7 BarcodeScanner - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows the BarcodeScanner class of Dynamsoft Barcode Reader JavaScript SDK v8.8.7. -keywords: BarcodeScanner, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -noTitleIndex: true -breadcrumbText: BarcodeScanner -permalink: /programming/javascript/api-reference/BarcodeScanner-v8.8.7.html ---- - -# BarcodeScanner for Video - -A barcode scanner object gets access to a camera via the [MediaDevices](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices) interface, then uses its built-in UI to show the camera input and perform continuous barcode scanning on the incoming frames. - -The default built-in UI of each barcode scanner is defined in the file "dbr.scanner.html". If used directly, the UI will fit the entire page and sit on top. There are a few ways to customize it, read more on how to [Customize the UI](../user-guide/#customize-the-ui). - -Although a barcode scanner is designed to scan barcodes from a video input, it also supports a special mode called [singleFrameMode](#singleframemode) which allows the user to select a still image or take a shot with the mobile camera for barcode scanning. - -The `BarcodeScanner` is a child class of [BarcodeReader](./BarcodeReader.md) and inherits all its methods and properties which will not be covered in this article. - -The following code snippet shows the basic usage of the `BarcodeScanner` class. - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -scanner.onUnduplicatedRead = txt => console.log(txt); -await scanner.show(); -``` - -## API Index - -### Create and Destroy Instances - -| API Name | Description | -|---|---| -| [createInstance](#createinstance) | Creates a `BarcodeScanner` instance. | -| [destroyContext](#destroycontext) | Destroys the `BarcodeScanner` instance. | -| [isContextDestroyed](#iscontextdestroyed) | Indicates whether the instance has been destroyed. | - -### Decode Barcodes - -| API Name | Description | -|---|---| -| [onUnduplicatedRead](#onunduplicatedread) | This event is triggered when a new, unduplicated barcode is found. | -| [onFrameRead](#onframeread) | This event is triggered after the library finishes scanning a frame. | -| [decodeCurrentFrame](#decodecurrentframe) | Scans the current frame of the video for barcodes. | - -### Basic Interaction - -| API Name | Description | -|---|---| -| [show](#show) | Binds and shows UI, opens the camera and starts decoding. | -| [hide](#hide) | Stops decoding, releases camera and unbinds UI. | -| [pauseScan](#pausescan) | Pauses the decoding process. | -| [resumeScan](#resumescan) | Resumes the decoding process. | - -### Scan Settings - -| API Name | Description | -|---|---| -| [whenToPlaySoundforSuccessfulRead](#whentoplaysoundforsuccessfulread) | Sets when to play sound on barcode recognition. | -| [soundOnSuccessfullRead](#soundonsuccessfullread) | Specifies the sound to play on barcode recognition. | -| [whenToVibrateforSuccessfulRead](#whentovibrateforsuccessfulread) | Sets when to vibrate on barcode recognition. | -| [vibrateDuration](#vibrateduration) | Returns or sets how long the vibration lastsin milliseconds. | -| [singleFrameMode](#singleframemode) | Returns or sets whether to enable the singe-frame mode. | -| [getScanSettings](#getscansettings) | Returns the current scan settings. | -| [updateScanSettings](#updatescansettings) | Changes scan settings with the object passed in. | - -### UI Control - -| API Name | Description | -|---|---| -| [getUIElement](#getuielement) | Returns the HTML element that is used by the `BarcodeScanner` instance. | -| [setUIElement](#setuielement) | Specifies an HTML element for the `BarcodeScanner` instance to use as its UI. | -| [defaultUIElementURL](#defaultuielementurl) | Returns or sets the URL of the .html file that defines the default UI Element. | -| [barcodeFillStyle](#barcodefillstyle) | Specifies the color used inside the shape which highlights a found barcode. | -| [barcodeStrokeStyle](#barcodestrokestyle) | Specifies the color used to paint the outline of the shape which highlights a found barcode. | -| [barcodeLineWidth](#barcodelinewidth) | Specifies the line width of the outline of the shape which highlights a found barcode. | -| [regionMaskFillStyle](#regionmaskfillstyle) | Specifies the color used in the square-loop shape between the actual scanning area and the boundary of the video input. | -| [regionMaskStrokeStyle](#regionmaskstrokestyle) | Specifies the color used to paint the outline of the scanning region. | -| [regionMaskLineWidth](#regionmasklinewidth) | Specifies the width of the outline of the scanning region. | - -### Camera Control - -| API Name | Description | -|---|---| -| [getAllCameras](#getallcameras) | Returns infomation of all available cameras on the device. | -| [getCurrentCamera](#getcurrentcamera) | Returns information about the current camera. | -| [setCurrentCamera](#setcurrentcamera) | Chooses a camera as the video source. | -| [getResolution](#getresolution) | Returns the resolution of the current video input. | -| [setResolution](#setresolution) | Sets the resolution of the current video input. | -| [getVideoSettings](#getvideosettings) | Returns the current video settings. | -| [updateVideoSettings](#updatevideosettings) | Changes the video input. | -| [openVideo](#openvideo) | Binds UI and opens the camera to show the video stream. | -| [showVideo](#showvideo) | Similar to openVideo but will also show the UI Element if it is hidden. | -| [play](#play) | Play the video if it is already open but paused or stopped. | -| [onPlayed](#onplayed) | This event is triggered when the video stream starts playing. | -| [pause](#pause) | Pauses the video without releasing the camera. | -| [stop](#stop) | Stops the video and releases the camera. | - -### Advanced Camera Control - -| API Name | Description | -|---|---| -| [getCapabilities](#getcapabilities) | Inspects and returns the capabilities of the current camera. | -| [getCameraSettings](#getcamerasettings) | Returns the current values for each constrainable property of the current camera. | -| [setFrameRate](#setframerate) | Adjusts the frame rate. | -| [setColorTemperature](#setcolortemperature) | Adjusts the color temperature. | -| [setExposureCompensation](#setexposurecompensation) | Sets the exposure compensation index. | -| [setZoom](#setzoom) | Sets the exposure compensation index. | -| [turnOnTorch](#turnontorch) | Turns on the torch/flashlight. | -| [turnOffTorch](#turnofftorch) | Turns off the torch/flashlight. | - -The following are inherited from the `BarcodeReader` Class. - -### Change Settings - -| API Name | Description | -|---|---| -| [getRuntimeSettings](./BarcodeReader.md#getruntimesettings) | Returns the current runtime settings. | -| [updateRuntimeSettings](./BarcodeReader.md#updateruntimesettings) | Updates runtime settings with a given struct or a preset template. | -| [resetRuntimeSettings](./BarcodeReader.md#resetruntimesettings) | Resets all parameters to default values. | -| [getModeArgument](./BarcodeReader.md#getmodeargument) | Returns the argument value for the specified mode parameter. | -| [setModeArgument](./BarcodeReader.md#setmodeargument) | Sets the argument value for the specified mode parameter. | - -### Auxiliary - -| API Name | Description | -|---|---| -| [bSaveOriCanvas](./BarcodeReader.md#bsaveoricanvas) | Whether to save the original image into a < canvas> element. | -| [oriCanvas](./BarcodeReader.md#oricanvas) | An `HTMLCanvasElement` that holds the original image. | - - - -## createInstance - -Creates a `BarcodeScanner` instance. - -```typescript -static createInstance(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise resolving to the created `BarcodeScanner` object. - -**Code Snippet** - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -``` - - - -## destroyContext - -Destroys the `BarcodeScanner` instance. If your page needs to create a new instance from time to time, don't forget to destroy unused old instances. - -```typescript -destroyContext(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -// ... decode ... -scanner.destroyContext(); -``` - -## isContextDestroyed - -Returns whether the instance has been destroyed. - -```typescript -isContextDestroyed(): boolean -``` - -## onUnduplicatedRead - -This event is triggered when a new, unduplicated barcode is found. - -The library keeps each barcode result (type and value) in the buffer for a period of time (can be set with [duplicateForgetTime](./interface/ScanSettings.md)) during which if a new result is an exact match, it's seen as a duplicate and will again be kept for that period of time while the old result is removed and so on. - -```typescript -onUnduplicatedRead: (txt: string, result: TextResult) => void -``` - -**Arguments** - -`txt` : a string that holds the barcode text. - -`result` : a `TextResult` object that contains more detailed info. - -**Code Snippet** - -```js -scanner.onUnduplicatedRead = (txt, result) = { - alert(txt); - console.log(result); -} -``` - -**See also** - -* [TextResult](./interface/TextResult.md) - - - -## onFrameRead - -This event is triggered after the library finishes scanning a frame. - -```typescript -onFrameRead: (results: TextResult[]) => void -``` - -**Arguments** - -`results` : a `TextResult` object that contains all the barcode results in this frame. - -**Code Snippet** - -```js -scanner.onFrameRead = results => { - for (let result of results) { - console.log(result.barcodeText); - } -}; -``` - -**See also** - -* [TextResult](./interface/TextResult.md) - - - -## decodeCurrentFrame - -Scans the current frame of the video for barcodes. - -```typescript -decodeCurrentFrame(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise resolving to a `TextResult` object that contains all the barcode results found in this frame. - -**Code Snippet** - -```js -await scanner.showVideo(); -console.log(await scanner.decodeCurrentFrame()); -``` - -**See also** - -* [TextResult](./interface/TextResult.md) - - - -## show - -Binds and shows UI, opens the camera and starts decoding. - -```typescript -show(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -scanner.onUnduplicatedRead = (txt, result) => { - alert(txt); - console.log(result); -}; -await scanner.show(); -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - - - -## hide - -Stops decoding, releases camera and unbinds UI. - -```typescript -hide(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.show(); -//...scan barcodes -await scanner.hide(); -``` - - - -## pauseScan - -Pauses the decoding process. - -```typescript -pauseScan(): void -``` - -**Parameters** - -None. - -**Return value** - -None. - - - -## resumeScan - -Resumes the decoding process. - -```typescript -resumeScan(): void -``` - -**Parameters** - -None. - -**Return value** - -None. - - - -## whenToPlaySoundforSuccessfulRead - -Sets when to play sound on barcode recognition (user input is required on iOS or [Chrome](https://developer.chrome.com/blog/autoplay/#chrome-enterprise-policies) for any sound to play). Allowed values are - -* `never`: never play sound, the default value; -* `frame`: play sound when one or multiple barcodes are found on a frame; -* `unduplicated`: play sound when a unique/unduplicated barcode is found (if multiple unique barcodes are found on the same frame, play only once). - -```typescript -bPlaySoundOnSuccessfulRead: (boolean | string) -``` - -**Default value** - - `false` - -**Code Snippet** - -```js -// A user gesture required. -startPlayButton.addEventListener('click', function() { - scanner.bPlaySoundOnSuccessfulRead = true; -}); -``` - - - -## soundOnSuccessfullRead - -Specifies the sound to play on barcode recognition. If not specified, the default one is used. - -```typescript -soundOnSuccessfullRead: HTMLAudioElement -``` - -**Code Snippet** - -```js -scanner.soundOnSuccessfullRead = new Audio("./pi.mp3"); -``` - -**See also** - -* [HTMLAudioElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement) -* [bPlaySoundOnSuccessfulRead](#bplaysoundonsuccessfulread) - -## whenToVibrateforSuccessfulRead - -Sets when to vibrate on barcode recognition (user input is required on iOS or [Chrome](https://developer.chrome.com/blog/autoplay/#chrome-enterprise-policies) for the vibration). Allowed values are - -* `never`: never vibrate, the default value; -* `frame`: vibrate when one or multiple barcodes are found on a frame; -* `unduplicated`: vibrate when a unique/unduplicated barcode is found (if multiple unique barcodes are found on the same frame, vibrate only once). - -```typescript -bVibrateOnSuccessfulRead: (boolean | string) -``` - -**Default value** - - `false` - -**Code Snippet** - -```js -// Can I use? https://caniuse.com/?search=vibrate -startVibrateButton.addEventListener('click', function() { - scanner.bVibrateOnSuccessfulRead = true; -}); -``` - -## vibrateDuration - -Returns or sets how long the vibration lasts in milliseconds. The default value is `300` . - -```typescript -vibrateDuration: number -``` - -**See also** - -* [bVibrateOnSuccessfulRead](#bvibrateonsuccessfulread) - -## singleFrameMode - -Returns or sets the status of the single-frame mode. If enabled, the video input will not be played and the user can choose to take a picture with the system camera or select an existing image for barcode reading. - -The single-frame mode can only be enabled or disabled before the video input starts playing. - -```typescript -singleFrameMode: boolean -``` - - - -## getScanSettings - -Returns the current scan settings. - -```typescript -getScanSettings(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise resolving to a `ScanSettings` . - -**Code Snippet** - -```js -let scanSettings = await scanner.getScanSettings(); -scanSettings.intervalTime = 50; -scanSettings.duplicateForgetTime = 1000; -await scanner.updateScanSettings(scanSettings); -``` - -**See also** - -* [ScanSettings](./interface/ScanSettings.md) - - - -## updateScanSettings - -Changes scan settings with the object passed in. - -```typescript -updateScanSettings(settings: ScanSettings): Promise -``` - -**Parameters** - -`settings` : specifies the new scan settings. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -let scanSettings = await scanner.getScanSettings(); -scanSettings.intervalTime = 50; -scanSettings.duplicateForgetTime = 1000; -await scanner.updateScanSettings(scanSettings); -``` - -**See also** - -* [ScanSettings](./interface/ScanSettings.md) - - - -## getUIElement - -Returns the HTML element that is used by the [BarcodeScanner](#barcodescanner) instance. - -```typescript -getUIElement(): HTMLElement -``` - - - -## setUIElement - -Specifies an HTML element for the [BarcodeScanner](#barcodescanner) instance to use as its UI. The structure inside the element determines the appearance of the UI. See more on [how to customize the UI](../user-guide/#customize-the-ui). - -```typescript -setUIElement(elementOrURL: HTMLElement | string): Promise -``` - -**Parameters** - -`elementOrURL` : specifies the element. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```html - - - -``` - -```html - - -``` - - - -## defaultUIElementURL - -Returns or sets the URL of the *.html* file that defines the default UI Element. The URL can only be set before the API [createInstance](#createinstance) is called. - -```typescript -static defaultUIElementURL: string -``` - -**Code Snippet** - -```js -Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.7/dist/dbr.scanner.html"; -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -await scanner.show(); -``` - - - -## barcodeFillStyle - -Specifies the color used inside the shape which highlights a found barcode. The default value is `rgba(254, 180, 32, 0.3)` . - -```typescript -barcodeFillStyle: string -``` - - - -## barcodeStrokeStyle - -Specifies the color used to paint the outline of the shape which highlights a found barcode. The default value is `rgba(254,180,32,0.9)`. - -```typescript -barcodeStrokeStyle: string -``` - - - -## barcodeLineWidth - -Specifies the line width of the outline of the shape which highlights a found barcode. The default value is `1`. - -```typescript -barcodeLineWidth: number -``` - - - -## regionMaskFillStyle - -Specifies the color used in the square-loop shape between the actual scanning area and the boundary of the video input. This shape only appears when the barcode scanning is limited to a specified region. The default value is `rgba(0,0,0,0.5)`. - -```typescript -regionMaskFillStyle: string -``` - -**See also** - -* [Read a specific area/region](../user-guide/advanced-usage.html#read-a-specific-arearegion) - - - -## regionMaskStrokeStyle - -Specifies the color used to paint the outline of the scanning region. This outline only appears when the barcode scanning is limited to a specified region. The default value is `rgb(254,142,20)`. - -```typescript -regionMaskStrokeStyle: string -``` - -**See also** - -* [Read a specific area/region](../user-guide/advanced-usage.html#read-a-specific-arearegion) - - - -## regionMaskLineWidth - -Specifies the width of the outline of the scanning region. This outline only appears when the barcode scanning is limited to a specified region. The default value is `2`. - -```typescript -regionMaskLineWidth: number -``` - -**See also** - -* [Read a specific area/region](../user-guide/advanced-usage.html#read-a-specific-arearegion) - - - -## getAllCameras - -Returns infomation of all available cameras on the device. - -```typescript -getAllCameras(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise resolving to an array of `VideoDeviceInfo` objects. - -**Code Snippet** - -```js -let cameras = await scanner.getAllCameras(); -if(cameras.length){ - await scanner.setCurrentCamera(cameras[0]); -} -``` - -**See also** - -* [VideoDeviceInfo](./interface/VideoDeviceInfo.md) - - - -## getCurrentCamera - -Returns information about the current camera. - -```typescript -getCurrentCamera(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise resolving to a `VideoDeviceInfo` object. - -**Code Snippet** - -```js -let camera = await scanner.getCurrentCamera(); -``` - -**See also** - -* [VideoDeviceInfo](./interface/VideoDeviceInfo.md) - - - -## setCurrentCamera - -Chooses a camera as the video source. - -```typescript -setCurrentCamera(deviceID: string): Promise -``` - -**Parameters** - -`deviceID`: specifies the camera. - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -let cameras = await scanner.getAllCameras(); -if(cameras.length){ - await scanner.setCurrentCamera(cameras[0]); -} -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - - - -## getResolution - -Returns the resolution of the current video input. - -```typescript -getResolution(): number[] -``` - -**Parameters** - -None. - -**Return value** - -An array of two numbers representing the resolution. - -**Code Snippet** - -```js -let rsl = await scanner.getResolution(); -console.log(rsl.width + " x " + rsl.height); -``` - - - -## setResolution - -Sets the resolution of the current video input. If the specified resolution is not exactly supported, the closest resolution will be applied. - -```typescript -setResolution(width: number, height: number): Promise -``` - -**Parameters** - -`width`: specifies the horizontal resolution. -`height`: specifies the vertical resolution. - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -await scanner.setResolution(width, height); -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - - - -## getVideoSettings - -Returns the current video settings. - -```typescript -getVideoSettings(): MediaStreamConstraints -``` - -**Parameters** - -None. - -**Return value** - -A `MediaStreamConstraints` object. - -**See also** - -* [MediaStreamConstraints](https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints) - - - -## updateVideoSettings - -Changes the video input. - -```typescript -updateVideoSettings(constraints: MediaStreamConstraints): Promise -``` - -**Parameters** - -`constraints`: specifies the new video settings. - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -await scanner.updateVideoSettings({ video: {width: {ideal: 1280}, height: {ideal: 720}, facingMode: {ideal: 'environment'}} }); -``` - -**See also** - -* [MediaStreamConstraints](https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints) -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - - - -## openVideo - -Binds UI and opens the camera to show the video stream. - -```typescript -openVideo(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -await scanner.setUIElement("https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.7/dist/dbr.scanner.html"); -await scanner.openVideo(); // The video will start playing but it may not be visible on the page -console.log(await scanner.decodeCurrentFrame()); -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - - - -## showVideo - -Similar to [openVideo](#openvideo) but will also show the UI Element if it is hidden. - -```typescript -showVideo(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -await scanner.setUIElement("https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.7/dist/dbr.scanner.html"); -await scanner.showVideo(); // The video will start playing and show up on the page -console.log(await scanner.decodeCurrentFrame()); -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - - - -## play - -Play the video if it is already open but paused or stopped. If the video is already playing, it will start again. - -```typescript -play(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -scanner.pause(); -//..doing other things without the video -await scanner.play(); -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - - - -## onPlayed - -This event is triggered when the video stream starts playing. - -```typescript -event onPlayed: (info: ScannerPlayCallbackInfo) => void -``` - -**Arguments** - -info: a `ScannerPlayCallbackInfo` object which describes the resolution of the video input. - -**Code Snippet** - -```js -scanner.onplayed = rsl=>{ console.log(rsl.width+'x'+rsl.height) }; -await scanner.show(); // or open(), play(), setCurrentCamera(), etc. -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - - - -## pause - -Pauses the video without releasing the camera. - -```typescript -pause(): void -``` - -**Parameters** - -None. - -**Return value** - -None. - - - -## stop - -Stops the video and releases the camera. - -```typescript -stop(): void -``` - -**Parameters** - -None. - -**Return value** - -None. - - - -## getCapabilities - -Inspects and returns the capabilities of the current camera. - -Right now, this method only works in Chrome and should be called when the scanner is open. - -```typescript -getCapabilities(): MediaTrackCapabilities -``` - -**Parameters** - -None. - -**Return value** - -A `MediaTrackCapabilities` object which specifies the values or range of values for each constrainable property of the current camera. - -**Code Snippet** - -```js -scanner.getCapabilities(); -/* Result sample -{ - aspectRatio: {max: 1280, min: 0.001388888888888889}, - brightness: {max: 64, min: -64, step: 1}, - colorTemperature: {max: 6500, min: 2800, step: 10}, - contrast: {max: 95, min: 0, step: 1}, - deviceId: "3a505c29a3312600ea0afd79f8e2b4ba4fba3e539257801ff1de8718c27f2bed", - exposureMode: ["continuous", "manual"], - exposureTime: {max: 10000, min: 39.0625, step: 39.0625}, - facingMode: [], - focusDistance: {max: 1024, min: 0, step: 10}, - focusMode: ["continuous", "manual"], - frameRate: {max: 30, min: 0}, - groupId: "35a82dcb7d5b0ef5bda550718d194f04a812c976175e926ccb81fb9d235d010f", - height: {max: 720, min: 1}, - resizeMode: ["none", "crop-and-scale"], - saturation: {max: 100, min: 0, step: 1}, - sharpness: {max: 7, min: 1, step: 1}, - whiteBalanceMode: ["continuous", "manual"], - width: {max: 1280, min: 1} -} -*/ -``` - -**See also** - -* [MediaTrackCapabilities](https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/getCapabilities) - - - -## getCameraSettings - -Returns the current values for each constrainable property of the current camera. - -Right now, this method only works in Chrome and should be called when the scanner is open. - -```typescript -getCameraSettings(): any -``` - -**Parameters** - -None. - -**Return value** - -The current values for each constrainable property of the current camera - -**Code Snippet** - -```js -scanner.getCameraSettings(); -/* Result sample -{ - aspectRatio: 1.3333333333333333, - brightness: 0, - colorTemperature: 4600, - contrast: 0, - deviceId: "3a505c29a3312600ea0afd79f8e2b4ba4fba3e539257801ff1de8718c27f2bed", - exposureMode: "continuous", - exposureTime: 156.25, - focusDistance: 120, - focusMode: "continuous", - frameRate: 30, - groupId: "35a82dcb7d5b0ef5bda550718d194f04a812c976175e926ccb81fb9d235d010f", - height: 480, - resizeMode: "none", - saturation: 73, - sharpness: 2, - whiteBalanceMode: "continuous", - width: 640 -} -*/ -``` - -**See also** - -* [getCapabilities](#getcapabilities) - - - -## setFrameRate - -Adjusts the frame rate. - -Right now, this method only works in Chrome and should be called when the scanner is open. - -```typescript -setFrameRate(rate: number): Promise -``` - -**Parameters** - -`rate`: specifies the new frame rate. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setFrameRate(10); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - - - -## setColorTemperature - -Adjusts the color temperature. - -Right now, this method only works in Chrome and should be called when the scanner is open. - -```typescript -setColorTemperature(colorTemperatur: number): Promise -``` - -**Parameters** - -`colorTemperatur`: specifies the new color temperature. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setColorTemperature(5000); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - - - -## setExposureCompensation - -Sets the exposure compensation index. - -Right now, this method only works in Chrome and should be called when the scanner is open. - -```typescript -setExposureCompensation(exposureCompensation: number): Promise -``` - -**Parameters** - -`exposureCompensation`: specifies the new exposure compensation index. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setExposureCompensation(-0.7); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - - - -## setZoom - -Sets current zoom value. - -```typescript -setZoom(zoomValue: number): Promise -``` - -**Parameters** - -`zoomValue`: specifies the new zoom value. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setZoom(400); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - -## turnOnTorch - -Turns on the torch/flashlight. - -> This method should be called when the camera is turned on. Note that it only works with Chromium-based browsers such as Edge and Chrome on Windows or Android. Other browsers such as Firefox or Safari are not supported. Note that all browsers on iOS (including Chrome) use WebKit as the rendering engine and are not supported. - -```typescript -turnOnTorch(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.turnOnTorch(); -``` - -**See also** - -* [turnOffTorch](#turnofftorch) -* [getCapabilities](#getcapabilities) - - - -## turnOffTorch - -Turns off the torch/flashlight. - -Right now, this method only works in Chrome and should be called when the scanner is open. - -```typescript -turnOffTorch(): Promise -``` - -**Parameters** - -None. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.turnOffTorch(); -``` - -**See also** - -* [turnOnTorch](#turnontorch) -* [getCapabilities](#getcapabilities) diff --git a/programming-old/javascript/api-reference/BarcodeScanner-v9.0.0.md b/programming-old/javascript/api-reference/BarcodeScanner-v9.0.0.md deleted file mode 100644 index be77a592..00000000 --- a/programming-old/javascript/api-reference/BarcodeScanner-v9.0.0.md +++ /dev/null @@ -1,1112 +0,0 @@ ---- -layout: default-layout -title: v9.0.0 BarcodeScanner - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows the BarcodeScanner class of Dynamsoft Barcode Reader JavaScript SDK v9.0.0. -keywords: BarcodeScanner, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -noTitleIndex: true -breadcrumbText: BarcodeScanner -permalink: /programming/javascript/api-reference/BarcodeScanner-v9.0.0.html ---- - -# BarcodeScanner for Video - -A barcode scanner object gets access to a camera via the [MediaDevices](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices) interface, then uses its built-in UI to show the camera input and perform continuous barcode scanning on the incoming frames. - -The default built-in UI of each barcode scanner is defined in the file "dbr.ui.html". If used directly, the UI will fit the entire page and sit on top. There are a few ways to customize it, read more on how to [Customize the UI](../user-guide/#customize-the-ui). - -Although a barcode scanner is designed to scan barcodes from a video input, it also supports a special mode called [singleFrameMode](#singleframemode) which allows the user to select a still image or take a shot with the mobile camera for barcode scanning. - -The `BarcodeScanner` is a child class of [BarcodeReader](./BarcodeReader.md) and inherits all its methods and properties which will not be covered in this article. - -The following code snippet shows the basic usage of the `BarcodeScanner` class. - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -scanner.onUniqueRead = txt => console.log(txt); -await scanner.show(); -``` - -## API Index - -### Create and Destroy Instances - -| API Name | Description | -|---|---| -| [createInstance()](#createinstance) | Creates a `BarcodeScanner` instance. | -| [destroyContext()](#destroycontext) | Destroys the `BarcodeScanner` instance. | -| [isContextDestroyed()](#iscontextdestroyed) | Indicates whether the instance has been destroyed. | - -### Decode Barcodes - -| API Name | Description | -|---|---| -| [onUniqueRead](#onuniqueread) | This event is triggered when a new, unduplicated barcode is found. | -| [onFrameRead](#onframeread) | This event is triggered after the library finishes scanning a frame. | - -### Basic Interactions - -| API Name | Description | -|---|---| -| [show()](#show) | Binds and shows UI, opens the camera and starts decoding. | -| [hide()](#hide) | Stops decoding, releases camera and unbinds UI. | -| [open()](#open) | Binds UI, opens the camera and starts decoding. | -| [close()](#close) | Stops decoding, releases camera and unbinds UI. | - -### Scan Settings - -| API Name | Description | -|---|---| -| [singleFrameMode](#singleframemode) | Returns or sets whether to enable the singe-frame mode. | -| [getScanSettings()](#getscansettings) | Returns the current scan settings. | -| [updateScanSettings()](#updatescansettings) | Changes scan settings with the object passed in. | - -### UI Control - -| API Name | Description | -|---|---| -| [getUIElement()](#getuielement) | Returns the HTML element that is used by the `BarcodeScanner` instance. | -| [setUIElement()](#setuielement) | Specifies an HTML element for the `BarcodeScanner` instance to use as its UI. | -| [defaultUIElementURL](#defaultuielementurl) | Returns or sets the URL of the .html file that defines the default UI Element. | -| [barcodeFillStyle](#barcodefillstyle) | Specifies the color used inside the shape which highlights a found barcode. | -| [barcodeStrokeStyle](#barcodestrokestyle) | Specifies the color used to paint the outline of the shape which highlights a found barcode. | -| [barcodeLineWidth](#barcodelinewidth) | Specifies the line width of the outline of the shape which highlights a found barcode. | -| [regionMaskFillStyle](#regionmaskfillstyle) | Specifies the color used in the square-loop shape between the actual scanning area and the boundary of the video input. | -| [regionMaskStrokeStyle](#regionmaskstrokestyle) | Specifies the color used to paint the outline of the scanning region. | -| [regionMaskLineWidth](#regionmasklinewidth) | Specifies the width of the outline of the scanning region. | - - -### Camera Control - -| API Name | Description | -|---|---| -| [getAllCameras()](#getallcameras) | Returns infomation of all available cameras on the device. | -| [getCurrentCamera()](#getcurrentcamera) | Returns information about the current camera. | -| [setCurrentCamera()](#setcurrentcamera) | Chooses a camera as the video source. | -| [getResolution()](#getresolution) | Returns the resolution of the current video input. | -| [setResolution()](#setresolution) | Sets the resolution of the current video input. | -| [getVideoSettings()](#getvideosettings) | Returns the current video settings. | -| [updateVideoSettings()](#updatevideosettings) | Changes the video input. | - -### Video Decoding Process Control - -| API Name | Description | -|---|---| -| [play()](#play) | Play the video if it is already open but paused or stopped. | -| [onPlayed](#onplayed) | This event is triggered when the video stream starts playing. | -| [pauseScan()](#pausescan) | Pauses the decoding process. | -| [resumeScan()](#resumescan) | Resumes the decoding process. | -| [pause()](#pause) | Pauses the video without releasing the camera. | -| [stop()](#stop) | Stops the video and releases the camera. | - -### Advanced Camera Control - -| API Name | Description | -|---|---| -| [getCapabilities()](#getcapabilities) | Inspects and returns the capabilities of the current camera. | -| [getCameraSettings()](#getcamerasettings) | Returns the current values for each constrainable property of the current camera. | -| [setFrameRate()](#setframerate) | Adjusts the frame rate. | -| [getFrameRate()](#getframerate) | Returns the real-time frame rate. | -| [setColorTemperature()](#setcolortemperature) | Adjusts the color temperature. | -| [setExposureCompensation()](#setexposurecompensation) | Sets the exposure compensation index. | -| [setFocus()](#setfocus) | Sets the focus mode and focus distance of the camera. | -| [getFocus()](#getfocus) | Gets the focus mode and focus distance of the camera. | -| [setZoom()](#setzoom) | Sets the zoom level of the camera. | -| [turnOnTorch()](#turnontorch) | Turns on the torch/flashlight. | -| [turnOffTorch()](#turnofftorch) | Turns off the torch/flashlight. | - -### Inherited from the `BarcodeReader` Class - -#### Change Settings - -| API Name | Description | -|---|---| -| [getRuntimeSettings()](./BarcodeReader.md#getruntimesettings) | Returns the current runtime settings. | -| [updateRuntimeSettings()](./BarcodeReader.md#updateruntimesettings) | Updates runtime settings with a given struct or a preset template. | -| [resetRuntimeSettings()](./BarcodeReader.md#resetruntimesettings) | Resets all parameters to default values. | -| [getModeArgument()](./BarcodeReader.md#getmodeargument) | Returns the argument value for the specified mode parameter. | -| [setModeArgument()](./BarcodeReader.md#setmodeargument) | Sets the argument value for the specified mode parameter. | - -#### Auxiliary - -| API Name | Description | -|---|---| -| [ifSaveOriginalImageInACanvas](./BarcodeReader.md#ifsaveoriginalimageinacanvas) | Whether to save the original image into a <canvas> element. | -| [getOriginalImageInACanvas()](./BarcodeReader.md#getoriginalimageinacanvas) | Returns an `HTMLCanvasElement` that holds the original image. | - -## createInstance - -Creates a `BarcodeScanner` instance. - -```typescript -static createInstance(): Promise -``` - -**Return value** - -A promise resolving to the created `BarcodeScanner` object. - -**Code Snippet** - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -``` - -## destroyContext - -Destroys the `BarcodeScanner` instance. If your page needs to create a new instance from time to time, don't forget to destroy unused old instances. - -```typescript -destroyContext(): void -``` - -**Code Snippet** - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -// ... decode ... -scanner.destroyContext(); -``` - -## isContextDestroyed - -Returns whether the instance has been destroyed. - -```typescript -isContextDestroyed(): boolean -``` - -## onUniqueRead - -Specifies an event handler which fires when a new, unduplicated barcode is found. - -The library keeps each barcode result (type and value) in the buffer for a period of time (can be set with [duplicateForgetTime](./interface/ScanSettings.md)) during which if a new result is an exact match, it's seen as a duplicate and will again be kept for that period of time while the old result is removed and so on. - -```typescript -onUniqueRead: (txt: string, result: TextResult) => void -``` - -**Arguments** - -`txt` : a string that holds the barcode text. - -`result` : a `TextResult` object that contains more detailed info. - -**Code Snippet** - -```js -scanner.onUniqueRead = (txt, result) => { - alert(txt); - console.log(result); -} -``` - -**See also** - -* [TextResult](./interface/TextResult.md) - -## onFrameRead - -Specifies an event handler which fires after the library finishes scanning a frame. - -```typescript -onFrameRead: (results: TextResult[]) => void -``` - -**Arguments** - -`results` : a `TextResult` object that contains all the barcode results in this frame. - -**Code Snippet** - -```js -scanner.onFrameRead = results => { - for (let result of results) { - console.log(result.barcodeText); - } -}; -``` - -**See also** - -* [TextResult](./interface/TextResult.md) - -## show - -Binds and shows UI, opens the camera and starts decoding. - -```typescript -show(): Promise -``` - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -scanner.onUniqueRead = (txt, result) => { - alert(txt); - console.log(result); -}; -await scanner.show(); -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - -## hide - -Stops decoding, releases camera and unbinds UI. - -```typescript -hide(): void -``` - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.show(); -//...scan barcodes -scanner.hide(); -``` - -## open - -Binds UI, opens the camera and starts decoding. - -```typescript -open(): Promise -``` - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.open(); -//...scan barcodes -await scanner.close(); -``` - -## close - -Stops decoding, releases camera and unbinds UI. - -```typescript -close(): void -``` - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.open(); -//...scan barcodes -scanner.close(); -``` - -# pauseScan - -Pauses the decoding process. - -```typescript -pauseScan(): void -``` - -## resumeScan - -Resumes the decoding process. - -```typescript -resumeScan(): void -``` - -## singleFrameMode - -Returns or sets the status of the single-frame mode. If enabled, the video input will not be played and the user can choose to take a picture with the system camera (mobile only) or select an existing image for barcode reading. - -Because the system camera of a mobile device can provide pictures with better quality, the API is useful when facing complex scenarios such as reading the dense PDF417 code on a driver license. - -The single-frame mode can only be enabled or disabled before the video input starts playing. - -If the browser does not support the `MediaDevices`/`getUserMedia` API, the `singleFrameMode` will be set as `true` automatically when the API `createInstance()` is called. - -```typescript -singleFrameMode: boolean -``` - -**Code Snippet** - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -if(didVideoStreamFailWhenReadingDriverLicenses){ - scanner.singleFrameMode = true; - await scanner.show(); -} -``` - -## getScanSettings - -Returns the current scan settings. - -```typescript -getScanSettings(): Promise -``` - -**Return value** - -A promise resolving to a `ScanSettings` . - -**Code Snippet** - -```js -let scanSettings = await scanner.getScanSettings(); -scanSettings.intervalTime = 50; -scanSettings.duplicateForgetTime = 1000; -await scanner.updateScanSettings(scanSettings); -``` - -**See also** - -* [ScanSettings](./interface/ScanSettings.md) - -## updateScanSettings - -Changes scan settings with the object passed in. - -```typescript -updateScanSettings(settings: ScanSettings): Promise -``` - -**Parameters** - -`settings` : specifies the new scan settings. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -let scanSettings = await scanner.getScanSettings(); -scanSettings.intervalTime = 50; -scanSettings.duplicateForgetTime = 1000; -await scanner.updateScanSettings(scanSettings); -``` - -**See also** - -* [ScanSettings](./interface/ScanSettings.md) - -## getUIElement - -Returns the HTML element that is used by the [BarcodeScanner](#barcodescanner) instance. - -```typescript -getUIElement(): HTMLElement -``` - -## setUIElement - -Specifies an HTML element for the [BarcodeScanner](#barcodescanner) instance to use as its UI. The structure inside the element determines the appearance of the UI. See more on [how to customize the UI](../user-guide/#customize-the-ui). - -```typescript -setUIElement(elementOrURL: HTMLElement | string): Promise -``` - -**Parameters** - -`elementOrURL` : specifies the element. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```html - - -
    - -``` - -```html - - -``` - -## defaultUIElementURL - -Returns or sets the URL of the *.html* file that defines the default UI Element. The URL can only be set before the API [createInstance](#createinstance) is called. - -```typescript -static defaultUIElementURL: string -``` - -**Code Snippet** - -```js -Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.0.0/dist/dbr.ui.html"; -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -await scanner.show(); -``` - -## barcodeFillStyle - -Specifies the color used inside the shape which highlights a found barcode. The default value is `rgba(254, 180, 32, 0.3)` . - -```typescript -barcodeFillStyle: string -``` - -## barcodeStrokeStyle - -Specifies the color used to paint the outline of the shape which highlights a found barcode. The default value is `rgba(254, 180, 32, 0.9)` . - -```typescript -barcodeStrokeStyle: string -``` - -## barcodeLineWidth - -Specifies the line width of the outline of the shape which highlights a found barcode. The default value is `1` . - -```typescript -barcodeLineWidth: number -``` - -## regionMaskFillStyle - -Specifies the color used in the square-loop shape between the actual scanning area and the boundary of the video input. This shape only appears when the barcode scanning is limited to a specified region. The default value is `rgba(0, 0, 0, 0.5)` . - -```typescript -regionMaskFillStyle: string -``` - -**See also** - -* [Read a specific area/region](../user-guide/advanced-usage.html#read-a-specific-arearegion) - -## regionMaskStrokeStyle - -Specifies the color used to paint the outline of the scanning region. This outline only appears when the barcode scanning is limited to a specified region. The default value is `rgb(254, 142, 20)` . - -```typescript -regionMaskStrokeStyle: string -``` - -**See also** - -* [Read a specific area/region](../user-guide/advanced-usage.html#read-a-specific-arearegion) - -## regionMaskLineWidth - -Specifies the width of the outline of the scanning region. This outline only appears when the barcode scanning is limited to a specified region. The default value is `2` . - -```typescript -regionMaskLineWidth: number -``` - -**See also** - -* [Read a specific area/region](../user-guide/advanced-usage.html#read-a-specific-arearegion) - -## getAllCameras - -Returns infomation of all available cameras on the device. - -```typescript -getAllCameras(): Promise -``` - -**Return value** - -A promise resolving to an array of `VideoDeviceInfo` objects. - -**Code Snippet** - -```js -let cameras = await scanner.getAllCameras(); -if (cameras.length) { - await scanner.setCurrentCamera(cameras[0]); -} -``` - -**See also** - -* [VideoDeviceInfo](./interface/VideoDeviceInfo.md) - -## getCurrentCamera - -Returns information about the current camera. - -```typescript -getCurrentCamera(): Promise -``` - -**Return value** - -A promise resolving to a `VideoDeviceInfo` object. - -**Code Snippet** - -```js -let camera = await scanner.getCurrentCamera(); -``` - -**See also** - -* [VideoDeviceInfo](./interface/VideoDeviceInfo.md) - -## setCurrentCamera - -Chooses a camera as the video source. - -```typescript -setCurrentCamera(deviceID: string): Promise -``` - -**Parameters** - -`deviceID` : specifies the camera. - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -let cameras = await scanner.getAllCameras(); -if (cameras.length) { - await scanner.setCurrentCamera(cameras[0]); -} -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - -## getResolution - -Returns the resolution of the current video input. - -```typescript -getResolution(): number[] -``` - -**Return value** - -An array of two numbers representing the resolution. - -**Code Snippet** - -```js -let rsl = scanner.getResolution(); -console.log(rsl[0] + " x " + rsl[1]); -``` - -## setResolution - -Sets the resolution of the current video input. If the specified resolution is not exactly supported, the closest resolution will be applied. - -```typescript -setResolution(width: number, height: number): Promise -``` - -**Parameters** - -`width` : specifies the horizontal resolution. -`height` : specifies the vertical resolution. - -> To speed up the barcode scanning, the image frames will be scaled down when it exceeds a size limit either horizontally or vertically. The limit is 2048 pixels on mobile devices and 4096 on other devices. Therefore, setting a very high resolution will not help with the scanning. - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -await scanner.setResolution(width, height); -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - -## getVideoSettings - -Returns the current video settings. - -```typescript -getVideoSettings(): MediaStreamConstraints -``` - -**Return value** - -A `MediaStreamConstraints` object. - -**See also** - -* [MediaStreamConstraints](https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints) - -## updateVideoSettings - -Changes the video input. - -```typescript -updateVideoSettings(constraints: MediaStreamConstraints): Promise -``` - -**Parameters** - -`constraints` : specifies the new video settings. - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -await scanner.updateVideoSettings({ - video: { - width: { - ideal: 1280 - }, - height: { - ideal: 720 - }, - facingMode: { - ideal: 'environment' - } - } -}); -``` - -**See also** - -* [MediaStreamConstraints](https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints) -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - -## play - -Play the video if it is already open but paused or stopped. If the video is already playing, it will start again. - -```typescript -play(): Promise -``` - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -scanner.pause(); -//..doing other things without the video -await scanner.play(); -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - -## onPlayed - -This event is triggered when the video stream starts playing. - -```typescript -event onPlayed: (info: ScannerPlayCallbackInfo) => void -``` - -**Arguments** - -info: a `ScannerPlayCallbackInfo` object which describes the resolution of the video input. - -**Code Snippet** - -```js -scanner.onplayed = rsl => { - console.log(rsl.width + 'x' + rsl.height) -}; -await scanner.show(); // or open(), play(), setCurrentCamera(), etc. -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - -## pause - -Pauses the video without releasing the camera. - -```typescript -pause(): void -``` - -## stop - -Stops the video and releases the camera. - -```typescript -stop(): void -``` - -## getCapabilities - -Inspects and returns the capabilities of the current camera. - -> At present, this method only works in Edge, Safari, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -getCapabilities(): MediaTrackCapabilities -``` - -**Return value** - -A `MediaTrackCapabilities` object which specifies the values or range of values for each constrainable property of the current camera. - -**Code Snippet** - -```js -scanner.getCapabilities(); -/* Result sample -{ - aspectRatio: {max: 1280, min: 0.001388888888888889}, - brightness: {max: 64, min: -64, step: 1}, - colorTemperature: {max: 6500, min: 2800, step: 10}, - contrast: {max: 95, min: 0, step: 1}, - deviceId: "3a505c29a3312600ea0afd79f8e2b4ba4fba3e539257801ff1de8718c27f2bed", - exposureMode: ["continuous", "manual"], - exposureTime: {max: 10000, min: 39.0625, step: 39.0625}, - facingMode: [], - focusDistance: {max: 1024, min: 0, step: 10}, - focusMode: ["continuous", "manual"], - frameRate: {max: 30, min: 0}, - groupId: "35a82dcb7d5b0ef5bda550718d194f04a812c976175e926ccb81fb9d235d010f", - height: {max: 720, min: 1}, - resizeMode: ["none", "crop-and-scale"], - saturation: {max: 100, min: 0, step: 1}, - sharpness: {max: 7, min: 1, step: 1}, - whiteBalanceMode: ["continuous", "manual"], - width: {max: 1280, min: 1}, - zoom: {max: 800, min: 100, step: 100}, -} -*/ -``` - -**See also** - -* [MediaTrackCapabilities](https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/getCapabilities) - -## getCameraSettings - -Returns the current values for each constrainable property of the current camera. - -Right now, this method only works in Chrome and should be called when the scanner is open. - -```typescript -getCameraSettings(): any -``` - -**Return value** - -The current values for each constrainable property of the current camera in the form of a [MediaTrackSettings](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSettings) object. - -**Code Snippet** - -```js -scanner.getCameraSettings(); -/* Result sample -{ - aspectRatio: 1.3333333333333333, - brightness: 0, - colorTemperature: 4600, - contrast: 0, - deviceId: "3a505c29a3312600ea0afd79f8e2b4ba4fba3e539257801ff1de8718c27f2bed", - exposureMode: "continuous", - exposureTime: 156.25, - focusDistance: 120, - focusMode: "continuous", - frameRate: 30, - groupId: "35a82dcb7d5b0ef5bda550718d194f04a812c976175e926ccb81fb9d235d010f", - height: 480, - resizeMode: "none", - saturation: 73, - sharpness: 2, - whiteBalanceMode: "continuous", - width: 640, - zoom: 100, -} -*/ -``` - -**See also** - -* [getCapabilities](#getcapabilities) - -## setFrameRate - -Adjusts the frame rate. - -> At present, this method only works in Edge, Safari, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -setFrameRate(rate: number): Promise -``` - -**Parameters** - -`rate` : specifies the new frame rate. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setFrameRate(10); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - -## getFrameRate - -Returns the real-time frame rate. - -```typescript -getFrameRate(): number; -``` - -**Parameters** - -None. - -**Return value** - -The calculated real-time frame rate. - -**Code Snippet** - -```js -await scanner.getFrameRate(); -``` - -## setColorTemperature - -Adjusts the color temperature. - -> At present, this method only works in Edge, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -setColorTemperature(colorTemperatur: number): Promise -``` - -**Parameters** - -`colorTemperatur` : specifies the new color temperature. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setColorTemperature(5000); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - -## setExposureCompensation - -Sets the exposure compensation index. - -> At present, this method only works in Edge, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -setExposureCompensation(exposureCompensation: number): Promise -``` - -**Parameters** - -`exposureCompensation` : specifies the new exposure compensation index. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setExposureCompensation(-0.7); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - -## setFocus - -Sets the focus mode and focus distance of the camera. - -> At present, this method only works in Edge, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -setFocus(mode: string, distance?: number): Promise; -``` - -**Parameters** - -`mode` : specifies the focus mode, the available values include `continuous` and `manual` . -`distance` : specifies the focus distance, only required when the `mode` is set to `manual` . Use [getCapabilities](#getcapabilities) to get the allowed value range. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setFocus("manual", 400); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - -## getFocus - -Gets the focus mode and the focus distance. - -```typescript -getFocus(): {mode: string, distance?: number}; -``` - -**Parameters** - -None. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.getFocus(); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - -## setZoom - -Sets current zoom value. - -> At present, this method only works in Edge, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -setZoom(zoomValue: number): Promise -``` - -**Parameters** - -`zoomValue` : specifies the new zoom value. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setZoom(400); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - -## turnOnTorch - -Turns on the torch/flashlight if the current camera supports it. - -> This method should be called when the camera is turned on. Note that it only works with Chromium-based browsers such as Edge and Chrome on Windows or Android. Other browsers such as Firefox or Safari are not supported. Note that all browsers on iOS (including Chrome) use WebKit as the rendering engine and are not supported. - -```typescript -turnOnTorch(): Promise -``` - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.turnOnTorch(); -``` - -**See also** - -* [turnOffTorch](#turnofftorch) -* [getCapabilities](#getcapabilities) - -## turnOffTorch - -Turns off the torch/flashlight. - -> At present, this method only works in Edge, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -turnOffTorch(): Promise -``` - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.turnOffTorch(); -``` - -**See also** - -* [turnOnTorch](#turnontorch) -* [getCapabilities](#getcapabilities) diff --git a/programming-old/javascript/api-reference/BarcodeScanner-v9.0.2.md b/programming-old/javascript/api-reference/BarcodeScanner-v9.0.2.md deleted file mode 100644 index 7366352f..00000000 --- a/programming-old/javascript/api-reference/BarcodeScanner-v9.0.2.md +++ /dev/null @@ -1,1151 +0,0 @@ ---- -layout: default-layout -title: v9.0.2 BarcodeScanner - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows the BarcodeScanner class of Dynamsoft Barcode Reader JavaScript SDK v9.0.2. -keywords: BarcodeScanner, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -noTitleIndex: true -breadcrumbText: BarcodeScanner -permalink: /programming/javascript/api-reference/BarcodeScanner-v9.0.2.html ---- - -# BarcodeScanner for Video - -A barcode scanner object gets access to a camera via the [MediaDevices](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices) interface, then uses its built-in UI to show the camera input and perform continuous barcode scanning on the incoming frames. - -The default built-in UI of each barcode scanner is defined in the file "dbr.ui.html". If used directly, the UI will fit the entire page and sit on top. There are a few ways to customize it, read more on how to [Customize the UI](../user-guide/#customize-the-ui). - -Although a barcode scanner is designed to scan barcodes from a video input, it also supports a special mode called [singleFrameMode](#singleframemode) which allows the user to select a still image or take a shot with the mobile camera for barcode scanning. - -The `BarcodeScanner` is a child class of [BarcodeReader](./BarcodeReader.md) and inherits all its methods and properties which will not be covered in this article. - -The following code snippet shows the basic usage of the `BarcodeScanner` class. - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -scanner.onUniqueRead = txt => console.log(txt); -await scanner.show(); -``` - -## API Index - -### Create and Destroy Instances - -| API Name | Description | -|---|---| -| [createInstance()](#createinstance) | Creates a `BarcodeScanner` instance. | -| [destroyContext()](#destroycontext) | Destroys the `BarcodeScanner` instance. | -| [isContextDestroyed()](#iscontextdestroyed) | Indicates whether the instance has been destroyed. | - -### Decode Barcodes - -| API Name | Description | -|---|---| -| [onUniqueRead](#onuniqueread) | This event is triggered when a new, unduplicated barcode is found. | -| [onFrameRead](#onframeread) | This event is triggered after the library finishes scanning a frame. | - -### Basic Interactions - -| API Name | Description | -|---|---| -| [show()](#show) | Binds and shows UI, opens the camera and starts decoding. | -| [hide()](#hide) | Stops decoding, releases camera and unbinds UI. | -| [open()](#open) | Binds UI, opens the camera and starts decoding. | -| [close()](#close) | Stops decoding, releases camera and unbinds UI. | - -### Scan Settings - -| API Name | Description | -|---|---| -| [singleFrameMode](#singleframemode) | Returns or sets whether to enable the singe-frame mode. | -| [getScanSettings()](#getscansettings) | Returns the current scan settings. | -| [updateScanSettings()](#updatescansettings) | Changes scan settings with the object passed in. | - -### UI Control - -| API Name | Description | -|---|---| -| [getUIElement()](#getuielement) | Returns the HTML element that is used by the `BarcodeScanner` instance. | -| [setUIElement()](#setuielement) | Specifies an HTML element for the `BarcodeScanner` instance to use as its UI. | -| [defaultUIElementURL](#defaultuielementurl) | Returns or sets the URL of the .html file that defines the default UI Element. | -| [barcodeFillStyle](#barcodefillstyle) | Specifies the color used inside the shape which highlights a found barcode. | -| [barcodeStrokeStyle](#barcodestrokestyle) | Specifies the color used to paint the outline of the shape which highlights a found barcode. | -| [barcodeLineWidth](#barcodelinewidth) | Specifies the line width of the outline of the shape which highlights a found barcode. | -| [regionMaskFillStyle](#regionmaskfillstyle) | Specifies the color used in the square-loop shape between the actual scanning area and the boundary of the video input. | -| [regionMaskStrokeStyle](#regionmaskstrokestyle) | Specifies the color used to paint the outline of the scanning region. | -| [regionMaskLineWidth](#regionmasklinewidth) | Specifies the width of the outline of the scanning region. | -| [setVideoFit()](#setvideofit) | Sets the `object-fit` CSS property of the video element. | -| [ifShowScanRegionMask](#ifshowscanregionmask) | Whether to show or hide the scan region mask. | - -### Camera Control - -| API Name | Description | -|---|---| -| [getAllCameras()](#getallcameras) | Returns infomation of all available cameras on the device. | -| [getCurrentCamera()](#getcurrentcamera) | Returns information about the current camera. | -| [setCurrentCamera()](#setcurrentcamera) | Chooses a camera as the video source. | -| [getResolution()](#getresolution) | Returns the resolution of the current video input. | -| [setResolution()](#setresolution) | Sets the resolution of the current video input. | -| [getVideoSettings()](#getvideosettings) | Returns the current video settings. | -| [updateVideoSettings()](#updatevideosettings) | Changes the video input. | - -### Video Decoding Process Control - -| API Name | Description | -|---|---| -| [play()](#play) | Play the video if it is already open but paused or stopped. | -| [onPlayed](#onplayed) | This event is triggered when the video stream starts playing. | -| [pauseScan()](#pausescan) | Pauses the decoding process. | -| [resumeScan()](#resumescan) | Resumes the decoding process. | -| [pause()](#pause) | Pauses the video without releasing the camera. | -| [stop()](#stop) | Stops the video and releases the camera. | - -### Advanced Camera Control - -| API Name | Description | -|---|---| -| [getCapabilities()](#getcapabilities) | Inspects and returns the capabilities of the current camera. | -| [getCameraSettings()](#getcamerasettings) | Returns the current values for each constrainable property of the current camera. | -| [setFrameRate()](#setframerate) | Adjusts the frame rate. | -| [getFrameRate()](#getframerate) | Returns the real-time frame rate. | -| [setColorTemperature()](#setcolortemperature) | Adjusts the color temperature. | -| [setExposureCompensation()](#setexposurecompensation) | Sets the exposure compensation index. | -| [setFocus()](#setfocus) | Sets the focus mode and focus distance of the camera. | -| [getFocus()](#getfocus) | Gets the focus mode and focus distance of the camera. | -| [setZoom()](#setzoom) | Sets the zoom level of the camera. | -| [turnOnTorch()](#turnontorch) | Turns on the torch/flashlight. | -| [turnOffTorch()](#turnofftorch) | Turns off the torch/flashlight. | - -### Inherited from the `BarcodeReader` Class - -#### Change Settings - -| API Name | Description | -|---|---| -| [getRuntimeSettings()](./BarcodeReader.md#getruntimesettings) | Returns the current runtime settings. | -| [updateRuntimeSettings()](./BarcodeReader.md#updateruntimesettings) | Updates runtime settings with a given struct or a preset template. | -| [resetRuntimeSettings()](./BarcodeReader.md#resetruntimesettings) | Resets all parameters to default values. | -| [getModeArgument()](./BarcodeReader.md#getmodeargument) | Returns the argument value for the specified mode parameter. | -| [setModeArgument()](./BarcodeReader.md#setmodeargument) | Sets the argument value for the specified mode parameter. | - -#### Auxiliary - -| API Name | Description | -|---|---| -| [ifSaveOriginalImageInACanvas](./BarcodeReader.md#ifsaveoriginalimageinacanvas) | Whether to save the original image into a <canvas> element. | -| [getOriginalImageInACanvas()](./BarcodeReader.md#getoriginalimageinacanvas) | Returns an `HTMLCanvasElement` that holds the original image. | - -## createInstance - -Creates a `BarcodeScanner` instance. - -```typescript -static createInstance(): Promise -``` - -**Return value** - -A promise resolving to the created `BarcodeScanner` object. - -**Code Snippet** - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -``` - -## destroyContext - -Destroys the `BarcodeScanner` instance. If your page needs to create a new instance from time to time, don't forget to destroy unused old instances. - -```typescript -destroyContext(): void -``` - -**Code Snippet** - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -// ... decode ... -scanner.destroyContext(); -``` - -## isContextDestroyed - -Returns whether the instance has been destroyed. - -```typescript -isContextDestroyed(): boolean -``` - -## onUniqueRead - -Specifies an event handler which fires when a new, unduplicated barcode is found. - -The library keeps each barcode result (type and value) in the buffer for a period of time (can be set with [duplicateForgetTime](./interface/ScanSettings.md)) during which if a new result is an exact match, it's seen as a duplicate and will again be kept for that period of time while the old result is removed and so on. - -```typescript -onUniqueRead: (txt: string, result: TextResult) => void -``` - -**Arguments** - -`txt` : a string that holds the barcode text. - -`result` : a `TextResult` object that contains more detailed info. - -**Code Snippet** - -```js -scanner.onUniqueRead = (txt, result) => { - alert(txt); - console.log(result); -} -``` - -**See also** - -* [TextResult](./interface/TextResult.md) - -## onFrameRead - -Specifies an event handler which fires after the library finishes scanning a frame. - -```typescript -onFrameRead: (results: TextResult[]) => void -``` - -**Arguments** - -`results` : a `TextResult` object that contains all the barcode results in this frame. - -**Code Snippet** - -```js -scanner.onFrameRead = results => { - for (let result of results) { - console.log(result.barcodeText); - } -}; -``` - -**See also** - -* [TextResult](./interface/TextResult.md) - -## show - -Binds and shows UI, opens the camera and starts decoding. - -```typescript -show(): Promise -``` - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -scanner.onUniqueRead = (txt, result) => { - alert(txt); - console.log(result); -}; -await scanner.show(); -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - -## hide - -Stops decoding, releases camera and unbinds UI. - -```typescript -hide(): void -``` - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.show(); -//...scan barcodes -scanner.hide(); -``` - -## open - -Binds UI, opens the camera and starts decoding. - -```typescript -open(): Promise -``` - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.open(); -//...scan barcodes -await scanner.close(); -``` - -## close - -Stops decoding, releases camera and unbinds UI. - -```typescript -close(): void -``` - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.open(); -//...scan barcodes -scanner.close(); -``` - -# pauseScan - -Pauses the decoding process. - -```typescript -pauseScan(): void -``` - -## resumeScan - -Resumes the decoding process. - -```typescript -resumeScan(): void -``` - -## singleFrameMode - -Returns or sets the status of the single-frame mode. If enabled, the video input will not be played and the user can choose to take a picture with the system camera (mobile only) or select an existing image for barcode reading. - -Because the system camera of a mobile device can provide pictures with better quality, the API is useful when facing complex scenarios such as reading the dense PDF417 code on a driver license. - -The single-frame mode can only be enabled or disabled before the video input starts playing. - -If the browser does not support the `MediaDevices`/`getUserMedia` API, the `singleFrameMode` will be set as `true` automatically when the API `createInstance()` is called. - -```typescript -singleFrameMode: boolean -``` - -**Code Snippet** - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -if(didVideoStreamFailWhenReadingDriverLicenses){ - scanner.singleFrameMode = true; - await scanner.show(); -} -``` - -## getScanSettings - -Returns the current scan settings. - -```typescript -getScanSettings(): Promise -``` - -**Return value** - -A promise resolving to a `ScanSettings` . - -**Code Snippet** - -```js -let scanSettings = await scanner.getScanSettings(); -scanSettings.intervalTime = 50; -scanSettings.duplicateForgetTime = 1000; -await scanner.updateScanSettings(scanSettings); -``` - -**See also** - -* [ScanSettings](./interface/ScanSettings.md) - -## updateScanSettings - -Changes scan settings with the object passed in. - -```typescript -updateScanSettings(settings: ScanSettings): Promise -``` - -**Parameters** - -`settings` : specifies the new scan settings. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -let scanSettings = await scanner.getScanSettings(); -scanSettings.intervalTime = 50; -scanSettings.duplicateForgetTime = 1000; -await scanner.updateScanSettings(scanSettings); -``` - -**See also** - -* [ScanSettings](./interface/ScanSettings.md) - -## getUIElement - -Returns the HTML element that is used by the [BarcodeScanner](#barcodescanner) instance. - -```typescript -getUIElement(): HTMLElement -``` - -## setUIElement - -Specifies an HTML element for the [BarcodeScanner](#barcodescanner) instance to use as its UI. The structure inside the element determines the appearance of the UI. See more on [how to customize the UI](../user-guide/#customize-the-ui). - -```typescript -setUIElement(elementOrURL: HTMLElement | string): Promise -``` - -**Parameters** - -`elementOrURL` : specifies the element. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```html - - - -``` - -```html - - -``` - -## defaultUIElementURL - -Returns or sets the URL of the *.html* file that defines the default UI Element. The URL can only be set before the API [createInstance](#createinstance) is called. - -```typescript -static defaultUIElementURL: string -``` - -**Code Snippet** - -```js -Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.0.2/dist/dbr.ui.html"; -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -await scanner.show(); -``` - -## barcodeFillStyle - -Specifies the color used inside the shape which highlights a found barcode. The default value is `rgba(254, 180, 32, 0.3)` . - -```typescript -barcodeFillStyle: string -``` - -## barcodeStrokeStyle - -Specifies the color used to paint the outline of the shape which highlights a found barcode. The default value is `rgba(254, 180, 32, 0.9)` . - -```typescript -barcodeStrokeStyle: string -``` - -## barcodeLineWidth - -Specifies the line width of the outline of the shape which highlights a found barcode. The default value is `1` . - -```typescript -barcodeLineWidth: number -``` - -## regionMaskFillStyle - -Specifies the color used in the square-loop shape between the actual scanning area and the boundary of the video input. This shape only appears when the barcode scanning is limited to a specified region. The default value is `rgba(0, 0, 0, 0.5)` . - -```typescript -regionMaskFillStyle: string -``` - -**See also** - -* [Read a specific area/region](../user-guide/advanced-usage.html#read-a-specific-arearegion) - -## regionMaskStrokeStyle - -Specifies the color used to paint the outline of the scanning region. This outline only appears when the barcode scanning is limited to a specified region. The default value is `rgb(254, 142, 20)` . - -```typescript -regionMaskStrokeStyle: string -``` - -**See also** - -* [Read a specific area/region](../user-guide/advanced-usage.html#read-a-specific-arearegion) - -## regionMaskLineWidth - -Specifies the width of the outline of the scanning region. This outline only appears when the barcode scanning is limited to a specified region. The default value is `2` . - -```typescript -regionMaskLineWidth: number -``` - -**See also** - -* [Read a specific area/region](../user-guide/advanced-usage.html#read-a-specific-arearegion) - -## setVideoFit - -Sets the `object-fit` CSS property of the video element. - -```typescript -setVideoFit(objectFit: string): void; -``` - -**Parameters** - -`objectFit` : specify the new fit type. At present, only "cover" and "contain" are allowed. Check out more on [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit). - -**Return value** - -None. - -**Code Snippet** - -```js -scanner.setVideoFit("cover"); -``` - -## ifShowScanRegionMask - -Whether to show or hide the scan region mask. - -```typescript -ifShowScanRegionMask: boolean; -``` - -**Default value** - -`true` - -**Code Snippet** - -```js -scanner.ifShowScanRegionMask = false; -``` - -## getAllCameras - -Returns infomation of all available cameras on the device. - -```typescript -getAllCameras(): Promise -``` - -**Return value** - -A promise resolving to an array of `VideoDeviceInfo` objects. - -**Code Snippet** - -```js -let cameras = await scanner.getAllCameras(); -if (cameras.length) { - await scanner.setCurrentCamera(cameras[0]); -} -``` - -**See also** - -* [VideoDeviceInfo](./interface/VideoDeviceInfo.md) - -## getCurrentCamera - -Returns information about the current camera. - -```typescript -getCurrentCamera(): Promise -``` - -**Return value** - -A promise resolving to a `VideoDeviceInfo` object. - -**Code Snippet** - -```js -let camera = await scanner.getCurrentCamera(); -``` - -**See also** - -* [VideoDeviceInfo](./interface/VideoDeviceInfo.md) - -## setCurrentCamera - -Chooses a camera as the video source. - -```typescript -setCurrentCamera(deviceID: string): Promise -``` - -**Parameters** - -`deviceID` : specifies the camera. - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -let cameras = await scanner.getAllCameras(); -if (cameras.length) { - await scanner.setCurrentCamera(cameras[0]); -} -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - -## getResolution - -Returns the resolution of the current video input. - -```typescript -getResolution(): number[] -``` - -**Return value** - -An array of two numbers representing the resolution. - -**Code Snippet** - -```js -let rsl = scanner.getResolution(); -console.log(rsl[0] + " x " + rsl[1]); -``` - -## setResolution - -Sets the resolution of the current video input. If the specified resolution is not exactly supported, the closest resolution will be applied. - -```typescript -setResolution(width: number, height: number): Promise -``` - -**Parameters** - -`width` : specifies the horizontal resolution. -`height` : specifies the vertical resolution. - -> To speed up the barcode scanning, the image frames will be scaled down when it exceeds a size limit either horizontally or vertically. The limit is 2048 pixels on mobile devices and 4096 on other devices. Therefore, setting a very high resolution will not help with the scanning. - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -await scanner.setResolution(width, height); -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - -## getVideoSettings - -Returns the current video settings. - -```typescript -getVideoSettings(): MediaStreamConstraints -``` - -**Return value** - -A `MediaStreamConstraints` object. - -**See also** - -* [MediaStreamConstraints](https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints) - -## updateVideoSettings - -Changes the video input. - -```typescript -updateVideoSettings(constraints: MediaStreamConstraints): Promise -``` - -**Parameters** - -`constraints` : specifies the new video settings. - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -await scanner.updateVideoSettings({ - video: { - width: { - ideal: 1280 - }, - height: { - ideal: 720 - }, - facingMode: { - ideal: 'environment' - } - } -}); -``` - -**See also** - -* [MediaStreamConstraints](https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints) -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - -## play - -Play the video if it is already open but paused or stopped. If the video is already playing, it will start again. - -```typescript -play(): Promise -``` - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -scanner.pause(); -//..doing other things without the video -await scanner.play(); -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - -## onPlayed - -This event is triggered when the video stream starts playing. - -```typescript -event onPlayed: (info: ScannerPlayCallbackInfo) => void -``` - -**Arguments** - -info: a `ScannerPlayCallbackInfo` object which describes the resolution of the video input. - -**Code Snippet** - -```js -scanner.onPlayed = rsl => { - console.log(rsl.width + 'x' + rsl.height) -}; -await scanner.show(); // or open(), play(), setCurrentCamera(), etc. -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - -## pause - -Pauses the video without releasing the camera. - -```typescript -pause(): void -``` - -## stop - -Stops the video and releases the camera. - -```typescript -stop(): void -``` - -## getCapabilities - -Inspects and returns the capabilities of the current camera. - -> At present, this method only works in Edge, Safari, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -getCapabilities(): MediaTrackCapabilities -``` - -**Return value** - -A `MediaTrackCapabilities` object which specifies the values or range of values for each constrainable property of the current camera. - -**Code Snippet** - -```js -scanner.getCapabilities(); -/* Result sample -{ - aspectRatio: {max: 1280, min: 0.001388888888888889}, - brightness: {max: 64, min: -64, step: 1}, - colorTemperature: {max: 6500, min: 2800, step: 10}, - contrast: {max: 95, min: 0, step: 1}, - deviceId: "3a505c29a3312600ea0afd79f8e2b4ba4fba3e539257801ff1de8718c27f2bed", - exposureMode: ["continuous", "manual"], - exposureTime: {max: 10000, min: 39.0625, step: 39.0625}, - facingMode: [], - focusDistance: {max: 1024, min: 0, step: 10}, - focusMode: ["continuous", "manual"], - frameRate: {max: 30, min: 0}, - groupId: "35a82dcb7d5b0ef5bda550718d194f04a812c976175e926ccb81fb9d235d010f", - height: {max: 720, min: 1}, - resizeMode: ["none", "crop-and-scale"], - saturation: {max: 100, min: 0, step: 1}, - sharpness: {max: 7, min: 1, step: 1}, - whiteBalanceMode: ["continuous", "manual"], - width: {max: 1280, min: 1}, - zoom: {max: 800, min: 100, step: 100}, -} -*/ -``` - -**See also** - -* [MediaTrackCapabilities](https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/getCapabilities) - -## getCameraSettings - -Returns the current values for each constrainable property of the current camera. - -Right now, this method only works in Chrome and should be called when the scanner is open. - -```typescript -getCameraSettings(): any -``` - -**Return value** - -The current values for each constrainable property of the current camera in the form of a [MediaTrackSettings](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSettings) object. - -**Code Snippet** - -```js -scanner.getCameraSettings(); -/* Result sample -{ - aspectRatio: 1.3333333333333333, - brightness: 0, - colorTemperature: 4600, - contrast: 0, - deviceId: "3a505c29a3312600ea0afd79f8e2b4ba4fba3e539257801ff1de8718c27f2bed", - exposureMode: "continuous", - exposureTime: 156.25, - focusDistance: 120, - focusMode: "continuous", - frameRate: 30, - groupId: "35a82dcb7d5b0ef5bda550718d194f04a812c976175e926ccb81fb9d235d010f", - height: 480, - resizeMode: "none", - saturation: 73, - sharpness: 2, - whiteBalanceMode: "continuous", - width: 640, - zoom: 100, -} -*/ -``` - -**See also** - -* [getCapabilities](#getcapabilities) - -## setFrameRate - -Adjusts the frame rate. - -> At present, this method only works in Edge, Safari, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -setFrameRate(rate: number): Promise -``` - -**Parameters** - -`rate` : specifies the new frame rate. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setFrameRate(10); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - -## getFrameRate - -Returns the real-time frame rate. - -```typescript -getFrameRate(): number; -``` - -**Parameters** - -None. - -**Return value** - -The calculated real-time frame rate. - -**Code Snippet** - -```js -await scanner.getFrameRate(); -``` - -## setColorTemperature - -Adjusts the color temperature. - -> At present, this method only works in Edge, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -setColorTemperature(colorTemperatur: number): Promise -``` - -**Parameters** - -`colorTemperatur` : specifies the new color temperature. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setColorTemperature(5000); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - -## setExposureCompensation - -Sets the exposure compensation index. - -> At present, this method only works in Edge, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -setExposureCompensation(exposureCompensation: number): Promise -``` - -**Parameters** - -`exposureCompensation` : specifies the new exposure compensation index. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setExposureCompensation(-0.7); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - -## setFocus - -Sets the focus mode and focus distance of the camera. - -> At present, this method only works in Edge, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -setFocus(mode: string, distance?: number): Promise; -``` - -**Parameters** - -`mode` : specifies the focus mode, the available values include `continuous` and `manual` . -`distance` : specifies the focus distance, only required when the `mode` is set to `manual` . Use [getCapabilities](#getcapabilities) to get the allowed value range. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setFocus("manual", 400); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - -## getFocus - -Gets the focus mode and the focus distance. - -```typescript -getFocus(): {mode: string, distance?: number}; -``` - -**Parameters** - -None. - -**Return value** - -An object describing the current camera's focus properties "mode" and "distance". If `mode` is `continuous`, `distance` has no meaning and is omitted from the object. - -**Code Snippet** - -```js -await scanner.getFocus(); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - -## setZoom - -Sets current zoom value. - -> At present, this method only works in Edge, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -setZoom(zoomValue: number): Promise -``` - -**Parameters** - -`zoomValue` : specifies the new zoom value. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setZoom(400); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - -## turnOnTorch - -Turns on the torch/flashlight if the current camera supports it. - -> This method should be called when the camera is turned on. Note that it only works with Chromium-based browsers such as Edge and Chrome on Windows or Android. Other browsers such as Firefox or Safari are not supported. Note that all browsers on iOS (including Chrome) use WebKit as the rendering engine and are not supported. - -```typescript -turnOnTorch(): Promise -``` - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.turnOnTorch(); -``` - -**See also** - -* [turnOffTorch](#turnofftorch) -* [getCapabilities](#getcapabilities) - -## turnOffTorch - -Turns off the torch/flashlight. - -> At present, this method only works in Edge, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -turnOffTorch(): Promise -``` - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.turnOffTorch(); -``` - -**See also** - -* [turnOnTorch](#turnontorch) -* [getCapabilities](#getcapabilities) diff --git a/programming-old/javascript/api-reference/BarcodeScanner-v9.2.13.md b/programming-old/javascript/api-reference/BarcodeScanner-v9.2.13.md deleted file mode 100644 index ea863256..00000000 --- a/programming-old/javascript/api-reference/BarcodeScanner-v9.2.13.md +++ /dev/null @@ -1,1233 +0,0 @@ ---- -layout: default-layout -title: v9.2.13 BarcodeScanner - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows the BarcodeScanner class of Dynamsoft Barcode Reader JavaScript SDK v9.2.13. -keywords: BarcodeScanner, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -noTitleIndex: true -breadcrumbText: BarcodeScanner -permalink: /programming/javascript/api-reference/BarcodeScanner-v9.2.13.html ---- - -# BarcodeScanner for Video - -A barcode scanner object gets access to a camera via the [MediaDevices](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices) interface, then uses its built-in UI to show the camera input and perform continuous barcode scanning on the incoming frames. - -The default built-in UI of each barcode scanner is defined in the file "dbr.ui.html". If used directly, the UI will fit the entire page and sit on top. There are a few ways to customize it, read more on how to [Customize the UI](../user-guide/#customize-the-ui). - -Although a barcode scanner is designed to scan barcodes from a video input, it also supports a special mode called [singleFrameMode](#singleframemode) which allows the user to select a still image or take a shot with the mobile camera for barcode scanning. - -The `BarcodeScanner` is a child class of [BarcodeReader](./BarcodeReader.md) and inherits all its methods and properties which will not be covered in this article. - -The following code snippet shows the basic usage of the `BarcodeScanner` class. - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -scanner.onUniqueRead = txt => console.log(txt); -await scanner.show(); -``` - -## API Index - -### Create and Destroy Instances - -| API Name | Description | -|---|---| -| [createInstance()](#createinstance) | Creates a `BarcodeScanner` instance. | -| [destroyContext()](#destroycontext) | Destroys the `BarcodeScanner` instance. | -| [isContextDestroyed()](#iscontextdestroyed) | Indicates whether the instance has been destroyed. | - -### Decode Barcodes - -| API Name | Description | -|---|---| -| [onUniqueRead](#onuniqueread) | This event is triggered when a new, unduplicated barcode is found. | -| [onFrameRead](#onframeread) | This event is triggered after the library finishes scanning a frame. | - -### Basic Interactions - -| API Name | Description | -|---|---| -| [show()](#show) | Binds and shows UI, opens the camera and starts decoding. | -| [hide()](#hide) | Stops decoding, releases camera and unbinds UI. | -| [open()](#open) | Binds UI, opens the camera and starts decoding. | -| [close()](#close) | Stops decoding, releases camera and unbinds UI. | - -### Scan Settings - -| API Name | Description | -|---|---| -| [singleFrameMode](#singleframemode) | Returns or sets whether to enable the singe-frame mode. | -| [getScanSettings()](#getscansettings) | Returns the current scan settings. | -| [updateScanSettings()](#updatescansettings) | Changes scan settings with the object passed in. | - -### UI Control - -| API Name | Description | -|---|---| -| [getUIElement()](#getuielement) | Returns the HTML element that is used by the `BarcodeScanner` instance. | -| [setUIElement()](#setuielement) | Specifies an HTML element for the `BarcodeScanner` instance to use as its UI. | -| [defaultUIElementURL](#defaultuielementurl) | Returns or sets the URL of the .html file that defines the default UI Element. | -| [barcodeFillStyle](#barcodefillstyle) | Specifies the color used inside the shape which highlights a found barcode. | -| [barcodeStrokeStyle](#barcodestrokestyle) | Specifies the color used to paint the outline of the shape which highlights a found barcode. | -| [barcodeLineWidth](#barcodelinewidth) | Specifies the line width of the outline of the shape which highlights a found barcode. | -| [regionMaskFillStyle](#regionmaskfillstyle) | Specifies the color used in the square-loop shape between the actual scanning area and the boundary of the video input. | -| [regionMaskStrokeStyle](#regionmaskstrokestyle) | Specifies the color used to paint the outline of the scanning region. | -| [regionMaskLineWidth](#regionmasklinewidth) | Specifies the width of the outline of the scanning region. | -| [setVideoFit()](#setvideofit) | Sets the `object-fit` CSS property of the video element. | -| [ifShowScanRegionMask](#ifshowscanregionmask) | Whether to show or hide the scan region mask. | - -### Camera Control - -| API Name | Description | -|---|---| -| [ifSkipCameraInspection](#ifskipcamerainspection) | Returns or sets whether to skip camera inspection at initialization to save time. | -| [ifSaveLastUsedCamera](#ifsavelastusedcamera) | Returns or sets whether to save the last used camera and resolution. | -| [getAllCameras()](#getallcameras) | Returns infomation of all available cameras on the device. | -| [getCurrentCamera()](#getcurrentcamera) | Returns information about the current camera. | -| [setCurrentCamera()](#setcurrentcamera) | Chooses a camera as the video source. | -| [getResolution()](#getresolution) | Returns the resolution of the current video input. | -| [setResolution()](#setresolution) | Sets the resolution of the current video input. | -| [getVideoSettings()](#getvideosettings) | Returns the current video settings. | -| [updateVideoSettings()](#updatevideosettings) | Changes the video input. | -| [onWarning](#onwarning) | A callback which is triggered when the resolution is not ideal (<720P). | - -### Video Decoding Process Control - -| API Name | Description | -|---|---| -| [play()](#play) | Play the video if it is already open but paused or stopped. | -| [onPlayed](#onplayed) | This event is triggered when the video stream starts playing. | -| [pauseScan()](#pausescan) | Pauses the decoding process. | -| [resumeScan()](#resumescan) | Resumes the decoding process. | -| [pause()](#pause) | Pauses the video without releasing the camera. | -| [stop()](#stop) | Stops the video and releases the camera. | -| [videoSrc](#videosrc) | Sets or returns the source of the video. | - -### Advanced Camera Control - -| API Name | Description | -|---|---| -| [getCapabilities()](#getcapabilities) | Inspects and returns the capabilities of the current camera. | -| [getCameraSettings()](#getcamerasettings) | Returns the current values for each constrainable property of the current camera. | -| [setFrameRate()](#setframerate) | Adjusts the frame rate. | -| [getFrameRate()](#getframerate) | Returns the real-time frame rate. | -| [setColorTemperature()](#setcolortemperature) | Adjusts the color temperature. | -| [setExposureCompensation()](#setexposurecompensation) | Sets the exposure compensation index. | -| [setFocus()](#setfocus) | Sets the focus mode and focus distance of the camera. | -| [getFocus()](#getfocus) | Gets the focus mode and focus distance of the camera. | -| [setZoom()](#setzoom) | Sets the zoom level of the camera. | -| [turnOnTorch()](#turnontorch) | Turns on the torch/flashlight. | -| [turnOffTorch()](#turnofftorch) | Turns off the torch/flashlight. | - -### Inherited from the `BarcodeReader` Class - -#### Change Settings - -| API Name | Description | -|---|---| -| [getRuntimeSettings()](./BarcodeReader.md#getruntimesettings) | Returns the current runtime settings. | -| [updateRuntimeSettings()](./BarcodeReader.md#updateruntimesettings) | Updates runtime settings with a given struct or a preset template. | -| [resetRuntimeSettings()](./BarcodeReader.md#resetruntimesettings) | Resets all parameters to default values. | -| [getModeArgument()](./BarcodeReader.md#getmodeargument) | Returns the argument value for the specified mode parameter. | -| [setModeArgument()](./BarcodeReader.md#setmodeargument) | Sets the argument value for the specified mode parameter. | - -#### Auxiliary - -| API Name | Description | -|---|---| -| [ifSaveOriginalImageInACanvas](./BarcodeReader.md#ifsaveoriginalimageinacanvas) | Whether to save the original image into a <canvas> element. | -| [getOriginalImageInACanvas()](./BarcodeReader.md#getoriginalimageinacanvas) | Returns an `HTMLCanvasElement` that holds the original image. | - -## createInstance - -Creates a `BarcodeScanner` instance. - -```typescript -static createInstance(): Promise -``` - -**Return value** - -A promise resolving to the created `BarcodeScanner` object. - -**Code Snippet** - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -``` - -## destroyContext - -Destroys the `BarcodeScanner` instance. If your page needs to create a new instance from time to time, don't forget to destroy unused old instances. - -```typescript -destroyContext(): void -``` - -**Code Snippet** - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -// ... decode ... -scanner.destroyContext(); -``` - -## isContextDestroyed - -Returns whether the instance has been destroyed. - -```typescript -isContextDestroyed(): boolean -``` - -## onUniqueRead - -Specifies an event handler which fires when a new, unduplicated barcode is found. - -The library keeps each barcode result (type and value) in the buffer for a period of time (can be set with [duplicateForgetTime](./interface/ScanSettings.md)) during which if a new result is an exact match, it's seen as a duplicate and will again be kept for that period of time while the old result is removed and so on. - -```typescript -onUniqueRead: (txt: string, result: TextResult) => void -``` - -**Arguments** - -`txt` : a string that holds the barcode text. - -`result` : a `TextResult` object that contains more detailed info. - -**Code Snippet** - -```js -scanner.onUniqueRead = (txt, result) => { - alert(txt); - console.log(result); -} -``` - -**See also** - -* [TextResult](./interface/TextResult.md) - -## onFrameRead - -Specifies an event handler which fires after the library finishes scanning a frame. - -```typescript -onFrameRead: (results: TextResult[]) => void -``` - -**Arguments** - -`results` : a `TextResult` object that contains all the barcode results in this frame. - -**Code Snippet** - -```js -scanner.onFrameRead = results => { - for (let result of results) { - console.log(result.barcodeText); - } -}; -``` - -**See also** - -* [TextResult](./interface/TextResult.md) - -## show - -Binds and shows UI, opens the camera and starts decoding. - -> If the UI doesn't exist in the DOM tree, it is appended in the DOM first and then shown. If the UI already exists in the DOM tree but is hidden, it'll be shown. - -```typescript -show(): Promise -``` - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -scanner.onUniqueRead = (txt, result) => { - alert(txt); - console.log(result); -}; -await scanner.show(); -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - -## hide - -Stops decoding, releases camera and unbinds UI. - -```typescript -hide(): void -``` - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.show(); -//...scan barcodes -scanner.hide(); -``` - -## open - -Binds UI, opens the camera and starts decoding. - -> This method does not change the original state of the UI: if it doesn't exist in the DOM tree, nothing shows up on the page; if it exists in the DOM tree, it may or may not show up depending on its original state. - -```typescript -open(): Promise -``` - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.open(); -//...scan barcodes -await scanner.close(); -``` - -## close - -Stops decoding, releases camera and unbinds UI. - -```typescript -close(): void -``` - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.open(); -//...scan barcodes -scanner.close(); -``` - -## pauseScan - -Pause continuous scanning but keep the video stream. - -```typescript -pauseScan(options?: object): void; -``` - -**Parameters** - -`options`: Options to configure how the pause works. At present, it only contains one property `keepResultsHighlighted` which, when set to **true**, will keep the barcodes found on the frame (at the time of the pause) highlighted. - -## resumeScan - -Resumes the decoding process. - -```typescript -resumeScan(): void -``` - -## singleFrameMode - -Returns or sets the status of the single-frame mode. If enabled, the video input will not be played and the user can choose to take a picture with the system camera (mobile only) or select an existing image for barcode reading. - -Because the system camera of a mobile device can provide pictures with better quality, the API is useful when facing complex scenarios such as reading the dense PDF417 code on a driver license. - -The single-frame mode can only be enabled or disabled before the video input starts playing. - -If the browser does not support the `MediaDevices`/`getUserMedia` API, the `singleFrameMode` will be set as `true` automatically when the API `createInstance()` is called. - -```typescript -singleFrameMode: boolean -``` - -**Code Snippet** - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -if(didVideoStreamFailWhenReadingDriverLicenses){ - scanner.singleFrameMode = true; - await scanner.show(); -} -``` - -## getScanSettings - -Returns the current scan settings. - -```typescript -getScanSettings(): Promise -``` - -**Return value** - -A promise resolving to a `ScanSettings` . - -**Code Snippet** - -```js -let scanSettings = await scanner.getScanSettings(); -scanSettings.intervalTime = 50; -scanSettings.duplicateForgetTime = 1000; -await scanner.updateScanSettings(scanSettings); -``` - -**See also** - -* [ScanSettings](./interface/ScanSettings.md) - -## updateScanSettings - -Changes scan settings with the object passed in. - -```typescript -updateScanSettings(settings: ScanSettings): Promise -``` - -**Parameters** - -`settings` : specifies the new scan settings. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -let scanSettings = await scanner.getScanSettings(); -scanSettings.intervalTime = 50; -scanSettings.duplicateForgetTime = 1000; -await scanner.updateScanSettings(scanSettings); -``` - -**See also** - -* [ScanSettings](./interface/ScanSettings.md) - -## getUIElement - -Returns the HTML element that is used by the [BarcodeScanner](#barcodescanner) instance. - -```typescript -getUIElement(): HTMLElement -``` - -## setUIElement - -Specifies an HTML element for the [BarcodeScanner](#barcodescanner) instance to use as its UI. The structure inside the element determines the appearance of the UI. See more on [how to customize the UI](../user-guide/#customize-the-ui). - -```typescript -setUIElement(elementOrURL: HTMLElement | string): Promise -``` - -**Parameters** - -`elementOrURL` : specifies the element or the element url. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```html - - -
    - -``` - -```html - - -``` - -## defaultUIElementURL - -Returns or sets the URL of the *.html* file that defines the default UI Element. The URL can only be set before the API [createInstance](#createinstance) is called. - -```typescript -static defaultUIElementURL: string -``` - -**Code Snippet** - -```js -Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.2.13/dist/dbr.ui.html"; -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -await scanner.show(); -``` - -## barcodeFillStyle - -Specifies the color used inside the shape which highlights a found barcode. The default value is `rgba(254, 180, 32, 0.3)` . - -```typescript -barcodeFillStyle: string -``` - -## barcodeStrokeStyle - -Specifies the color used to paint the outline of the shape which highlights a found barcode. The default value is `rgba(254, 180, 32, 0.9)` . - -```typescript -barcodeStrokeStyle: string -``` - -## barcodeLineWidth - -Specifies the line width of the outline of the shape which highlights a found barcode. The default value is `1` . - -```typescript -barcodeLineWidth: number -``` - -## regionMaskFillStyle - -Specifies the color used in the square-loop shape between the actual scanning area and the boundary of the video input. This shape only appears when the barcode scanning is limited to a specified region. The default value is `rgba(0, 0, 0, 0.5)` . - -```typescript -regionMaskFillStyle: string -``` - -**See also** - -* [Read a specific area/region](../user-guide/advanced-usage.html#read-a-specific-arearegion) - -## regionMaskStrokeStyle - -Specifies the color used to paint the outline of the scanning region. This outline only appears when the barcode scanning is limited to a specified region. The default value is `rgb(254, 142, 20)` . - -```typescript -regionMaskStrokeStyle: string -``` - -**See also** - -* [Read a specific area/region](../user-guide/advanced-usage.html#read-a-specific-arearegion) - -## regionMaskLineWidth - -Specifies the width of the outline of the scanning region. This outline only appears when the barcode scanning is limited to a specified region. The default value is `2` . - -```typescript -regionMaskLineWidth: number -``` - -**See also** - -* [Read a specific area/region](../user-guide/advanced-usage.html#read-a-specific-arearegion) - -## setVideoFit - -Sets the `object-fit` CSS property of the video element. - -```typescript -setVideoFit(objectFit: string): void; -``` - -**Parameters** - -`objectFit` : specify the new fit type. At present, only "cover" and "contain" are allowed. Check out more on [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit). - -**Return value** - -None. - -**Code Snippet** - -```js -scanner.setVideoFit("cover"); -``` - -## ifShowScanRegionMask - -Whether to show or hide the scan region mask. - -```typescript -ifShowScanRegionMask: boolean; -``` - -**Default value** - -`true` - -**Code Snippet** - -```js -scanner.ifShowScanRegionMask = false; -``` - -## ifSkipCameraInspection - -Returns or sets whether to skip camera inspection at initialization to save time. Note that if a previously used camera is already available in the [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), the inspection is skipped automatically. Read more on [ifSaveLastUsedCamera](#ifsavelastusedcamera). - -```typescript -ifSkipCameraInspection: boolean; -``` - -## ifSaveLastUsedCamera - -Returns or sets whether to save the last used camera and resolution. This feature makes use of the [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) of the browser. - -> NOTE -> -> This feature only works on mainstream browsers like Chrome, Firefox and Safari. Other browsers may change the device IDs dynamically thus making it impossible to track the camera. - -```typescript -ifSaveLastUsedCamera: boolean; -``` - -## getAllCameras - -Returns infomation of all available cameras on the device. - -```typescript -getAllCameras(): Promise -``` - -**Return value** - -A promise resolving to an array of `VideoDeviceInfo` objects. - -**Code Snippet** - -```js -let cameras = await scanner.getAllCameras(); -if (cameras.length) { - await scanner.setCurrentCamera(cameras[0]); -} -``` - -**See also** - -* [VideoDeviceInfo](./interface/VideoDeviceInfo.md) - -## getCurrentCamera - -Returns information about the current camera. - -```typescript -getCurrentCamera(): Promise -``` - -**Return value** - -A promise resolving to a `VideoDeviceInfo` object. - -**Code Snippet** - -```js -let camera = await scanner.getCurrentCamera(); -``` - -**See also** - -* [VideoDeviceInfo](./interface/VideoDeviceInfo.md) - -## setCurrentCamera - -Chooses a camera as the video source. - -> If called before `open()` or `show()`, the selected camera will be used. Otherwise, the system will decide which one to use. - -```typescript -setCurrentCamera(deviceID: string): Promise -``` - -**Parameters** - -`deviceID` : specifies the camera. - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -let cameras = await scanner.getAllCameras(); -if (cameras.length) { - await scanner.setCurrentCamera(cameras[0]); -} -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - -## getResolution - -Returns the resolution of the current video input. - -```typescript -getResolution(): number[] -``` - -**Return value** - -An array of two numbers representing the resolution. - -**Code Snippet** - -```js -let rsl = scanner.getResolution(); -console.log(rsl[0] + " x " + rsl[1]); -``` - -## setResolution - -Sets the resolution of the current video input. If the specified resolution is not exactly supported, the closest resolution will be applied. - -> If called before `open()` or `show()`, the camera will use the set resolution when it opens. Otherwise, the default resolution is used, which is 1280 x 720 on mobile devices or 1920 x 1080 on desktop. - -```typescript -setResolution(width: number, height: number): Promise -``` - -**Parameters** - -`width` : specifies the horizontal resolution. - -`height` : specifies the vertical resolution. - -> To speed up the barcode scanning, the image frames will be scaled down when it exceeds a size limit either horizontally or vertically. -> -> * The limit is 2048 pixels on mobile devices and 4096 on other devices. -> * If the template "dense" or "distance" is used, the limit is 4096 regardless of which device is used. -> -> Therefore, setting a very high resolution will not help with the scanning. - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -await scanner.setResolution(width, height); -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - -## getVideoSettings - -Returns the current video settings. - -```typescript -getVideoSettings(): MediaStreamConstraints -``` - -**Return value** - -A `MediaStreamConstraints` object. - -**See also** - -* [MediaStreamConstraints](https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints) - -## updateVideoSettings - -Changes the video input. - -```typescript -updateVideoSettings(constraints: MediaStreamConstraints): Promise -``` - -**Parameters** - -`constraints` : specifies the new video settings. - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -await scanner.updateVideoSettings({ - video: { - width: { - ideal: 1280 - }, - height: { - ideal: 720 - }, - facingMode: { - ideal: 'environment' - } - } -}); -``` - -**See also** - -* [MediaStreamConstraints](https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints) -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - -## onWarning - -A callback which is triggered when the resolution is not ideal (<720P). - -In this case, the warning is: - -```js -{ - id: 3, - message: "Camera resolution too low, please use a higher resolution (720P or better)." -} -``` - -**Code Snippet** - -```js -const scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -scanner.onWarning = warning => console.log(warning.message); -``` - -**See Also** - -[onWarning](interface/warning.md) - -## play - -Play the video if it is already open but paused or stopped. If the video is already playing, it will start again. - -```typescript -play(): Promise -``` - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -scanner.pause(); -//..doing other things without the video -await scanner.play(); -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - -## onPlayed - -This event is triggered when the video stream starts playing. - -```typescript -event onPlayed: (info: ScannerPlayCallbackInfo) => void -``` - -**Arguments** - -info: a `ScannerPlayCallbackInfo` object which describes the resolution of the video input. - -**Code Snippet** - -```js -scanner.onPlayed = rsl => { - console.log(rsl.width + 'x' + rsl.height) -}; -await scanner.show(); // or open(), play(), setCurrentCamera(), etc. -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - -## pause - -Pauses the video without releasing the camera. - -```typescript -pause(): void -``` - -## stop - -Stops the video and releases the camera. - -```typescript -stop(): void -``` - -## videoSrc - -Sets or returns the source of the video. - -> You can use this property to specify an existing video as the source to play which will be processed the same way as the video feed from a live camera. - -```typescript -videoSrc: string | MediaStream | MediaSource | Blob; -``` - -## getCapabilities - -Inspects and returns the capabilities of the current camera. - -> At present, this method only works in Edge, Safari, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -getCapabilities(): MediaTrackCapabilities -``` - -**Return value** - -A `MediaTrackCapabilities` object which specifies the values or range of values for each constrainable property of the current camera. - -**Code Snippet** - -```js -scanner.getCapabilities(); -/* Result sample -{ - aspectRatio: {max: 1280, min: 0.001388888888888889}, - brightness: {max: 64, min: -64, step: 1}, - colorTemperature: {max: 6500, min: 2800, step: 10}, - contrast: {max: 95, min: 0, step: 1}, - deviceId: "3a505c29a3312600ea0afd79f8e2b4ba4fba3e539257801ff1de8718c27f2bed", - exposureMode: ["continuous", "manual"], - exposureTime: {max: 10000, min: 39.0625, step: 39.0625}, - facingMode: [], - focusDistance: {max: 1024, min: 0, step: 10}, - focusMode: ["continuous", "manual"], - frameRate: {max: 30, min: 0}, - groupId: "35a82dcb7d5b0ef5bda550718d194f04a812c976175e926ccb81fb9d235d010f", - height: {max: 720, min: 1}, - resizeMode: ["none", "crop-and-scale"], - saturation: {max: 100, min: 0, step: 1}, - sharpness: {max: 7, min: 1, step: 1}, - whiteBalanceMode: ["continuous", "manual"], - width: {max: 1280, min: 1}, - zoom: {max: 800, min: 100, step: 100}, -} -*/ -``` - -**See also** - -* [MediaTrackCapabilities](https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/getCapabilities) - -## getCameraSettings - -Returns the current values for each constrainable property of the current camera. - -Right now, this method only works in Chrome and should be called when the scanner is open. - -```typescript -getCameraSettings(): any -``` - -**Return value** - -The current values for each constrainable property of the current camera in the form of a [MediaTrackSettings](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSettings) object. - -**Code Snippet** - -```js -scanner.getCameraSettings(); -/* Result sample -{ - aspectRatio: 1.3333333333333333, - brightness: 0, - colorTemperature: 4600, - contrast: 0, - deviceId: "3a505c29a3312600ea0afd79f8e2b4ba4fba3e539257801ff1de8718c27f2bed", - exposureMode: "continuous", - exposureTime: 156.25, - focusDistance: 120, - focusMode: "continuous", - frameRate: 30, - groupId: "35a82dcb7d5b0ef5bda550718d194f04a812c976175e926ccb81fb9d235d010f", - height: 480, - resizeMode: "none", - saturation: 73, - sharpness: 2, - whiteBalanceMode: "continuous", - width: 640, - zoom: 100, -} -*/ -``` - -**See also** - -* [getCapabilities](#getcapabilities) - -## setFrameRate - -Adjusts the frame rate. - -> At present, this method only works in Edge, Safari, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -setFrameRate(rate: number): Promise -``` - -**Parameters** - -`rate` : specifies the new frame rate. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setFrameRate(10); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - -## getFrameRate - -Returns the real-time frame rate. - -```typescript -getFrameRate(): number; -``` - -**Parameters** - -None. - -**Return value** - -The calculated real-time frame rate. - -**Code Snippet** - -```js -await scanner.getFrameRate(); -``` - -## setColorTemperature - -Adjusts the color temperature. - -> At present, this method only works in Edge, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -setColorTemperature(colorTemperatur: number): Promise -``` - -**Parameters** - -`colorTemperatur` : specifies the new color temperature. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setColorTemperature(5000); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - -## setExposureCompensation - -Sets the exposure compensation index. - -> At present, this method only works in Edge, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -setExposureCompensation(exposureCompensation: number): Promise -``` - -**Parameters** - -`exposureCompensation` : specifies the new exposure compensation index. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setExposureCompensation(-0.7); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - -## setFocus - -Sets the focus mode and focus distance of the camera. - -> At present, this method only works in Edge, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -setFocus(mode: string, distance?: number): Promise; -``` - -**Parameters** - -`mode` : specifies the focus mode, the available values include `continuous` and `manual` . -`distance` : specifies the focus distance, only required when the `mode` is set to `manual` . Use [getCapabilities](#getcapabilities) to get the allowed value range. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setFocus("manual", 400); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - -## getFocus - -Gets the focus mode and the focus distance. - -```typescript -getFocus(): {mode: string, distance?: number}; -``` - -**Parameters** - -None. - -**Return value** - -An object describing the current camera's focus properties "mode" and "distance". If `mode` is `continuous`, `distance` has no meaning and is omitted from the object. - -**Code Snippet** - -```js -await scanner.getFocus(); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - -## setZoom - -Sets current zoom value. - -> At present, this method only works in Edge, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -setZoom(zoomValue: number): Promise -``` - -**Parameters** - -`zoomValue` : specifies the new zoom value. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setZoom(400); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - -## turnOnTorch - -Turns on the torch/flashlight if the current camera supports it. - -> This method should be called when the camera is turned on. Note that it only works with Chromium-based browsers such as Edge and Chrome on Windows or Android. Other browsers such as Firefox or Safari are not supported. Note that all browsers on iOS (including Chrome) use WebKit as the rendering engine and are not supported. - -```typescript -turnOnTorch(): Promise -``` - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.turnOnTorch(); -``` - -**See also** - -* [turnOffTorch](#turnofftorch) -* [getCapabilities](#getcapabilities) - -## turnOffTorch - -Turns off the torch/flashlight. - -> At present, this method only works in Edge, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -turnOffTorch(): Promise -``` - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.turnOffTorch(); -``` - -**See also** - -* [turnOnTorch](#turnontorch) -* [getCapabilities](#getcapabilities) diff --git a/programming-old/javascript/api-reference/BarcodeScanner-v9.3.1.md b/programming-old/javascript/api-reference/BarcodeScanner-v9.3.1.md deleted file mode 100644 index 7050efac..00000000 --- a/programming-old/javascript/api-reference/BarcodeScanner-v9.3.1.md +++ /dev/null @@ -1,1260 +0,0 @@ ---- -layout: default-layout -title: v9.3.1 BarcodeScanner - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows the BarcodeScanner class of Dynamsoft Barcode Reader JavaScript SDK v9.3.1. -keywords: BarcodeScanner, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -noTitleIndex: true -breadcrumbText: BarcodeScanner -permalink: /programming/javascript/api-reference/BarcodeScanner-v9.3.1.html ---- - -# BarcodeScanner for Video - -A barcode scanner object gets access to a camera via the [MediaDevices](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices) interface, then uses its built-in UI to show the camera input and perform continuous barcode scanning on the incoming frames. - -The default built-in UI of each barcode scanner is defined in the file "dbr.ui.html". If used directly, the UI will fit the entire page and sit on top. There are a few ways to customize it, read more on how to [Customize the UI](../user-guide/?ver=latest#customize-the-ui-optional). - -Although a barcode scanner is designed to scan barcodes from a video input, it also supports a special mode called [singleFrameMode](#singleframemode) which allows the user to select a still image or take a shot with the mobile camera for barcode scanning. - -The `BarcodeScanner` is a child class of [BarcodeReader](./BarcodeReader.md) and inherits all its methods and properties which will not be covered in this article. - -The following code snippet shows the basic usage of the `BarcodeScanner` class. - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -scanner.onUniqueRead = txt => console.log(txt); -await scanner.show(); -``` - -## API Index - -### Create and Destroy Instances - -| API Name | Description | -|---|---| -| [createInstance()](#createinstance) | Creates a `BarcodeScanner` instance. | -| [destroyContext()](#destroycontext) | Destroys the `BarcodeScanner` instance. | -| [isContextDestroyed()](#iscontextdestroyed) | Indicates whether the instance has been destroyed. | - -### Decode Barcodes - -| API Name | Description | -|---|---| -| [onUniqueRead](#onuniqueread) | This event is triggered when a new, unduplicated barcode is found. | -| [onFrameRead](#onframeread) | This event is triggered after the library finishes scanning a frame. | - -### Basic Interactions - -| API Name | Description | -|---|---| -| [show()](#show) | Binds and shows UI, opens the camera and starts decoding. | -| [hide()](#hide) | Stops decoding, releases camera and unbinds UI. | -| [open()](#open) | Binds UI, opens the camera and starts decoding. | -| [close()](#close) | Stops decoding, releases camera and unbinds UI. | - -### Scan Settings - -| API Name | Description | -|---|---| -| [singleFrameMode](#singleframemode) | Returns or sets whether to enable the singe-frame mode. | -| [getScanSettings()](#getscansettings) | Returns the current scan settings. | -| [updateScanSettings()](#updatescansettings) | Changes scan settings with the object passed in. | - -### UI Control - -| API Name | Description | -|---|---| -| [getUIElement()](#getuielement) | Returns the HTML element that is used by the `BarcodeScanner` instance. | -| [setUIElement()](#setuielement) | Specifies an HTML element for the `BarcodeScanner` instance to use as its UI. | -| [defaultUIElementURL](#defaultuielementurl) | Returns or sets the URL of the .html file that defines the default UI Element. | -| [barcodeFillStyle](#barcodefillstyle) | Specifies the color used inside the shape which highlights a found barcode. | -| [barcodeStrokeStyle](#barcodestrokestyle) | Specifies the color used to paint the outline of the shape which highlights a found barcode. | -| [barcodeLineWidth](#barcodelinewidth) | Specifies the line width of the outline of the shape which highlights a found barcode. | -| [regionMaskFillStyle](#regionmaskfillstyle) | Specifies the color used in the square-loop shape between the actual scanning area and the boundary of the video input. | -| [regionMaskStrokeStyle](#regionmaskstrokestyle) | Specifies the color used to paint the outline of the scanning region. | -| [barcodeFillStyleBeforeVerification](#barcodefillstylebeforeverification) | Specifies the color used inside the shape which highlights a found linear barcode which has not been verified. | -| [barcodeStrokeStyleBeforeVerification](#barcodestrokestylebeforeverification) | Specifies the color used to paint the outline of the shape which highlights a found linear barcode which has not been verified. | -| [barcodeLineWidthBeforeVerification](#barcodelinewidthbeforeverification) | Specifies the line width of the outline of the shape which highlights a found linear barcode which has not been verified. | -| [regionMaskLineWidth](#regionmasklinewidth) | Specifies the width of the outline of the scanning region. | -| [setVideoFit()](#setvideofit) | Sets the `object-fit` CSS property of the video element. | -| [ifShowScanRegionMask](#ifshowscanregionmask) | Whether to show or hide the scan region mask. | - -### Camera Control - -| API Name | Description | -|---|---| -| [ifSkipCameraInspection](#ifskipcamerainspection) | Returns or sets whether to skip camera inspection at initialization to save time. | -| [ifSaveLastUsedCamera](#ifsavelastusedcamera) | Returns or sets whether to save the last used camera and resolution. | -| [getAllCameras()](#getallcameras) | Returns infomation of all available cameras on the device. | -| [getCurrentCamera()](#getcurrentcamera) | Returns information about the current camera. | -| [setCurrentCamera()](#setcurrentcamera) | Chooses a camera as the video source. | -| [getResolution()](#getresolution) | Returns the resolution of the current video input. | -| [setResolution()](#setresolution) | Sets the resolution of the current video input. | -| [getVideoSettings()](#getvideosettings) | Returns the current video settings. | -| [updateVideoSettings()](#updatevideosettings) | Changes the video input. | -| [onWarning](#onwarning) | A callback which is triggered when the resolution is not ideal (< 720P). | - -### Video Decoding Process Control - -| API Name | Description | -|---|---| -| [play()](#play) | Play the video if it is already open but paused or stopped. | -| [onPlayed](#onplayed) | This event is triggered when the video stream starts playing. | -| [pauseScan()](#pausescan) | Pauses the decoding process. | -| [resumeScan()](#resumescan) | Resumes the decoding process. | -| [pause()](#pause) | Pauses the video without releasing the camera. | -| [stop()](#stop) | Stops the video and releases the camera. | -| [videoSrc](#videosrc) | Sets or returns the source of the video. | - -### Advanced Camera Control - -| API Name | Description | -|---|---| -| [getCapabilities()](#getcapabilities) | Inspects and returns the capabilities of the current camera. | -| [getCameraSettings()](#getcamerasettings) | Returns the current values for each constrainable property of the current camera. | -| [setFrameRate()](#setframerate) | Adjusts the frame rate. | -| [getFrameRate()](#getframerate) | Returns the real-time frame rate. | -| [setColorTemperature()](#setcolortemperature) | Adjusts the color temperature. | -| [setExposureCompensation()](#setexposurecompensation) | Sets the exposure compensation index. | -| [setFocus()](#setfocus) | Sets the focus mode and focus distance of the camera. | -| [getFocus()](#getfocus) | Gets the focus mode and focus distance of the camera. | -| [setZoom()](#setzoom) | Sets the zoom level of the camera. | -| [turnOnTorch()](#turnontorch) | Turns on the torch/flashlight. | -| [turnOffTorch()](#turnofftorch) | Turns off the torch/flashlight. | - -### Inherited from the `BarcodeReader` Class - -#### Change Settings - -| API Name | Description | -|---|---| -| [getRuntimeSettings()](./BarcodeReader.md#getruntimesettings) | Returns the current runtime settings. | -| [updateRuntimeSettings()](./BarcodeReader.md#updateruntimesettings) | Updates runtime settings with a given struct or a preset template. | -| [resetRuntimeSettings()](./BarcodeReader.md#resetruntimesettings) | Resets all parameters to default values. | -| [getModeArgument()](./BarcodeReader.md#getmodeargument) | Returns the argument value for the specified mode parameter. | -| [setModeArgument()](./BarcodeReader.md#setmodeargument) | Sets the argument value for the specified mode parameter. | - -#### Auxiliary - -| API Name | Description | -|---|---| -| [ifSaveOriginalImageInACanvas](./BarcodeReader.md#ifsaveoriginalimageinacanvas) | Whether to save the original image into a <canvas> element. | -| [getOriginalImageInACanvas()](./BarcodeReader.md#getoriginalimageinacanvas) | Returns an `HTMLCanvasElement` that holds the original image. | - -## createInstance - -Creates a `BarcodeScanner` instance. - -```typescript -static createInstance(): Promise -``` - -**Return value** - -A promise resolving to the created `BarcodeScanner` object. - -**Code Snippet** - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -``` - -## destroyContext - -Destroys the `BarcodeScanner` instance. If your page needs to create a new instance from time to time, don't forget to destroy unused old instances. - -```typescript -destroyContext(): void -``` - -**Code Snippet** - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -// ... decode ... -scanner.destroyContext(); -``` - -## isContextDestroyed - -Returns whether the instance has been destroyed. - -```typescript -isContextDestroyed(): boolean -``` - -## onUniqueRead - -Specifies an event handler which fires when a new, unduplicated barcode is found. - -The library keeps each barcode result (type and value) in the buffer for a period of time (can be set with [duplicateForgetTime](./interface/ScanSettings.md)) during which if a new result is an exact match, it's seen as a duplicate and will again be kept for that period of time while the old result is removed and so on. - -```typescript -onUniqueRead: (txt: string, result: TextResult) => void -``` - -**Arguments** - -`txt` : a string that holds the barcode text. - -`result` : a `TextResult` object that contains more detailed info. - -**Code Snippet** - -```js -scanner.onUniqueRead = (txt, result) => { - alert(txt); - console.log(result); -} -``` - -**See also** - -* [TextResult](./interface/TextResult.md) - -## onFrameRead - -Specifies an event handler which fires after the library finishes scanning a frame. - -```typescript -onFrameRead: (results: TextResult[]) => void -``` - -**Arguments** - -`results` : a `TextResult` object that contains all the barcode results in this frame. - -**Code Snippet** - -```js -scanner.onFrameRead = results => { - for (let result of results) { - console.log(result.barcodeText); - } -}; -``` - -**See also** - -* [TextResult](./interface/TextResult.md) - -## show - -Binds and shows UI, opens the camera and starts decoding. - -> If the UI doesn't exist in the DOM tree, it is appended in the DOM first and then shown. If the UI already exists in the DOM tree but is hidden, it'll be shown. - -```typescript -show(): Promise -``` - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -scanner.onUniqueRead = (txt, result) => { - alert(txt); - console.log(result); -}; -await scanner.show(); -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - -## hide - -Stops decoding, releases camera and unbinds UI. - -```typescript -hide(): void -``` - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.show(); -//...scan barcodes -scanner.hide(); -``` - -## open - -Binds UI, opens the camera and starts decoding. - -> This method does not change the original state of the UI: if it doesn't exist in the DOM tree, nothing shows up on the page; if it exists in the DOM tree, it may or may not show up depending on its original state. - -```typescript -open(): Promise -``` - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.open(); -//...scan barcodes -await scanner.close(); -``` - -## close - -Stops decoding, releases camera and unbinds UI. - -```typescript -close(): void -``` - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.open(); -//...scan barcodes -scanner.close(); -``` - -## pauseScan - -Pause continuous scanning but keep the video stream. - -```typescript -pauseScan(options?: object): void; -``` - -**Parameters** - -`options`: Options to configure how the pause works. At present, it only contains one property `keepResultsHighlighted` which, when set to **true**, will keep the barcodes found on the frame (at the time of the pause) highlighted. - -## resumeScan - -Resumes the decoding process. - -```typescript -resumeScan(): void -``` - -## singleFrameMode - -Returns or sets the status of the single-frame mode. If enabled, the video input will not be played and the user can choose to take a picture with the system camera (mobile only) or select an existing image for barcode reading. - -Because the system camera of a mobile device can provide pictures with better quality, the API is useful when facing complex scenarios such as reading the dense PDF417 code on a driver license. - -The single-frame mode can only be enabled or disabled before the video input starts playing. - -If the browser does not support the `MediaDevices`/`getUserMedia` API, the `singleFrameMode` will be set as `true` automatically when the API `createInstance()` is called. - -```typescript -singleFrameMode: boolean -``` - -**Code Snippet** - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -if(didVideoStreamFailWhenReadingDriverLicenses){ - scanner.singleFrameMode = true; - await scanner.show(); -} -``` - -## getScanSettings - -Returns the current scan settings. - -```typescript -getScanSettings(): Promise -``` - -**Return value** - -A promise resolving to a `ScanSettings` . - -**Code Snippet** - -```js -let scanSettings = await scanner.getScanSettings(); -scanSettings.intervalTime = 50; -scanSettings.duplicateForgetTime = 1000; -await scanner.updateScanSettings(scanSettings); -``` - -**See also** - -* [ScanSettings](./interface/ScanSettings.md) - -## updateScanSettings - -Changes scan settings with the object passed in. - -```typescript -updateScanSettings(settings: ScanSettings): Promise -``` - -**Parameters** - -`settings` : specifies the new scan settings. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -let scanSettings = await scanner.getScanSettings(); -scanSettings.intervalTime = 50; -scanSettings.duplicateForgetTime = 1000; -await scanner.updateScanSettings(scanSettings); -``` - -**See also** - -* [ScanSettings](./interface/ScanSettings.md) - -## getUIElement - -Returns the HTML element that is used by the `BarcodeScanner` instance. - -```typescript -getUIElement(): HTMLElement -``` - -## setUIElement - -Specifies an HTML element for the `BarcodeScanner` instance to use as its UI. The structure inside the element determines the appearance of the UI. See more on [how to customize the UI](../user-guide/?ver=latest#customize-the-ui-optional). - -```typescript -setUIElement(elementOrURL: HTMLElement | string): Promise -``` - -**Parameters** - -`elementOrURL` : specifies the element or the element url. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```html - - -
    - -``` - -```html - - -``` - -## defaultUIElementURL - -Returns or sets the URL of the *.html* file that defines the default UI Element. The URL can only be set before the API [createInstance](#createinstance) is called. - -```typescript -static defaultUIElementURL: string -``` - -**Code Snippet** - -```js -Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.3.1/dist/dbr.ui.html"; -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -await scanner.show(); -``` - -## barcodeFillStyle - -Specifies the color used inside the shape which highlights a found barcode. The default value is `rgba(254, 180, 32, 0.3)` . - -```typescript -barcodeFillStyle: string -``` - -## barcodeStrokeStyle - -Specifies the color used to paint the outline of the shape which highlights a found barcode. The default value is `rgba(254, 180, 32, 0.9)` . - -```typescript -barcodeStrokeStyle: string -``` - -## barcodeLineWidth - -Specifies the line width of the outline of the shape which highlights a found barcode. The default value is `1` . - -```typescript -barcodeLineWidth: number -``` - -## barcodeFillStyleBeforeVerification - -Specifies the color used inside the shape which highlights a found linear barcode which has not been verified. The default value is `rgba(248, 252, 0, 0.2)` . - -```typescript -barcodeFillStyle: string -``` - -## barcodeStrokeStyleBeforeVerification - -Specifies the color used to paint the outline of the shape which highlights a found linear barcode which has not been verified. The default value is `transparent` . - -```typescript -barcodeStrokeStyle: string -``` - -## barcodeLineWidthBeforeVerification - -Specifies the line width of the outline of the shape which highlights a found linear barcode which has not been verified. The default value is `2` . - -```typescript -barcodeLineWidth: number -``` - -## regionMaskFillStyle - -Specifies the color used in the square-loop shape between the actual scanning area and the boundary of the video input. This shape only appears when the barcode scanning is limited to a specified region. The default value is `rgba(0, 0, 0, 0.5)` . - -```typescript -regionMaskFillStyle: string -``` - -**See also** - -* [Read a specific area/region](../user-guide/advanced-usage.html#read-a-specific-arearegion) - -## regionMaskStrokeStyle - -Specifies the color used to paint the outline of the scanning region. This outline only appears when the barcode scanning is limited to a specified region. The default value is `rgb(254, 142, 20)` . - -```typescript -regionMaskStrokeStyle: string -``` - -**See also** - -* [Read a specific area/region](../user-guide/advanced-usage.html#read-a-specific-arearegion) - -## regionMaskLineWidth - -Specifies the width of the outline of the scanning region. This outline only appears when the barcode scanning is limited to a specified region. The default value is `2` . - -```typescript -regionMaskLineWidth: number -``` - -**See also** - -* [Read a specific area/region](../user-guide/advanced-usage.html#read-a-specific-arearegion) - -## setVideoFit - -Sets the `object-fit` CSS property of the video element. - -```typescript -setVideoFit(objectFit: string): void; -``` - -**Parameters** - -`objectFit` : specify the new fit type. At present, only "cover" and "contain" are allowed. Check out more on [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit). - -**Return value** - -None. - -**Code Snippet** - -```js -scanner.setVideoFit("cover"); -``` - -## ifShowScanRegionMask - -Whether to show or hide the scan region mask. - -```typescript -ifShowScanRegionMask: boolean; -``` - -**Default value** - -`true` - -**Code Snippet** - -```js -scanner.ifShowScanRegionMask = false; -``` - -## ifSkipCameraInspection - -Returns or sets whether to skip camera inspection at initialization to save time. Note that if a previously used camera is already available in the [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), the inspection is skipped automatically. Read more on [ifSaveLastUsedCamera](#ifsavelastusedcamera). - -```typescript -ifSkipCameraInspection: boolean; -``` - -## ifSaveLastUsedCamera - -Returns or sets whether to save the last used camera and resolution. This feature makes use of the [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) of the browser. - -> NOTE -> -> This feature only works on mainstream browsers like Chrome, Firefox and Safari. Other browsers may change the device IDs dynamically thus making it impossible to track the camera. - -```typescript -ifSaveLastUsedCamera: boolean; -``` - -## getAllCameras - -Returns infomation of all available cameras on the device. - -```typescript -getAllCameras(): Promise -``` - -**Return value** - -A promise resolving to an array of `VideoDeviceInfo` objects. - -**Code Snippet** - -```js -let cameras = await scanner.getAllCameras(); -if (cameras.length) { - await scanner.setCurrentCamera(cameras[0]); -} -``` - -**See also** - -* [VideoDeviceInfo](./interface/VideoDeviceInfo.md) - -## getCurrentCamera - -Returns information about the current camera. - -```typescript -getCurrentCamera(): Promise -``` - -**Return value** - -A promise resolving to a `VideoDeviceInfo` object. - -**Code Snippet** - -```js -let camera = await scanner.getCurrentCamera(); -``` - -**See also** - -* [VideoDeviceInfo](./interface/VideoDeviceInfo.md) - -## setCurrentCamera - -Chooses a camera as the video source. - -> If called before `open()` or `show()`, the selected camera will be used. Otherwise, the system will decide which one to use. - -```typescript -setCurrentCamera(deviceID: string): Promise -``` - -**Parameters** - -`deviceID` : specifies the camera. - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -let cameras = await scanner.getAllCameras(); -if (cameras.length) { - await scanner.setCurrentCamera(cameras[0]); -} -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - -## getResolution - -Returns the resolution of the current video input. - -```typescript -getResolution(): number[] -``` - -**Return value** - -An array of two numbers representing the resolution. - -**Code Snippet** - -```js -let rsl = scanner.getResolution(); -console.log(rsl[0] + " x " + rsl[1]); -``` - -## setResolution - -Sets the resolution of the current video input. If the specified resolution is not exactly supported, the closest resolution will be applied. - -> If called before `open()` or `show()`, the camera will use the set resolution when it opens. Otherwise, the default resolution is used, which is 1280 x 720 on mobile devices or 1920 x 1080 on desktop. - -```typescript -setResolution(width: number, height: number): Promise -``` - -**Parameters** - -`width` : specifies the horizontal resolution. - -`height` : specifies the vertical resolution. - -> To speed up the barcode scanning, the image frames will be scaled down when it exceeds a size limit either horizontally or vertically. -> -> * The limit is 2048 pixels on mobile devices and 4096 on other devices. -> * If the template "dense" or "distance" is used, the limit is 4096 regardless of which device is used. -> -> Therefore, setting a very high resolution will not help with the scanning. - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -await scanner.setResolution(width, height); -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - -## getVideoSettings - -Returns the current video settings. - -```typescript -getVideoSettings(): MediaStreamConstraints -``` - -**Return value** - -A `MediaStreamConstraints` object. - -**See also** - -* [MediaStreamConstraints](https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints) - -## updateVideoSettings - -Changes the video input. - -```typescript -updateVideoSettings(constraints: MediaStreamConstraints): Promise -``` - -**Parameters** - -`constraints` : specifies the new video settings. - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -await scanner.updateVideoSettings({ - video: { - width: { - ideal: 1280 - }, - height: { - ideal: 720 - }, - facingMode: { - ideal: 'environment' - } - } -}); -``` - -**See also** - -* [MediaStreamConstraints](https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints) -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - -## onWarning - -A callback which is triggered when the resolution is not ideal (< 720P). - -In this case, the warning is: - -```js -{ - id: 3, - message: "Camera resolution too low, please use a higher resolution (720P or better)." -} -``` - -**Code Snippet** - -```js -const scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -scanner.onWarning = warning => console.log(warning.message); -``` - -**See Also** - -[onWarning](interface/warning.md) - -## play - -Play the video if it is already open but paused or stopped. If the video is already playing, it will start again. - -```typescript -play(): Promise -``` - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -scanner.pause(); -//..doing other things without the video -await scanner.play(); -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - -## onPlayed - -This event is triggered when the video stream starts playing. - -```typescript -event onPlayed: (info: ScannerPlayCallbackInfo) => void -``` - -**Arguments** - -info: a `ScannerPlayCallbackInfo` object which describes the resolution of the video input. - -**Code Snippet** - -```js -scanner.onPlayed = rsl => { - console.log(rsl.width + 'x' + rsl.height) -}; -await scanner.show(); // or open(), play(), setCurrentCamera(), etc. -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - -## pause - -Pauses the video without releasing the camera. - -```typescript -pause(): void -``` - -## stop - -Stops the video and releases the camera. - -```typescript -stop(): void -``` - -## videoSrc - -Sets or returns the source of the video. - -> You can use this property to specify an existing video as the source to play which will be processed the same way as the video feed from a live camera. - -```typescript -videoSrc: string | MediaStream | MediaSource | Blob; -``` - -## getCapabilities - -Inspects and returns the capabilities of the current camera. - -> At present, this method only works in Edge, Safari, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -getCapabilities(): MediaTrackCapabilities -``` - -**Return value** - -A `MediaTrackCapabilities` object which specifies the values or range of values for each constrainable property of the current camera. - -**Code Snippet** - -```js -scanner.getCapabilities(); -/* Result sample -{ - aspectRatio: {max: 1280, min: 0.001388888888888889}, - brightness: {max: 64, min: -64, step: 1}, - colorTemperature: {max: 6500, min: 2800, step: 10}, - contrast: {max: 95, min: 0, step: 1}, - deviceId: "3a505c29a3312600ea0afd79f8e2b4ba4fba3e539257801ff1de8718c27f2bed", - exposureMode: ["continuous", "manual"], - exposureTime: {max: 10000, min: 39.0625, step: 39.0625}, - facingMode: [], - focusDistance: {max: 1024, min: 0, step: 10}, - focusMode: ["continuous", "manual"], - frameRate: {max: 30, min: 0}, - groupId: "35a82dcb7d5b0ef5bda550718d194f04a812c976175e926ccb81fb9d235d010f", - height: {max: 720, min: 1}, - resizeMode: ["none", "crop-and-scale"], - saturation: {max: 100, min: 0, step: 1}, - sharpness: {max: 7, min: 1, step: 1}, - whiteBalanceMode: ["continuous", "manual"], - width: {max: 1280, min: 1}, - zoom: {max: 800, min: 100, step: 100}, -} -*/ -``` - -**See also** - -* [MediaTrackCapabilities](https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/getCapabilities) - -## getCameraSettings - -Returns the current values for each constrainable property of the current camera. - -Right now, this method only works in Chrome and should be called when the scanner is open. - -```typescript -getCameraSettings(): any -``` - -**Return value** - -The current values for each constrainable property of the current camera in the form of a [MediaTrackSettings](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSettings) object. - -**Code Snippet** - -```js -scanner.getCameraSettings(); -/* Result sample -{ - aspectRatio: 1.3333333333333333, - brightness: 0, - colorTemperature: 4600, - contrast: 0, - deviceId: "3a505c29a3312600ea0afd79f8e2b4ba4fba3e539257801ff1de8718c27f2bed", - exposureMode: "continuous", - exposureTime: 156.25, - focusDistance: 120, - focusMode: "continuous", - frameRate: 30, - groupId: "35a82dcb7d5b0ef5bda550718d194f04a812c976175e926ccb81fb9d235d010f", - height: 480, - resizeMode: "none", - saturation: 73, - sharpness: 2, - whiteBalanceMode: "continuous", - width: 640, - zoom: 100, -} -*/ -``` - -**See also** - -* [getCapabilities](#getcapabilities) - -## setFrameRate - -Adjusts the frame rate. - -> At present, this method only works in Edge, Safari, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -setFrameRate(rate: number): Promise -``` - -**Parameters** - -`rate` : specifies the new frame rate. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setFrameRate(10); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - -## getFrameRate - -Returns the real-time frame rate. - -```typescript -getFrameRate(): number; -``` - -**Parameters** - -None. - -**Return value** - -The calculated real-time frame rate. - -**Code Snippet** - -```js -await scanner.getFrameRate(); -``` - -## setColorTemperature - -Adjusts the color temperature. - -> At present, this method only works in Edge, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -setColorTemperature(colorTemperatur: number): Promise -``` - -**Parameters** - -`colorTemperatur` : specifies the new color temperature. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setColorTemperature(5000); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - -## setExposureCompensation - -Sets the exposure compensation index. - -> At present, this method only works in Edge, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -setExposureCompensation(exposureCompensation: number): Promise -``` - -**Parameters** - -`exposureCompensation` : specifies the new exposure compensation index. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setExposureCompensation(-0.7); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - -## setFocus - -Sets the focus mode and focus distance of the camera. - -> At present, this method only works in Edge, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -setFocus(mode: string, distance?: number): Promise; -``` - -**Parameters** - -`mode` : specifies the focus mode, the available values include `continuous` and `manual` . -`distance` : specifies the focus distance, only required when the `mode` is set to `manual` . Use [getCapabilities](#getcapabilities) to get the allowed value range. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setFocus("manual", 400); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - -## getFocus - -Gets the focus mode and the focus distance. - -```typescript -getFocus(): {mode: string, distance?: number}; -``` - -**Parameters** - -None. - -**Return value** - -An object describing the current camera's focus properties "mode" and "distance". If `mode` is `continuous`, `distance` has no meaning and is omitted from the object. - -**Code Snippet** - -```js -await scanner.getFocus(); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - -## setZoom - -Sets current zoom value. - -> At present, this method only works in Edge, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -setZoom(zoomValue: number): Promise -``` - -**Parameters** - -`zoomValue` : specifies the new zoom value. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setZoom(400); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - -## turnOnTorch - -Turns on the torch/flashlight if the current camera supports it. - -> This method should be called when the camera is turned on. Note that it only works with Chromium-based browsers such as Edge and Chrome on Windows or Android. Other browsers such as Firefox or Safari are not supported. Note that all browsers on iOS (including Chrome) use WebKit as the rendering engine and are not supported. - -```typescript -turnOnTorch(): Promise -``` - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.turnOnTorch(); -``` - -**See also** - -* [turnOffTorch](#turnofftorch) -* [getCapabilities](#getcapabilities) - -## turnOffTorch - -Turns off the torch/flashlight. - -> At present, this method only works in Edge, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -turnOffTorch(): Promise -``` - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.turnOffTorch(); -``` - -**See also** - -* [turnOnTorch](#turnontorch) -* [getCapabilities](#getcapabilities) diff --git a/programming-old/javascript/api-reference/BarcodeScanner-v9.6.10.md b/programming-old/javascript/api-reference/BarcodeScanner-v9.6.10.md deleted file mode 100644 index 4c10ce6f..00000000 --- a/programming-old/javascript/api-reference/BarcodeScanner-v9.6.10.md +++ /dev/null @@ -1,1626 +0,0 @@ ---- -layout: default-layout -title: BarcodeScanner - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows the BarcodeScanner class of Dynamsoft Barcode Reader JavaScript SDK v9.6.10. -keywords: BarcodeScanner, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -noTitleIndex: true -breadcrumbText: BarcodeScanner -permalink: /programming/javascript/api-reference/BarcodeScanner-v9.6.10.html ---- - -# BarcodeScanner for Video - -A barcode scanner object gets access to a camera via the [MediaDevices](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices) interface, then uses its built-in UI to show the camera input and perform continuous barcode scanning on the incoming frames. - -The default built-in UI of each barcode scanner is defined in the file "dbr.ui.html". If used directly, the UI will fit the entire page and sit on top. There are a few ways to customize it, read more on how to [Customize the UI](../user-guide/?ver=latest#customize-the-ui-optional). - -Although a barcode scanner is designed to scan barcodes from a video input, it also supports a special mode called [singleFrameMode](#singleframemode) which allows the user to select a still image or take a shot with the mobile camera for barcode scanning. - -The `BarcodeScanner` is a child class of [BarcodeReader](./BarcodeReader.md) and inherits all its methods and properties which will not be covered in this article. - -The following code snippet shows the basic usage of the `BarcodeScanner` class. - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -scanner.onUniqueRead = txt => console.log(txt); -await scanner.show(); -``` - -## API Index - -### Create and Destroy Instances - -| API Name | Description | -| ------------------------------------------- | -------------------------------------------------- | -| [createInstance()](#createinstance) | Creates a `BarcodeScanner` instance. | -| [destroyContext()](#destroycontext) | Destroys the `BarcodeScanner` instance. | -| [isContextDestroyed()](#iscontextdestroyed) | Indicates whether the instance has been destroyed. | - -### Decode Barcodes - -| API Name | Description | -| ----------------------------- | -------------------------------------------------------------------- | -| [onUniqueRead](#onuniqueread) | This event is triggered when a new, unduplicated barcode is found. | -| [onFrameRead](#onframeread) | This event is triggered after the library finishes scanning a frame. | - -### Basic Interactions - -| API Name | Description | -| ------------------- | --------------------------------------------------------- | -| [show()](#show) | Binds and shows UI, opens the camera and starts decoding. | -| [hide()](#hide) | Stops decoding, releases camera and unbinds UI. | -| [open()](#open) | Binds UI, turns on the camera and starts decoding. | -| [close()](#close) | Stops decoding, releases camera and unbinds UI. | -| [isOpen()](#isopen) | Indicates whether the camera is turned on. | - -### Scan Settings - -| API Name | Description | -| ------------------------------------------- | ------------------------------------------------------- | -| [singleFrameMode](#singleframemode) | Returns or sets whether to enable the singe-frame mode. | -| [getScanSettings()](#getscansettings) | Returns the current scan settings. | -| [updateScanSettings()](#updatescansettings) | Changes scan settings with the object passed in. | - -### UI Control - -| API Name | Description | -| ----------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | -| [getUIElement()](#getuielement) | Returns the HTML element that is used by the `BarcodeScanner` instance. | -| [setUIElement()](#setuielement) | Specifies an HTML element for the `BarcodeScanner` instance to use as its UI. | -| [defaultUIElementURL](#defaultuielementurl) | Returns or sets the URL of the .html file that defines the default UI Element. | -| [barcodeFillStyle](#barcodefillstyle) | Specifies the color used inside the shape which highlights a found barcode. | -| [barcodeStrokeStyle](#barcodestrokestyle) | Specifies the color used to paint the outline of the shape which highlights a found barcode. | -| [barcodeLineWidth](#barcodelinewidth) | Specifies the line width of the outline of the shape which highlights a found barcode. | -| [regionMaskFillStyle](#regionmaskfillstyle) | Specifies the color used in the square-loop shape between the actual scanning area and the boundary of the video input. | -| [regionMaskStrokeStyle](#regionmaskstrokestyle) | Specifies the color used to paint the outline of the scanning region. | -| [barcodeFillStyleBeforeVerification](#barcodefillstylebeforeverification) | Specifies the color used inside the shape which highlights a found linear barcode which has not been verified. | -| [barcodeStrokeStyleBeforeVerification](#barcodestrokestylebeforeverification) | Specifies the color used to paint the outline of the shape which highlights a found linear barcode which has not been verified. | -| [barcodeLineWidthBeforeVerification](#barcodelinewidthbeforeverification) | Specifies the line width of the outline of the shape which highlights a found linear barcode which has not been verified. | -| [regionMaskLineWidth](#regionmasklinewidth) | Specifies the width of the outline of the scanning region. | -| [setVideoFit()](#setvideofit) | Sets the `object-fit` CSS property of the video element. | -| [ifShowScanRegionMask](#ifshowscanregionmask) | Whether to show or hide the scan region mask. | -| [showTip()](#showtip) | Shows a Tip message. | -| [hideTip()](#hidetip) | Hides the Tip message. | -| [updateTipMessage()](#updatetipmessage) | Changes the Tip message. | -| [onTipSuggested()](#ontipsuggested) | An event that gets triggered whenever a Tip is suggested. | - -### Camera Control - -| API Name | Description | -| ------------------------------------------------- | --------------------------------------------------------------------------------- | -| [ifSkipCameraInspection](#ifskipcamerainspection) | Returns or sets whether to skip camera inspection at initialization to save time. | -| [ifSaveLastUsedCamera](#ifsavelastusedcamera) | Returns or sets whether to save the last used camera and resolution. | -| [getAllCameras()](#getallcameras) | Returns infomation of all available cameras on the device. | -| [getCurrentCamera()](#getcurrentcamera) | Returns information about the current camera. | -| [setCurrentCamera()](#setcurrentcamera) | Chooses a camera as the video source. | -| [getResolution()](#getresolution) | Returns the resolution of the current video input. | -| [setResolution()](#setresolution) | Sets the resolution of the current video input. | -| [getVideoSettings()](#getvideosettings) | Returns the current video settings. | -| [updateVideoSettings()](#updatevideosettings) | Changes the video input. | -| [onWarning](#onwarning) | A callback which is triggered when the resolution is not ideal (< 720P). | -| [testCameraAccess](#testcameraaccess) | Test whether there is an available camera. | - -### Video Decoding Process Control - -| API Name | Description | -| --------------------------- | ------------------------------------------------------------- | -| [play()](#play) | Play the video if it is already open but paused or stopped. | -| [onPlayed](#onplayed) | This event is triggered when the video stream starts playing. | -| [pauseScan()](#pausescan) | Pauses the decoding process. | -| [resumeScan()](#resumescan) | Resumes the decoding process. | -| [pause()](#pause) | Pauses the video without releasing the camera. | -| [stop()](#stop) | Stops the video and releases the camera. | -| [videoSrc](#videosrc) | Sets or returns the source of the video. | - -### Advanced Camera Control - -| API Name | Description | -| ----------------------------------------------------- | --------------------------------------------------------------------------------- | -| [getCapabilities()](#getcapabilities) | Inspects and returns the capabilities of the current camera. | -| [getCameraSettings()](#getcamerasettings) | Returns the current values for each constrainable property of the current camera. | -| [getFrameRate()](#getframerate) | Returns the real-time frame rate. | -| [setFrameRate()](#setframerate) | Adjusts the frame rate. | -| [turnOnTorch()](#turnontorch) | Turns on the torch/flashlight. | -| [turnOffTorch()](#turnofftorch) | Turns off the torch/flashlight. | -| [getZoomSettings()](#getzoomsettings) | Returns the zoom settings. | -| [setZoom()](#setzoom) | Zooms the video stream. | -| [resetZoom()](#resetzoom) | Resets the zoom level of the video. | -| [getFocusSettings()](#getfocussettings) | Returns the focus settings. | -| [setFocus()](#setfocus) | Sets how the camera focuses. | -| [enableTapToFocus()](#enabletaptofocus) | Enables manual camera focus when clicking/tapping on the video. | -| [disableTapToFocus()](#disabletaptofocus) | Disables manual camera focus when clicking/tapping on the video. | -| [isTapToFocusEnabled()](#istaptofocusenabled) | Returns whether clicking/tapping on the video invokes the camera to focus. | -| [getColorTemperature()](#getcolortemperature) | Returns the color temperature of the selected camera. | -| [setColorTemperature()](#setcolortemperature) | Adjusts the color temperature of the selected camera. | -| [getExposureCompensation()](#getexposurecompensation) | Returns the exposure compensation index of the selected camera. | -| [setExposureCompensation()](#setexposurecompensation) | Sets the exposure compensation index of the selected camera. | - -### Inherited from the `BarcodeReader` Class - -#### Change Settings - -| API Name | Description | -| ------------------------------------------------------------------- | ------------------------------------------------------------------ | -| [getRuntimeSettings()](./BarcodeReader.md#getruntimesettings) | Returns the current runtime settings. | -| [updateRuntimeSettings()](./BarcodeReader.md#updateruntimesettings) | Updates runtime settings with a given struct or a preset template. | -| [resetRuntimeSettings()](./BarcodeReader.md#resetruntimesettings) | Resets all parameters to default values. | -| [getModeArgument()](./BarcodeReader.md#getmodeargument) | Returns the argument value for the specified mode parameter. | -| [setModeArgument()](./BarcodeReader.md#setmodeargument) | Sets the argument value for the specified mode parameter. | - -#### Auxiliary - -| API Name | Description | -| ------------------------------------------------------------------------------- | ----------------------------------------------------------------- | -| [ifSaveOriginalImageInACanvas](./BarcodeReader.md#ifsaveoriginalimageinacanvas) | Whether to save the original image into a <canvas> element. | -| [getOriginalImageInACanvas()](./BarcodeReader.md#getoriginalimageinacanvas) | Returns an `HTMLCanvasElement` that holds the original image. | - -## createInstance - -Creates a `BarcodeScanner` instance. - -```typescript -static createInstance(): Promise -``` - -**Return value** - -A promise resolving to the created `BarcodeScanner` object. - -**Code Snippet** - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -``` - -## destroyContext - -Destroys the `BarcodeScanner` instance. If your page needs to create a new instance from time to time, don't forget to destroy unused old instances. - -```typescript -destroyContext(): void -``` - -**Code Snippet** - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -// ... decode ... -scanner.destroyContext(); -``` - -## isContextDestroyed - -Returns whether the instance has been destroyed. - -```typescript -isContextDestroyed(): boolean -``` - -## onUniqueRead - -Specifies an event handler which fires when a new, unduplicated barcode is found. - -The library keeps each barcode result (type and value) in the buffer for a period of time (can be set with [duplicateForgetTime](./interface/ScanSettings.md)) during which if a new result is an exact match, it's seen as a duplicate and will again be kept for that period of time while the old result is removed and so on. - -```typescript -onUniqueRead: (txt: string, result: TextResult) => void -``` - -**Arguments** - -`txt` : a string that holds the barcode text. - -`result` : a `TextResult` object that contains more detailed info. - -**Code Snippet** - -```js -scanner.onUniqueRead = (txt, result) => { - alert(txt); - console.log(result); -} -``` - -**See also** - -* [TextResult](./interface/TextResult.md) - -## onFrameRead - -Specifies an event handler which fires after the library finishes scanning a frame. - -```typescript -onFrameRead: (results: TextResult[]) => void -``` - -**Arguments** - -`results` : a `TextResult` object that contains all the barcode results in this frame. - -**Code Snippet** - -```js -scanner.onFrameRead = results => { - for (let result of results) { - console.log(result.barcodeText); - } -}; -``` - -**See also** - -* [TextResult](./interface/TextResult.md) - -## show - -Binds and shows UI, opens the camera and starts decoding. - -> If the UI doesn't exist in the DOM tree, it is appended in the DOM first and then shown. If the UI already exists in the DOM tree but is hidden, it'll be shown. - -```typescript -show(): Promise -``` - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -scanner.onUniqueRead = (txt, result) => { - alert(txt); - console.log(result); -}; -await scanner.show(); -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - -## hide - -Stops decoding, releases camera and unbinds UI. - -```typescript -hide(): void -``` - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.show(); -//...scan barcodes -scanner.hide(); -``` - -## open - -Binds UI, turns on the camera and starts decoding. - -> This method does not change the original state of the UI: if it doesn't exist in the DOM tree, nothing shows up on the page; if it exists in the DOM tree, it may or may not show up depending on its original state. - -```typescript -open(): Promise -``` - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.open(); -//...scan barcodes -await scanner.close(); -``` - -## close - -Stops decoding, releases camera and unbinds UI. - -```typescript -close(): void -``` - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.open(); -//...scan barcodes -scanner.close(); -``` - -## isOpen - -Indicates whether the camera is turned on. - -```typescript -isOpen(): boolean -``` - -**Return value** - -A boolean indicates whether the camera is turned on. - -## pauseScan - -Pause continuous scanning but keep the video stream. - -```typescript -pauseScan(options?: object): void; -``` - -**Parameters** - -`options`: Options to configure how the pause works. At present, it only contains one property `keepResultsHighlighted` which, when set to **true**, will keep the barcodes found on the frame (at the time of the pause) highlighted. - -## resumeScan - -Resumes the decoding process. - -```typescript -resumeScan(): void -``` - -## singleFrameMode - -Returns or sets the status of single frame mode. If enabled, the video input will not be played and the user can choose to take a picture with the system camera (mobile only) or select an existing image from the photo library for barcode reading. - -Because the system camera of a mobile device can provide pictures with better quality, the API is useful when facing complex scenarios such as reading the dense PDF417 code on a driver license. - -The single-frame mode can only be enabled or disabled before the video input starts playing (before `scanner.show()` is called). - -If the browser does not support the `MediaDevices`/`getUserMedia`, `singleFrameMode` will be set as `true` automatically when `createInstance()` is called. - -```typescript -singleFrameMode: boolean -``` - -**Code Snippet** - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -if(didVideoStreamFailWhenReadingDriverLicenses){ - scanner.singleFrameMode = true; - await scanner.show(); -} -``` - -## getScanSettings - -Returns the current scan settings. - -```typescript -getScanSettings(): Promise -``` - -**Return value** - -A promise resolving to a `ScanSettings` . - -**Code Snippet** - -```js -let scanSettings = await scanner.getScanSettings(); -scanSettings.intervalTime = 50; -scanSettings.duplicateForgetTime = 1000; -await scanner.updateScanSettings(scanSettings); -``` - -**See also** - -* [ScanSettings](./interface/ScanSettings.md) - -## updateScanSettings - -Changes scan settings with the object passed in. - -```typescript -updateScanSettings(settings: ScanSettings): Promise -``` - -**Parameters** - -`settings` : specifies the new scan settings. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -let scanSettings = await scanner.getScanSettings(); -scanSettings.intervalTime = 50; -scanSettings.duplicateForgetTime = 1000; -await scanner.updateScanSettings(scanSettings); -``` - -**See also** - -* [ScanSettings](./interface/ScanSettings.md) - -## getUIElement - -Returns the HTML element that is used by the `BarcodeScanner` instance. - -```typescript -getUIElement(): HTMLElement -``` - -## setUIElement - -Specifies an HTML element for the `BarcodeScanner` instance to use as its UI. The structure inside the element determines the appearance of the UI. See more on [how to customize the UI](../user-guide/?ver=latest#customize-the-ui-optional). - -```typescript -setUIElement(elementOrURL: HTMLElement | string): Promise -``` - -**Parameters** - -`elementOrURL` : specifies the element or the element url. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```html - - -
    - -``` - -```html - - -``` - -## defaultUIElementURL - -Returns or sets the URL of the *.html* file that defines the default UI Element. The URL can only be set before the API [createInstance](#createinstance) is called. - -```typescript -static defaultUIElementURL: string -``` - -**Code Snippet** - -```js -Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.10/dist/dbr.ui.html"; -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -await scanner.show(); -``` - -## barcodeFillStyle - -Specifies the color used inside the shape which highlights a found barcode. The default value is `rgba(254, 180, 32, 0.3)` . - -```typescript -barcodeFillStyle: string -``` - -## barcodeStrokeStyle - -Specifies the color used to paint the outline of the shape which highlights a found barcode. The default value is `rgba(254, 180, 32, 0.9)` . - -```typescript -barcodeStrokeStyle: string -``` - -## barcodeLineWidth - -Specifies the line width of the outline of the shape which highlights a found barcode. The default value is `1` . - -```typescript -barcodeLineWidth: number -``` - -## barcodeFillStyleBeforeVerification - -Specifies the color used inside the shape which highlights a found linear barcode which has not been verified. The default value is `rgba(248, 252, 0, 0.2)` . - -```typescript -barcodeFillStyle: string -``` - -## barcodeStrokeStyleBeforeVerification - -Specifies the color used to paint the outline of the shape which highlights a found linear barcode which has not been verified. The default value is `transparent` . - -```typescript -barcodeStrokeStyle: string -``` - -## barcodeLineWidthBeforeVerification - -Specifies the line width of the outline of the shape which highlights a found linear barcode which has not been verified. The default value is `2` . - -```typescript -barcodeLineWidth: number -``` - -## regionMaskFillStyle - -Specifies the color used in the square-loop shape between the actual scanning area and the boundary of the video input. This shape only appears when the barcode scanning is limited to a specified region. The default value is `rgba(0, 0, 0, 0.5)` . - -```typescript -regionMaskFillStyle: string -``` - -**See also** - -* [Read a specific area/region](../user-guide/advanced-usage.html#read-a-specific-arearegion) - -## regionMaskStrokeStyle - -Specifies the color used to paint the outline of the scanning region. This outline only appears when the barcode scanning is limited to a specified region. The default value is `rgb(254, 142, 20)` . - -```typescript -regionMaskStrokeStyle: string -``` - -**See also** - -* [Read a specific area/region](../user-guide/advanced-usage.html#read-a-specific-arearegion) - -## regionMaskLineWidth - -Specifies the width of the outline of the scanning region. This outline only appears when the barcode scanning is limited to a specified region. The default value is `2` . - -```typescript -regionMaskLineWidth: number -``` - -**See also** - -* [Read a specific area/region](../user-guide/advanced-usage.html#read-a-specific-arearegion) - -## setVideoFit - -Sets the `object-fit` CSS property of the video element. - -```typescript -setVideoFit(objectFit: string): void; -``` - -**Parameters** - -`objectFit` : specify the new fit type. At present, only "cover" and "contain" are allowed. Check out more on [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit). - -**Return value** - -None. - -**Code Snippet** - -```js -scanner.setVideoFit("cover"); -``` - -## ifShowScanRegionMask - -Whether to show or hide the scan region mask. - -```typescript -ifShowScanRegionMask: boolean; -``` - -**Default value** - -`true` - -**Code Snippet** - -```js -scanner.ifShowScanRegionMask = false; -``` - -## showTip - -Shows a Tip message. - -```typescript -showTip(x: number, y: number, width: number, initialMessage?: string, duration: number, autoShowSuggestedTip?: boolean) => void; -``` - -**Parameters** - -`x` , `y` : pecifies where to put the Tip message. -`width` : specifies the width of the Tip message, wrapping if the message is too long. -`initialMessage` : the initial message. -`duration` : the time during which a Tip message is displayed. The duration is reset each time the message is updated. -`autoShowSuggestedTip` : whether or not the Tip box is updated automatically when a tip is suggested. A tip is usually suggested by another SDK such as Dynamsoft Barcode Reader. - -**Return value** - -None. - -**Code Snippet** - -```javascript -scanner.showTip(500, 200, 500, "The camera is too far away, please move closer!", 3000, true); -``` - -## hideTip - -Hides the Tip message. - -```typescript -hideTip(): void; -``` - -**Return value** - -None. - -**Code Snippet** - -```javascript -scanner.hideTip(); -``` - -## updateTipMessage - -Changes the Tip message. - -```typescript -updateTipMessage:(message: string) => void; -``` - -**Parameters** - -`message` : specifies a new message as the Tip. - -**Return value** - -None. - -**Code Snippet** - -```javascript -scanner.updateTipMessage("This is a new message!"); -``` - -## onTipSuggested - -An event that gets triggered whenever a Tip is suggested. - -```typescript -onTipSuggested: (occasion: string, message: string) => any; -``` - -**Arguments** - -`occasion` : specifies the occasion for the Tip. -`message` : the Tip message for the occasion. - -**Code Snippet** - -```javascript -scanner.onTipSuggested = (occasion, message) { - console.log(message); -} -``` - -## ifSkipCameraInspection - -Returns or sets whether to skip camera inspection at initialization to save time. Note that if a previously used camera is already available in the [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), the inspection is skipped automatically. Read more on [ifSaveLastUsedCamera](#ifsavelastusedcamera). - -```typescript -ifSkipCameraInspection: boolean; -``` - -## ifSaveLastUsedCamera - -Returns or sets whether to save the last used camera and resolution. This feature makes use of the [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) of the browser. - -> NOTE -> -> This feature only works on mainstream browsers like Chrome, Firefox and Safari. Other browsers may change the device IDs dynamically thus making it impossible to track the camera. - -```typescript -ifSaveLastUsedCamera: boolean; -``` - -## getAllCameras - -Returns infomation of all available cameras on the device. - -```typescript -getAllCameras(): Promise -``` - -**Return value** - -A promise resolving to an array of `VideoDeviceInfo` objects. - -**Code Snippet** - -```js -let cameras = await scanner.getAllCameras(); -if (cameras.length) { - await scanner.setCurrentCamera(cameras[0]); -} -``` - -**See also** - -* [VideoDeviceInfo](./interface/VideoDeviceInfo.md) - -## getCurrentCamera - -Returns information about the current camera. - -```typescript -getCurrentCamera(): Promise -``` - -**Return value** - -A promise resolving to a `VideoDeviceInfo` object. - -**Code Snippet** - -```js -let camera = await scanner.getCurrentCamera(); -``` - -**See also** - -* [VideoDeviceInfo](./interface/VideoDeviceInfo.md) - -## setCurrentCamera - -Chooses a camera as the video source. - -> If called before `open()` or `show()`, the selected camera will be used. Otherwise, the system will decide which one to use. - -```typescript -setCurrentCamera(deviceID: string): Promise -``` - -**Parameters** - -`deviceID` : specifies the camera. - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -let cameras = await scanner.getAllCameras(); -if (cameras.length) { - await scanner.setCurrentCamera(cameras[0]); -} -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - -## getResolution - -Returns the resolution of the current video input. - -```typescript -getResolution(): number[] -``` - -**Return value** - -An array of two numbers representing the resolution. - -**Code Snippet** - -```js -let rsl = scanner.getResolution(); -console.log(rsl[0] + " x " + rsl[1]); -``` - -## setResolution - -Sets the resolution of the current video input. If the specified resolution is not exactly supported, the closest resolution will be applied. - -> If called before `open()` or `show()`, the camera will use the set resolution when it opens. Otherwise, the default resolution is used, which is 1280 x 720 on mobile devices or 1920 x 1080 on desktop. - -```typescript -setResolution(width: number, height: number): Promise -``` - -**Parameters** - -`width` : specifies the horizontal resolution. - -`height` : specifies the vertical resolution. - -> To speed up the barcode scanning, the image frames will be scaled down when it exceeds a size limit either horizontally or vertically. -> -> * The limit is 2048 pixels on mobile devices and 4096 on other devices. -> * If the template "dense" or "distance" is used, the limit is 4096 regardless of which device is used. -> -> Therefore, setting a very high resolution will not help with the scanning. - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -await scanner.setResolution(width, height); -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - -## getVideoSettings - -Returns the current video settings. - -```typescript -getVideoSettings(): MediaStreamConstraints -``` - -**Return value** - -A `MediaStreamConstraints` object. - -**See also** - -* [MediaStreamConstraints](https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints) - -## updateVideoSettings - -Changes the video input. - -```typescript -updateVideoSettings(constraints: MediaStreamConstraints): Promise -``` - -**Parameters** - -`constraints` : specifies the new video settings. - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -await scanner.updateVideoSettings({ - video: { - width: { - ideal: 1280 - }, - height: { - ideal: 720 - }, - facingMode: { - ideal: 'environment' - } - } -}); -``` - -**See also** - -* [MediaStreamConstraints](https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints) -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - -## onWarning - -A callback which is triggered when the resolution is not ideal (< 720P). - -In this case, the warning is: - -```js -{ - id: 3, - message: "Camera resolution too low, please use a higher resolution (720P or better)." -} -``` - -**Code Snippet** - -```js -const scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -scanner.onWarning = warning => console.log(warning.message); -``` - -**See Also** - -[onWarning](interface/warning.md) - - -## testCameraAccess - -Test whether there is an available camera. - -```typescript -static testCameraAccess(): Promise; -``` - -**Parameters** - -None. - -**Return value** - -A promise resolving to a `CameraTestResponse` object. - -```typescript -interface CameraTestResponse { - readonly ok: boolean; - readonly message: string; -}; -``` - -The possible responses are - -```json -{ - ok: false, - message: "Insecure context." -} -``` - -```json -{ - ok: false, - message: "No camera detected." -} -``` - -```json -{ - ok: false, - message: "No permission to access camera." -} -``` - -```json -{ - ok: false, - message: "Some problem occurred which prevented the device from being used." -} -``` - -```json -{ - ok: false, - message: "A hardware error occurred." -} -``` - -```json -{ - ok: false, - message: "User media support is disabled." -} -``` - -```json -{ - ok: true, - message: " Successfully accessed the camera." -} -``` - -**Code Snippet** - -```javascript -const testResponse = await Dynamsoft.DBR.BarcodeScanner.testCameraAccess(); -if (testResponse.ok) { - console.log(testResponse.message); -} -``` - -## play - -Play the video if it is already open but paused or stopped. If the video is already playing, it will start again. - -```typescript -play(): Promise -``` - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -scanner.pause(); -//..doing other things without the video -await scanner.play(); -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - -## onPlayed - -This event is triggered when the video stream starts playing. - -```typescript -event onPlayed: (info: ScannerPlayCallbackInfo) => void -``` - -**Arguments** - -info: a `ScannerPlayCallbackInfo` object which describes the resolution of the video input. - -**Code Snippet** - -```js -scanner.onPlayed = rsl => { - console.log(rsl.width + 'x' + rsl.height) -}; -await scanner.show(); // or open(), play(), setCurrentCamera(), etc. -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - -## pause - -Pauses the video without releasing the camera. - -```typescript -pause(): void -``` - -## stop - -Stops the video and releases the camera. - -```typescript -stop(): void -``` - -## videoSrc - -Sets or returns the source of the video. - -> You can use this property to specify an existing video as the source to play which will be processed the same way as the video feed from a live camera. - -```typescript -videoSrc: string | MediaStream | MediaSource | Blob; -``` - -## getCapabilities - -Inspects and returns the capabilities of the current camera. - -> At present, this method only works in Edge, Safari, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -getCapabilities(): MediaTrackCapabilities -``` - -**Return value** - -A `MediaTrackCapabilities` object which specifies the values or range of values for each constrainable property of the current camera. - -**Code Snippet** - -```js -scanner.getCapabilities(); -/* Result sample -{ - aspectRatio: {max: 1280, min: 0.001388888888888889}, - brightness: {max: 64, min: -64, step: 1}, - colorTemperature: {max: 6500, min: 2800, step: 10}, - contrast: {max: 95, min: 0, step: 1}, - deviceId: "3a505c29a3312600ea0afd79f8e2b4ba4fba3e539257801ff1de8718c27f2bed", - exposureMode: ["continuous", "manual"], - exposureTime: {max: 10000, min: 39.0625, step: 39.0625}, - facingMode: [], - focusDistance: {max: 1024, min: 0, step: 10}, - focusMode: ["continuous", "manual"], - frameRate: {max: 30, min: 0}, - groupId: "35a82dcb7d5b0ef5bda550718d194f04a812c976175e926ccb81fb9d235d010f", - height: {max: 720, min: 1}, - resizeMode: ["none", "crop-and-scale"], - saturation: {max: 100, min: 0, step: 1}, - sharpness: {max: 7, min: 1, step: 1}, - whiteBalanceMode: ["continuous", "manual"], - width: {max: 1280, min: 1}, - zoom: {max: 800, min: 100, step: 100}, -} -*/ -``` - -**See also** - -* [MediaTrackCapabilities](https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/getCapabilities) - -## getCameraSettings - -Returns the current values for each constrainable property of the current camera. - -Right now, this method only works in Chrome and should be called when the scanner is open. - -```typescript -getCameraSettings(): any -``` - -**Return value** - -The current values for each constrainable property of the current camera in the form of a [MediaTrackSettings](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSettings) object. - -**Code Snippet** - -```js -scanner.getCameraSettings(); -/* Result sample -{ - aspectRatio: 1.3333333333333333, - brightness: 0, - colorTemperature: 4600, - contrast: 0, - deviceId: "3a505c29a3312600ea0afd79f8e2b4ba4fba3e539257801ff1de8718c27f2bed", - exposureMode: "continuous", - exposureTime: 156.25, - focusDistance: 120, - focusMode: "continuous", - frameRate: 30, - groupId: "35a82dcb7d5b0ef5bda550718d194f04a812c976175e926ccb81fb9d235d010f", - height: 480, - resizeMode: "none", - saturation: 73, - sharpness: 2, - whiteBalanceMode: "continuous", - width: 640, - zoom: 100, -} -*/ -``` - -**See also** - -* [getCapabilities](#getcapabilities) - -## setFrameRate - -Adjusts the frame rate. - -> At present, this method only works in Edge, Safari, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -setFrameRate(rate: number): Promise -``` - -**Parameters** - -`rate` : specifies the new frame rate. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setFrameRate(10); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - -## getFrameRate - -Returns the real-time frame rate. - -```typescript -getFrameRate(): number; -``` - -**Parameters** - -None. - -**Return value** - -The calculated real-time frame rate. - -**Code Snippet** - -```js -await scanner.getFrameRate(); -``` - - -## enableTapToFocus - -Enables manual camera focus when clicking/tapping on the video. - -```typescript -enableTapToFocus() : void; -``` - -**Parameters** - -None. - -**Return value** - -None. - -**Code Snippet** - -```javascript -scanner.enableTapToFocus(); -``` - -## disableTapToFocus - -Disables manual camera focus when clicking/tapping on the video. - -```typescript -disableTapToFocus() : void; -``` - -**Parameters** - -None. - -**Return value** - -None. - -**Code Snippet** - -```javascript -scanner.disableTapToFocus(); -``` - -## isTapToFocusEnabled - -Returns whether clicking/tapping on the video invokes the camera to focus. - -```typescript -isTapToFocusEnabled() : boolean; -``` - -**Parameters** - -None. - -**Return value** - -`true` means clicking/tapping on the video will invoke the camera to focus. `false` means clicking/tapping on the video does nothing. - -**Code Snippet** - -```javascript -if (scanner.isTapToFocusEnabled()) { - console.log("You can tap or click on the video to focus!"); -} -``` - -## getColorTemperature - -Returns the color temperature of the selected camera. - -> This method should be called when the camera is turned on. Note that it only works with Chromium-based browsers such as Edge and Chrome on Windows or Android. Other browsers such as Firefox or Safari are not supported. Note that all browsers on iOS (including Chrome) use WebKit as the rendering engine and are not supported. - -```typescript -getColorTemperature(): number; -``` - -## setColorTemperature - -Adjusts the color temperature. - -> At present, this method only works in Edge, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -setColorTemperature(colorTemperatur: number): Promise -``` - -**Parameters** - -`colorTemperatur` : specifies the new color temperature. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setColorTemperature(5000); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - - -## getExposureCompensation - -Returns the exposure compensation index of the selected camera. - -> This method should be called when the camera is turned on. Note that it only works with Chromium-based browsers such as Edge and Chrome on Windows or Android. Other browsers such as Firefox or Safari are not supported. Note that all browsers on iOS (including Chrome) use WebKit as the rendering engine and are not supported. - -```typescript -getExposureCompensation(): number; -``` - -## setExposureCompensation - -Sets the exposure compensation index. - -> At present, this method only works in Edge, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -setExposureCompensation(exposureCompensation: number): Promise -``` - -**Parameters** - -`exposureCompensation` : specifies the new exposure compensation index. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setExposureCompensation(-0.7); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - -## getFocusSettings - -Returns the focus settings. - -```typescript -type FocusArea = { - centerPoint: { x: string, y: string }; - width: string; - height: string; -}; -type FocusSettings = { - mode: string; - distance: number; - area: FocusArea; -}; -getFocusSettings(): FocusSettings; -``` - -**Parameters** - -None. - -**Return value** - -The current focus settings. - -**Code Snippet** - -```javascript -scanner.getFocusSettings(); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - -## setFocus - -Sets the focus mode and focus distance of the camera. - -> At present, this method only works in Edge, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -setFocus(mode: string, distance?: number): Promise; -``` - -**Parameters** - -`mode` : specifies the focus mode, the available values include `continuous` and `manual` . -`distance` : specifies the focus distance, only required when the `mode` is set to `manual` . Use [getCapabilities](#getcapabilities) to get the allowed value range. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setFocus("manual", 400); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - -## getFocus - -Gets the focus mode and the focus distance. - -```typescript -getFocus(): {mode: string, distance?: number}; -``` - -**Parameters** - -None. - -**Return value** - -An object describing the current camera's focus properties "mode" and "distance". If `mode` is `continuous`, `distance` has no meaning and is omitted from the object. - -**Code Snippet** - -```js -await scanner.getFocus(); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - -## getZoomSettings - -Returns the zoom settings. - -```typescript -getZoomSettings(): { factor: number };; -``` - -**Parameters** - -None. - -**Return value** - -An object that describes the zoom settings. As of version 3.2, it contains only the zoom factor. - -**Code Snippet** - -```javascript -console.log(scanner.getZoomSettings().factor); -``` - -## setZoom - -Sets current zoom value. - -> At present, this method only works in Edge, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -setZoom(zoomValue: number): Promise -``` - -**Parameters** - -`zoomValue` : specifies the new zoom value. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setZoom(400); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - -## resetZoom - -Resets the zoom level of the video. - -```typescript -resetZoom(): Promise; -``` - -**Parameters** - -None. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```javascript -await scanner.resetZoom(); -``` - -## turnOnTorch - -Turns on the torch/flashlight if the current camera supports it. - -> This method should be called when the camera is turned on. Note that it only works with Chromium-based browsers such as Edge and Chrome on Windows or Android. Other browsers such as Firefox or Safari are not supported. Note that all browsers on iOS (including Chrome) use WebKit as the rendering engine and are not supported. - -```typescript -turnOnTorch(): Promise -``` - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.turnOnTorch(); -``` - -**See also** - -* [turnOffTorch](#turnofftorch) -* [getCapabilities](#getcapabilities) - -## turnOffTorch - -Turns off the torch/flashlight. - -> At present, this method only works in Edge, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -turnOffTorch(): Promise -``` - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.turnOffTorch(); -``` - -**See also** - -* [turnOnTorch](#turnontorch) -* [getCapabilities](#getcapabilities) diff --git a/programming-old/javascript/api-reference/BarcodeScanner-v9.6.21.md b/programming-old/javascript/api-reference/BarcodeScanner-v9.6.21.md deleted file mode 100644 index 7afbe648..00000000 --- a/programming-old/javascript/api-reference/BarcodeScanner-v9.6.21.md +++ /dev/null @@ -1,1952 +0,0 @@ ---- -layout: default-layout -title: BarcodeScanner - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows the BarcodeScanner class of Dynamsoft Barcode Reader JavaScript SDK v9.6.21. -keywords: BarcodeScanner, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -noTitleIndex: true -breadcrumbText: BarcodeScanner -permalink: /programming/javascript/api-reference/BarcodeScanner-v9.6.21.html ---- - -# BarcodeScanner for Video - -A barcode scanner object gets access to a camera via the [MediaDevices](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices) interface, then uses its built-in UI to show the camera input and perform continuous barcode scanning on the incoming frames. - -The default built-in UI of each barcode scanner is defined in the file "dbr.ui.html". If used directly, the UI will fit the entire page and sit on top. There are a few ways to customize it, read more on how to [Customize the UI](../user-guide/?ver=latest#customize-the-ui-optional). - -Although a barcode scanner is designed to scan barcodes from a video input, it also supports a special mode called [singleFrameMode](#singleframemode) which allows the user to select a still image or take a shot with the mobile camera for barcode scanning. - -The `BarcodeScanner` is a child class of [BarcodeReader](./BarcodeReader.md) and inherits all its methods and properties which will not be covered in this article. - -The following code snippet shows the basic usage of the `BarcodeScanner` class. - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -scanner.onUniqueRead = txt => console.log(txt); -await scanner.show(); -``` - -## API Index - -### Create and Destroy Instances - -| API Name | Description | -| ------------------------------------------- | -------------------------------------------------- | -| [createInstance()](#createinstance) | Creates a `BarcodeScanner` instance. | -| [destroyContext()](#destroycontext) | Destroys the `BarcodeScanner` instance. | -| [isContextDestroyed()](#iscontextdestroyed) | Indicates whether the instance has been destroyed. | - -### Decode Barcodes - -| API Name | Description | -| ----------------------------- | -------------------------------------------------------------------- | -| [onUniqueRead](#onuniqueread) | This event is triggered when a new, unduplicated barcode is found. | -| [onFrameRead](#onframeread) | This event is triggered after the library finishes scanning a frame. | - -### Basic Interactions - -| API Name | Description | -| ------------------- | --------------------------------------------------------- | -| [show()](#show) | Binds and shows UI, opens the camera and starts decoding. | -| [hide()](#hide) | Stops decoding, releases camera, unbinds and hides UI. | -| [open()](#open) | Binds UI, turns on the camera and starts decoding. | -| [close()](#close) | Stops decoding, releases camera and unbinds UI. | -| [isOpen()](#isopen) | Indicates whether the camera is turned on. | - -### Scan Settings - -| API Name | Description | -| ------------------------------------------- | ------------------------------------------------------- | -| [singleFrameMode](#singleframemode) | Returns or sets whether to enable the singe-frame mode. | -| [getScanSettings()](#getscansettings) | Returns the current scan settings. | -| [updateScanSettings()](#updatescansettings) | Changes scan settings with the object passed in. | - -### UI Control - -| API Name | Description | -| ----------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [video](#video) | Returns `HTMLVideoElement` element that the `BarcodeScanner` instance used. | -| [getUIElement()](#getuielement) | Returns the HTML element that is used by the `BarcodeScanner` instance. | -| [setUIElement()](#setuielement) | Specifies an HTML element for the `BarcodeScanner` instance to use as its UI. | -| [defaultUIElementURL](#defaultuielementurl) | Returns or sets the URL of the .html file that defines the default UI Element. | -| [barcodeFillStyle](#barcodefillstyle) | Specifies the color used inside the shape which highlights a found barcode. | -| [barcodeStrokeStyle](#barcodestrokestyle) | Specifies the color used to paint the outline of the shape which highlights a found barcode. | -| [barcodeLineWidth](#barcodelinewidth) | Specifies the line width of the outline of the shape which highlights a found barcode. | -| [regionMaskFillStyle](#regionmaskfillstyle) | Specifies the color used in the square-loop shape between the actual scanning area and the boundary of the video input. | -| [regionMaskStrokeStyle](#regionmaskstrokestyle) | Specifies the color used to paint the outline of the scanning region. | -| [barcodeFillStyleBeforeVerification](#barcodefillstylebeforeverification) | Specifies the color used inside the shape which highlights a found linear barcode which has not been verified. | -| [barcodeStrokeStyleBeforeVerification](#barcodestrokestylebeforeverification) | Specifies the color used to paint the outline of the shape which highlights a found linear barcode which has not been verified. | -| [barcodeLineWidthBeforeVerification](#barcodelinewidthbeforeverification) | Specifies the line width of the outline of the shape which highlights a found linear barcode which has not been verified. | -| [regionMaskLineWidth](#regionmasklinewidth) | Specifies the width of the outline of the scanning region. | -| [setVideoFit()](#setvideofit) | Sets the `object-fit` CSS property of the video element. | -| [getVideoFit()](#getvideofit) | Returns the value of the `object-fit` CSS property of the video element. | -| [ifShowScanRegionMask](#ifshowscanregionmask) | Whether to show the scan region mask. | -| [showTip()](#showtip) | Shows a Tip message. | -| [hideTip()](#hidetip) | Hides the Tip message. | -| [updateTipMessage()](#updatetipmessage) | Changes the Tip message. | -| [onTipSuggested()](#ontipsuggested) | An event that gets triggered whenever a Tip is suggested. | -| [convertToPageCoordinates()](#converttopagecoordinates) | Converts coordinates of a barcode location to the coordinates relative to the top left point of the entire document. | -| [convertToClientCoordinates()](#converttoclientcoordinates) | Converts coordinates of a barcode location to the coordinates within the application's viewport at which the event occurred (as opposed to the coordinate within the page). | - -### Camera Control - -| API Name | Description | -| ------------------------------------------------- | --------------------------------------------------------------------------------- | -| [ifSkipCameraInspection](#ifskipcamerainspection) | Returns or sets whether to skip camera inspection at initialization to save time. | -| [ifSaveLastUsedCamera](#ifsavelastusedcamera) | Returns or sets whether to save the last used camera and resolution. | -| [getAllCameras()](#getallcameras) | Returns infomation of all available cameras on the device. | -| [getCurrentCamera()](#getcurrentcamera) | Returns information about the current camera. | -| [setCurrentCamera()](#setcurrentcamera) | Chooses a camera as the video source. | -| [getResolution()](#getresolution) | Returns the resolution of the current video input. | -| [setResolution()](#setresolution) | Sets the resolution of the current video input. | -| [getVideoSettings()](#getvideosettings) | Returns the current video settings. | -| [updateVideoSettings()](#updatevideosettings) | Changes the video input. | -| [onWarning](#onwarning) | A callback which is triggered when the resolution is not ideal (< 720P). | -| [testCameraAccess()](#testcameraaccess) | Test whether there is an available camera. | - -### Video Decoding Process Control - -| API Name | Description | -| --------------------------- | ------------------------------------------------------------- | -| [play()](#play) | Play the video if it is already open but paused or stopped. | -| [onPlayed](#onplayed) | This event is triggered when the video stream starts playing. | -| [pauseScan()](#pausescan) | Pauses the decoding process. | -| [resumeScan()](#resumescan) | Resumes the decoding process. | -| [pause()](#pause) | Pauses the video without releasing the camera. | -| [stop()](#stop) | Stops the video and releases the camera. | -| [videoSrc](#videosrc) | Sets or returns the source of the video. | - -### Advanced Camera Control - -| API Name | Description | -| ----------------------------------------------------- | --------------------------------------------------------------------------------- | -| [getCapabilities()](#getcapabilities) | Inspects and returns the capabilities of the current camera. | -| [getCameraSettings()](#getcamerasettings) | Returns the current values for each constrainable property of the current camera. | -| [getFrameRate()](#getframerate) | Returns the real-time frame rate. | -| [setFrameRate()](#setframerate) | Adjusts the frame rate. | -| [turnOnTorch()](#turnontorch) | Turns on the torch/flashlight. | -| [turnOffTorch()](#turnofftorch) | Turns off the torch/flashlight. | -| [getZoomSettings()](#getzoomsettings) | Returns the zoom settings. | -| [setZoom()](#setzoom) | Zooms the video stream. | -| [resetZoom()](#resetzoom) | Resets the zoom level of the video. | -| [getFocusSettings()](#getfocussettings) | Returns the focus settings. | -| [setFocus()](#setfocus) | Sets how the camera focuses. | -| [enableTapToFocus()](#enabletaptofocus) | Enables manual camera focus when clicking/tapping on the video. | -| [disableTapToFocus()](#disabletaptofocus) | Disables manual camera focus when clicking/tapping on the video. | -| [isTapToFocusEnabled()](#istaptofocusenabled) | Returns whether clicking/tapping on the video invokes the camera to focus. | -| [getColorTemperature()](#getcolortemperature) | Returns the color temperature of the selected camera. | -| [setColorTemperature()](#setcolortemperature) | Adjusts the color temperature of the selected camera. | -| [getExposureCompensation()](#getexposurecompensation) | Returns the exposure compensation index of the selected camera. | -| [setExposureCompensation()](#setexposurecompensation) | Sets the exposure compensation index of the selected camera. | - -### Inherited from the `BarcodeReader` Class - -#### Change Settings - -| API Name | Description | -| ------------------------------------------------------------------- | ------------------------------------------------------------------ | -| [getRuntimeSettings()](./BarcodeReader.md#getruntimesettings) | Returns the current runtime settings. | -| [updateRuntimeSettings()](./BarcodeReader.md#updateruntimesettings) | Updates runtime settings with a given struct or a preset template. | -| [resetRuntimeSettings()](./BarcodeReader.md#resetruntimesettings) | Resets all parameters to default values. | -| [getModeArgument()](./BarcodeReader.md#getmodeargument) | Returns the argument value for the specified mode parameter. | -| [setModeArgument()](./BarcodeReader.md#setmodeargument) | Sets the argument value for the specified mode parameter. | - -#### Auxiliary - -| API Name | Description | -| ------------------------------------------------------------------------------- | ----------------------------------------------------------------- | -| [ifSaveOriginalImageInACanvas](./BarcodeReader.md#ifsaveoriginalimageinacanvas) | Whether to save the original image into a <canvas> element. | -| [getOriginalImageInACanvas()](./BarcodeReader.md#getoriginalimageinacanvas) | Returns an `HTMLCanvasElement` that holds the original image. | - -## createInstance - -Creates a `BarcodeScanner` instance. - -```typescript -static createInstance(): Promise -``` - -**Return value** - -A promise resolving to the created `BarcodeScanner` object. - -**Code Snippet** - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -``` - -**See also** - -* [destroyContext](#destroyContext) - -## destroyContext - -Destroys the `BarcodeScanner` instance. If your page needs to create a new instance from time to time, don't forget to destroy unused old instances. - -```typescript -destroyContext(): void -``` - -**Code Snippet** - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -// ... decode ... -scanner.destroyContext(); -``` - -**See also** - -* [isContextDestroyed](#isContextDestroyed) - -## isContextDestroyed - -Returns whether the instance has been destroyed. - -```typescript -isContextDestroyed(): boolean -``` - -**See also** - -* [destroyContext](#destroyContext) - -## onUniqueRead - -Specifies an event handler which fires when a new, unduplicated barcode is found. - -The library keeps each barcode result (type and value) in the buffer for a period of time (can be set with [duplicateForgetTime](./interface/ScanSettings.md)) during which if a new result is an exact match, it's seen as a duplicate and will again be kept for that period of time while the old result is removed and so on. - -```typescript -onUniqueRead: (txt: string, result: TextResult) => void -``` - -**Arguments** - -`txt` : a string that holds the barcode text. - -`result` : a `TextResult` object that contains more detailed info. - -**Code Snippet** - -```js -scanner.onUniqueRead = (txt, result) => { - alert(txt); - console.log(result); -} -``` - -**See also** - -* [TextResult](./interface/TextResult.md) -* [onFrameRead](#onframeread) - -## onFrameRead - -Specifies an event handler which fires after the library finishes scanning a frame. - -```typescript -onFrameRead: (results: TextResult[]) => void -``` - -**Arguments** - -`results` : an array of `TextResult` object that contains the barcode results in this frame. - -**Code Snippet** - -```js -scanner.onFrameRead = results => { - for (let result of results) { - console.log(result.barcodeText); - } -}; -``` - -**See also** - -* [TextResult](./interface/TextResult.md) -* [onUniqueRead](#onuniqueread) - -## show - -Binds and shows UI, opens the camera and starts decoding. - -> If the UI doesn't exist in the DOM tree, it is appended in the DOM first and then shown. If the UI already exists in the DOM tree but is hidden, it'll be shown. - -```typescript -show(): Promise -``` - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -scanner.onUniqueRead = (txt, result) => { - alert(txt); - console.log(result); -}; -await scanner.show(); -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) -* [close](#close) -* [hide](#hide) - -## hide - -Stops decoding, releases camera, unbinds and hides UI. - -```typescript -hide(): void -``` - -**Code Snippet** - -```js -await scanner.show(); -//...scan barcodes -scanner.hide(); -``` - -**See also** - -* [close](#close) - -## open - -Binds UI, turns on the camera and starts decoding. - -> This method does not change the original state of the UI: if it doesn't exist in the DOM tree, nothing shows up on the page; if it exists in the DOM tree, it may or may not show up depending on its original state. - -```typescript -open(): Promise -``` - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -await scanner.open(); -//...scan barcodes -await scanner.close(); -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) -* [close](#close) -* [hide](#hide) - -## close - -Stops decoding, releases camera and unbinds UI. - -```typescript -close(): void -``` - -**Code Snippet** - -```js -await scanner.open(); -//...scan barcodes -scanner.close(); -``` - -**See also** - -* [hide](#hide) - -## isOpen - -Indicates whether the camera is turned on. - -```typescript -isOpen(): boolean -``` - -**Return value** - -A boolean indicates whether the camera is turned on. - -## pauseScan - -Pause continuous scanning but keep the video stream. - -```typescript -pauseScan(options?: object): void; -``` - -**Parameters** - -`options`: Options to configure how the pause works. At present, it only contains one property `keepResultsHighlighted` which, when set to **true**, will keep the barcodes found on the frame (at the time of the pause) highlighted. - -**See also** - -* [resumeScan](#resumeScan) - -## resumeScan - -Resumes the decoding process. - -```typescript -resumeScan(): void -``` - -**See also** - -* [pauseScan](#pauseScan) - -## singleFrameMode - -Returns or sets the status of single frame mode. If enabled, the video input will not be played and the user can choose to take a picture with the system camera (mobile only) or select an existing image from the photo library for barcode reading. - -Because the system camera of a mobile device can provide pictures with better quality, the API is useful when facing complex scenarios such as reading the dense PDF417 code on a driver license. - -The single-frame mode can only be enabled or disabled before the video input starts playing (before `scanner.show()` is called). - -```typescript -singleFrameMode: boolean -``` - -**Default value** - -In general, the default value is `false`. But if the browser does not support the `MediaDevices`/`getUserMedia`, it will be set as `true` automatically when `createInstance()` is called. - -**Code Snippet** - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -if(didVideoStreamFailWhenReadingDriverLicenses){ - scanner.singleFrameMode = true; - await scanner.show(); -} -``` - -## getScanSettings - -Returns the current scan settings. - -```typescript -getScanSettings(): Promise -``` - -**Return value** - -A promise resolving to a `ScanSettings` . - -**Code Snippet** - -```js -let scanSettings = await scanner.getScanSettings(); -scanSettings.intervalTime = 50; -scanSettings.duplicateForgetTime = 1000; -await scanner.updateScanSettings(scanSettings); -``` - -**See also** - -* [ScanSettings](./interface/ScanSettings.md) -* [updateScanSettings](#updateScanSettings) - -## updateScanSettings - -Changes scan settings with the object passed in. - -```typescript -updateScanSettings(settings: ScanSettings): Promise -``` - -**Parameters** - -`settings` : specifies the new scan settings. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -let scanSettings = await scanner.getScanSettings(); -scanSettings.intervalTime = 50; -scanSettings.duplicateForgetTime = 1000; -await scanner.updateScanSettings(scanSettings); -``` - -**See also** - -* [ScanSettings](./interface/ScanSettings.md) -* [getScanSettings](#getScanSettings) - -## video - -Returns `HTMLVideoElement` element that the `BarcodeScanner` instance used. - -```typescript -readonly video: HTMLElement -``` - -## getUIElement - -Returns the HTML element that is used by the `BarcodeScanner` instance. - -```typescript -getUIElement(): HTMLElement -``` - -**Return value** - -The HTML element that is used by the `BarcodeScanner` instance. - -### See Also - -* [setUIElement](#setUIElement) - -## setUIElement - -Specifies an HTML element for the `BarcodeScanner` instance to use as its UI. The structure inside the element determines the appearance of the UI. See more on [how to customize the UI](../user-guide/?ver=latest#customize-the-ui-optional). - -```typescript -setUIElement(elementOrURL: HTMLElement | string): Promise -``` - -**Parameters** - -`elementOrURL` : specifies the element or the element url. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```html - - -
    - -``` - -```html - - -``` - -### See Also - -* [getUIElement](#getUIElement) - -## defaultUIElementURL - -Returns or sets the URL of the *.html* file that defines the default UI Element. The URL can only be set before the API [createInstance](#createinstance) is called. - -```typescript -static defaultUIElementURL: string -``` - -**Code Snippet** - -```js -Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.21/dist/dbr.ui.html"; -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -await scanner.show(); -``` - -## barcodeFillStyle - -Specifies the color used inside the shape which highlights a found barcode. - -```typescript -barcodeFillStyle: string -``` - -**Default value** - -`"rgba(254, 180, 32, 0.3)"` - -**See also** - -* [barcodeStrokeStyle](#barcodestrokestyle) -* [barcodeLineWidth](#barcodelinewidth) -* [barcodeFillStyleBeforeVerification](#barcodeFillStyleBeforeVerification) -* [barcodeStrokeStyleBeforeVerification](#barcodeStrokeStyleBeforeVerification) -* [barcodeLineWidthBeforeVerification](#barcodeLineWidthBeforeVerification) - -## barcodeStrokeStyle - -Specifies the color used to paint the outline of the shape which highlights a found barcode. - -```typescript -barcodeStrokeStyle: string -``` - -**Default value** - -`"rgba(254, 180, 32, 0.9)"` - -**See also** - -* [barcodeFillStyle](#barcodefillstyle) -* [barcodeLineWidth](#barcodelinewidth) -* [barcodeFillStyleBeforeVerification](#barcodeFillStyleBeforeVerification) -* [barcodeStrokeStyleBeforeVerification](#barcodeStrokeStyleBeforeVerification) -* [barcodeLineWidthBeforeVerification](#barcodeLineWidthBeforeVerification) - -## barcodeLineWidth - -Specifies the line width of the outline of the shape which highlights a found barcode. - -```typescript -barcodeLineWidth: number -``` - -**Default value** - -`1` - -**See also** - -* [barcodeStrokeStyle](#barcodestrokestyle) -* [barcodeFillStyle](#barcodefillstyle) -* [barcodeFillStyleBeforeVerification](#barcodeFillStyleBeforeVerification) -* [barcodeStrokeStyleBeforeVerification](#barcodeStrokeStyleBeforeVerification) -* [barcodeLineWidthBeforeVerification](#barcodeLineWidthBeforeVerification) - -## barcodeFillStyleBeforeVerification - -Specifies the color used inside the shape which highlights a found linear barcode which has not been verified. - -```typescript -barcodeFillStyleBeforeVerification: string -``` - -**Default value** - -`"rgba(248, 252, 0, 0.2)"` - -**See also** - -* [barcodeStrokeStyleBeforeVerification](#barcodeStrokeStyleBeforeVerification) -* [barcodeLineWidthBeforeVerification](#barcodeLineWidthBeforeVerification) -* [barcodeStrokeStyle](#barcodestrokestyle) -* [barcodeFillStyle](#barcodefillstyle) -* [barcodeLineWidth](#barcodelinewidth) - -## barcodeStrokeStyleBeforeVerification - -Specifies the color used to paint the outline of the shape which highlights a found linear barcode which has not been verified. - -```typescript -barcodeStrokeStyleBeforeVerification: string -``` - -**Default value** - -`"transparent"` - -**See also** - -* [barcodeFillStyleBeforeVerification](#barcodeFillStyleBeforeVerification) -* [barcodeLineWidthBeforeVerification](#barcodeLineWidthBeforeVerification) -* [barcodeStrokeStyle](#barcodestrokestyle) -* [barcodeFillStyle](#barcodefillstyle) -* [barcodeLineWidth](#barcodelinewidth) - -## barcodeLineWidthBeforeVerification - -Specifies the line width of the outline of the shape which highlights a found linear barcode which has not been verified. - -```typescript -barcodeLineWidthBeforeVerification: number -``` - -**Default value** - -`2` - -**See also** - -* [barcodeFillStyleBeforeVerification](#barcodeFillStyleBeforeVerification) -* [barcodeStrokeStyleBeforeVerification](#barcodeStrokeStyleBeforeVerification) -* [barcodeStrokeStyle](#barcodestrokestyle) -* [barcodeFillStyle](#barcodefillstyle) -* [barcodeLineWidth](#barcodelinewidth) - -## regionMaskFillStyle - -Specifies the color used in the square-loop shape between the actual scanning area and the boundary of the video input. This shape only appears when the barcode scanning is limited to a specified region. - -```typescript -regionMaskFillStyle: string -``` - -**Default value** - -`"rgba(0, 0, 0, 0.5)"` - -**See also** - -* [regionMaskStrokeStyle](#regionMaskStrokeStyle) -* [regionMaskLineWidth](#regionMaskLineWidth) -* [Read a specific area/region](../user-guide/advanced-usage.html#read-a-specific-arearegion) - -## regionMaskStrokeStyle - -Specifies the color used to paint the outline of the scanning region. This outline only appears when the barcode scanning is limited to a specified region. - -```typescript -regionMaskStrokeStyle: string -``` - -**Default value** - -`"rgb(254, 142, 20)"` - -**See also** - -* [regionMaskFillStyle](#regionMaskFillStyle) -* [regionMaskLineWidth](#regionMaskLineWidth) -* [Read a specific area/region](../user-guide/advanced-usage.html#read-a-specific-arearegion) - -## regionMaskLineWidth - -Specifies the width of the outline of the scanning region. This outline only appears when the barcode scanning is limited to a specified region. - -```typescript -regionMaskLineWidth: number -``` - -**Default value** - -`2` - -**See also** - -* [regionMaskStrokeStyle](#regionMaskStrokeStyle) -* [regionMaskFillStyle](#regionMaskFillStyle) -* [Read a specific area/region](../user-guide/advanced-usage.html#read-a-specific-arearegion) - -## setVideoFit - -Sets the `object-fit` CSS property of the video element. - -```typescript -setVideoFit(objectFit: string): void; -``` - -**Parameters** - -`objectFit` : specify the new fit type. At present, only "cover" and "contain" are allowed. Check out more on [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit). - -**Return value** - -None. - -**Code Snippet** - -```js -scanner.setVideoFit("cover"); -``` - -**See also** - -* [getVideoFit](#getVideoFit) - -## getVideoFit - -Returns the value of the object-fit CSS property of the video element. - -```typescript -getVideoFit(): string; -``` - -**Parameters** - -None. - -**Return value** - -The value of the object-fit CSS property. - -**Default value** - -`"contain"` - -**Code Snippet** - -```js -let videoFit = scanner.getVideoFit(); -``` - -## ifShowScanRegionMask - -Whether to show the scan region mask. - -```typescript -ifShowScanRegionMask: boolean; -``` - -**Default value** - -`true` - -**Code Snippet** - -```js -scanner.ifShowScanRegionMask = false; -``` - -## showTip - -Shows a Tip message. - -```typescript -showTip(x: number, y: number, width: number, initialMessage?: string, duration?: number, autoShowSuggestedTip?: boolean) => void; -``` - -**Parameters** - -`x` , `y` : pecifies where to put the Tip message. -`width` : specifies the width of the Tip message, wrapping if the message is too long. - -`initialMessage` : optional. The initial message. - -`duration` : optional. The time during which a Tip message is displayed. The duration is reset each time the message is updated. Default value is `3000`. - -`autoShowSuggestedTip` : optional. Whether or not the Tip box is updated automatically when a tip is suggested. A tip is usually suggested by another SDK such as Dynamsoft Barcode Reader. Default value is `true`. - -**Return value** - -None. - -**Code Snippet** - -```javascript -scanner.showTip(500, 200, 500, "The camera is too far away, please move closer!", 3000, true); -``` - -**See also** - -* [hideTip](#hideTip) - -## hideTip - -Hides the Tip message. - -```typescript -hideTip(): void; -``` - -**Return value** - -None. - -**Code Snippet** - -```javascript -scanner.hideTip(); -``` - - -**See also** - -* [hideTip](#hideTip) - -## updateTipMessage - -Changes the Tip message. - -```typescript -updateTipMessage:(message: string) => void; -``` - -**Parameters** - -`message` : specifies a new message as the Tip. - -**Return value** - -None. - -**Code Snippet** - -```javascript -scanner.updateTipMessage("This is a new message!"); -``` - -## onTipSuggested - -An event that gets triggered whenever a Tip is suggested. - -```typescript -onTipSuggested: (occasion: string, message: string) => any; -``` - -**Arguments** - -`occasion` : specifies the occasion for the Tip. - -`message` : the Tip message for the occasion. - -**Code Snippet** - -```javascript -scanner.onTipSuggested = (occasion, message) { - console.log(message); -} -``` - -### See Also - -* [showTip](#showTip) - -## convertToPageCoordinates - -Converts coordinates of a barcode location to the coordinates relative to the top left point of the entire document. - -```typescript -convertToPageCoordinates: (point: Point) => Point; -``` - -**Parameters** - -`point` : the coordinates to convert. - -**Return value** - -The converted coordinates. - -**Code Snippet** - -```javascript -let newCoordinates = scanner.convertToPageCoordinates({x: 300, y: 600}); -``` - -> NOTE -> -> Call this method only after `scanner` is open. - -**See also** - -* [convertToClientCoordinates](#convertToClientCoordinates) - -## convertToClientCoordinates - -Converts coordinates of a barcode location to the coordinates within the application's viewport at which the event occurred (as opposed to the coordinate within the page). - -```typescript -convertToClientCoordinates: (point: Point) => Point; -``` - -**Parameters** - -`point` : the coordinates to convert. - -**Return value** - -The converted coordinates. - -**Code Snippet** - -```javascript -let newCoordinates = scanner.convertToClientCoordinates({x: 300, y: 600}); -``` - -> NOTE -> -> Call this method only after `scanner` is open. - -## ifSkipCameraInspection - -Returns or sets whether to skip camera inspection at initialization to save time. Note that if a previously used camera is already available in the [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), the inspection is skipped automatically. Read more on [ifSaveLastUsedCamera](#ifsavelastusedcamera). - -```typescript -ifSkipCameraInspection: boolean; -``` - -**Default value** - -`false` - -## ifSaveLastUsedCamera - -Returns or sets whether to save the last used camera and resolution. This feature makes use of the [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) of the browser. - -> NOTE -> -> This feature only works on mainstream browsers like Chrome, Firefox and Safari. Other browsers may change the device IDs dynamically thus making it impossible to track the camera. - -```typescript -ifSaveLastUsedCamera: boolean; -``` - -**Default value** - -`false` - -## getAllCameras - -Returns infomation of all available cameras on the device. - -```typescript -getAllCameras(): Promise -``` - -**Return value** - -A promise resolving to an array of `VideoDeviceInfo` objects. - -**Code Snippet** - -```js -let cameras = await scanner.getAllCameras(); -if (cameras.length) { - await scanner.setCurrentCamera(cameras[0]); -} -``` - -**See also** - -* [VideoDeviceInfo](./interface/VideoDeviceInfo.md) -* [getCurrentCamera](#getCurrentCamera) - -## getCurrentCamera - -Returns information about the current camera. - -```typescript -getCurrentCamera(): Promise -``` - -**Return value** - -A promise resolving to a `VideoDeviceInfo` object. - -**Code Snippet** - -```js -let camera = await scanner.getCurrentCamera(); -``` - -**See also** - -* [VideoDeviceInfo](./interface/VideoDeviceInfo.md) -* [getAllCameras](#getAllCameras) -* [setCurrentCamera](#setCurrentCamera) - -## setCurrentCamera - -Chooses a camera as the video source. - -> If called before `open()` or `show()`, the selected camera will be used. Otherwise, the system will decide which one to use. - -```typescript -setCurrentCamera(deviceId: string): Promise -``` - -**Parameters** - -`deviceID` : specifies the camera. - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -let cameras = await scanner.getAllCameras(); -if (cameras.length) { - await scanner.setCurrentCamera(cameras[0]); -} -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) -* [getCurrentCamera](#getCurrentCamera) - -## getResolution - -Returns the resolution of the current video input. - -```typescript -getResolution(): number[] -``` - -**Return value** - -An array of two numbers representing the resolution. - -**Code Snippet** - -```js -let rsl = scanner.getResolution(); -console.log(rsl[0] + " x " + rsl[1]); -``` - -**See also** - -* [setResolution](#setResolution) - -## setResolution - -Sets the resolution of the current video input. If the specified resolution is not exactly supported, the closest resolution will be applied. - -> If called before `open()` or `show()`, the camera will use the set resolution when it opens. Otherwise, the default resolution is used, which is 1280 x 720 on mobile devices or 1920 x 1080 on desktop. - -```typescript -setResolution(width: number, height: number): Promise -``` - -**Parameters** - -`width` : specifies the horizontal resolution. - -`height` : specifies the vertical resolution. - -> To speed up the barcode scanning, the image frames will be scaled down when it exceeds a size limit either horizontally or vertically. -> -> * The limit is 2048 pixels on mobile devices and 4096 on other devices. -> * If the template "dense" or "distance" is used, the limit is 4096 regardless of which device is used. -> -> Therefore, setting a very high resolution will not help with the scanning. - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -await scanner.setResolution(width, height); -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) -* [getResolution](#getResolution) - -## getVideoSettings - -Returns the current video settings. - -```typescript -getVideoSettings(): MediaStreamConstraints -``` - -**Return value** - -A `MediaStreamConstraints` object. - -**See also** - -* [MediaStreamConstraints](https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints) - -## updateVideoSettings - -Changes the video input. - -```typescript -updateVideoSettings(constraints: MediaStreamConstraints): Promise -``` - -**Parameters** - -`constraints` : specifies the new video settings. - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -await scanner.updateVideoSettings({ - video: { - width: { - ideal: 1280 - }, - height: { - ideal: 720 - }, - facingMode: { - ideal: 'environment' - } - } -}); -``` - -**See also** - -* [MediaStreamConstraints](https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints) -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - -## onWarning - -A callback which is triggered when the resolution is not ideal (< 720P). - -In this case, the warning is: - -```js -{ - id: 3, - message: "Camera resolution too low, please use a higher resolution (720P or better)." -} -``` - -**Code Snippet** - -```js -const scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -scanner.onWarning = warning => console.log(warning.message); -``` - -**See Also** - -[Warning](interface/warning.md) - -## testCameraAccess - -Test whether there is an available camera. It is also a trick to speed up the opening of the camera. - -```typescript -static testCameraAccess(): Promise; -``` - -**Parameters** - -None. - -**Return value** - -A promise resolving to a `CameraTestResponse` object. - -```typescript -interface CameraTestResponse { - readonly ok: boolean; - readonly message: string; -}; -``` - -The possible responses are - -```json -{ - ok: false, - message: "Insecure context." -} -``` - -```json -{ - ok: false, - message: "No camera detected." -} -``` - -```json -{ - ok: false, - message: "No permission to access camera." -} -``` - -```json -{ - ok: false, - message: "Some problem occurred which prevented the device from being used." -} -``` - -```json -{ - ok: false, - message: "A hardware error occurred." -} -``` - -```json -{ - ok: false, - message: "User media support is disabled." -} -``` - -```json -{ - ok: true, - message: " Successfully accessed the camera." -} -``` - -**Code Snippet** - -```javascript -// The first request to connect to the camera. -// Here we do not use `await`, to let it run concurrently with `createInstance()`. -Dynamsoft.DBR.BarcodeScanner.testCameraAccess() - .then(testResponse=>{ - console.log(testResponse.message); - }); - -// The first `createInstance()` will spend a few seconds to get the necessary resources. -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -scanner.onUniqueRead = txt => console.log(txt); -// Now the `show()` has been sped up. -// The second request to connect to camera will be much faster than the first one. -await scanner.show(); -``` - -## play - -Play the video if it is already open but paused or stopped. If the video is already playing, it will start again. - -```typescript -play(): Promise -``` - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -scanner.pause(); -//..doing other things without the video -await scanner.play(); -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) -* [stop](#stop) -* [pause](#pause) - -## onPlayed - -This event is triggered when the video stream starts playing. - -```typescript -event onPlayed: (info: ScannerPlayCallbackInfo) => void -``` - -**Arguments** - -`info`: a `ScannerPlayCallbackInfo` object which describes the information of the camera. - -**Code Snippet** - -```js -scanner.onPlayed = rsl => { - console.log(rsl.width + 'x' + rsl.height) -}; -await scanner.show(); // or open(), play(), setCurrentCamera(), etc. -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - -## pause - -Pauses the video without releasing the camera. - -```typescript -pause(): void -``` - -## stop - -Stops the video and releases the camera. - -```typescript -stop(): void -``` - -**See also** - -* [play](#play) - -## videoSrc - -Sets or returns the source of the video. - -> You can use this property to specify an existing video as the source to play which will be processed the same way as the video feed from a live camera. - -```typescript -videoSrc: string | MediaStream | MediaSource | Blob; -``` - -**Default value** - -`null` - -## getCapabilities - -Inspects and returns the capabilities of the current camera. - -> At present, this method only works in Edge, Safari, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -getCapabilities(): MediaTrackCapabilities -``` - -**Return value** - -A `MediaTrackCapabilities` object which specifies the values or range of values for each constrainable property of the current camera. - -**Code Snippet** - -```js -scanner.getCapabilities(); -/* Result sample -{ - aspectRatio: {max: 1280, min: 0.001388888888888889}, - brightness: {max: 64, min: -64, step: 1}, - colorTemperature: {max: 6500, min: 2800, step: 10}, - contrast: {max: 95, min: 0, step: 1}, - deviceId: "3a505c29a3312600ea0afd79f8e2b4ba4fba3e539257801ff1de8718c27f2bed", - exposureMode: ["continuous", "manual"], - exposureTime: {max: 10000, min: 39.0625, step: 39.0625}, - facingMode: [], - focusDistance: {max: 1024, min: 0, step: 10}, - focusMode: ["continuous", "manual"], - frameRate: {max: 30, min: 0}, - groupId: "35a82dcb7d5b0ef5bda550718d194f04a812c976175e926ccb81fb9d235d010f", - height: {max: 720, min: 1}, - resizeMode: ["none", "crop-and-scale"], - saturation: {max: 100, min: 0, step: 1}, - sharpness: {max: 7, min: 1, step: 1}, - whiteBalanceMode: ["continuous", "manual"], - width: {max: 1280, min: 1}, - zoom: {max: 800, min: 100, step: 100}, -} -*/ -``` - -**See also** - -* [MediaTrackCapabilities](https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/getCapabilities) - -## getCameraSettings - -Returns the current values for each constrainable property of the current camera. - -Right now, this method only works in Chrome and should be called when the scanner is open. - -```typescript -getCameraSettings(): any -``` - -**Return value** - -The current values for each constrainable property of the current camera in the form of a [MediaTrackSettings](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSettings) object. - -**Code Snippet** - -```js -scanner.getCameraSettings(); -/* Result sample -{ - aspectRatio: 1.3333333333333333, - brightness: 0, - colorTemperature: 4600, - contrast: 0, - deviceId: "3a505c29a3312600ea0afd79f8e2b4ba4fba3e539257801ff1de8718c27f2bed", - exposureMode: "continuous", - exposureTime: 156.25, - focusDistance: 120, - focusMode: "continuous", - frameRate: 30, - groupId: "35a82dcb7d5b0ef5bda550718d194f04a812c976175e926ccb81fb9d235d010f", - height: 480, - resizeMode: "none", - saturation: 73, - sharpness: 2, - whiteBalanceMode: "continuous", - width: 640, - zoom: 100, -} -*/ -``` - -**See also** - -* [getCapabilities](#getcapabilities) - -## setFrameRate - -Adjusts the frame rate. - -> At present, this method only works in Edge, Safari, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -setFrameRate(rate: number): Promise -``` - -**Parameters** - -`rate` : specifies the new frame rate. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setFrameRate(10); -``` - -**See also** - -* [getFrameRate](#getFrameRate) -* [getCapabilities](#getcapabilities) - -## getFrameRate - -Returns the real-time frame rate. - -```typescript -getFrameRate(): number; -``` - -**Parameters** - -None. - -**Return value** - -The calculated real-time frame rate. - -**Code Snippet** - -```js -await scanner.getFrameRate(); -``` - - -## enableTapToFocus - -Enables manual camera focus when clicking/tapping on the video. - -> At present, this method only works in Edge, Chrome and other Chromium-based browsers (Firefox is not supported). - -```typescript -enableTapToFocus() : void; -``` - -**Parameters** - -None. - -**Return value** - -None. - -**Code Snippet** - -```javascript -scanner.enableTapToFocus(); -``` - -**See also** - -* [disableTapToFocus](#disableTapToFocus) -* [isTapToFocusEnabled](#isTapToFocusEnabled) - -## disableTapToFocus - -Disables manual camera focus when clicking/tapping on the video. - -```typescript -disableTapToFocus() : void; -``` - -**Parameters** - -None. - -**Return value** - -None. - -**Code Snippet** - -```javascript -scanner.disableTapToFocus(); -``` - -**See also** - -* [enableTapToFocus](#enableTapToFocus) -* [isTapToFocusEnabled](#isTapToFocusEnabled) - -## isTapToFocusEnabled - -Returns whether clicking/tapping on the video invokes the camera to focus. - -```typescript -isTapToFocusEnabled() : boolean; -``` - -**Parameters** - -None. - -**Return value** - -`true` means clicking/tapping on the video will invoke the camera to focus. `false` means clicking/tapping on the video does nothing. - -**Code Snippet** - -```javascript -if (scanner.isTapToFocusEnabled()) { - console.log("You can tap or click on the video to focus!"); -} -``` - -**See also** - -* [enableTapToFocus](#enableTapToFocus) -* [disableTapToFocus](#disableTapToFocus) - -## getColorTemperature - -Returns the color temperature of the selected camera. - -> This method should be called when the camera is turned on. Note that it only works with Chromium-based browsers such as Edge and Chrome on Windows or Android. Other browsers such as Firefox or Safari are not supported. Note that all browsers on iOS (including Chrome) use WebKit as the rendering engine and are not supported. - -```typescript -getColorTemperature(): number; -``` - -**Return value** - -Color temperature of the selected camera. - -**See also** - -* [setColorTemperature](#setColorTemperature) - -## setColorTemperature - -Adjusts the color temperature. - -> At present, this method only works in Edge, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -setColorTemperature(colorTemperatur: number): Promise -``` - -**Parameters** - -`colorTemperatur` : specifies the new color temperature. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setColorTemperature(5000); -``` - -**See also** - -* [getColorTemperature](#getColorTemperature) -* [getCapabilities](#getcapabilities) - - -## getExposureCompensation - -Returns the exposure compensation index of the selected camera. - -> This method should be called when the camera is turned on. Note that it only works with Chromium-based browsers such as Edge and Chrome on Windows or Android. Other browsers such as Firefox or Safari are not supported. Note that all browsers on iOS (including Chrome) use WebKit as the rendering engine and are not supported. - -```typescript -getExposureCompensation(): number; -``` - -**Return value** - -Exposure compensation index of the selected camera. - -**See also** - -* [setExposureCompensation](#setExposureCompensation) - -## setExposureCompensation - -Sets the exposure compensation index. - -> At present, this method only works in Edge, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -setExposureCompensation(exposureCompensation: number): Promise -``` - -**Parameters** - -`exposureCompensation` : specifies the new exposure compensation index. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setExposureCompensation(-0.7); -``` - -**See also** - -* [getExposureCompensation](#getExposureCompensation) -* [getCapabilities](#getcapabilities) - -## getFocusSettings - -Returns the focus settings. - -```typescript -type FocusArea = { - centerPoint: { x: string, y: string }; - width: string; - height: string; -}; -type FocusSettings = { - mode: string; - distance: number; - area: FocusArea; -}; -getFocusSettings(): FocusSettings; -``` - -**Parameters** - -None. - -**Return value** - -The current focus settings. - -**Code Snippet** - -```javascript -scanner.getFocusSettings(); -``` - -**See also** - -* [setFocus](#setFocus) -* [getCapabilities](#getcapabilities) - -## setFocus - -Sets the focus mode and focus distance of the camera. - -> At present, this method only works in Edge, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -setFocus(mode: string, distance?: number): Promise; -``` - -**Parameters** - -`mode` : specifies the focus mode, the available values include `continuous` and `manual` . - -`distance` : specifies the focus distance, only required when the `mode` is set to `manual` . Use [getCapabilities](#getcapabilities) to get the allowed value range. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setFocus("manual", 5); -``` - -**See also** - -* [getFocusSettings](#getFocusSettings) -* [getCapabilities](#getcapabilities) - -## getFocus - -Gets the focus mode and the focus distance. - -```typescript -getFocus(): {mode: string, distance?: number}; -``` - -**Parameters** - -None. - -**Return value** - -An object describing the current camera's focus properties "mode" and "distance". If `mode` is `continuous`, `distance` has no meaning and is omitted from the object. - -**Code Snippet** - -```js -await scanner.getFocus(); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - -## getZoomSettings - -Returns the zoom settings. - -```typescript -getZoomSettings(): { factor: number };; -``` - -**Return value** - -An object that describes the zoom settings. As of version 3.2, it contains only the zoom factor. - -**Code Snippet** - -```javascript -console.log(scanner.getZoomSettings().factor); -``` - -**See also** - -* [setZoom](#setZoom) - -## setZoom - -Sets current zoom value. - -> At present, this method only works in Edge, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -setZoom(zoomValue: number): Promise -``` - -**Parameters** - -`zoomValue` : specifies the new zoom value. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setZoom(2); -``` - -**See also** - -* [getZoomSettings](#getZoomSettings) -* [resetZoom](#resetZoom) -* [getCapabilities](#getcapabilities) - -## resetZoom - -Resets the zoom level of the video. - -```typescript -resetZoom(): Promise; -``` - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```javascript -await scanner.resetZoom(); -``` - -**See also** - -* [setZoom](#setZoom) - -## turnOnTorch - -Turns on the torch/flashlight if the current camera supports it. - -> This method should be called when the camera is turned on. Note that it only works with Chromium-based browsers such as Edge and Chrome on Windows or Android. Other browsers such as Firefox or Safari are not supported. Note that all browsers on iOS (including Chrome) use WebKit as the rendering engine and are not supported. - -```typescript -turnOnTorch(): Promise -``` - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.turnOnTorch(); -``` - -**See also** - -* [turnOffTorch](#turnofftorch) -* [getCapabilities](#getcapabilities) - -## turnOffTorch - -Turns off the torch/flashlight. - -> At present, this method only works in Edge, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -turnOffTorch(): Promise -``` - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.turnOffTorch(); -``` - -**See also** - -* [turnOnTorch](#turnontorch) \ No newline at end of file diff --git a/programming-old/javascript/api-reference/BarcodeScanner.md b/programming-old/javascript/api-reference/BarcodeScanner.md deleted file mode 100644 index 4d1f3296..00000000 --- a/programming-old/javascript/api-reference/BarcodeScanner.md +++ /dev/null @@ -1,1957 +0,0 @@ ---- -layout: default-layout -title: BarcodeScanner - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows the BarcodeScanner class of Dynamsoft Barcode Reader JavaScript SDK. -keywords: BarcodeScanner, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -noTitleIndex: true -breadcrumbText: BarcodeScanner -permalink: /programming/javascript/api-reference/BarcodeScanner.html ---- - -# BarcodeScanner for Video - -A barcode scanner object gets access to a camera via the [MediaDevices](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices) interface, then uses its built-in UI to show the camera input and perform continuous barcode scanning on the incoming frames. - -The default built-in UI of each barcode scanner is defined in the file "dbr.ui.html". If used directly, the UI will fit the entire page and sit on top. There are a few ways to customize it, read more on how to [Customize the UI](../user-guide/?ver=latest#customize-the-ui-optional). - -Although a barcode scanner is designed to scan barcodes from a video input, it also supports a special mode called [singleFrameMode](#singleframemode) which allows the user to select a still image or take a shot with the mobile camera for barcode scanning. - -The `BarcodeScanner` is a child class of [BarcodeReader](./BarcodeReader.md) and inherits all its methods and properties which will not be covered in this article. - -The following code snippet shows the basic usage of the `BarcodeScanner` class. - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -scanner.onUniqueRead = txt => console.log(txt); -await scanner.show(); -``` - -## API Index - -### Create and Destroy Instances - -| API Name | Description | -| ------------------------------------------- | -------------------------------------------------- | -| [createInstance()](#createinstance) | Creates a `BarcodeScanner` instance. | -| [destroyContext()](#destroycontext) | Destroys the `BarcodeScanner` instance. | -| [isContextDestroyed()](#iscontextdestroyed) | Indicates whether the instance has been destroyed. | - -### Decode Barcodes - -| API Name | Description | -| ----------------------------- | -------------------------------------------------------------------- | -| [onUniqueRead](#onuniqueread) | This event is triggered when a new, unduplicated barcode is found. | -| [onFrameRead](#onframeread) | This event is triggered after the library finishes scanning a frame. | - -### Basic Interactions - -| API Name | Description | -| ------------------- | --------------------------------------------------------- | -| [show()](#show) | Binds and shows UI, opens the camera and starts decoding. | -| [hide()](#hide) | Stops decoding, releases camera, unbinds and hides UI. | -| [open()](#open) | Binds UI, turns on the camera and starts decoding. | -| [close()](#close) | Stops decoding, releases camera and unbinds UI. | -| [isOpen()](#isopen) | Indicates whether the camera is turned on. | - -### Scan Settings - -| API Name | Description | -| ------------------------------------------- | ------------------------------------------------------- | -| [singleFrameMode](#singleframemode) | Returns or sets whether to enable the singe-frame mode. | -| [getScanSettings()](#getscansettings) | Returns the current scan settings. | -| [updateScanSettings()](#updatescansettings) | Changes scan settings with the object passed in. | - -### UI Control - -| API Name | Description | -| ----------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [video](#video) | Returns `HTMLVideoElement` element that the `BarcodeScanner` instance used. | -| [getUIElement()](#getuielement) | Returns the HTML element that is used by the `BarcodeScanner` instance. | -| [setUIElement()](#setuielement) | Specifies an HTML element for the `BarcodeScanner` instance to use as its UI. | -| [defaultUIElementURL](#defaultuielementurl) | Returns or sets the URL of the .html file that defines the default UI Element. | -| [barcodeFillStyle](#barcodefillstyle) | Specifies the color used inside the shape which highlights a found barcode. | -| [barcodeStrokeStyle](#barcodestrokestyle) | Specifies the color used to paint the outline of the shape which highlights a found barcode. | -| [barcodeLineWidth](#barcodelinewidth) | Specifies the line width of the outline of the shape which highlights a found barcode. | -| [regionMaskFillStyle](#regionmaskfillstyle) | Specifies the color used in the square-loop shape between the actual scanning area and the boundary of the video input. | -| [regionMaskStrokeStyle](#regionmaskstrokestyle) | Specifies the color used to paint the outline of the scanning region. | -| [barcodeFillStyleBeforeVerification](#barcodefillstylebeforeverification) | Specifies the color used inside the shape which highlights a found linear barcode which has not been verified. | -| [barcodeStrokeStyleBeforeVerification](#barcodestrokestylebeforeverification) | Specifies the color used to paint the outline of the shape which highlights a found linear barcode which has not been verified. | -| [barcodeLineWidthBeforeVerification](#barcodelinewidthbeforeverification) | Specifies the line width of the outline of the shape which highlights a found linear barcode which has not been verified. | -| [regionMaskLineWidth](#regionmasklinewidth) | Specifies the width of the outline of the scanning region. | -| [setVideoFit()](#setvideofit) | Sets the `object-fit` CSS property of the video element. | -| [getVideoFit()](#getvideofit) | Returns the value of the `object-fit` CSS property of the video element. | -| [ifShowScanRegionMask](#ifshowscanregionmask) | Whether to show the scan region mask. | -| [showTip()](#showtip) | Shows a Tip message. | -| [hideTip()](#hidetip) | Hides the Tip message. | -| [updateTipMessage()](#updatetipmessage) | Changes the Tip message. | -| [onTipSuggested()](#ontipsuggested) | An event that gets triggered whenever a Tip is suggested. | -| [convertToPageCoordinates()](#converttopagecoordinates) | Converts coordinates of a barcode location to the coordinates relative to the top left point of the entire document. | -| [convertToClientCoordinates()](#converttoclientcoordinates) | Converts coordinates of a barcode location to the coordinates within the application's viewport at which the event occurred (as opposed to the coordinate within the page). | - -### Camera Control - -| API Name | Description | -| ------------------------------------------------- | --------------------------------------------------------------------------------- | -| [ifSkipCameraInspection](#ifskipcamerainspection) | Returns or sets whether to skip camera inspection at initialization to save time. | -| [ifSaveLastUsedCamera](#ifsavelastusedcamera) | Returns or sets whether to save the last used camera and resolution. | -| [getAllCameras()](#getallcameras) | Returns information of all available cameras on the device. | -| [getCurrentCamera()](#getcurrentcamera) | Returns information about the current camera. | -| [setCurrentCamera()](#setcurrentcamera) | Chooses a camera as the video source. | -| [getResolution()](#getresolution) | Returns the resolution of the current video input. | -| [setResolution()](#setresolution) | Sets the resolution of the current video input. | -| [getVideoSettings()](#getvideosettings) | Returns the current video settings. | -| [updateVideoSettings()](#updatevideosettings) | Changes the video input. | -| [onWarning](#onwarning) | A callback which is triggered when the resolution is not ideal (< 720P). | -| [testCameraAccess()](#testcameraaccess) | Test whether there is an available camera. | - -### Video Decoding Process Control - -| API Name | Description | -| --------------------------- | ------------------------------------------------------------- | -| [play()](#play) | Play the video if it is already open but paused or stopped. | -| [onPlayed](#onplayed) | This event is triggered when the video stream starts playing. | -| [pauseScan()](#pausescan) | Pauses the decoding process. | -| [resumeScan()](#resumescan) | Resumes the decoding process. | -| [pause()](#pause) | Pauses the video without releasing the camera. | -| [stop()](#stop) | Stops the video and releases the camera. | -| [videoSrc](#videosrc) | Sets or returns the source of the video. | - -### Advanced Camera Control - -| API Name | Description | -| ----------------------------------------------------- | --------------------------------------------------------------------------------- | -| [getCapabilities()](#getcapabilities) | Inspects and returns the capabilities of the current camera. | -| [getCameraSettings()](#getcamerasettings) | Returns the current values for each constrainable property of the current camera. | -| [getFrameRate()](#getframerate) | Returns the real-time frame rate. | -| [setFrameRate()](#setframerate) | Adjusts the frame rate. | -| [turnOnTorch()](#turnontorch) | Turns on the torch/flashlight. | -| [turnOffTorch()](#turnofftorch) | Turns off the torch/flashlight. | -| [getZoomSettings()](#getzoomsettings) | Returns the zoom settings. | -| [setZoom()](#setzoom) | Zooms the video stream. | -| [resetZoom()](#resetzoom) | Resets the zoom level of the video. | -| [getFocusSettings()](#getfocussettings) | Returns the focus settings. | -| [setFocus()](#setfocus) | Sets how the camera focuses. | -| [enableTapToFocus()](#enabletaptofocus) | Enables manual camera focus when clicking/tapping on the video. | -| [disableTapToFocus()](#disabletaptofocus) | Disables manual camera focus when clicking/tapping on the video. | -| [isTapToFocusEnabled()](#istaptofocusenabled) | Returns whether clicking/tapping on the video invokes the camera to focus. | -| [getColorTemperature()](#getcolortemperature) | Returns the color temperature of the selected camera. | -| [setColorTemperature()](#setcolortemperature) | Adjusts the color temperature of the selected camera. | -| [getExposureCompensation()](#getexposurecompensation) | Returns the exposure compensation index of the selected camera. | -| [setExposureCompensation()](#setexposurecompensation) | Sets the exposure compensation index of the selected camera. | - -### Inherited from the `BarcodeReader` Class - -#### Change Settings - -| API Name | Description | -| ------------------------------------------------------------------- | ------------------------------------------------------------------ | -| [getRuntimeSettings()](./BarcodeReader.md#getruntimesettings) | Returns the current runtime settings. | -| [updateRuntimeSettings()](./BarcodeReader.md#updateruntimesettings) | Updates runtime settings with a given struct or a preset template. | -| [resetRuntimeSettings()](./BarcodeReader.md#resetruntimesettings) | Resets all parameters to default values. | -| [getModeArgument()](./BarcodeReader.md#getmodeargument) | Returns the argument value for the specified mode parameter. | -| [setModeArgument()](./BarcodeReader.md#setmodeargument) | Sets the argument value for the specified mode parameter. | - -#### Auxiliary - -| API Name | Description | -| ------------------------------------------------------------------------------- | ----------------------------------------------------------------- | -| [ifSaveOriginalImageInACanvas](./BarcodeReader.md#ifsaveoriginalimageinacanvas) | Whether to save the original image into a <canvas> element. | -| [getOriginalImageInACanvas()](./BarcodeReader.md#getoriginalimageinacanvas) | Returns an `HTMLCanvasElement` that holds the original image. | - -## createInstance - -Creates a `BarcodeScanner` instance. - -```typescript -static createInstance(): Promise -``` - -**Return value** - -A promise resolving to the created `BarcodeScanner` object. - -**Code Snippet** - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -``` - -**See also** - -* [destroyContext](#destroycontext) - -## destroyContext - -Destroys the `BarcodeScanner` instance. If your page needs to create a new instance from time to time, don't forget to destroy unused old instances. - -```typescript -destroyContext(): void -``` - -**Code Snippet** - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -// ... decode ... -scanner.destroyContext(); -``` - -**See also** - -* [isContextDestroyed](#iscontextdestroyed) - -## isContextDestroyed - -Returns whether the instance has been destroyed. - -```typescript -isContextDestroyed(): boolean -``` - -**See also** - -* [destroyContext](#destroycontext) - -## onUniqueRead - -Specifies an event handler which fires when a new, unduplicated barcode is found. - -The library keeps each barcode result (type and value) in the buffer for a period of time (can be set with [duplicateForgetTime](./interface/ScanSettings.md)) during which if a new result is an exact match, it's seen as a duplicate and will again be kept for that period of time while the old result is removed and so on. - -```typescript -onUniqueRead: (txt: string, result: TextResult) => void -``` - -**Arguments** - -`txt` : a string that holds the barcode text. - -`result` : a `TextResult` object that contains more detailed info. - -**Code Snippet** - -```js -scanner.onUniqueRead = (txt, result) => { - alert(txt); - console.log(result); -} -``` - -**See also** - -* [TextResult](./interface/TextResult.md) -* [onFrameRead](#onframeread) - -## onFrameRead - -Specifies an event handler which fires after the library finishes scanning a frame. - -```typescript -onFrameRead: (results: TextResult[]) => void -``` - -**Arguments** - -`results` : an array of `TextResult` object that contains the barcode results in this frame. - -**Code Snippet** - -```js -scanner.onFrameRead = results => { - for (let result of results) { - console.log(result.barcodeText); - } -}; -``` - -**See also** - -* [TextResult](./interface/TextResult.md) -* [onUniqueRead](#onuniqueread) - -## show - -Binds and shows UI, opens the camera and starts decoding. - -> If the UI doesn't exist in the DOM tree, it is appended in the DOM first and then shown. If the UI already exists in the DOM tree but is hidden, it'll be shown. - -```typescript -show(): Promise -``` - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -scanner.onUniqueRead = (txt, result) => { - alert(txt); - console.log(result); -}; -await scanner.show(); -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) -* [close](#close) -* [hide](#hide) - -## hide - -Stops decoding, releases camera, unbinds and hides UI. - -```typescript -hide(): void -``` - -**Code Snippet** - -```js -await scanner.show(); -//...scan barcodes -scanner.hide(); -``` - -**See also** - -* [close](#close) - -## open - -Binds UI, turns on the camera and starts decoding. - -> This method does not change the original state of the UI: if it doesn't exist in the DOM tree, nothing shows up on the page; if it exists in the DOM tree, it may or may not show up depending on its original state. - -```typescript -open(): Promise -``` - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -await scanner.open(); -//...scan barcodes -await scanner.close(); -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) -* [close](#close) -* [hide](#hide) - -## close - -Stops decoding, releases camera and unbinds UI. - -```typescript -close(): void -``` - -**Code Snippet** - -```js -await scanner.open(); -//...scan barcodes -scanner.close(); -``` - -**See also** - -* [hide](#hide) - -## isOpen - -Indicates whether the camera is turned on. - -```typescript -isOpen(): boolean -``` - -**Return value** - -A boolean indicates whether the camera is turned on. - -## pauseScan - -Pause continuous scanning but keep the video stream. - -```typescript -pauseScan(options?: object): void; -``` - -**Parameters** - -`options`: Options to configure how the pause works. At present, it only contains one property `keepResultsHighlighted` which, when set to **true**, will keep the barcodes found on the frame (at the time of the pause) highlighted. - -**See also** - -* [resumeScan](#resumescan) - -## resumeScan - -Resumes the decoding process. - -```typescript -resumeScan(): void -``` - -**See also** - -* [pauseScan](#pausescan) - -## singleFrameMode - -Returns or sets the status of single frame mode. If enabled, the video input will not be played and the user can choose to take a picture with the system camera (mobile only) or select an existing image from the photo library for barcode reading. - -Because the system camera of a mobile device can provide pictures with better quality, the API is useful when facing complex scenarios such as reading the dense PDF417 code on a driver license. - -> It's important to note that it will behave differently in different environments: - > - false: Stream the camera in the browser. - > - true \| "image": Prompt the user to select a local image. - > - "camera": - > - On desktop: Prompt the user to select a local image. - > - On mobile devices: Invoke the system camera. - -The single-frame mode can only be enabled or disabled before the video input starts playing (before `scanner.open()` is called). - -```typescript -singleFrameMode: boolean | "image" | "camera"; -``` - -**Default value** - -In general, the default value is `false`. But if the browser does not support the `MediaDevices`/`getUserMedia`, it will be set as `true` automatically when `createInstance()` is called. - -**Code Snippet** - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -scanner.singleFrameMode = true; -await scanner.show(); -``` - -## getScanSettings - -Returns the current scan settings. - -```typescript -getScanSettings(): Promise -``` - -**Return value** - -A promise resolving to a `ScanSettings` . - -**Code Snippet** - -```js -let scanSettings = await scanner.getScanSettings(); -scanSettings.intervalTime = 50; -scanSettings.duplicateForgetTime = 1000; -await scanner.updateScanSettings(scanSettings); -``` - -**See also** - -* [ScanSettings](./interface/ScanSettings.md) -* [updateScanSettings](#updatescansettings) - -## updateScanSettings - -Changes scan settings with the object passed in. - -```typescript -updateScanSettings(settings: ScanSettings): Promise -``` - -**Parameters** - -`settings` : specifies the new scan settings. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -let scanSettings = await scanner.getScanSettings(); -scanSettings.intervalTime = 50; -scanSettings.duplicateForgetTime = 1000; -await scanner.updateScanSettings(scanSettings); -``` - -**See also** - -* [ScanSettings](./interface/ScanSettings.md) -* [getScanSettings](#getscansettings) - -## video - -Returns `HTMLVideoElement` element that the `BarcodeScanner` instance used. - -```typescript -readonly video: HTMLElement -``` - -## getUIElement - -Returns the HTML element that is used by the `BarcodeScanner` instance. - -```typescript -getUIElement(): HTMLElement -``` - -**Return value** - -The HTML element that is used by the `BarcodeScanner` instance. - -**See Also** - -* [setUIElement](#setuielement) - -## setUIElement - -Specifies an HTML element for the `BarcodeScanner` instance to use as its UI. The structure inside the element determines the appearance of the UI. See more on [how to customize the UI](../user-guide/?ver=latest#customize-the-ui-optional). - -```typescript -setUIElement(elementOrURL: HTMLElement | string): Promise -``` - -**Parameters** - -`elementOrURL` : specifies the element or the element url. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```html - - -
    - -``` - -```html - - -``` - -**See Also** - -* [getUIElement](#getuielement) - -## defaultUIElementURL - -Returns or sets the URL of the *.html* file that defines the default UI Element. The URL can only be set before the API [createInstance](#createinstance) is called. - -```typescript -static defaultUIElementURL: string -``` - -**Code Snippet** - -```js -Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.42/dist/dbr.ui.html"; -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -await scanner.show(); -``` - -## barcodeFillStyle - -Specifies the color used inside the shape which highlights a found barcode. - -```typescript -barcodeFillStyle: string -``` - -**Default value** - -`"rgba(254, 180, 32, 0.3)"` - -**See also** - -* [barcodeStrokeStyle](#barcodestrokestyle) -* [barcodeLineWidth](#barcodelinewidth) -* [barcodeFillStyleBeforeVerification](#barcodefillstylebeforeverification) -* [barcodeStrokeStyleBeforeVerification](#barcodestrokestylebeforeverification) -* [barcodeLineWidthBeforeVerification](#barcodelinewidthbeforeverification) - -## barcodeStrokeStyle - -Specifies the color used to paint the outline of the shape which highlights a found barcode. - -```typescript -barcodeStrokeStyle: string -``` - -**Default value** - -`"rgba(254, 180, 32, 0.9)"` - -**See also** - -* [barcodeFillStyle](#barcodefillstyle) -* [barcodeLineWidth](#barcodelinewidth) -* [barcodeFillStyleBeforeVerification](#barcodefillstylebeforeverification) -* [barcodeStrokeStyleBeforeVerification](#barcodestrokestylebeforeverification) -* [barcodeLineWidthBeforeVerification](#barcodelinewidthbeforeverification) - -## barcodeLineWidth - -Specifies the line width of the outline of the shape which highlights a found barcode. - -```typescript -barcodeLineWidth: number -``` - -**Default value** - -`1` - -**See also** - -* [barcodeStrokeStyle](#barcodestrokestyle) -* [barcodeFillStyle](#barcodefillstyle) -* [barcodeFillStyleBeforeVerification](#barcodefillstylebeforeverification) -* [barcodeStrokeStyleBeforeVerification](#barcodestrokestylebeforeverification) -* [barcodeLineWidthBeforeVerification](#barcodelinewidthbeforeverification) - -## barcodeFillStyleBeforeVerification - -Specifies the color used inside the shape which highlights a found linear barcode which has not been verified. - -```typescript -barcodeFillStyleBeforeVerification: string -``` - -**Default value** - -`"rgba(248, 252, 0, 0.2)"` - -**See also** - -* [barcodeStrokeStyleBeforeVerification](#barcodestrokestylebeforeverification) -* [barcodeLineWidthBeforeVerification](#barcodelinewidthbeforeverification) -* [barcodeStrokeStyle](#barcodestrokestyle) -* [barcodeFillStyle](#barcodefillstyle) -* [barcodeLineWidth](#barcodelinewidth) - -## barcodeStrokeStyleBeforeVerification - -Specifies the color used to paint the outline of the shape which highlights a found linear barcode which has not been verified. - -```typescript -barcodeStrokeStyleBeforeVerification: string -``` - -**Default value** - -`"transparent"` - -**See also** - -* [barcodeStrokeStyleBeforeVerification](#barcodestrokestylebeforeverification) -* [barcodeLineWidthBeforeVerification](#barcodelinewidthbeforeverification) -* [barcodeStrokeStyle](#barcodestrokestyle) -* [barcodeFillStyle](#barcodefillstyle) -* [barcodeLineWidth](#barcodelinewidth) - -## barcodeLineWidthBeforeVerification - -Specifies the line width of the outline of the shape which highlights a found linear barcode which has not been verified. - -```typescript -barcodeLineWidthBeforeVerification: number -``` - -**Default value** - -`2` - -**See also** - -* [barcodeStrokeStyleBeforeVerification](#barcodestrokestylebeforeverification) -* [barcodeLineWidthBeforeVerification](#barcodelinewidthbeforeverification) -* [barcodeStrokeStyle](#barcodestrokestyle) -* [barcodeFillStyle](#barcodefillstyle) -* [barcodeLineWidth](#barcodelinewidth) - -## regionMaskFillStyle - -Specifies the color used in the square-loop shape between the actual scanning area and the boundary of the video input. This shape only appears when the barcode scanning is limited to a specified region. - -```typescript -regionMaskFillStyle: string -``` - -**Default value** - -`"rgba(0, 0, 0, 0.5)"` - -**See also** - -* [regionMaskStrokeStyle](#regionmaskstrokestyle) -* [regionMaskLineWidth](#regionmasklinewidth) -* [Read a specific area/region](../user-guide/advanced-usage.html#read-a-specific-arearegion) - -## regionMaskStrokeStyle - -Specifies the color used to paint the outline of the scanning region. This outline only appears when the barcode scanning is limited to a specified region. - -```typescript -regionMaskStrokeStyle: string -``` - -**Default value** - -`"rgb(254, 142, 20)"` - -**See also** - -* [regionMaskStrokeStyle](#regionmaskstrokestyle) -* [regionMaskLineWidth](#regionmasklinewidth) -* [Read a specific area/region](../user-guide/advanced-usage.html#read-a-specific-arearegion) - -## regionMaskLineWidth - -Specifies the width of the outline of the scanning region. This outline only appears when the barcode scanning is limited to a specified region. - -```typescript -regionMaskLineWidth: number -``` - -**Default value** - -`2` - -**See also** - -* [regionMaskStrokeStyle](#regionmaskstrokestyle) -* [regionMaskLineWidth](#regionmasklinewidth) -* [Read a specific area/region](../user-guide/advanced-usage.html#read-a-specific-arearegion) - -## setVideoFit - -Sets the `object-fit` CSS property of the video element. - -```typescript -setVideoFit(objectFit: string): void; -``` - -**Parameters** - -`objectFit` : specify the new fit type. At present, only "cover" and "contain" are allowed. Check out more on [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit). - -**Return value** - -None. - -**Code Snippet** - -```js -scanner.setVideoFit("cover"); -``` - -**See also** - -* [getVideoFit](#getvideofit) - -## getVideoFit - -Returns the value of the object-fit CSS property of the video element. - -```typescript -getVideoFit(): string; -``` - -**Parameters** - -None. - -**Return value** - -The value of the object-fit CSS property. - -**Default value** - -`"contain"` - -**Code Snippet** - -```js -let videoFit = scanner.getVideoFit(); -``` - -## ifShowScanRegionMask - -Whether to show the scan region mask. - -```typescript -ifShowScanRegionMask: boolean; -``` - -**Default value** - -`true` - -**Code Snippet** - -```js -scanner.ifShowScanRegionMask = false; -``` - -## showTip - -Shows a Tip message. - -```typescript -showTip(x: number, y: number, width: number, initialMessage?: string, duration?: number, autoShowSuggestedTip?: boolean) => void; -``` - -**Parameters** - -`x` , `y` : specifies where to put the Tip message. -`width` : specifies the width of the Tip message, wrapping if the message is too long. - -`initialMessage` : optional. The initial message. - -`duration` : optional. The time during which a Tip message is displayed. The duration is reset each time the message is updated. Default value is `3000`. - -`autoShowSuggestedTip` : optional. Whether or not the Tip box is updated automatically when a tip is suggested. A tip is usually suggested by another SDK such as Dynamsoft Barcode Reader. Default value is `true`. - -**Return value** - -None. - -**Code Snippet** - -```javascript -scanner.showTip(500, 200, 500, "The camera is too far away, please move closer!", 3000, true); -``` - -**See also** - -* [hideTip](#hidetip) - -## hideTip - -Hides the Tip message. - -```typescript -hideTip(): void; -``` - -**Return value** - -None. - -**Code Snippet** - -```javascript -scanner.hideTip(); -``` - - -**See also** - -* [hideTip](#hidetip) - -## updateTipMessage - -Changes the Tip message. - -```typescript -updateTipMessage:(message: string) => void; -``` - -**Parameters** - -`message` : specifies a new message as the Tip. - -**Return value** - -None. - -**Code Snippet** - -```javascript -scanner.updateTipMessage("This is a new message!"); -``` - -## onTipSuggested - -An event that gets triggered whenever a Tip is suggested. - -```typescript -onTipSuggested: (occasion: string, message: string) => any; -``` - -**Arguments** - -`occasion` : specifies the occasion for the Tip. - -`message` : the Tip message for the occasion. - -**Code Snippet** - -```javascript -scanner.onTipSuggested = (occasion, message) { - console.log(message); -} -``` - -**See Also** - -* [showTip](#showtip) - -## convertToPageCoordinates - -Converts coordinates of a barcode location to the coordinates relative to the top left point of the entire document. - -```typescript -convertToPageCoordinates: (point: Point) => Point; -``` - -**Parameters** - -`point` : the coordinates to convert. - -**Return value** - -The converted coordinates. - -**Code Snippet** - -```javascript -let newCoordinates = scanner.convertToPageCoordinates({x: 300, y: 600}); -``` - -> NOTE -> -> Call this method only after `scanner` is open. - -**See also** - -* [convertToClientCoordinates](#converttoclientcoordinates) - -## convertToClientCoordinates - -Converts coordinates of a barcode location to the coordinates within the application's viewport at which the event occurred (as opposed to the coordinate within the page). - -```typescript -convertToClientCoordinates: (point: Point) => Point; -``` - -**Parameters** - -`point` : the coordinates to convert. - -**Return value** - -The converted coordinates. - -**Code Snippet** - -```javascript -let newCoordinates = scanner.convertToClientCoordinates({x: 300, y: 600}); -``` - -> NOTE -> -> Call this method only after `scanner` is open. - -## ifSkipCameraInspection - -Returns or sets whether to skip camera inspection at initialization to save time. Note that if a previously used camera is already available in the [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), the inspection is skipped automatically. Read more on [ifSaveLastUsedCamera](#ifsavelastusedcamera). - -```typescript -ifSkipCameraInspection: boolean; -``` - -**Default value** - -`false` - -## ifSaveLastUsedCamera - -Returns or sets whether to save the last used camera and resolution. This feature makes use of the [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) of the browser. - -> NOTE -> -> This feature only works on mainstream browsers like Chrome, Firefox and Safari. Other browsers may change the device IDs dynamically thus making it impossible to track the camera. - -```typescript -ifSaveLastUsedCamera: boolean; -``` - -**Default value** - -`false` - -## getAllCameras - -Returns infomation of all available cameras on the device. - -```typescript -getAllCameras(): Promise -``` - -**Return value** - -A promise resolving to an array of `VideoDeviceInfo` objects. - -**Code Snippet** - -```js -let cameras = await scanner.getAllCameras(); -if (cameras.length) { - await scanner.setCurrentCamera(cameras[0]); -} -``` - -**See also** - -* [VideoDeviceInfo](./interface/VideoDeviceInfo.md) -* [getCurrentCamera](#getcurrentcamera) - -## getCurrentCamera - -Returns information about the current camera. - -```typescript -getCurrentCamera(): Promise -``` - -**Return value** - -A promise resolving to a `VideoDeviceInfo` object. - -**Code Snippet** - -```js -let camera = await scanner.getCurrentCamera(); -``` - -**See also** - -* [VideoDeviceInfo](./interface/VideoDeviceInfo.md) -* [getAllCameras](#getallcameras) -* [setCurrentCamera](#setcurrentcamera) - -## setCurrentCamera - -Chooses a camera as the video source. - -> If called before `open()` or `show()`, the selected camera will be used. Otherwise, the system will decide which one to use. - -```typescript -setCurrentCamera(deviceId: string): Promise -``` - -**Parameters** - -`deviceID` : specifies the camera. - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -let cameras = await scanner.getAllCameras(); -if (cameras.length) { - await scanner.setCurrentCamera(cameras[0]); -} -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) -* [getCurrentCamera](#getcurrentcamera) - -## getResolution - -Returns the resolution of the current video input. - -```typescript -getResolution(): number[] -``` - -**Return value** - -An array of two numbers representing the resolution. - -**Code Snippet** - -```js -let rsl = scanner.getResolution(); -console.log(rsl[0] + " x " + rsl[1]); -``` - -**See also** - -* [setResolution](#setresolution) - -## setResolution - -Sets the resolution of the current video input. If the specified resolution is not exactly supported, the closest resolution will be applied. - -> If called before `open()` or `show()`, the camera will use the set resolution when it opens. Otherwise, the default resolution is used, which is 1280 x 720 on mobile devices or 1920 x 1080 on desktop. - -```typescript -setResolution(width: number, height: number): Promise -``` - -**Parameters** - -`width` : specifies the horizontal resolution. - -`height` : specifies the vertical resolution. - -> To speed up the barcode scanning, the image frames will be scaled down when it exceeds a size limit either horizontally or vertically. -> -> * The limit is 2048 pixels on mobile devices and 4096 on other devices. -> * If the template "dense" or "distance" is used, the limit is 4096 regardless of which device is used. -> -> Therefore, setting a very high resolution will not help with the scanning. - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -await scanner.setResolution(width, height); -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) -* [getResolution](#getresolution) - -## getVideoSettings - -Returns the current video settings. - -```typescript -getVideoSettings(): MediaStreamConstraints -``` - -**Return value** - -A `MediaStreamConstraints` object. - -**See also** - -* [MediaStreamConstraints](https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints) - -## updateVideoSettings - -Changes the video input. - -```typescript -updateVideoSettings(constraints: MediaStreamConstraints): Promise -``` - -**Parameters** - -`constraints` : specifies the new video settings. - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -await scanner.updateVideoSettings({ - video: { - width: { - ideal: 1280 - }, - height: { - ideal: 720 - }, - facingMode: { - ideal: 'environment' - } - } -}); -``` - -**See also** - -* [MediaStreamConstraints](https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints) -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - -## onWarning - -A callback which is triggered when the resolution is not ideal (< 720P). - -In this case, the warning is: - -```js -{ - id: 3, - message: "Camera resolution too low, please use a higher resolution (720P or better)." -} -``` - -**Code Snippet** - -```js -const scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -scanner.onWarning = warning => console.log(warning.message); -``` - -**See Also** - -[Warning](interface/warning.md) - -## testCameraAccess - -Test whether there is an available camera. It is also a trick to speed up the opening of the camera. - -```typescript -static testCameraAccess(): Promise; -``` - -**Parameters** - -None. - -**Return value** - -A promise resolving to a `CameraTestResponse` object. - -```typescript -interface CameraTestResponse { - readonly ok: boolean; - readonly message: string; -}; -``` - -The possible responses are - -```json -{ - ok: false, - message: "Insecure context." -} -``` - -```json -{ - ok: false, - message: "No camera detected." -} -``` - -```json -{ - ok: false, - message: "No permission to access camera." -} -``` - -```json -{ - ok: false, - message: "Some problem occurred which prevented the device from being used." -} -``` - -```json -{ - ok: false, - message: "A hardware error occurred." -} -``` - -```json -{ - ok: false, - message: "User media support is disabled." -} -``` - -```json -{ - ok: true, - message: " Successfully accessed the camera." -} -``` - -**Code Snippet** - -```javascript -// The first request to connect to the camera. -// Here we do not use `await`, to let it run concurrently with `createInstance()`. -Dynamsoft.DBR.BarcodeScanner.testCameraAccess() - .then(testResponse=>{ - console.log(testResponse.message); - }); - -// The first `createInstance()` will spend a few seconds to get the necessary resources. -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -scanner.onUniqueRead = txt => console.log(txt); -// Now the `show()` has been sped up. -// The second request to connect to camera will be much faster than the first one. -await scanner.show(); -``` - -## play - -Play the video if it is already open but paused or stopped. If the video is already playing, it will start again. - -```typescript -play(): Promise -``` - -**Return value** - -A promise resolving to a `ScannerPlayCallbackInfo` object. - -**Code Snippet** - -```js -scanner.pause(); -//..doing other things without the video -await scanner.play(); -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) -* [stop](#stop) -* [pause](#pause) - -## onPlayed - -This event is triggered when the video stream starts playing. - -```typescript -event onPlayed: (info: ScannerPlayCallbackInfo) => void -``` - -**Arguments** - -`info`: a `ScannerPlayCallbackInfo` object which describes the information of the camera. - -**Code Snippet** - -```js -scanner.onPlayed = rsl => { - console.log(rsl.width + 'x' + rsl.height) -}; -await scanner.show(); // or open(), play(), setCurrentCamera(), etc. -``` - -**See also** - -* [ScannerPlayCallbackInfo](./interface/ScannerPlayCallbackInfo.md) - -## pause - -Pauses the video without releasing the camera. - -```typescript -pause(): void -``` - -## stop - -Stops the video and releases the camera. - -```typescript -stop(): void -``` - -**See also** - -* [play](#play) - -## videoSrc - -Sets or returns the source of the video. - -> You can use this property to specify an existing video as the source to play which will be processed the same way as the video feed from a live camera. - -```typescript -videoSrc: string | MediaStream | MediaSource | Blob; -``` - -**Default value** - -`null` - -## getCapabilities - -Inspects and returns the capabilities of the current camera. - -> At present, this method only works in Edge, Safari, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -getCapabilities(): MediaTrackCapabilities -``` - -**Return value** - -A `MediaTrackCapabilities` object which specifies the values or range of values for each constrainable property of the current camera. - -**Code Snippet** - -```js -scanner.getCapabilities(); -/* Result sample -{ - aspectRatio: {max: 1280, min: 0.001388888888888889}, - brightness: {max: 64, min: -64, step: 1}, - colorTemperature: {max: 6500, min: 2800, step: 10}, - contrast: {max: 95, min: 0, step: 1}, - deviceId: "3a505c29a3312600ea0afd79f8e2b4ba4fba3e539257801ff1de8718c27f2bed", - exposureMode: ["continuous", "manual"], - exposureTime: {max: 10000, min: 39.0625, step: 39.0625}, - facingMode: [], - focusDistance: {max: 1024, min: 0, step: 10}, - focusMode: ["continuous", "manual"], - frameRate: {max: 30, min: 0}, - groupId: "35a82dcb7d5b0ef5bda550718d194f04a812c976175e926ccb81fb9d235d010f", - height: {max: 720, min: 1}, - resizeMode: ["none", "crop-and-scale"], - saturation: {max: 100, min: 0, step: 1}, - sharpness: {max: 7, min: 1, step: 1}, - whiteBalanceMode: ["continuous", "manual"], - width: {max: 1280, min: 1}, - zoom: {max: 800, min: 100, step: 100}, -} -*/ -``` - -**See also** - -* [MediaTrackCapabilities](https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/getCapabilities) - -## getCameraSettings - -Returns the current values for each constrainable property of the current camera. - -Right now, this method only works in Chrome and should be called when the scanner is open. - -```typescript -getCameraSettings(): any -``` - -**Return value** - -The current values for each constrainable property of the current camera in the form of a [MediaTrackSettings](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSettings) object. - -**Code Snippet** - -```js -scanner.getCameraSettings(); -/* Result sample -{ - aspectRatio: 1.4033333333333333, - brightness: 0, - colorTemperature: 4600, - contrast: 0, - deviceId: "3a505c29a3312600ea0afd79f8e2b4ba4fba3e539257801ff1de8718c27f2bed", - exposureMode: "continuous", - exposureTime: 156.25, - focusDistance: 120, - focusMode: "continuous", - frameRate: 30, - groupId: "35a82dcb7d5b0ef5bda550718d194f04a812c976175e926ccb81fb9d235d010f", - height: 480, - resizeMode: "none", - saturation: 73, - sharpness: 2, - whiteBalanceMode: "continuous", - width: 640, - zoom: 100, -} -*/ -``` - -**See also** - -* [getCapabilities](#getcapabilities) - -## setFrameRate - -Adjusts the frame rate. - -> At present, this method only works in Edge, Safari, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -setFrameRate(rate: number): Promise -``` - -**Parameters** - -`rate` : specifies the new frame rate. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setFrameRate(10); -``` - -**See also** - -* [getFrameRate](#getframerate) -* [getCapabilities](#getcapabilities) - -## getFrameRate - -Returns the real-time frame rate. - -```typescript -getFrameRate(): number; -``` - -**Parameters** - -None. - -**Return value** - -The calculated real-time frame rate. - -**Code Snippet** - -```js -await scanner.getFrameRate(); -``` - - -## enableTapToFocus - -Enables manual camera focus when clicking/tapping on the video. - -> At present, this method only works in Edge, Chrome and other Chromium-based browsers (Firefox is not supported). - -```typescript -enableTapToFocus() : void; -``` - -**Parameters** - -None. - -**Return value** - -None. - -**Code Snippet** - -```javascript -scanner.enableTapToFocus(); -``` - -**See also** - -* [disableTapToFocus](#disabletaptofocus) -* [isTapToFocusEnabled](#istaptofocusenabled) - -## disableTapToFocus - -Disables manual camera focus when clicking/tapping on the video. - -```typescript -disableTapToFocus() : void; -``` - -**Parameters** - -None. - -**Return value** - -None. - -**Code Snippet** - -```javascript -scanner.disableTapToFocus(); -``` - -**See also** - -* [enableTapToFocus](#enabletaptofocus) -* [isTapToFocusEnabled](#istaptofocusenabled) - -## isTapToFocusEnabled - -Returns whether clicking/tapping on the video invokes the camera to focus. - -```typescript -isTapToFocusEnabled() : boolean; -``` - -**Parameters** - -None. - -**Return value** - -`true` means clicking/tapping on the video will invoke the camera to focus. `false` means clicking/tapping on the video does nothing. - -**Code Snippet** - -```javascript -if (scanner.isTapToFocusEnabled()) { - console.log("You can tap or click on the video to focus!"); -} -``` - -**See also** - -* [enableTapToFocus](#enabletaptofocus) -* [disableTapToFocus](#disabletaptofocus) - -## getColorTemperature - -Returns the color temperature of the selected camera. - -> This method should be called when the camera is turned on. Note that it only works with Chromium-based browsers such as Edge and Chrome on Windows or Android. Other browsers such as Firefox or Safari are not supported. Note that all browsers on iOS (including Chrome) use WebKit as the rendering engine and are not supported. - -```typescript -getColorTemperature(): number; -``` - -**Return value** - -Color temperature of the selected camera. - -**See also** - -* [setColorTemperature](#setcolortemperature) - -## setColorTemperature - -Adjusts the color temperature. - -> At present, this method only works in Edge, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -setColorTemperature(colorTemperatur: number): Promise -``` - -**Parameters** - -`colorTemperatur` : specifies the new color temperature. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setColorTemperature(5000); -``` - -**See also** - -* [getColorTemperature](#getcolortemperature) -* [getCapabilities](#getcapabilities) - - -## getExposureCompensation - -Returns the exposure compensation index of the selected camera. - -> This method should be called when the camera is turned on. Note that it only works with Chromium-based browsers such as Edge and Chrome on Windows or Android. Other browsers such as Firefox or Safari are not supported. Note that all browsers on iOS (including Chrome) use WebKit as the rendering engine and are not supported. - -```typescript -getExposureCompensation(): number; -``` - -**Return value** - -Exposure compensation index of the selected camera. - -**See also** - -* [setExposureCompensation](#setexposurecompensation) - -## setExposureCompensation - -Sets the exposure compensation index. - -> At present, this method only works in Edge, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -setExposureCompensation(exposureCompensation: number): Promise -``` - -**Parameters** - -`exposureCompensation` : specifies the new exposure compensation index. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setExposureCompensation(-0.7); -``` - -**See also** - -* [getExposureCompensation](#getexposurecompensation) -* [getCapabilities](#getcapabilities) - -## getFocusSettings - -Returns the focus settings. - -```typescript -type FocusArea = { - centerPoint: { x: string, y: string }; - width: string; - height: string; -}; -type FocusSettings = { - mode: string; - distance: number; - area: FocusArea; -}; -getFocusSettings(): FocusSettings; -``` - -**Parameters** - -None. - -**Return value** - -The current focus settings. - -**Code Snippet** - -```javascript -scanner.getFocusSettings(); -``` - -**See also** - -* [setFocus](#setfocus) -* [getCapabilities](#getcapabilities) - -## setFocus - -Sets the focus mode and focus distance of the camera. - -> At present, this method only works in Edge, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -setFocus(mode: string, distance?: number): Promise; -``` - -**Parameters** - -`mode` : specifies the focus mode, the available values include `continuous` and `manual` . - -`distance` : specifies the focus distance, only required when the `mode` is set to `manual` . Use [getCapabilities](#getcapabilities) to get the allowed value range. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setFocus("manual", 5); -``` - -**See also** - -* [getFocusSettings](#getfocussettings) -* [getCapabilities](#getcapabilities) - -## getFocus - -Gets the focus mode and the focus distance. - -```typescript -getFocus(): {mode: string, distance?: number}; -``` - -**Parameters** - -None. - -**Return value** - -An object describing the current camera's focus properties "mode" and "distance". If `mode` is `continuous`, `distance` has no meaning and is omitted from the object. - -**Code Snippet** - -```js -await scanner.getFocus(); -``` - -**See also** - -* [getCapabilities](#getcapabilities) - -## getZoomSettings - -Returns the zoom settings. - -```typescript -getZoomSettings(): { factor: number };; -``` - -**Return value** - -An object that describes the zoom settings. As of version 3.2, it contains only the zoom factor. - -**Code Snippet** - -```javascript -console.log(scanner.getZoomSettings().factor); -``` - -**See also** - -* [setZoom](#setzoom) - -## setZoom - -Sets current zoom value. - -> At present, this method only works in Edge, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -setZoom(zoomValue: number): Promise -``` - -**Parameters** - -`zoomValue` : specifies the new zoom value. - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.setZoom(2); -``` - -**See also** - -* [getZoomSettings](#getzoomsettings) -* [resetZoom](#resetzoom) -* [getCapabilities](#getcapabilities) - -## resetZoom - -Resets the zoom level of the video. - -```typescript -resetZoom(): Promise; -``` - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```javascript -await scanner.resetZoom(); -``` - -**See also** - -* [setZoom](#setzoom) - -## turnOnTorch - -Turns on the torch/flashlight if the current camera supports it. - -> This method should be called when the camera is turned on. Note that it only works with Chromium-based browsers such as Edge and Chrome on Windows or Android. Other browsers such as Firefox or Safari are not supported. Note that all browsers on iOS (including Chrome) use WebKit as the rendering engine and are not supported. - -```typescript -turnOnTorch(): Promise -``` - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.turnOnTorch(); -``` - -**See also** - -* [turnOffTorch](#turnofftorch) -* [getCapabilities](#getcapabilities) - -## turnOffTorch - -Turns off the torch/flashlight. - -> At present, this method only works in Edge, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open. - -```typescript -turnOffTorch(): Promise -``` - -**Return value** - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -await scanner.turnOffTorch(); -``` - -**See also** - -* [turnOnTorch](#turnontorch) \ No newline at end of file diff --git a/programming-old/javascript/api-reference/BarcodeScanner/accessors.md b/programming-old/javascript/api-reference/BarcodeScanner/accessors.md deleted file mode 100644 index 74c584f4..00000000 --- a/programming-old/javascript/api-reference/BarcodeScanner/accessors.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -layout: default-layout -title: BarcodeScanner Accessors - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows BarcodeScanner Accessors of Dynamsoft Barcode Reader JavaScript SDK. -keywords: defaultUIElementURL, singleFrameMode, soundOnSuccessfulRead, accessors, BarcodeScanner, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: false -permalink: /programming/javascript/api-reference/BarcodeScanner/accessors.html ---- - - -> This page is applicable to version 8.2.3 - -# Javascript API Reference - `BarcodeScanner` Accessors - -| Accessors | Description | -|----------------------|-------------| -| [defaultUIElementURL](#defaultuielementurl) | Get or set the default scanner UI. | -| [singleFrameMode](#singleframemode) | If set to `true`, single video frames will be used instead of a continuous video stream. | -| [soundOnSuccessfulRead](#soundonsuccessfulread) | Get or set the sound to play when a barcode is read successfully. | - -### Inherited Accessors from `BarcodeReader` - -| Accessors | Description | -|----------------------|-------------| -| [engineResourcePath](../BarcodeReader/accessors.md#engineresourcepath) | Get or set the engine (WASM) location. | -| [productKeys](../BarcodeReader/accessors.md#productkeys) | Get or set the Dynamsoft Barcode Reader SDK product keys. | -| [version](../BarcodeReader/accessors.md#version) | Get current version. | - -## defaultUIElementURL - -Get or set the default scanner UI. The default scanner UI is defined in the file `dist/dbr.scanner.html`. Follow [these steps](../../user-guide/basic-customizations.md#customizing-the-ui) to customize the UI. - -```javascript -defaultUIElementURL = 'url' -``` - -### Property Value - -`url` *string* - -### :+1: Tips and Tricks - -* Be sure to set `defaultUIElementURL` before you call `createInstance`. - -## singleFrameMode - -Get or set the camera mode. If `true`, single video frames will be used instead of a continuous video stream. It's especially useful for cameras that lack webcam access (lack of WebRTC support, e.g. Chrome on iOS). - -```javascript -singleFrameMode = bool; -``` - -### Property Value - -`bool` *boolean* - -### Sample - -```javascript -let scanner = await Dynamsoft.BarcodeScanner.createInstance(); -scanner.singleFrameMode = true; // use singleFrameMode anyway -scanner.show(); -``` - -### :+1: Tips and Tricks - -* `singleFrameMode` is based on WebRTC support, not actual camera connection. In other words, if a browser supports WebRTC, it won't be using `singleFrameMode` by default even when there is no camera attached. - -* By default, when the default UI is used, a camera icon will appear for the `singleFrameMode` which is defined by a SVG (`className` is `dbrScanner-bg-camera`). If you have customized the UI, you will have to provide your own UI implementation for this mode. - -## soundOnSuccessfulRead - -Get or set the sound played when a barcode is read successfully. - -```javascript -soundOnSuccessfulRead = audio -``` - -### Property Value - -`audio` *HTMLAudioElement* - -### Sample - -```javascript -scanner.soundOnSuccessfulRead = new Audio("./pi.mp3"); -``` diff --git a/programming-old/javascript/api-reference/BarcodeScanner/index-v7.6.0.md b/programming-old/javascript/api-reference/BarcodeScanner/index-v7.6.0.md deleted file mode 100644 index 4b313997..00000000 --- a/programming-old/javascript/api-reference/BarcodeScanner/index-v7.6.0.md +++ /dev/null @@ -1,136 +0,0 @@ ---- -layout: default-layout -title: v7.6.0 BarcodeScanner Index - Dynamsoft Barcode Reader JavaScript Edition API -description: This API reference features barcode scanner class methods in Dynamsoft Barcode Reader JavaScript Edition & Camera Enhancer JavaScript Edition. -keywords: BarcodeScanner, api reference, javascript, js -needAutoGenerateSidebar: false -breadcrumbText: BarcodeScanner -permalink: /programming/javascript/api-reference/BarcodeScanner/index-v7.6.0.html ---- - - -# Dynamsoft Barcode Reader SDK - Javascript BarcodeScanner Class - -The `BarcodeScanner` class is used for **video** decoding. - -## `BarcodeScanner` Methods - -### Initialize and Destroy - -The following methods are related to initializing and destroying the `BarcodeScanner` object. - -| Method | Description | -|----------------------|-------------| -| [createInstance()](methods/initialize-and-destroy.md#createinstance) | Create a `BarcodeScanner` object. | -| [destroy()](methods/initialize-and-destroy.md#destroy) | Destroy the `BarcodeScanner` object. | -| [getUIElement()](methods/initialize-and-destroy.md#getuielement) | Get HTML element containing the `BarcodeScanner` object. | -| [setUIElement()](methods/initialize-and-destroy.md#setuielement) | Set html element containing the `BarcodeScanner` object. | - -### Camera Control - -The following methods are related to controlling the camera and its settings. - -| Method | Description | -|----------------------|-------------| -| [getAllCameras()](methods/camera-controls.md#getallcameras) | Get information of all available cameras on the device. | -| [getCurrentCamera()](methods/camera-controls.md#getcurrentcamera) | Get information about the currently used camera. | -| [setCurrentCamera()](methods/camera-controls.md#setcurrentcamera) | Set camera by its information or device ID. | -| [hide()](methods/camera-controls.md#hide) | Stop the camera and hide the camera UI element. | -| [show()](methods/camera-controls.md#show) | Show the camera UI element, open the camera, and start decoding. | -| [close()](methods/camera-controls.md#close) | Close and release the camera. | -| [isOpen()](methods/camera-controls.md#isopen) | Check if the camera is open. | -| [open()](methods/camera-controls.md#open) | Open the camera. | -| [pause()](methods/camera-controls.md#pause) | Pause the video stream. | -| [play()](methods/camera-controls.md#play) | Continue the video stream. | -| [stop()](methods/camera-controls.md#stop) | Stop the video and release the camera. | -| [pauseScan()](methods/camera-controls.md#pausescan) | Pause the video decoding process. | -| [resumeScan()](methods/camera-controls.md#resumescan) | Resume the video decoding process. | - -### Capture Settings - -The following methods are related to the camera's capture settings. - -| Method | Description | -|----------------------|-------------| -| [getCapabilities()](methods/capture-settings.md#getcapabilities) | Get the camera capabilities. | -| [getResolution()](methods/capture-settings.md#getresolution) | Get current video resolution. | -| [setResolution()](methods/capture-settings.md#setresolution) | Set current video resolution. | -| [getScanSettings()](methods/capture-settings.md#getscansettings) | Get current scan settings. | -| [updateScanSettings()](methods/capture-settings.md#updatescansettings) | Modify and update scan settings. | -| [getVideoSettings()](methods/capture-settings.md#getvideosettings) | Get current video settings. | -| [updateVideoSettings()](methods/capture-settings.md#updatevideosettings) | Modify and update video settings. | -| [setColorTemperature()](methods/capture-settings.md#setcolortemperature) | Adjust the video colour temperature. | -| [setExposureCompensation()](methods/capture-settings.md#setexposurecompensation) | Adjust the video exposure level. | -| [setFrameRate()](methods/capture-settings.md#setframerate) | Adjust the video frame rate. | -| [setZoom()](methods/capture-settings.md#setzoom) | Adjust the video zoom ratio. | -| [turnOffTorch()](methods/capture-settings.md#turnofftorch) | Turn off the torch/flashlight. | -| [turnOnTorch()](methods/capture-settings.md#turnontorch) | Turn on the torch/flashlight. | - -### Runtime Settings - -The following methods are related to customizing runtime settings. - -| Method | Description | -|----------------------|-------------| -| [updateRuntimeSettings()](methods/runtime-settings.md#updateruntimesettings.md) | Modify and update the current runtime settings. | - -### Inherited Methods - -The following methods are inherited from the `BarcodeReader` class. - -* [detectEnvironment()](../BarcodeReader/methods/initialize-and-destroy.md#detectenvironment) -* [isLoaded()](../BarcodeReader/methods/initialize-and-destroy.md#isloaded) -* [loadWasm()](../BarcodeReader/methods/initialize-and-destroy.md#loadwasm) -* [getModeArgument()](../BarcodeReader/methods/parameter-and-runtime-settings.md#getmodeargument) -* [setModeArgument()](../BarcodeReader/methods/parameter-and-runtime-settings.md#setmodeargument) -* [getRuntimeSettings()](../BarcodeReader/methods/parameter-and-runtime-settings.md#getruntimesettings) -* [resetRuntimeSettings()](../BarcodeReader/methods/parameter-and-runtime-settings.md#resetruntimesettings) - -## `BarcodeScanner` Properties - -| Property | Description | -|----------------------|-------------| -| `bPlaySoundOnSuccessfulRead` | If set to `true`, a sound will be played when a barcode is read successfully. | -| [barcodeFillStyle](properties.md#barcodefillstyle) | Set the style used when filling in located barcode. | -| `barcodeLineWidth` | Set the width of the located barcode border. | -| [barcodeStrokeStyle](properties.md#barcodestrokestyle) | Set the style of the located barcode border. | -| [regionMaskFillStyle](properties.md#regionmaskfillstyle) | Set the style used when filling the mask beyond the region. | -| `regionMaskLineWidth` | Set the width of the region border. | -| [regionMaskStrokeStyle](properties.md#regionmaskstrokestyle) | Set the style of the region border. | -| [onFrameRead](properties.md#onframeread) | Triggered a frame has been scanned. | -| [onPlayed](properties.md#onplayed) | Triggered when the camera video stream is played. | -| [onUnduplicatedRead](properties.md#onunduplicatedread) | Triggered when a new, unduplicated barcode is found. | - -### Inherited Properties - -The following properties are inherited from the `BarcodeReader` class. - -* [_bUseFullFeature](../BarcodeReader/properties.md#_busefullfeature) -* `bDestroyed` -* `bSaveOriCanvas` -* `oriCanvas` - -## `BarcodeScanner` Accessors - -| Accessors | Description | -|----------------------|-------------| -| [singleFrameMode](accessors.md#singleframemode) | If set to `true`, single video frames will be used instead of a continuous video stream. | -| [soundOnSuccessfulRead](accessors.md#soundonsuccessfulread) | Get or set the sound to play when a barcode is read successfully. | -| [defaultUIElementURL](accessors.md#defaultuielementurl) | Get or set the default scanner UI. | - -### Inherited Accessors - -The following accessors are inherited from the `BarcodeReader` class. - -* [engineResourcePath](../BarcodeReader/accessors.md#engineresourcepath) -* [productKeys](../BarcodeReader/accessors.md#productkeys) -* [version](../BarcodeReader/accessors.md#version) - -## `BarcodeScanner` Interfaces - -| Interface | Description | -|----------------------|-------------| -| [FrameFilter](interfaces.md#framefilter) | Filter and discard video frames while focusing. | -| [ScanSettings](interfaces.md#scansettings) | Configures the video stream settings. | -| [ScannerPlayCallbackInfo](interfaces.md#scannerplaycallbackinfo) | Stores the height and width constraints of the video stream. | -| [VideoDeviceInfo](interfaces.md#videodeviceinfo) | Stores the video device information. | diff --git a/programming-old/javascript/api-reference/BarcodeScanner/index.md b/programming-old/javascript/api-reference/BarcodeScanner/index.md deleted file mode 100644 index 7bc38cbf..00000000 --- a/programming-old/javascript/api-reference/BarcodeScanner/index.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -layout: default-layout -title: BarcodeScanner Index - Dynamsoft Barcode Reader JavaScript Edition API Reference -description: This class in API reference features barcode scanner for video class in Dynamsoft Barcode Reader JavaScript Edition. -keywords: BarcodeScanner, api reference, javascript, js -needAutoGenerateSidebar: false -breadcrumbText: BarcodeScanner -permalink: /programming/javascript/api-reference/BarcodeScanner/index.html ---- - - -> This page is applicable to version 8.2.3 - -# Dynamsoft Barcode Reader SDK - JavaScript BarcodeScanner Class - -The `BarcodeScanner` class is used for **video** decoding. - -## `BarcodeScanner` *Class* Methods - -### Initialize - -The following methods are related to the initialization of `BarcodeScanner` instances. - -| Method | Description | -| --------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | -| [createInstance()](methods/initialize-and-destroy.md#createinstance) | Create a `BarcodeScanner` instance. | -| [detectEnvironment()](../BarcodeReader/methods/initialize-and-destroy.md#detectenvironment) | Detect the current environment. Inherited from the `BarcodeReader` class. | -| [isLoaded()](../BarcodeReader/methods/initialize-and-destroy.md#isloaded) | Check if the decoding module is loaded. Inherited from the `BarcodeReader` class. | -| [loadWasm()](../BarcodeReader/methods/initialize-and-destroy.md#loadwasm) | Manually load and compile the decoding WASM module. Inherited from the `BarcodeReader` class. | - -## `BarcodeScanner` *Instance* Methods - -### Destroy - -| Method | Description | -| -------------------------------------------------------- | -------------------------------------- | -| [destroy()](methods/initialize-and-destroy.md#destroy) | Destroy the `BarcodeScanner` instance. | - -### UI Element - -| Method | Description | -| ------------------------------------------------------------------ | ---------------------------------------------------------- | -| [getUIElement()](methods/initialize-and-destroy.md#getuielement) | Get HTML element containing the `BarcodeScanner` instance. | -| [setUIElement()](methods/initialize-and-destroy.md#setuielement) | Set html element containing the `BarcodeScanner` instance. | - -### Camera Control - -The following methods are related to controlling the camera and its settings. - -| Method | Description | -| ------------------------------------------------------------------- | ---------------------------------------------------------------- | -| [getAllCameras()](methods/camera-controls.md#getallcameras) | Get information of all available cameras on the device. | -| [getCurrentCamera()](methods/camera-controls.md#getcurrentcamera) | Get information about the currently used camera. | -| [setCurrentCamera()](methods/camera-controls.md#setcurrentcamera) | Set camera by its information or device ID. | -| [show()](methods/camera-controls.md#show) | Show the camera UI element, open the camera, and start decoding. | -| [hide()](methods/camera-controls.md#hide) | Stop the camera and hide the camera UI element. | -| [open()](methods/camera-controls.md#open) | Open the camera. | -| [close()](methods/camera-controls.md#close) | Close and release the camera. | -| [isOpen()](methods/camera-controls.md#isopen) | Check if the camera is open. | -| [play()](methods/camera-controls.md#play) | Continue the video stream. | -| [pause()](methods/camera-controls.md#pause) | Pause the video stream. | -| [stop()](methods/camera-controls.md#stop) | Stop the video and release the camera. | -| [pauseScan()](methods/camera-controls.md#pausescan) | Pause the video decoding process. | -| [resumeScan()](methods/camera-controls.md#resumescan) | Resume the video decoding process. | - -### Capture Settings - -The following methods are related to the camera's capture settings. - -| Method | Description | -| ---------------------------------------------------------------------------------- | ------------------------------------ | -| [getCapabilities()](methods/capture-settings.md#getcapabilities) | Get the camera capabilities. | -| [getResolution()](methods/capture-settings.md#getresolution) | Get current video resolution. | -| [setResolution()](methods/capture-settings.md#setresolution) | Set current video resolution. | -| [getScanSettings()](methods/capture-settings.md#getscansettings) | Get current scan settings. | -| [updateScanSettings()](methods/capture-settings.md#updatescansettings) | Modify and update scan settings. | -| [getVideoSettings()](methods/capture-settings.md#getvideosettings) | Get current video settings. | -| [updateVideoSettings()](methods/capture-settings.md#updatevideosettings) | Modify and update video settings. | -| [setColorTemperature()](methods/capture-settings.md#setcolortemperature) | Adjust the video colour temperature. | -| [setExposureCompensation()](methods/capture-settings.md#setexposurecompensation) | Adjust the video exposure level. | -| [setFrameRate()](methods/capture-settings.md#setframerate) | Adjust the video frame rate. | -| [setZoom()](methods/capture-settings.md#setzoom) | Adjust the video zoom ratio. | -| [turnOnTorch()](methods/capture-settings.md#turnontorch) | Turn on the torch/flashlight. | -| [turnOffTorch()](methods/capture-settings.md#turnofftorch) | Turn off the torch/flashlight. | - -### Runtime Settings - -The following methods are related to customizing runtime settings. - -| Method | Description | -| ----------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | -| [getRuntimeSettings()](../BarcodeReader/methods/parameter-and-runtime-settings.md#getruntimesettings) | Get current runtime settings. Inherited from the `BarcodeReader` class. | -| [resetRuntimeSettings()](../BarcodeReader/methods/parameter-and-runtime-settings.md#resetruntimesettings) | Reset runtime settings to default.Inherited from the `BarcodeReader` class. | -| [updateRuntimeSettings()](methods/runtime-settings.md#updateruntimesettings.md) | Modify and update the current runtime settings. | -| [getModeArgument()](../BarcodeReader/methods/parameter-and-runtime-settings.md#getmodeargument) | Get argument value for the specified mode parameter. Inherited from the `BarcodeReader` class. | -| [setModeArgument()](../BarcodeReader/methods/parameter-and-runtime-settings.md#setmodeargument) | Set argument value for the specified mode parameter. Inherited from the `BarcodeReader` class. | - -## `BarcodeScanner` *Class* Properties - -| Property | Description | -| ------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | -| [defaultUIElementURL](properties.md#defaultuielementurl) | Get or set the default scanner UI. | -| [_bUseFullFeature](../BarcodeReader/properties.md#_busefullfeature) | If set to `false`, use the compact-featured WASM module. Inherited from the `BarcodeReader` class. | -| [engineResourcePath](../BarcodeReader/properties.md#engineresourcepath) | Get or set the engine (WASM) location. Inherited from the `BarcodeReader` class. | -| [productKeys](../BarcodeReader/properties.md#productkeys) | Get or set the Dynamsoft Barcode Reader SDK product keys. Inherited from the `BarcodeReader` class. | -| [version](../BarcodeReader/properties.md#version) | Get the current version. Inherited from the `BarcodeReader` class. | -| [licenseServer](../BarcodeReader/properties.md#licenseServer) | Specify by URL the license server from where authorization is acquired at runtime. Inherited from the `BarcodeReader` class. | -| [handshakeCode](../BarcodeReader/properties.md#handshakeCode) | Specify the Handshake Code which determines what authorization is acquired. Inherited from the `BarcodeReader` class. | -| [sessionPassword](../BarcodeReader/properties.md#sessionPassword) | Specify a password which protects the Handshake Code from abuse. Inherited from the `BarcodeReader` class. | - -## `BarcodeScanner` *Instance* Properties - -| Property | Description | -| -------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `bDestroyed` | Indicates whether a `BarcodeScanner` instance has been destroyed. Inherited from the `BarcodeReader` class. | -| `bSaveOriCanvas` | If set to `true`, save the original image in `oriCanvas`. Inherited from the `BarcodeReader` class. | -| `oriCanvas` | An [OffscreenCanvas](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas) object that holds the original image. Inherited from the `BarcodeReader` class. | -| `_bUseWebgl` | Whether to enable image preprocessing with WebGL APIs, this API may change in the future. Inherited from the `BarcodeReader` class. | -| `bPlaySoundOnSuccessfulRead` | If set to `true`, a sound will be played when a barcode is read successfully. You can change the sound using [soundOnSuccessfulRead](properties.md#soundonsuccessfulread) | -| [barcodeFillStyle](properties.md#barcodefillstyle) | Set the style used when filling in located barcode. | -| `barcodeLineWidth` | Set the width of the located barcode border. | -| [barcodeStrokeStyle](properties.md#barcodestrokestyle) | Set the style of the located barcode border. | -| [regionMaskFillStyle](properties.md#regionmaskfillstyle) | Set the style used when filling the mask beyond the region. | -| `regionMaskLineWidth` | Set the width of the region border. | -| [regionMaskStrokeStyle](properties.md#regionmaskstrokestyle) | Set the style of the region border. | -| [onFrameRead](properties.md#onframeread) | Triggered a frame has been scanned. | -| [onPlayed](properties.md#onplayed) | Triggered when the camera video stream is played. | -| [onUnduplicatedRead](properties.md#onunduplicatedread) | Triggered when a new, unduplicated barcode is found. | -| [singleFrameMode](properties.md#singleframemode) | If set to `true`, single video frames will be used instead of a continuous video stream. | -| [soundOnSuccessfulRead](properties.md#soundonsuccessfulread) | Get or set the sound to play when a barcode is read successfully. | - -## `BarcodeScanner` Interfaces - -| Interface | Description | -| ------------------------------------------------------------------ | ------------------------------------------------------------ | -| [FrameFilter](interfaces.md#framefilter) | Filter and discard video frames while focusing. | -| [ScanSettings](interfaces.md#scansettings) | Configures the video stream settings. | -| [ScannerPlayCallbackInfo](interfaces.md#scannerplaycallbackinfo) | Stores the height and width constraints of the video stream. | -| [VideoDeviceInfo](interfaces.md#videodeviceinfo) | Stores the video device information. | diff --git a/programming-old/javascript/api-reference/BarcodeScanner/interfaces.md b/programming-old/javascript/api-reference/BarcodeScanner/interfaces.md deleted file mode 100644 index f4b272b4..00000000 --- a/programming-old/javascript/api-reference/BarcodeScanner/interfaces.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -layout: default-layout -title: BarcodeScanner Interfaces - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows BarcodeScanner Interfaces of Dynamsoft Barcode Reader JavaScript SDK. -keywords: FrameFilter, ScannerPlayCallbackInfo, ScanSettings, VideoDeviceInfo, interfaces, BarcodeScanner, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: false -permalink: /programming/javascript/api-reference/BarcodeScanner/interfaces.html ---- - - -> This page is applicable to version 8.2.3 - -# Javascript API Reference - `BarcodeScanner` Interfaces - -| Interface | Description | -|----------------------|-------------| -| [FrameFilter](#framefilter) | Filter and discard video frames while focusing. | -| [ScannerPlayCallbackInfo](#scannerplaycallbackinfo) | Stores the height and width constraints of the video stream. | -| [ScanSettings](#scansettings) | Configures the video stream settings. | -| [VideoDeviceInfo](#videodeviceinfo) | Stores the video device information. | - ---- - - - -## ScannerPlayCallbackInfo - -Stores the height and width constraints of the video stream. - -### Properties - -| Property | Type | Description | -|------------------|------|-------------| -| height | *number* | The height of the video. | -| width | *number* | The width of the video. | - -## ScanSettings - -Configures the video stream settings. Previously known as `ScannerConfig`. - -### Properties - -| Property | Type | Default Value | Description | -|------------------|------|---------------|-------------| -| duplicateForgetTimeoptional | *number* | `3000` | Ignore duplicated results found in the specified time period. Measured in ms. | -| frameFilteroptional | [FrameFilter](#framefilter) | | Filter and discard video frames that are out of focus. | -| intervalTimeoptional | *number* | `100` | Scan interval used to allow the library to release the CPU periodically. Measured in ms. Setting the value larger is also a simple way to save battery power and reduce device heating. | - -## VideoDeviceInfo - -Stores the video device information. - -### Properties - -| Property | Type | Description | -|--------------------|------|-------------| -| `deviceId` | *string* | Identifier for the represented device that is persisted across sessions. It is un-guessable by other applications and unique to the origin of the calling application. It is reset when the user clears cookies. | -| `label` | *string* | The label describing the device. | diff --git a/programming-old/javascript/api-reference/BarcodeScanner/methods/camera-controls-v7.6.0.md b/programming-old/javascript/api-reference/BarcodeScanner/methods/camera-controls-v7.6.0.md deleted file mode 100644 index 52b02e73..00000000 --- a/programming-old/javascript/api-reference/BarcodeScanner/methods/camera-controls-v7.6.0.md +++ /dev/null @@ -1,250 +0,0 @@ ---- -layout: default-layout -title: v7.6.0 BarcodeScanner Camera Control Methods - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows BarcodeScanner Camera Control Methods of Dynamsoft Barcode Reader JavaScript SDK. -keywords: getAllCameras, getCurrentCamera, setCurrentCamera, hide, show, close, isOpen, open, pause, play, stop, pauseScan, resumeScan, camera control methods, BarcodeScanner, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: false -permalink: /programming/javascript/api-reference/BarcodeScanner/methods/camera-controls-v7.6.0.html ---- - - -# Javascript API Reference - `BarcodeScanner` Camera Control Methods - -| Method | Description | -|----------------------|-------------| -| [getAllCameras()](#getallcameras) | Get information of all available cameras on the device. | -| [getCurrentCamera()](#getcurrentcamera) | Get information about the currently used camera. | -| [setCurrentCamera()](#setcurrentcamera) | Set camera by its information or device ID. | -| [hide()](#hide) | Stop the camera and hide the camera UI element. | -| [show()](#show) | Show the camera UI element, open the camera, and start decoding. | -| [close()](#close) | Close and release the camera. | -| [isOpen()](#isopen) | Check if the camera is open. | -| [open()](#open) | Open the camera. | -| [pause()](#pause) | Pause the video stream. | -| [play()](#play) | Continue the video stream. | -| [stop()](#stop) | Stop the video and release the camera. | -| [pauseScan()](#pausescan) | Pause the video decoding process. | -| [resumeScan()](#resumescan) | Resume the video decoding process. | - ---- - -## getAllCameras - -Get information of all available cameras on the device. - -```javascript -getAllCameras() returns Promise -``` - -### Return Value - -Promise<VideoDeviceInfo[]> - -### Sample - -```javascript -let cameras = await scanner.getAllCameras(); -if(cameras.length){ - await scanner.setCurrentCamera(cameras[0]); -} -``` - -## getCurrentCamera - -Get information about the currently used camera. - -```javascript -getCurrentCamera() returns Promise -``` - -### Return Value - -Promise<VideoDeviceInfo[] | null> - -## setCurrentCamera - -Set camera by its information or device ID. - -```javascript -setCurrentCamera(cameraInfoOrDeviceId) returns Promise -``` - -### Parameters - -`cameraInfoOrDeviceId` *any* - -### Return Value - -Promise<ScannerPlayCallbackInfo> - -### Sample - -[Read barcodes from live camera](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html) - -## hide - -Stop decoding, close and release the camera, unbind from UI, and set the UI element with `display:none;` - -```javascript -hide() returns void -``` - -### Return Value - -`void` - -### Sample - -[Read barcodes from live camera](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html) - -## show - -Bind UI, open the camera, remove the UIElement `display` style if the original style is `display:none;`, and start decoding. - -```javascript -show() returns Promise -``` - -### Return Value - -Promise<ScannerPlayCallbackInfo> - -### Sample - -[Read barcodes from live camera](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html) - -## close - -Stop decoding, close and release the camera, and unbind from UI. - -```javascript -close() returns void -``` - -### Return Value - -`void` - -### Sample - -[Read barcodes from live camera](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html) - -## isOpen - -Check if the scanner is open. - -```javascript -isOpen() returns Boolean -``` - -### Return Value - -`Boolean` - -### Sample - -[Read barcodes from live camera](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html) - -## open - -Bind UI, open the camera, and start decoding. - -```javascript -open() returns Promise -``` - -### Return Value - -Promise<ScannerPlayCallbackInfo> - -### Sample - -[Read barcodes from live camera](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html) - -## pause - -Pause the video stream but will not release the camera. - -```javascript -pause() returns void -``` - -### Return Value - -`void` - -### Sample - -[Read barcodes from live camera](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html) - -## play - -Continue the video stream. - -```javascript -play(deviceId, width, height) returns Promise -``` - -### Parameters - -- `deviceId` *string* -- `width` *number* -- `height` *number* - -### Return Value - -Promise<ScannerPlayCallbackInfo> - -### Sample - -[Read barcodes from live camera](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html) - -## stop - -Stop the video, and release the camera. - -```javascript -stop() returns void -``` - -### Return Value - -`void` - -### Sample - -[Read barcodes from live camera](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html) - -## pauseScan - -Pause the video decoding process. - -```javascript -pauseScan() returns void -``` - -### Return Value - -`void` - -### Sample - -[Read barcodes from live camera](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html) - -## resumeScan - -Resume the video decoding process. - -```javascript -resumeScan() returns void -``` - -### Return Value - -`void` - -### Sample - -[Read barcodes from live camera](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html) - diff --git a/programming-old/javascript/api-reference/BarcodeScanner/methods/camera-controls.md b/programming-old/javascript/api-reference/BarcodeScanner/methods/camera-controls.md deleted file mode 100644 index 1a4093c0..00000000 --- a/programming-old/javascript/api-reference/BarcodeScanner/methods/camera-controls.md +++ /dev/null @@ -1,263 +0,0 @@ ---- -layout: default-layout -title: BarcodeScanner Camera Control Methods - Dynamsoft Barcode Reader JavaScript Edition API Reference -description: This page shows BarcodeScanner Camera Control Methods of Dynamsoft Barcode Reader JavaScript SDK. -keywords: getAllCameras, getCurrentCamera, setCurrentCamera, hide, show, close, isOpen, open, pause, play, stop, pauseScan, resumeScan, camera control methods, BarcodeScanner, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: false -permalink: /programming/javascript/api-reference/BarcodeScanner/methods/camera-controls.html ---- - - -> This page is applicable to version 8.2.3 - -# JavaScript API Reference - `BarcodeScanner` Camera Control Methods - -| Method | Description | -|----------------------|-------------| -| [getAllCameras()](#getallcameras) | Get information of all available cameras on the device. | -| [getCurrentCamera()](#getcurrentcamera) | Get information about the currently used camera. | -| [setCurrentCamera()](#setcurrentcamera) | Set camera by its information or device ID. | -| [hide()](#hide) | Stop the camera and hide the camera UI element. | -| [show()](#show) | Show the camera UI element, open the camera, and start decoding. | -| [close()](#close) | Close and release the camera. | -| [isOpen()](#isopen) | Check if the camera is open. | -| [open()](#open) | Open the camera. | -| [pause()](#pause) | Pause the video stream. | -| [play()](#play) | Continue the video stream. | -| [stop()](#stop) | Stop the video and release the camera. | -| [pauseScan()](#pausescan) | Pause the video decoding process. | -| [resumeScan()](#resumescan) | Resume the video decoding process. | - ---- - -## getAllCameras - -Get information of all available cameras on the device. - -```javascript -getAllCameras() returns Promise -``` - -### Return Value - -Promise<VideoDeviceInfo[]> - -### Sample - -```javascript -let cameras = await scanner.getAllCameras(); -if(cameras.length){ - await scanner.setCurrentCamera(cameras[0]); -} -``` - -## getCurrentCamera - -Get information about the currently used camera. - -```javascript -getCurrentCamera() returns Promise -``` - -### Return Value - -Promise<VideoDeviceInfo[] | null> - -## setCurrentCamera - -Set camera by its information or device ID. - -```javascript -setCurrentCamera(cameraInfoOrDeviceId) returns Promise -``` - -### Parameters - -`cameraInfoOrDeviceId` *any* - -### Return Value - -Promise<ScannerPlayCallbackInfo> - -### Sample - -```javascript - let cameras = await scanner.getAllCameras(); - if(cameras.length){ - await scanner.setCurrentCamera(cameras[0]); - } -``` - -## hide - -Stop decoding, close and release the camera, unbind from UI, and set the UI element with `display:none;` - -```javascript -hide() returns void -``` - -### Return Value - -`void` - -### Sample - -[Read barcodes from live camera](https://demo.dynamsoft.com/barcode-reader-js/) - -## show - -Bind UI, open the camera, remove the UIElement `display` style if the original style is `display:none;`, and start decoding. - -```javascript -show() returns Promise -``` - -### Return Value - -Promise<ScannerPlayCallbackInfo> - -### Sample - -```javascript -await scanner.show(); -``` - -## close - -Stop decoding, close and release the camera, and unbind from UI. - -```javascript -close() returns void -``` - -### Return Value - -`void` - -### Sample - -[Read barcodes from live camera](https://demo.dynamsoft.com/barcode-reader-js/) - -## isOpen - -Check if the scanner is open. - -```javascript -isOpen() returns Boolean -``` - -### Return Value - -`Boolean` - -### Sample - -[Read barcodes from live camera](https://demo.dynamsoft.com/barcode-reader-js/) - -## open - -Bind UI, open the camera, and start decoding. - -```javascript -open() returns Promise -``` - -### Return Value - -Promise<ScannerPlayCallbackInfo> - -### Sample - -```javascript -await scanner.open(); -``` - -## pause - -Pause the video stream but will not release the camera. - -```javascript -pause() returns void -``` - -### Return Value - -`void` - -### Sample - -[Read barcodes from live camera](https://demo.dynamsoft.com/barcode-reader-js/) - -## play - -Continue the video stream. - -```javascript -play(deviceId, width, height) returns Promise -``` - -### Parameters - -- `deviceId` *string* -- `width` *number* -- `height` *number* - -### Return Value - -Promise<ScannerPlayCallbackInfo> - -### Sample - -```javascript -await scanner.play(); -``` - -## stop - -Stop the video, and release the camera. - -```javascript -stop() returns void -``` - -### Return Value - -`void` - -### Sample - -[Read barcodes from live camera](https://demo.dynamsoft.com/barcode-reader-js/) - -## pauseScan - -Pause the video decoding process. - -```javascript -pauseScan() returns void -``` - -### Return Value - -`void` - -### Sample - -[Read barcodes from live camera](https://demo.dynamsoft.com/barcode-reader-js/) - -## resumeScan - -Resume the video decoding process. - -```javascript -resumeScan() returns void -``` - -### Return Value - -`void` - -### Sample - -[Read barcodes from live camera](https://demo.dynamsoft.com/barcode-reader-js/) - diff --git a/programming-old/javascript/api-reference/BarcodeScanner/methods/capture-settings.md b/programming-old/javascript/api-reference/BarcodeScanner/methods/capture-settings.md deleted file mode 100644 index 32245f4f..00000000 --- a/programming-old/javascript/api-reference/BarcodeScanner/methods/capture-settings.md +++ /dev/null @@ -1,332 +0,0 @@ ---- -layout: default-layout -title: BarcodeScanner Capture Settings - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows BarcodeScanner Capture Settings of Dynamsoft Barcode Reader JavaScript SDK. -keywords: getCapabilities, getResolution, setResolution, getScanSettings, updateScanSettings, getVideoSettings, updateVideoSettings, setColorTemperature, setExposureCompensation, setFrameRate, setZoom, turnOffTorch, turnOnTorch, capture settings, BarcodeScanner, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: false -permalink: /programming/javascript/api-reference/BarcodeScanner/methods/capture-settings.html ---- - - -> This page is applicable to version 8.2.3 - -# Javascript API Reference - `BarcodeScanner` Capture Settings - -| Method | Description | -|----------------------|-------------| -| [getCapabilities()](#getcapabilities) | Get the camera capabilities. | -| [getResolution()](#getresolution) | Get current video resolution. | -| [setResolution()](#setresolution) | Set current video resolution. | -| [getScanSettings()](#getscansettings) | Get current scan settings. | -| [updateScanSettings()](#updatescansettings) | Modify and update scan settings. | -| [getVideoSettings()](#getvideosettings) | Get current video settings. | -| [updateVideoSettings()](#updatevideosettings) | Modify and update video settings. | -| [setColorTemperature()](#setcolortemperature) | Adjust the video colour temperature. | -| [setExposureCompensation()](#setexposurecompensation) | Adjust the video exposure level. | -| [setFrameRate()](#setframerate) | Adjust the video frame rate. | -| [setZoom()](#setzoom) | Adjust the video zoom ratio. | -| [turnOffTorch()](#turnofftorch) | Turn off the torch/flashlight. | -| [turnOnTorch()](#turnontorch) | Turn on the torch/flashlight. | - ---- - -## getCapabilities - -Get the camera capabilities. - -> This method should be called when the camera is turned on. Note that it only works with Chromium-based browsers such as Edge and Chrome on Windows or Android. Other browsers such as Firefox or Safari are not supported. Note that all browsers on iOS (including Chrome) use WebKit as the rendering engine and are not supported. - -```javascript -getCapabilities() returns MediaTrackCapabilities -``` - -### Return Value - -`MediaTrackCapabilities` - -### Example - -```javascript -> scanner.getCapabilities() -< { - "aspectRatio":{"max":3840,"min":0.000462962962962963}, - "colorTemperature": {max: 7000, min: 2850, step: 50}, - "deviceId":"1e...3af7", - "exposureCompensation": {max: 2.0000040531158447, min: -2.0000040531158447, step: 0.16666699945926666}, - "exposureMode":["continuous","manual"], - "facingMode":["environment"], - "focusMode":["continuous","single-shot","manual"], - "frameRate":{"max":30,"min":0}, - "groupId":"71...a935", - "height":{"max":2160,"min":1}, - "resizeMode":["none","crop-and-scale"], - "torch":true, - "whiteBalanceMode":["continuous","manual"], - "width":{"max":3840,"min":1}, - "zoom":{max: 606, min: 100, step: 2} - } - ``` - -### :+1: Tips and Tricks - -Check out the following APIs to modify your device capabilities (if supported). - -- [setColorTemperature](#setcolortemperature) - Adjust the video colour temperature. -- [setExposureCompensation](#setexposurecompensation) - Adjust the video exposure level. -- [setFrameRate](#setframerate) - Adjust the video frame rate. -- [setZoom](#setzoom) - Adjust the video zoom ratio. -- [turnOffTorch](#turnofftorch) - Turn off the torch/flashlight. -- [turnOnTorch](#turnontorch) -Turn on the torch/flashlight. - -## getResolution - -Get current video resolution. - -```javascript -getResolution() returns number[] -``` - -### Return Value - -`number[]` - -### Sample - -```javascript -let rsl = await scanner.getResolution(); -console.log(rsl.width + " x " + rsl.height); -``` - -[Read barcodes from live camera](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html) - -## setResolution - -Set the camera resolution. - -```javascript -setResolution(width, height) returns Promise -``` - -### Parameters - -- `width` *number* | *number[]* -- `height` *number* - -### Return Value - -Promise<ScannerPlayCallbackInfo> - -### Sample - -[Read barcodes from live camera](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html) - -## getScanSettings - -Get current scan settings of `BarcodeScanner` and saves it into a struct. - -```javascript -getScanSettings() returns Promise -``` - -### Return Value - -Promise<ScanSettings> - -### Sample - -[Read barcodes from live camera](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html) - -## updateScanSettings - -Modify and update scan settings. - -```javascript -updateScanSettings(settings) returns Promise -``` - -### Parameters -`settings` [*`ScanSettings`*](../interfaces.md#scansettings) - -### Return Value - -`Promise` - -### Sample - -[Read barcodes from live camera](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html) - - -## getVideoSettings - -Get current video settings of `BarcodeScanner` and saves it into a struct. - -```javascript -getVideoSettings() returns MediaStreamConstraints -``` - -### Return Value - -`MediaStreamConstraints` - -### Sample - -[Read barcodes from live camera](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html) - -## updateVideoSettings - -Modify and update video settings. - -```javascript -updateVideoSettings(MediaStreamConstraints) returns Promise -``` - -### Parameters -`MediaStreamConstraints` *any* - -### Return Value - -Promise<ScannerPlayCallbackInfo | void> - -### Sample - -```javascript -await scanner.updateVideoSettings({ - video: { width: { ideal: 1280 }, - height: { ideal: 720 }, - facingMode: { ideal: 'environment' } - } -}); -``` - -[Read barcodes from live camera](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html) - -## setColorTemperature - -Adjust the video colour temperature. - -> This method should be called when the camera is turned on. Note that it only works with Chromium-based browsers such as Edge and Chrome on Windows or Android. Other browsers such as Firefox or Safari are not supported. Note that all browsers on iOS (including Chrome) use WebKit as the rendering engine and are not supported. -> Check if this capability is supported by the camera using [getCapabilities](#getcapabilities). - -```javascript -setColorTemperature(value) returns Promise -``` - -### Parameters - -`value` *number* - -### Return Value - -`Promise` - -### Sample - -[Read barcodes from live camera](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html) - -## setExposureCompensation - -Adjust the video exposure level. - -> This method should be called when the camera is turned on. Note that it only works with Chromium-based browsers such as Edge and Chrome on Windows or Android. Other browsers such as Firefox or Safari are not supported. Note that all browsers on iOS (including Chrome) use WebKit as the rendering engine and are not supported. -> Check if this capability is supported by the camera using [getCapabilities](#getcapabilities). - -```javascript -setExposureCompensation(value) returns Promise -``` - -### Parameters - -`value` *number* - -### Return Value - -`Promise` - -### Sample - -[Read barcodes from live camera](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html) - -## setFrameRate - -Adjust the video frame rate. - -> This method should be called when the camera is turned on. Note that it only works with Chromium-based browsers such as Edge and Chrome on Windows or Android. Other browsers such as Firefox or Safari are not supported. Note that all browsers on iOS (including Chrome) use WebKit as the rendering engine and are not supported. -> Check if this capability is supported by the camera using [getCapabilities](#getcapabilities). - -```javascript -setFrameRate(value) returns Promise -``` - -### Parameters - -`value` *number* - -### Return Value - -`Promise` - -### Sample - -[Read barcodes from live camera](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html) - -## setZoom - -Adjust the video zoom ratio. - -> This method should be called when the camera is turned on. Note that it only works with Chromium-based browsers such as Edge and Chrome on Windows or Android. Other browsers such as Firefox or Safari are not supported. Note that all browsers on iOS (including Chrome) use WebKit as the rendering engine and are not supported. -> Check if this capability is supported by the camera using [getCapabilities](#getcapabilities). - -```javascript -setZoom(value) returns Promise -``` - -### Parameters - -`value` *number* - -### Return Value - -`Promise` - -### Sample - -[Read barcodes from live camera](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html) - -## turnOffTorch - -Turn off the torch/flashlight. - -> This method should be called when the camera is turned on. Note that it only works with Chromium-based browsers such as Edge and Chrome on Windows or Android. Other browsers such as Firefox or Safari are not supported. Note that all browsers on iOS (including Chrome) use WebKit as the rendering engine and are not supported. -> Check if this capability is supported by the camera using [getCapabilities](#getcapabilities). - -```javascript -turnOffTorch() returns Promise -``` - -### Return Value - -`Promise` - -### Sample - -[Read barcodes from live camera](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html) - -## turnOnTorch - -Turn on the torch/flashlight. - -> This method should be called when the camera is turned on. Note that it only works with Chromium-based browsers such as Edge and Chrome on Windows or Android. Other browsers such as Firefox or Safari are not supported. Note that all browsers on iOS (including Chrome) use WebKit as the rendering engine and are not supported. -> Check if this capability is supported by the camera using [getCapabilities](#getcapabilities). - -```javascript -turnOnTorch() returns Promise -``` - -### Return Value - -`Promise` - -### Sample - -[Read barcodes from live camera](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html) diff --git a/programming-old/javascript/api-reference/BarcodeScanner/methods/index-v7.6.0.md b/programming-old/javascript/api-reference/BarcodeScanner/methods/index-v7.6.0.md deleted file mode 100644 index 03ef3b23..00000000 --- a/programming-old/javascript/api-reference/BarcodeScanner/methods/index-v7.6.0.md +++ /dev/null @@ -1,85 +0,0 @@ ---- -layout: default-layout -title: v7.6.0 BarcodeScanner Methods - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows BarcodeScanner Methods of Dynamsoft Barcode Reader JavaScript SDK. -keywords: methods, BarcodeScanner, api reference, javascript, js -needAutoGenerateSidebar: false -breadcrumbText: Methods -permalink: /programming/javascript/api-reference/BarcodeScanner/methods/index-v7.6.0.html ---- - - -# Dynamsoft Barcode Reader SDK - Javascript BarcodeScanner Methods - -The `BarcodeScanner` class is used for **video** decoding. - -## Initialize and Destroy - -The following methods are related to initializing and destroying the `BarcodeScanner` object. - -| Method | Description | -|----------------------|-------------| -| [createInstance()](initialize-and-destroy.md#createinstance) | Create a `BarcodeScanner` object. | -| [destroy()](initialize-and-destroy.md#destroy) | Destroy the `BarcodeScanner` object. | -| [getUIElement()](initialize-and-destroy.md#getuielement) | Get HTML element containing the `BarcodeScanner` object. | -| [setUIElement()](initialize-and-destroy.md#setuielement) | Set html element containing the `BarcodeScanner` object. | - -## Camera Controls - -The following methods are related to controlling the camera and its settings. - -| Method | Description | -|----------------------|-------------| -| [getAllCameras()](camera-controls.md#getallcameras) | Get information of all available cameras on the device. | -| [getCurrentCamera()](camera-controls.md#getcurrentcamera) | Get information about the currently used camera. | -| [setCurrentCamera()](camera-controls.md#setcurrentcamera) | Set camera by its information or device ID. | -| [hide()](camera-controls.md#hide) | Stop the camera and hide the camera UI element. | -| [show()](camera-controls.md#show) | Show the camera UI element, open the camera, and start decoding. | -| [close()](camera-controls.md#close) | Close and release the camera. | -| [isOpen()](camera-controls.md#isopen) | Check if the camera is open. | -| [open()](camera-controls.md#open) | Open the camera. | -| [pause()](camera-controls.md#pause) | Pause the video stream. | -| [play()](camera-controls.md#play) | Continue the video stream. | -| [stop()](camera-controls.md#stop) | Stop the video and release the camera. | -| [pauseScan()](camera-controls.md#pausescan) | Pause the video decoding process. | -| [resumeScan()](camera-controls.md#resumescan) | Resume the video decoding process. | - -## Capture Settings - -The following methods are related to the camera's capture settings. - -| Method | Description | -|----------------------|-------------| -| [getCapabilities()](capture-settings.md#getcapabilities) | Get the camera capabilities. | -| [getResolution()](capture-settings.md#getresolution) | Get current video resolution. | -| [setResolution()](capture-settings.md#setresolution) | Set current video resolution. | -| [getScanSettings()](capture-settings.md#getscansettings) | Get current scan settings. | -| [updateScanSettings()](capture-settings.md#updatescansettings) | Modify and update scan settings. | -| [getVideoSettings()](capture-settings.md#getvideosettings) | Get current video settings. | -| [updateVideoSettings()](capture-settings.md#updatevideosettings) | Modify and update video settings. | -| [setColorTemperature()](capture-settings.md#setcolortemperature) | Adjust the video colour temperature. | -| [setExposureCompensation()](capture-settings.md#setexposurecompensation) | Adjust the video exposure level. | -| [setFrameRate()](capture-settings.md#setframerate) | Adjust the video frame rate. | -| [setZoom()](capture-settings.md#setzoom) | Adjust the video zoom ratio. | -| [turnOffTorch()](capture-settings.md#turnofftorch) | Turn off the torch/flashlight. | -| [turnOnTorch()](capture-settings.md#turnontorch) | Turn on the torch/flashlight. | - -## Runtime Settings - -The following methods are related to customizing runtime settings. - -| Method | Description | -|----------------------|-------------| -| [updateRuntimeSettings()](runtime-settings.md#updateruntimesettings.md) | Modify and update the current runtime settings. | - -## Inherited Methods - -The following methods are inherited from the `BarcodeReader` class. - -* [detectEnvironment()](../../BarcodeReader/methods/initialize-and-destroy.md#detectenvironment) -* [isLoaded()](../../BarcodeReader/methods/initialize-and-destroy.md#isloaded) -* [loadWasm()](../../BarcodeReader/methods/initialize-and-destroy.md#loadwasm) -* [getModeArgument()](../../BarcodeReader/methods/parameter-and-runtime-settings.md#getmodeargument) -* [setModeArgument()](../../BarcodeReader/methods/parameter-and-runtime-settings.md#setmodeargument) -* [getRuntimeSettings()](../../BarcodeReader/methods/parameter-and-runtime-settings.md#getruntimesettings) -* [resetRuntimeSettings()](../../BarcodeReader/methods/parameter-and-runtime-settings.md#resetruntimesettings) diff --git a/programming-old/javascript/api-reference/BarcodeScanner/methods/index.md b/programming-old/javascript/api-reference/BarcodeScanner/methods/index.md deleted file mode 100644 index 3afbc6bf..00000000 --- a/programming-old/javascript/api-reference/BarcodeScanner/methods/index.md +++ /dev/null @@ -1,96 +0,0 @@ ---- -layout: default-layout -title: BarcodeScanner Methods - Dynamsoft Barcode Reader JavaScript Edition API Reference -description: This page shows BarcodeScanner Methods of Dynamsoft Barcode Reader JavaScript SDK. -keywords: methods, BarcodeScanner, api reference, javascript, js -needAutoGenerateSidebar: false -breadcrumbText: Methods -permalink: /programming/javascript/api-reference/BarcodeScanner/methods/index.html ---- - - -> This page is applicable to version 8.2.3 - -# `BarcodeScanner` Methods - -## *Class* Methods - -### Initialize - -The following methods are related to the initialization of `BarcodeScanner` instances. - -| Method | Description | -|----------------------|-------------| -| [createInstance()](initialize-and-destroy.md#createinstance) | Create a `BarcodeScanner` instance. | -| [detectEnvironment()](../BarcodeReader/methods/initialize-and-destroy.md#detectenvironment) | Detect the current environment. Inherited from the `BarcodeReader` class. | -| [isLoaded()](../BarcodeReader/methods/initialize-and-destroy.md#isloaded) | Check if the decoding module is loaded. Inherited from the `BarcodeReader` class. | -| [loadWasm()](../BarcodeReader/methods/initialize-and-destroy.md#loadwasm) | Manually load and compile the decoding WASM module. Inherited from the `BarcodeReader` class. | - -## *Instance* Methods - -The `BarcodeScanner` class is used for **video** decoding. - -### Destroy - -| Method | Description | -|----------------------|-------------| -| [destroy()](initialize-and-destroy.md#destroy) | Destroy the `BarcodeScanner` instance. | - -### UI Element - -| Method | Description | -|----------------------|-------------| -| [getUIElement()](initialize-and-destroy.md#getuielement) | Get HTML element containing the `BarcodeScanner` instance. | -| [setUIElement()](initialize-and-destroy.md#setuielement) | Set html element containing the `BarcodeScanner` instance. | - -### Camera Control - -The following methods are related to controlling the camera and its settings. - -| Method | Description | -|----------------------|-------------| -| [getAllCameras()](camera-controls.md#getallcameras) | Get information of all available cameras on the device. | -| [getCurrentCamera()](camera-controls.md#getcurrentcamera) | Get information about the currently used camera. | -| [setCurrentCamera()](camera-controls.md#setcurrentcamera) | Set camera by its information or device ID. | -| [show()](camera-controls.md#show) | Show the camera UI element, open the camera, and start decoding. | -| [hide()](camera-controls.md#hide) | Stop the camera and hide the camera UI element. | -| [open()](camera-controls.md#open) | Open the camera. | -| [close()](camera-controls.md#close) | Close and release the camera. | -| [isOpen()](camera-controls.md#isopen) | Check if the camera is open. | -| [play()](camera-controls.md#play) | Continue the video stream. | -| [pause()](camera-controls.md#pause) | Pause the video stream. | -| [stop()](camera-controls.md#stop) | Stop the video and release the camera. | -| [pauseScan()](camera-controls.md#pausescan) | Pause the video decoding process. | -| [resumeScan()](camera-controls.md#resumescan) | Resume the video decoding process. | - -### Capture Settings - -The following methods are related to the camera's capture settings. - -| Method | Description | -|----------------------|-------------| -| [getCapabilities()](capture-settings.md#getcapabilities) | Get the camera capabilities. | -| [getResolution()](capture-settings.md#getresolution) | Get current video resolution. | -| [setResolution()](capture-settings.md#setresolution) | Set current video resolution. | -| [getScanSettings()](capture-settings.md#getscansettings) | Get current scan settings. | -| [updateScanSettings()](capture-settings.md#updatescansettings) | Modify and update scan settings. | -| [getVideoSettings()](capture-settings.md#getvideosettings) | Get current video settings. | -| [updateVideoSettings()](capture-settings.md#updatevideosettings) | Modify and update video settings. | -| [setColorTemperature()](capture-settings.md#setcolortemperature) | Adjust the video colour temperature. | -| [setExposureCompensation()](capture-settings.md#setexposurecompensation) | Adjust the video exposure level. | -| [setFrameRate()](capture-settings.md#setframerate) | Adjust the video frame rate. | -| [setZoom()](capture-settings.md#setzoom) | Adjust the video zoom ratio. | -| [turnOnTorch()](capture-settings.md#turnontorch) | Turn on the torch/flashlight. | -| [turnOffTorch()](capture-settings.md#turnofftorch) | Turn off the torch/flashlight. | - -### Runtime Settings - -The following methods are related to customizing runtime settings. - -| Method | Description | -|----------------------|-------------| -| [getRuntimeSettings()](../BarcodeReader/methods/parameter-and-runtime-settings.md#getruntimesettings) | Get current runtime settings. Inherited from the `BarcodeReader` class. | -| [resetRuntimeSettings()](../BarcodeReader/methods/parameter-and-runtime-settings.md#resetruntimesettings) | Reset runtime settings to default.Inherited from the `BarcodeReader` class. | -| [updateRuntimeSettings()](runtime-settings.md#updateruntimesettings.md) | Modify and update the current runtime settings. | -| [getModeArgument()](../BarcodeReader/methods/parameter-and-runtime-settings.md#getmodeargument) | Get argument value for the specified mode parameter. Inherited from the `BarcodeReader` class. | -| [setModeArgument()](../BarcodeReader/methods/parameter-and-runtime-settings.md#setmodeargument) | Set argument value for the specified mode parameter. Inherited from the `BarcodeReader` class. | diff --git a/programming-old/javascript/api-reference/BarcodeScanner/methods/inherited.md b/programming-old/javascript/api-reference/BarcodeScanner/methods/inherited.md deleted file mode 100644 index 3eca0f52..00000000 --- a/programming-old/javascript/api-reference/BarcodeScanner/methods/inherited.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -layout: default-layout -title: BarcodeScanner Inherited Methods from BarcodeReader - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows BarcodeScanner Inherited Methods of Dynamsoft Barcode Reader JavaScript SDK. -keywords: detectEnvironment, isLoaded, loadWasm, getModeArgument, setModeArgument, getRuntimeSettings, resetRuntimeSettings, inherited methods, BarcodeReader, BarcodeScanner, api reference, javascript, js -needAutoGenerateSidebar: false -permalink: /programming/javascript/api-reference/BarcodeScanner/methods/inherited.html ---- - - -> This page is applicable to version 8.2.3 - -# Javascript API Reference - Inherited Methods from `BarcodeReader` - -## Inherited Methods - -| Method | Description | -|----------------------|-------------| -| [detectEnvironment()](../../BarcodeReader/methods/initialize-and-destroy.md#detectenvironment) | Detect the current environment. | -| [isLoaded()](../../BarcodeReader/methods/initialize-and-destroy.md#isloaded) | Check if the decoding module is loaded. | -| [loadWasm()](../../BarcodeReader/methods/initialize-and-destroy.md#loadwasm) | Manually load and compile the decoding WASM module. | -| [getModeArgument()](../../BarcodeReader/methods/parameter-and-runtime-settings.md#getmodeargument) | Get argument value for the specified mode parameter. | -| [setModeArgument()](../../BarcodeReader/methods/parameter-and-runtime-settings.md#setmodeargument) | Set argument value for the specified mode parameter. | -| [getRuntimeSettings()](../../BarcodeReader/methods/parameter-and-runtime-settings.md#getruntimesettings) | Get current runtime settings. | -| [resetRuntimeSettings()](../../BarcodeReader/methods/parameter-and-runtime-settings.md#resetruntimesettings) | Reset runtime settings to default. | diff --git a/programming-old/javascript/api-reference/BarcodeScanner/methods/initialize-and-destroy.md b/programming-old/javascript/api-reference/BarcodeScanner/methods/initialize-and-destroy.md deleted file mode 100644 index 3ab027ca..00000000 --- a/programming-old/javascript/api-reference/BarcodeScanner/methods/initialize-and-destroy.md +++ /dev/null @@ -1,113 +0,0 @@ ---- -layout: default-layout -title: BarcodeScanner Initialize and Destroy Methods - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows BarcodeScanner Initialize and Destroy Methods of Dynamsoft Barcode Reader JavaScript SDK. -keywords: createInstance, destroy, getUIElement, setUIElement, initialize and destroy methods, BarcodeScanner, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: false -permalink: /programming/javascript/api-reference/BarcodeScanner/methods/initialize-and-destroy.html ---- - - -> This page is applicable to version 8.2.3 - -# Javascript API Reference - `BarcodeScanner` Initialize and Destroy Methods - -| Method | Description | -|----------------------|-------------| -| [createInstance()](#createinstance) | Create a `BarcodeScanner` object. | -| [destroy()](#destroy) | Destroy the `BarcodeScanner` object. | -| [getUIElement()](#getuielement) | Get HTML element containing the `BarcodeScanner` object. | -| [setUIElement()](#setuielement) | Set HTML element containing the `BarcodeScanner` object. | - ---- - -## createInstance - -Create a `BarcodeScanner` object. Overrides `BarcodeReader.createInstance`. - -```javascript -createInstance(config) returns Promise -``` - -### Parameters - -`config`optional *any* - -### Return Value - -Promise<BarcodeScanner> - -[test](../index.md#barcodescanner) - -### Sample - -```javascript -let scanner = await Dynamsoft.BarcodeScanner.createInstance(); -``` - -[Read barcodes from live camera](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html) - -## destroy - -Destroy the `BarcodeScanner` object. Equivalent to the previous method `deleteInstance()`. Overrides `BarcodeReader.destroy`. - -```javascript -destroy() returns Promise -``` - -### Return Value - -`Promise` - -## getUIElement - -Get the HTML element containing the `BarcodeScanner` object. - -```javascript -getUIElement() returns HTMLElement -``` - -### Return Value - -`HTMLElement` - -### Sample - -[Read barcodes from live camera](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html) - -## setUIElement - -Set HTML element containing the `BarcodeScanner` object. - -```javascript -setUIElement(elementOrUrl) returns Promise -``` - -### Parameters - -`elementOrUrl` *HTMLElement | string* - -### Return Value - -`Promise` - -### Sample - -```html - - -
    - -``` - -[Read barcodes from live camera](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html) - -### :+1: Tips and Tricks - -* This API changes the UI on the fly. If you want the UI to change as soon as the camera is created, use [defaultUIElementURL](../accessors.md#defaultuielementurl) instead. diff --git a/programming-old/javascript/api-reference/BarcodeScanner/methods/runtime-settings.md b/programming-old/javascript/api-reference/BarcodeScanner/methods/runtime-settings.md deleted file mode 100644 index be958969..00000000 --- a/programming-old/javascript/api-reference/BarcodeScanner/methods/runtime-settings.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -layout: default-layout -title: BarcodeScanner Runtime Settings Methods - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows BarcodeScanner Runtime Settings Methods of Dynamsoft Barcode Reader JavaScript SDK. -keywords: updateRuntimeSettings, runtime settings methods, BarcodeScanner, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: false -permalink: /programming/javascript/api-reference/BarcodeScanner/methods/runtime-settings.html ---- - - -> This page is applicable to version 8.2.3 - -# Javascript API Reference - `BarcodeScanner` Runtime Settings Methods - -| Method | Description | -|----------------------|-------------| -| [updateRuntimeSettings()](#updateruntimesettings) | Modify and update the current runtime settings. | - ---- - -## updateRuntimeSettings - -Update the runtime settings with a given object or use the string `speed`, `balance`, or `coverage` to use our preset settings for `BarcodeScanner`. The default setting is `speed`. Overrides [BarcodeReader.UpdateRuntimeSettings](../../BarcodeReader/methods/parameter-and-runtime-settings.md#updateruntimesettings). - -```javascript -updateRuntimeSettings(settings) returns Promise -``` - -### Parameters - -`settings` [*RuntimeSettings*](../interfaces.md#runtimesettings) | *string* - -### Return Value - -`Promise` - -### Sample - -```javascript -await scanner.updateRuntimeSettings('balance'); -let settings = await scanner.getRuntimeSettings(); -settings.barcodeFormatIds = Dynamsoft.EnumBarcodeFormat.BF_ONED; -await scanner.updateRuntimeSettings(settings); -``` - -[Read barcodes from live camera](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html) diff --git a/programming-old/javascript/api-reference/BarcodeScanner/properties-v7.6.0.md b/programming-old/javascript/api-reference/BarcodeScanner/properties-v7.6.0.md deleted file mode 100644 index cefeb4b1..00000000 --- a/programming-old/javascript/api-reference/BarcodeScanner/properties-v7.6.0.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -layout: default-layout -title: BarcodeScanner Properties - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows BarcodeScanner Properties of Dynamsoft Barcode Reader JavaScript SDK. -keywords: bPlaySoundOnSuccessfulRead, barcodeFillStyle, barcodeLineWidth, barcodeStrokeStyle, regionMaskFillStyle, regionMaskLineWidth, regionMaskStrokeStyle, onFrameRead, onPlayed, onUnduplicatedRead, properties, BarcodeScanner, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: false -permalink: /programming/javascript/api-reference/BarcodeScanner/properties-v7.6.0.html ---- - - -# Javascript API Reference - `BarcodeScanner` Properties - -| Property | Description | -|----------------------|-------------| -| [bPlaySoundOnSuccessfulRead](#bplaysoundonsuccessfulread) | Set when a sound is played if a barcode is read successfully. | -| [barcodeFillStyle](#barcodefillstyle) | Set the style used when filling in located barcode. | -| `barcodeLineWidth` | Set the width of the located barcode border. | -| [barcodeStrokeStyle](#barcodestrokestyle) | Set the style of the located barcode border. | -| [regionMaskFillStyle](#regionmaskfillstyle) | Set the style used when filling the mask beyond the region. | -| `regionMaskLineWidth` | Set the width of the region border. | -| [regionMaskStrokeStyle](#regionmaskstrokestyle) | Set the style of the region border. | -| [onFrameRead](#onframeread) | Triggered when a frame has been scanned. | -| [onPlayed](#onplayed) | Triggered when the camera video stream is played. | -| [onUnduplicatedRead](#onunduplicatedread) | Triggered when a new, unduplicated barcode is found. | - -### Inherited Properties From `BarcodeReader` - -| Property | Description | -|----------------------|-------------| -| [_bUseFullFeature](../BarcodeReader/properties.md#_busefullfeature) | If set to `true`, use the fully-featured WASM module. | -| `bDestroyed` | Indicates whether a `BarcodeScanner` object has been destroyed. | -| `bSaveOriCanvas` | If set to `true`, save the original image to canvas. | -| `oriCanvas` | The original canvas element. | - ---- - -## bPlaySoundOnSuccessfulRead - -Set when a sound is played if a barcode is read successfully. Default value is `false`, which does not play a sound. - -Use `frame` or `true` to play a sound when any barcode is found within a frame. Use `unduplicated` to play a sound only when any unique/unduplicated barcode is found within a frame. - -```javascript -scanner.bPlaySoundOnSuccessfulRead = false; - -scanner.bPlaySoundOnSuccessfulRead = true; - -scanner.bPlaySoundOnSuccessfulRead = "frame"; - -scanner.bPlaySoundOnSuccessfulRead = "unduplicated"; -``` - -## barcodeFillStyle - -Set the style used when filling in the located barcode. - -```javascript -barcodeFillStyle = "rgba(red, green, blue, alpha)" -``` - -### Property Values - -- `red` *number* -- `green` *number* -- `blue` *number* -- `alpha` *number* - -## barcodeStrokeStyle - -Set the style of the located barcode border. - -```javascript -barcodeStrokeStyle = "rgba(red, green, blue, alpha)" -``` - -### Property Values - -- `red` *number* -- `green` *number* -- `blue` *number* -- `alpha` *number* - -## regionMaskFillStyle - -Set the style used when filling the mask beyond the region. - -```javascript -regionMaskFillStyle = "rgba(red, green, blue, alpha)" -``` - -### Property Values - -- `red` *number* -- `green` *number* -- `blue` *number* -- `alpha` *number* - -## regionMaskStrokeStyle - -Set the style of the region border. - -```javascript -regionMaskStrokeStyle = "rgb(red, green, blue)" -``` - -### Property Values - -- `red` *number* -- `green` *number* -- `blue` *number* - -## onFrameRead - -This event is triggered when a single frame has been scanned. The results object contains all the barcode results that the reader was able to decode. - -### Type Declaration - -```javascript -(results: TextResult[]): void -``` - -### Parameters - -`results` [*`TextResult`*](interfaces.md#textresult)[] - -### Return Value - -`void` - -### Sample - -```javascript -scanner.onFrameRead = results => { - for(let result of results){ - console.log(result.barcodeText); - } -}; -``` -[Read barcodes from live camera](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html) - -## onPlayed - -This event is triggered the camera video stream is played. - -### Type Declaration - -```javascript -(info: ScannerPlayCallbackInfo): void -``` - -### Parameters - -`info` [*`ScannerPlayCallbackInfo`*](interfaces.md#scannerplaycallbackinfo) - -### Return Value - -`void` - -### Sample - -[Read barcodes from live camera](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html) - -## onUnduplicatedRead - -This event is triggered when a new, unduplicated barcode is found. `txt` holds the barcode text result. `result` contains the actual barcode result, including the text result. Old barcodes will be remembered for [duplicateForgetTime](interfaces.md#scansettings). - -### Type Declaration - -```javascript -(txt: string, result: TextResult): void -``` - -### Parameters - -- `txt` *string* -- `result` [*`TextResult`*](../global-interfaces.md#textresult)[] - -### Return Value - -`void` - -### Sample - -```javascript -scanner.onUnduplicatedRead = (txt, result) => { - alert(txt); - console.log(result); -}; -``` - -[Read barcodes from live camera](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html) diff --git a/programming-old/javascript/api-reference/BarcodeScanner/properties.md b/programming-old/javascript/api-reference/BarcodeScanner/properties.md deleted file mode 100644 index 3ee4af5b..00000000 --- a/programming-old/javascript/api-reference/BarcodeScanner/properties.md +++ /dev/null @@ -1,264 +0,0 @@ ---- -layout: default-layout -title: BarcodeScanner Properties - Dynamsoft Barcode Reader JavaScript Edition API Reference -description: This page shows BarcodeScanner Properties of Dynamsoft Barcode Reader JavaScript SDK. -keywords: defaultUIElementURL, singleFrameMode, soundOnSuccessfulRead, bPlaySoundOnSuccessfulRead, barcodeFillStyle, barcodeLineWidth, barcodeStrokeStyle, regionMaskFillStyle, regionMaskLineWidth, regionMaskStrokeStyle, onFrameRead, onPlayed, onUnduplicatedRead, properties, BarcodeScanner, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: false -permalink: /programming/javascript/api-reference/BarcodeScanner/properties.html ---- - - -> This page is applicable to version 8.2.3 - -# `BarcodeScanner` Properties - -* *Class* Properties - -| Property | Description | -|----------------------|-------------| -| [defaultUIElementURL](#defaultuielementurl) | Get or set the default scanner UI. | -| [bUseFullFeature](../BarcodeReader/properties.md#_busefullfeature) | If set to `false`, use the compact-featured WASM module. Inherited from the `BarcodeReader` class. | -| [engineResourcePath](../BarcodeReader/properties.md#engineresourcepath) | Get or set the engine (WASM) location. Inherited from the `BarcodeReader` class. | -| [productKeys](../BarcodeReader/properties.md#productkeys) | Get or set the Dynamsoft Barcode Reader SDK product keys. Inherited from the `BarcodeReader` class. | -| [version](../BarcodeReader/properties.md#version) | Get the current version. Inherited from the `BarcodeReader` class. | -| [licenseServer](../BarcodeReader/properties.md#licenseServer) | Specify by URL the license server from where authorization is acquired at runtime. Inherited from the `BarcodeReader` class. | -| [handshakeCode](../BarcodeReader/properties.md#handshakeCode) | Specify the Handshake Code which determines what authorization is acquired. Inherited from the `BarcodeReader` class. | -| [sessionPassword](../BarcodeReader/properties.md#sessionPassword) | Specify a password which protects the Handshake Code from abuse. Inherited from the `BarcodeReader` class. | - -* *Instance* Properties - -| Property | Description | -|----------------------|-------------| -| `bDestroyed` | Indicates whether a `BarcodeScanner` instance has been destroyed. Inherited from the `BarcodeReader` class. | -| `bSaveOriCanvas` | If set to `true`, save the original image in `oriCanvas`. Inherited from the `BarcodeReader` class. | -| `oriCanvas` | An [OffscreenCanvas](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas) object that holds the original image. Inherited from the `BarcodeReader` class. | -| `_bUseWebgl` | Whether to enable image preprocessing with WebGL APIs, this API may change in the future. Inherited from the `BarcodeReader` class. | -| [bPlaySoundOnSuccessfulRead](#bplaysoundonsuccessfulread) | If set to `true`, a sound will be played when a barcode is read successfully. You can change the sound using [soundOnSuccessfulRead](#soundonsuccessfulread)| -| [barcodeFillStyle](#barcodefillstyle) | Set the style used when filling in located barcode. | -| `barcodeLineWidth` | Set the width of the located barcode border. | -| [barcodeStrokeStyle](#barcodestrokestyle) | Set the style of the located barcode border. | -| [regionMaskFillStyle](#regionmaskfillstyle) | Set the style used when filling the mask beyond the region. | -| `regionMaskLineWidth` | Set the width of the region border. | -| [regionMaskStrokeStyle](#regionmaskstrokestyle) | Set the style of the region border. | -| [onFrameRead](#onframeread) | Triggered when a frame has been scanned. | -| [onPlayed](#onplayed) | Triggered when the camera video stream is played. | -| [onUnduplicatedRead](#onunduplicatedread) | Triggered when a new, unduplicated barcode is found. | -| [singleFrameMode](#singleframemode) | If set to `true`, single video frames will be used instead of a continuous video stream. | -| [soundOnSuccessfulRead](#soundonsuccessfulread) | Get or set the sound to play when a barcode is read successfully. | - -## defaultUIElementURL - -Get or set the default scanner UI. The default scanner UI is defined in the file `dist/dbr.scanner.html`. Follow [these steps](../../user-guide/basic-customizations.md#customizing-the-ui) to customize the UI. - -```javascript -defaultUIElementURL = 'url' -``` - -### Property Value - -`url` *string* - -### :+1: Tips and Tricks - -* Be sure to set `defaultUIElementURL` before you call `createInstance`. - -## singleFrameMode - -Get or set the camera mode. If `true`, single video frames will be used instead of a continuous video stream. It's especially useful for cameras that lack webcam access (lack of WebRTC support, e.g. Chrome on iOS 14.2 and below). - -```javascript -singleFrameMode = bool; -``` - -### Property Value - -`bool` *boolean* - -### Sample - -```javascript -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -scanner.singleFrameMode = true; // use singleFrameMode anyway -scanner.show(); -``` - -### :+1: Tips and Tricks - -* `singleFrameMode` is based on WebRTC support, not actual camera connection. In other words, if a browser supports WebRTC, it won't be using `singleFrameMode` by default even when there is no camera attached. - -* By default, when the default UI is used, a camera icon will appear for the `singleFrameMode` which is defined by a SVG (`className` is `dbrScanner-bg-camera`). If you have customized the UI, you will have to provide your own UI implementation for this mode. - -## soundOnSuccessfulRead - -Get or set the sound played when a barcode is read successfully. - -```javascript -soundOnSuccessfulRead = audio -``` - -### Property Value - -`audio` *HTMLAudioElement* - -### Sample - -```javascript -scanner.soundOnSuccessfulRead = new Audio("./pi.mp3"); -``` - -## bPlaySoundOnSuccessfulRead - -Set when a sound is played if a barcode is read successfully. Default value is `false`, which does not play a sound. - -Use `frame` or `true` to play a sound when any barcode is found within a frame. Use `unduplicated` to play a sound only when any unique/unduplicated barcode is found within a frame. - -```javascript -scanner.bPlaySoundOnSuccessfulRead = false; - -scanner.bPlaySoundOnSuccessfulRead = true; - -scanner.bPlaySoundOnSuccessfulRead = "frame"; - -scanner.bPlaySoundOnSuccessfulRead = "unduplicated"; -``` - -## barcodeFillStyle - -Set the style used when filling in the located barcode. - -```javascript -barcodeFillStyle = "rgba(red, green, blue, alpha)" -``` - -### Property Values - -- `red` *number* -- `green` *number* -- `blue` *number* -- `alpha` *number* - -## barcodeStrokeStyle - -Set the style of the located barcode border. - -```javascript -barcodeStrokeStyle = "rgba(red, green, blue, alpha)" -``` - -### Property Values - -- `red` *number* -- `green` *number* -- `blue` *number* -- `alpha` *number* - -## regionMaskFillStyle - -Set the style used when filling the mask beyond the region. - -```javascript -regionMaskFillStyle = "rgba(red, green, blue, alpha)" -``` - -### Property Values - -- `red` *number* -- `green` *number* -- `blue` *number* -- `alpha` *number* - -## regionMaskStrokeStyle - -Set the style of the region border. - -```javascript -regionMaskStrokeStyle = "rgb(red, green, blue)" -``` - -### Property Values - -- `red` *number* -- `green` *number* -- `blue` *number* - -## onFrameRead - -This event is triggered when a single frame has been scanned. The results object contains all the barcode results that the reader was able to decode. - -### Type Declaration - -```javascript -(results: TextResult[]): void -``` - -### Parameters - -`results` [*`TextResult`*](interfaces.md#textresult)[] - -### Return Value - -`void` - -### Sample - -```javascript -scanner.onFrameRead = results => { - for(let result of results){ - console.log(result.barcodeText); - } -}; -``` -[Read barcodes from live camera](https://demo.dynamsoft.com/barcode-reader-js/) - -## onPlayed - -This event is triggered the camera video stream is played. - -### Type Declaration - -```javascript -(info: ScannerPlayCallbackInfo): void -``` - -### Parameters - -`info` [*`ScannerPlayCallbackInfo`*](interfaces.md#scannerplaycallbackinfo) - -### Return Value - -`void` - -### Sample - -[Read barcodes from live camera](https://demo.dynamsoft.com/barcode-reader-js/) - -## onUnduplicatedRead - -This event is triggered when a new, unduplicated barcode is found. `txt` holds the barcode text result. `result` contains the actual barcode result, including the text result. Old barcodes will be remembered for [duplicateForgetTime](interfaces.md#scansettings). - -### Type Declaration - -```javascript -(txt: string, result: TextResult): void -``` - -### Parameters - -- `txt` *string* -- `result` [*`TextResult`*](../global-interfaces.md#textresult)[] - -### Return Value - -`void` - -### Sample - -```javascript -scanner.onUnduplicatedRead = (txt, result) => { - alert(txt); - console.log(result); -}; -``` - -[Read barcodes from live camera](https://demo.dynamsoft.com/barcode-reader-js/) diff --git a/programming-old/javascript/api-reference/InitializationControl-v8.2.5.md b/programming-old/javascript/api-reference/InitializationControl-v8.2.5.md deleted file mode 100644 index b8474449..00000000 --- a/programming-old/javascript/api-reference/InitializationControl-v8.2.5.md +++ /dev/null @@ -1,132 +0,0 @@ ---- -layout: default-layout -title: v8.2.5 Initialization Control - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows the Initialization Control of the BarcodeReader Class of Dynamsoft Barcode Reader JavaScript SDK. -keywords: BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -noTitleIndex: true -breadcrumbText: BarcodeReader -permalink: /programming/javascript/api-reference/InitializationControl-v8.2.5.html ---- - -# Initialization Control - -The following static methods and properties help to set up the runtime environment for the library. - -- [Initialization Control](#initialization-control) - - [\_bUseFullFeature](#_busefullfeature) - - [engineResourcePath](#engineresourcepath) - - [loadWasm](#loadwasm) - - [isLoaded](#isloaded) - - [version](#version) - - [detectEnvironment](#detectenvironment) - - - -## _bUseFullFeature - -Whether to use the full engine. The property needs to be set before [loadWasm](#loadwasm). - -```typescript -static _bUseFullFeature: boolean -``` - -**Default value** - -`false` - -**Code Snippet** - -```js -Dynamsoft.DBR.BarcodeReader._bUseFullFeature = true; -await Dynamsoft.DBR.BarcodeReader.loadWasm(); -``` - -**See also** - -* [differences between compact and full WASM engines](../user-guide/index.html#specify-which-engine-to-use). - - - -## engineResourcePath - -Specifies the path to find the engine(s). The property needs to be set before [loadWasm](#loadwasm). If not specified, the library will try to find the engine in the same location as the main JavaScript file (dbr.js). - -```typescript -static engineResourcePath: string -``` - -**Code Snippet** - -```js -Dynamsoft.DBR.BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.2.5/dist/"; -await Dynamsoft.DBR.BarcodeReader.loadWasm(); -``` - - - -## loadWasm - -Downloads and compiles the engine to get it loaded/ready for a BarcodeReader or BarcodeScanner instance to be created. You can call this API to silently set the operating environment of the library as soon as the page is loaded, avoiding unnecessary waiting time when using the library later. - -If this API is not called beforehand, it will be called automatically when creating an instance of BarcodeReader or BarcodeScanner. - -```typescript -static loadWasm(): Promise -``` - -**Code Snippet** - -```js -window.addEventListener('DOMContentLoaded', (event) => { - Dynamsoft.DBR.BarcodeReader.loadWasm(); -}); -``` - - - -## isLoaded - -Returns whether the engine is loaded/ready. - -```typescript -static isLoaded(): boolean -``` - - - -## version - -Returns the version of the library including the detailed version numbers of the engine and the main JavaScript code. - -Needs to call after [loadWasm](#loadwasm). - -```typescript -readonly static version: string -``` - -**Code Snippet** - -```js -console.log(Dynamsoft.DBR.BarcodeReader.version); -await Dynamsoft.DBR.BarcodeReader.loadWasm(); -console.log(Dynamsoft.DBR.BarcodeReader.version); -``` - - - -## detectEnvironment - -Returns a report on the current running environments. - -```typescript -static detectEnvironment(): Promise -``` - -**Code Snippet** - -```js -console.log(Dynamsoft.DBR.BarcodeReader.detectEnvironment()); -// {"wasm":true, "worker":true, "getUserMedia":true, "camera":true, "browser":"Chrome", "version":90, "OS":"Windows"} -``` diff --git a/programming-old/javascript/api-reference/InitializationControl-v8.4.0.md b/programming-old/javascript/api-reference/InitializationControl-v8.4.0.md deleted file mode 100644 index 9b762548..00000000 --- a/programming-old/javascript/api-reference/InitializationControl-v8.4.0.md +++ /dev/null @@ -1,132 +0,0 @@ ---- -layout: default-layout -title: v8.4.0 Initialization Control - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows the Initialization Control of the BarcodeReader Class of Dynamsoft Barcode Reader JavaScript SDK. -keywords: BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -noTitleIndex: true -breadcrumbText: BarcodeReader -permalink: /programming/javascript/api-reference/InitializationControl-v8.4.0.html ---- - -# Initialization Control - -The following static methods and properties help to set up the runtime environment for the library. - -- [Initialization Control](#initialization-control) - - [\_bUseFullFeature](#_busefullfeature) - - [engineResourcePath](#engineresourcepath) - - [loadWasm](#loadwasm) - - [isLoaded](#isloaded) - - [version](#version) - - [detectEnvironment](#detectenvironment) - - - -## _bUseFullFeature - -Whether to use the full engine. The property needs to be set before [loadWasm](#loadwasm). - -```typescript -static _bUseFullFeature: boolean -``` - -**Default value** - -`false` - -**Code Snippet** - -```js -Dynamsoft.DBR.BarcodeReader._bUseFullFeature = true; -await Dynamsoft.DBR.BarcodeReader.loadWasm(); -``` - -**See also** - -* [differences between compact and full WASM engines](../user-guide/index.html?ver=8.4.0#specify-which-engine-to-use). - - - -## engineResourcePath - -Specifies the path to find the engine(s). The property needs to be set before [loadWasm](#loadwasm). If not specified, the library will try to find the engine in the same location as the main JavaScript file (dbr.js). - -```typescript -static engineResourcePath: string -``` - -**Code Snippet** - -```js -Dynamsoft.DBR.BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.4.0/dist/"; -await Dynamsoft.DBR.BarcodeReader.loadWasm(); -``` - - - -## loadWasm - -Downloads and compiles the engine to get it loaded/ready for a BarcodeReader or BarcodeScanner instance to be created. You can call this API to silently set the operating environment of the library as soon as the page is loaded, avoiding unnecessary waiting time when using the library later. - -If this API is not called beforehand, it will be called automatically when creating an instance of BarcodeReader or BarcodeScanner. - -```typescript -static loadWasm(): Promise -``` - -**Code Snippet** - -```js -window.addEventListener('DOMContentLoaded', (event) => { - Dynamsoft.DBR.BarcodeReader.loadWasm(); -}); -``` - - - -## isLoaded - -Returns whether the engine is loaded/ready. - -```typescript -static isLoaded(): boolean -``` - - - -## version - -Returns the version of the library including the detailed version numbers of the engine and the main JavaScript code. - -Needs to call after [loadWasm](#loadwasm). - -```typescript -readonly static version: string -``` - -**Code Snippet** - -```js -console.log(Dynamsoft.DBR.BarcodeReader.version); // "loading...(JS 8.2.5.20210426)" -await Dynamsoft.DBR.BarcodeReader.loadWasm(); -console.log(Dynamsoft.DBR.BarcodeReader.version); // "8.4.0.8960(JS 8.2.5.20210426)" -``` - - - -## detectEnvironment - -Returns a report on the current running environments. - -```typescript -static detectEnvironment(): Promise -``` - -**Code Snippet** - -```js -console.log(Dynamsoft.DBR.BarcodeReader.detectEnvironment()); -// {"wasm":true, "worker":true, "getUserMedia":true, "camera":true, "browser":"Chrome", "version":90, "OS":"Windows"} -``` diff --git a/programming-old/javascript/api-reference/InitializationControl-v8.6.0.md b/programming-old/javascript/api-reference/InitializationControl-v8.6.0.md deleted file mode 100644 index 2be0ca20..00000000 --- a/programming-old/javascript/api-reference/InitializationControl-v8.6.0.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -layout: default-layout -title: v8.6.0 Initialization Control - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows the Initialization Control of the BarcodeReader Class of Dynamsoft Barcode Reader JavaScript SDK. -keywords: BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -noTitleIndex: true -breadcrumbText: BarcodeReader -permalink: /programming/javascript/api-reference/InitializationControl-v8.6.0.html ---- - -# Initialization Control - -The following static methods and properties help to set up the runtime environment for the library. - -- [Initialization Control](#initialization-control) - - [engineResourcePath](#engineresourcepath) - - [loadWasm](#loadwasm) - - [isWasmLoaded](#iswasmloaded) - - [version](#version) - - [detectEnvironment](#detectenvironment) - -## engineResourcePath - -Specifies the path to find the engine(s). The property needs to be set before [loadWasm](#loadwasm). If not specified, the library will try to find the engine in the same location as the main JavaScript file (dbr.js). - -```typescript -static engineResourcePath: string -``` - -**Code Snippet** - -```js -Dynamsoft.DBR.BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.6.0/dist/"; -await Dynamsoft.DBR.BarcodeReader.loadWasm(); -``` - -## loadWasm - -Downloads and compiles the engine to get it loaded/ready for a BarcodeReader or BarcodeScanner instance to be created. You can call this API to silently set the operating environment of the library as soon as the page is loaded, avoiding unnecessary waiting time when using the library later. - -If this API is not called beforehand, it will be called automatically when creating an instance of BarcodeReader or BarcodeScanner. - -```typescript -static loadWasm(): Promise -``` - -**Code Snippet** - -```js -window.addEventListener('DOMContentLoaded', (event) => { - Dynamsoft.DBR.BarcodeReader.loadWasm(); -}); -``` - - - -## isWasmLoaded - -Returns whether the engine is loaded/ready. - -```typescript -static isWasmLoaded(): boolean -``` - - - -## version - -Returns the version of the library including the detailed version numbers of the engine and the main JavaScript code. - -Needs to call after [loadWasm](#loadwasm). - -```typescript -readonly static version: string -``` - -**Code Snippet** - -```js -console.log(Dynamsoft.DBR.BarcodeReader.version); -await Dynamsoft.DBR.BarcodeReader.loadWasm(); -console.log(Dynamsoft.DBR.BarcodeReader.version); -``` - - - -## detectEnvironment - -Returns a report on the current running environments. - -```typescript -static detectEnvironment(): Promise -``` - -**Code Snippet** - -```js -console.log(Dynamsoft.DBR.BarcodeReader.detectEnvironment()); -// {"wasm":true, "worker":true, "getUserMedia":true, "camera":true, "browser":"Chrome", "version":90, "OS":"Windows"} -``` diff --git a/programming-old/javascript/api-reference/InitializationControl-v8.8.7.md b/programming-old/javascript/api-reference/InitializationControl-v8.8.7.md deleted file mode 100644 index 1cf01229..00000000 --- a/programming-old/javascript/api-reference/InitializationControl-v8.8.7.md +++ /dev/null @@ -1,101 +0,0 @@ ---- -layout: default-layout -title: v8.8.7 Initialization Control - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows the APIs related to the initialization control of the BarcodeReader Class of Dynamsoft Barcode Reader JavaScript SDK. -keywords: BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -noTitleIndex: true -breadcrumbText: BarcodeReader -permalink: /programming/javascript/api-reference/InitializationControl-v8.8.7.html ---- - -# Initialization Control - -The following static methods and properties help to set up the runtime environment for the library. - -- [Initialization Control](#initialization-control) - - [engineResourcePath](#engineresourcepath) - - [loadWasm](#loadwasm) - - [isLoaded](#isloaded) - - [version](#version) - - [detectEnvironment](#detectenvironment) - -## engineResourcePath - -Specifies the path to find the engine(s). The property needs to be set before [loadWasm](#loadwasm). If not specified, the library will try to find the engine in the same location as the main JavaScript file (dbr.js). - -```typescript -static engineResourcePath: string -``` - -**Code Snippet** - -```js -Dynamsoft.DBR.BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.7/dist/"; -await Dynamsoft.DBR.BarcodeReader.loadWasm(); -``` - -## loadWasm - -Downloads and compiles the engine to get it loaded/ready for a BarcodeReader or BarcodeScanner instance to be created. You can call this API to silently set the operating environment of the library as soon as the page is loaded, avoiding unnecessary waiting time when using the library later. - -If this API is not called beforehand, it will be called automatically when creating an instance of BarcodeReader or BarcodeScanner. - -```typescript -static loadWasm(): Promise -``` - -**Code Snippet** - -```js -window.addEventListener('DOMContentLoaded', (event) => { - Dynamsoft.DBR.BarcodeReader.loadWasm(); -}); -``` - - - -## isLoaded - -Returns whether the engine is loaded/ready. - -```typescript -static isLoaded(): boolean -``` - -## version - -Returns the version of the library including the detailed version numbers of the engine and the main JavaScript code. - -The engine version is only valid after [loadWasm](#loadwasm) has been called. - -```typescript -readonly static version: string -``` - -**Code Snippet** - -```js -console.log(Dynamsoft.DBR.BarcodeReader.version); -// loading...(JS 8.8.3.20211011) -await Dynamsoft.DBR.BarcodeReader.loadWasm(); -console.log("When loaded..." + Dynamsoft.DBR.BarcodeReader.version); -// 8.8.0.10403(JS 8.8.3.20211011) -``` - -## detectEnvironment - -Returns a report on the current running environments. - -```typescript -static detectEnvironment(): Promise -``` - -**Code Snippet** - -```js -console.log(Dynamsoft.DBR.BarcodeReader.detectEnvironment()); -// {"wasm":true, "worker":true, "getUserMedia":true, "camera":true, -// "browser":"Chrome", "version":90, "OS":"Windows"} -``` diff --git a/programming-old/javascript/api-reference/InitializationControl-v9.0.2.md b/programming-old/javascript/api-reference/InitializationControl-v9.0.2.md deleted file mode 100644 index b725ff00..00000000 --- a/programming-old/javascript/api-reference/InitializationControl-v9.0.2.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -layout: default-layout -title: Initialization Control - Dynamsoft Barcode Reader JavaScript Edition API -description: Follow this API reference and learn to set up initialization control functionality in Dynamsoft Barcode Reader JavaScript Edition. -keywords: BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -noTitleIndex: true -breadcrumbText: BarcodeReader -permalink: /programming/javascript/api-reference/InitializationControl-v9.0.2.html ---- - -# Initialization Control - -The following static methods and properties help to set up the runtime environment for the library. - -* [engineResourcePath](#engineresourcepath) -* [loadWasm()](#loadwasm) -* [isWasmLoaded()](#iswasmloaded) -* [version](#version) -* [detectEnvironment()](#detectenvironment) - -## engineResourcePath - -Specifies the path to find the engine(s). The property needs to be set before [loadWasm](#loadwasm). If not specified, the library will try to find the engine in the same location as the main JavaScript file (dbr.js). - -```typescript -static engineResourcePath: string -``` - -**Code Snippet** - -```js -Dynamsoft.DBR.BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.0.2/dist/"; -await Dynamsoft.DBR.BarcodeReader.loadWasm(); -``` - -## loadWasm - -Downloads and compiles the engine to get it loaded/ready for a BarcodeReader or BarcodeScanner instance to be created. You can call this API to silently set the operating environment of the library as soon as the page is loaded, avoiding unnecessary waiting time when using the library later. - -If this API is not called beforehand, it will be called automatically when creating an instance of BarcodeReader or BarcodeScanner. - -```typescript -static loadWasm(): Promise -``` - -**Code Snippet** - -```js -window.addEventListener('DOMContentLoaded', (event) => { - Dynamsoft.DBR.BarcodeReader.loadWasm(); -}); -``` - -## isWasmLoaded - -Returns whether the engine is loaded/ready. - -```typescript -static isLoaded(): boolean -``` - -## version - -Returns the version of the library including the detailed version numbers of the engine and the main JavaScript code. - -The engine version is only valid after [loadWasm](#loadwasm) has been called. - -```typescript -readonly static version: string -``` - -**Code Snippet** - -```js -console.log(Dynamsoft.DBR.BarcodeReader.version); -// loading...(JS 8.8.3.20211011) -await Dynamsoft.DBR.BarcodeReader.loadWasm(); -console.log("When loaded..." + Dynamsoft.DBR.BarcodeReader.version); -// 8.8.0.10403(JS 8.8.3.20211011) -``` - -## detectEnvironment - -Returns a report on the current running environments. - -```typescript -static detectEnvironment(): Promise -``` - -**Code Snippet** - -```js -console.log(Dynamsoft.DBR.BarcodeReader.detectEnvironment()); -// {"wasm":true, "worker":true, "getUserMedia":true, "camera":true, -// "browser":"Chrome", "version":90, "OS":"Windows"} -``` diff --git a/programming-old/javascript/api-reference/InitializationControl.md b/programming-old/javascript/api-reference/InitializationControl.md deleted file mode 100644 index 85d3e030..00000000 --- a/programming-old/javascript/api-reference/InitializationControl.md +++ /dev/null @@ -1,166 +0,0 @@ ---- -layout: default-layout -title: Initialization Control - Dynamsoft Barcode Reader JavaScript Edition API -description: Follow this API reference and learn to set up initialization control functionality in Dynamsoft Barcode Reader JavaScript Edition. -keywords: BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -noTitleIndex: true -breadcrumbText: BarcodeReader -permalink: /programming/javascript/api-reference/InitializationControl.html ---- - -# Initialization Control - -The following static methods and properties help to set up the runtime environment for the library. - -- [Initialization Control](#initialization-control) - - [engineResourcePath](#engineresourcepath) - - [loadWasm](#loadwasm) - - [Return Value](#return-value) - - [isWasmLoaded](#iswasmloaded) - - [version](#version) - - [detectEnvironment](#detectenvironment) - - [onWarning](#onwarning) - -## engineResourcePath - -Specifies the path to find the engine(s). The property needs to be set before [loadWasm](#loadwasm). If not specified, the library will try to find the engine in the same location as the main JavaScript file (dbr.js). - -```typescript -static engineResourcePath: string -``` - -**Code Snippet** - -```js -Dynamsoft.DBR.BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.42/dist/"; -await Dynamsoft.DBR.BarcodeReader.loadWasm(); -``` - -## loadWasm - -Downloads and compiles the engine to get it loaded/ready for a `BarcodeReader` or `BarcodeScanner` instance to be created. You can call this API to silently set the operating environment of the library as soon as the page is loaded, avoiding unnecessary waiting time when using the library later. - -If this API is not called beforehand, it will be called automatically when creating an instance of `BarcodeReader` or `BarcodeScanner`. - -```typescript -static loadWasm(): Promise -``` - -### Return Value - -A promise that resolves when the operation succeeds. - -**Code Snippet** - -```js -window.addEventListener('DOMContentLoaded', (event) => { - Dynamsoft.DBR.BarcodeReader.loadWasm(); -}); -``` - -**:+1: Tips and Tricks ** - -* [How to get rid of the delay when opening the camera?]({{ site.faq_js }}delay-when-open-camera.html) - -## isWasmLoaded - -Returns whether the engine is loaded/ready. - -```typescript -static isWasmLoaded(): boolean -``` - -## version - -Returns the version of the library including the detailed version numbers of the engine and the main JavaScript code. - -The engine version is only valid after [loadWasm](#loadwasm) has been called. - -```typescript -readonly static version: string -``` - -**Code Snippet** - -```js -console.log(Dynamsoft.DBR.BarcodeReader.version); -// loading...(JS 8.8.3.20211011) -await Dynamsoft.DBR.BarcodeReader.loadWasm(); -console.log("When loaded..." + Dynamsoft.DBR.BarcodeReader.version); -// 8.8.0.10403(JS 8.8.3.20211011) -``` - -## detectEnvironment - -Detects the current running environment and returns a report. - -```typescript -static detectEnvironment(): Promise -``` - -**Return value** - -A promise resolving to an object which contains some information of the current running environment. - -**Code Snippet** - -```js -console.log(await Dynamsoft.DBR.BarcodeReader.detectEnvironment()); -// {"wasm":true, "worker":true, "getUserMedia":true, "camera":true, -// "browser":"Chrome", "version":90, "OS":"Windows"} -``` - -## onWarning - -A callback which is triggered when the running environment is not ideal. In this version, it may get triggered in two scenarios: - -1. If the page is opened from the disk -2. The page is hosted in a HTTP site without SSL - -In both cases, the following warning is returned: - -```js -{ - id: 2, - message: "Not connected via SSL (HTTPS), the SDK may not work correctly." -} -``` - -**Code Snippet** - -```js -Dynamsoft.DBR.BarcodeScanner.onWarning = warning => console.log(warning.message); -``` - -**See Also** - -[Warning](interface/warning.md) - - - \ No newline at end of file diff --git a/programming-old/javascript/api-reference/InterfacesEnums.md b/programming-old/javascript/api-reference/InterfacesEnums.md deleted file mode 100644 index 7772eefc..00000000 --- a/programming-old/javascript/api-reference/InterfacesEnums.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -layout: default-layout -title: Interfaces and Enums - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows Interfaces and Enums of Dynamsoft Barcode Reader JavaScript SDK. -keywords: BarcodeScanner, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -noTitleIndex: true -breadcrumbText: BarcodeScanner -permalink: /programming/javascript/api-reference/InterfacesEnums.html ---- - -# Interfaces and Enums - -In order to make the code more predictable and readable, the library defines a series of supporting interfaces and enumerations. - -## Interfaces - -* [LocalizationResult](interface/LocalizationResult.md) -* [Region](interface/Region.md) -* [RuntimeSettings](interface/RuntimeSettings.md) -* [FurtherModes](interface/FurtherModes.md) -* [ScannerPlayCallbackInfo](interface/ScannerPlayCallbackInfo.md) -* [ScanSettings](interface/ScanSettings.md) -* [TextResult](interface/TextResult.md) -* [VideoDeviceInfo](interface/VideoDeviceInfo.md) -* [ImageSource](interface/imagesource.md) -* [DSImage](interface/dsimage.md) - -## Enums - -* [EnumBarcodeColourMode](enum/EnumBarcodeColourMode.md) -* [EnumBarcodeComplementMode](enum/EnumBarcodeComplementMode.md) -* [EnumBarcodeFormat](enum/EnumBarcodeFormat.md) -* [EnumBarcodeFormat_2](enum/EnumBarcodeFormat_2.md) -* [EnumBinarizationMode](enum/EnumBinarizationMode.md) -* [EnumClarityCalculationMethod](enum/EnumClarityCalculationMethod.md) -* [EnumClarityFilterMode](enum/EnumClarityFilterMode.md) -* [EnumColourClusteringMode](enum/EnumColourClusteringMode.md) -* [EnumColourConversionMode](enum/EnumColourConversionMode.md) -* [EnumConflictMode](enum/EnumConflictMode.md) -* [EnumDeblurMode](enum/EnumDeblurMode.md) -* [EnumDeformationResistingMode](enum/EnumDeformationResistingMode.md) -* [EnumDPMCodeReadingMode](enum/EnumDPMCodeReadingMode.md) -* [EnumErrorCode](enum/EnumErrorCode.md) -* [EnumGrayscaleTransformationMode](enum/EnumGrayscaleTransformationMode.md) -* [EnumImagePixelFormat](enum/EnumImagePixelFormat.md) -* [EnumImagePreprocessingMode](enum/EnumImagePreprocessingMode.md) -* [EnumIMResultDataType](enum/EnumIMResultDataType.md) -* [EnumIntermediateResultSavingMode](enum/EnumIntermediateResultSavingMode.md) -* [EnumIntermediateResultType](enum/EnumIntermediateResultType.md) -* [EnumLocalizationMode](enum/EnumLocalizationMode.md) -* [EnumPDFReadingMode](enum/EnumPDFReadingMode.md) -* [EnumQRCodeErrorCorrectionLevel](enum/EnumQRCodeErrorCorrectionLevel.md) -* [EnumRegionPredetectionMode](enum/EnumRegionPredetectionMode.md) -* [EnumResultCoordinateType](enum/EnumResultCoordinateType.md) -* [EnumResultType](enum/EnumResultType.md) -* [EnumScaleUpMode](enum/EnumScaleUpMode.md) -* [EnumTerminatePhase](enum/EnumTerminatePhase.md) -* [EnumTextFilterMode](enum/EnumTextFilterMode.md) -* [EnumTextResultOrderMode](enum/EnumTextResultOrderMode.md) -* [EnumTextureDetectionMode](enum/EnumTextureDetectionMode.md) \ No newline at end of file diff --git a/programming-old/javascript/api-reference/LicenseControl-v8.8.7.md b/programming-old/javascript/api-reference/LicenseControl-v8.8.7.md deleted file mode 100644 index fb2bc009..00000000 --- a/programming-old/javascript/api-reference/LicenseControl-v8.8.7.md +++ /dev/null @@ -1,167 +0,0 @@ ---- -layout: default-layout -title: v8.8.7 License Control - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows the License Control APIs of Dynamsoft Barcode Reader JavaScript SDK. -keywords: License Control, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -noTitleIndex: true -breadcrumbText: License Control -permalink: /programming/javascript/api-reference/LicenseControl-v8.8.7.html ---- - -# License Control - -The library provides flexible licensing options with the support of the following APIs - -* [license](#license) -* [licenseServer](#licenseserver) -* [sessionPassword](#sessionpassword) -* [deviceFriendlyName](#devicefriendlyname) - -Deprecated APIs: - -* [organizationID](#organizationid) -* [handshakeCode](#handshakecode) -* [productKeys](#productkeys) - -## license - -An online license or an offline license can be set here. Most license formats are supported. Dynamsoft usually provides an online license. - -`license` needs to be set before `createInstance()` or `loadWasm()`. - -```typescript -static license: string -``` - -**Code Snippet** - -```js -Dynamsoft.DBR.BarcodeReader.license = - "YOUR-ORGANIZATION-ID or YOUR-HANDSHAKECODE or AN-OFFLINE-LICENSE or ANY-OTHER-TYPE-OF-SUPPORTED-LICENSE-STRING"; -let scanner = await Dynamsoft.DBR.BarcodeReader.createInstance(); -``` - -For convenience, you can even set `license` in the `script` tag. - -```html - -``` - -> Note: -> -> **Handshake Code and Organization ID** -> -> When you are using the online licenses, the license items can't be used directly. You need to use either a "Handshake Code" or an "Organization ID" instead. -> -> The "Handshake Code" refers to an array of license items. When an "Handshake Code" is set, these license items will be consumed in a preset order. -> -> When an "Organization ID" is set, the default "Handshake Code" of the "Organization ID" will be used. -> -> Generally, the first "Handshake Code" ever created for an organization is the default one. However, you can always configure another "Handshake Code" as the default. -> -> "Handshake Codes" can be configured in the [customer portal](https://www.dynamsoft.com/lts/#/handshakeCodes). - -## licenseServer - -Specifies the URL(s) for the main and stand-by License Tracking Server(s). This is only required when you host the License Tracking Server(s) yourself. If nothing is set, the Server(s) hosted by Dynamsoft will be used. - -```typescript -static licenseServer: string[] | string -``` - -**Code Snippet** - -```js -// You can specify only the main server -Dynamsoft.DBR.BarcodeReader.licenseServer = ["YOUR-OWN-MAIN-DLS"]; - -//or you can specify both -Dynamsoft.DBR.BarcodeReader.licenseServer = ["YOUR-OWN-MAIN-DLS", "YOUR-OWN-STANDBY-DLS"]; -``` - -## sessionPassword - -Specifies a password to protect the [Handshake Code](#handshakeCode). If no Handshake Code is specified with the API `handshakeCode`, this password protects the default Handshake Code. - -The password can be set for each Handshake Code when it was first created and can be changed later by editing the configuration of the Code. - -```typescript -static sessionPassword: string -``` - -**Code Snippet** - -```js -Dynamsoft.DBR.BarcodeReader.sessionPassword = "YOUR-SESSION-PASSWORD"; -``` - -## deviceFriendlyName - -static deviceFriendlyName: string - -Sets a human-readable name that identifies the device. This name will appear in the device details table when you check the statistics of the according Handshake Code or License Item. - -**Code Snippet** - -```js -Dynamsoft.DBR.BarcodeReader.deviceFriendlyName = "Harry-Potter-iPhone"; -``` - -## organizationID - -**Please NOTE that this API is deprecated! Use [license](#license) instead.** - -When a license is purchased, it is registered to an Organization. This license is then hosted by a License Tracking Server which authorizes terminal devices and consumes the license. This API specifies which Organization you would like to acquire authorization from. - -```typescript -static organizationID: string -``` - -**Code Snippet** - -```js -Dynamsoft.DBR.BarcodeReader.organizationID = "YOUR-ORGANIZATION-ID"; -``` - -## handshakeCode - -**Please NOTE that this API is deprecated! Use [license](#license) instead.** - -Licenses registered to the same Organization are grouped by Handshake Codes. When an Organization is specified by `organizationID`, the default Handshake Code will be used unless another Code is specified with this API. - -Generally, the first Handshake Code ever created for an organization is the default one. However, you can always make another Code default in the [customer portal](https://www.dynamsoft.com/lts/#/handshakeCodes). - -```typescript -static handshakeCode: string -``` - -**Code Snippet** - -```js -Dynamsoft.DBR.BarcodeReader.handshakeCode = "YOUR-HANDSHAKE-CODE"; -``` - -## productKeys - -**Please NOTE that this API is deprecated! Use [license](#license) instead.** - -A product key is an alphanumeric string used as an offline license. If such a key is specified in your program, you do not need to specify anything else for licensing purposes. - -```typescript -static productKeys: string -``` - -**Code Snippet** - -```js -Dynamsoft.DBR.BarcodeReader.productKeys = "YOUR-PRODUCT-KEYS"; -``` - -For convenience, you can even set `productKeys` in the `script` tag. - -```html - -``` diff --git a/programming-old/javascript/api-reference/LicenseControl.md b/programming-old/javascript/api-reference/LicenseControl.md deleted file mode 100644 index 3ade8a76..00000000 --- a/programming-old/javascript/api-reference/LicenseControl.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -layout: default-layout -title: License Control - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows the License Control APIs of Dynamsoft Barcode Reader JavaScript SDK. -keywords: License Control, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -noTitleIndex: true -breadcrumbText: License Control -permalink: /programming/javascript/api-reference/LicenseControl.html ---- - -# License Control - -- [License Control](#license-control) - - [license](#license) - - [deviceFriendlyName](#devicefriendlyname) - -## license - -Specify an online license or an offline license. Dynamsoft usually provides an online license. - -`license` needs to be set before `createInstance()` or `loadWasm()`. - -> NOTE: -> -> Another way to set the license is to use the `script` tag's `data-license` attribute. - -```typescript -static license: string -``` - -**Code Snippet** - -```html - -``` -or -```js -Dynamsoft.DBR.BarcodeReader.license = "YOUR-LICENSE-KEY"; -``` - -## deviceFriendlyName - -Sets a human-readable name that identifies the device. This name will appear in the device details table when you check the statistics of the according license. - -``` typescript -static deviceFriendlyName: string -``` - -**Default value** - -`""` - -**Code Snippet** - -```js -Dynamsoft.DBR.BarcodeReader.deviceFriendlyName = "Harry-Potter-iPhone"; -``` diff --git a/programming-old/javascript/api-reference/enum/EnumBarcodeColourMode.md b/programming-old/javascript/api-reference/enum/EnumBarcodeColourMode.md deleted file mode 100644 index e491d854..00000000 --- a/programming-old/javascript/api-reference/enum/EnumBarcodeColourMode.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -layout: default-layout -title: EnumBarcodeColourMode - Dynamsoft Barcode Reader JavaScript Edition API -description: Use this enum data type to set constants for colour mode of barcodes when using Dynamsoft Barcode Reader JavaScript Edition in your project.. -keywords: EnumBarcodeColourMode, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: EnumBarcodeColourMode -permalink: /programming/javascript/api-reference/enum/EnumBarcodeColourMode.html ---- - - -# EnumBarcodeColourMode - -```typescript -enum EnumBarcodeColourMode{ - BICM_DARK_ON_LIGHT = 0x01, - BICM_LIGHT_ON_DARK = 0x02, - BICM_DARK_ON_DARK = 0x04, - BICM_LIGHT_ON_LIGHT = 0x08, - BICM_DARK_LIGHT_MIXED = 0x10, - BICM_DARK_ON_LIGHT_DARK_SURROUNDING = 0x20, - BICM_SKIP = 0x00, - BICM_REV = 0x80000000 -} -``` diff --git a/programming-old/javascript/api-reference/enum/EnumBarcodeComplementMode.md b/programming-old/javascript/api-reference/enum/EnumBarcodeComplementMode.md deleted file mode 100644 index 938ce66e..00000000 --- a/programming-old/javascript/api-reference/enum/EnumBarcodeComplementMode.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -layout: default-layout -title: EnumBarcodeComplementMode - Dynamsoft Barcode Reader JavaScript Edition API -description: Use this enum data type to set constants for complement mode of barcodes when using Dynamsoft Barcode Reader JavaScript Edition in your project.. -keywords: EnumBarcodeComplementMode, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: EnumBarcodeComplementMode -permalink: /programming/javascript/api-reference/enum/EnumBarcodeComplementMode.html ---- - - -# EnumBarcodeComplementMode - -```typescript -enum EnumBarcodeComplementMode{ - BCM_AUTO = 0x01, - BCM_GENERAL = 0x02, - BCM_SKIP = 0x00, - BCM_REV = 0x80000000 -} -``` diff --git a/programming-old/javascript/api-reference/enum/EnumBarcodeFormat-v8.8.7.md b/programming-old/javascript/api-reference/enum/EnumBarcodeFormat-v8.8.7.md deleted file mode 100644 index 77979837..00000000 --- a/programming-old/javascript/api-reference/enum/EnumBarcodeFormat-v8.8.7.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -layout: default-layout -title: EnumBarcodeFormat - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows the EnumBarcodeFormat of the BarcodeReader Class of Dynamsoft Barcode Reader JavaScript SDK. -keywords: EnumBarcodeFormat, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: EnumBarcodeFormat -permalink: /programming/javascript/api-reference/enum/EnumBarcodeFormat-v8.8.7.html ---- - - -# EnumBarcodeFormat - -```typescript -enum EnumBarcodeFormat{ - BF_ALL = -31457281, - BF_ONED = 0x001007FF, - BF_GS1_DATABAR = 0x0003F800, - BF_CODE_39 = 0x1, - BF_CODE_128 = 0x2, - BF_CODE_93 = 0x4, - BF_CODABAR = 0x8, - BF_ITF = 0x10, - BF_EAN_13 = 0x20, - BF_EAN_8 = 0x40, - BF_UPC_A = 0x80, - BF_UPC_E = 0x100, - BF_INDUSTRIAL_25 = 0x200, - BF_CODE_39_EXTENDED = 0x400, - BF_GS1_DATABAR_OMNIDIRECTIONAL = 0x800, - BF_GS1_DATABAR_TRUNCATED = 0x1000, - BF_GS1_DATABAR_STACKED = 0x2000, - BF_GS1_DATABAR_STACKED_OMNIDIRECTIONAL = 0x4000, - BF_GS1_DATABAR_EXPANDED = 0x8000, - BF_GS1_DATABAR_EXPANDED_STACKED = 0x10000, - BF_GS1_DATABAR_LIMITED = 0x20000, - BF_PATCHCODE = 0x00040000, - BF_PDF417 = 0x02000000, - BF_QR_CODE = 0x04000000, - BF_DATAMATRIX = 0x08000000, - BF_AZTEC = 0x10000000, - BF_MAXICODE = 0x20000000, - BF_MICRO_QR = 0x40000000, - BF_MICRO_PDF417 = 0x00080000, - BF_GS1_COMPOSITE = -2147483648, - BF_MSI_CODE = 0x100000, - BF_NULL = 0x00 -} -``` - -See [C++ EnumBarcodeFormat](https://www.dynamsoft.com/barcode-reader/parameters/enum/format-enums.html?ver=latest#barcodeformat) for more info. diff --git a/programming-old/javascript/api-reference/enum/EnumBarcodeFormat.md b/programming-old/javascript/api-reference/enum/EnumBarcodeFormat.md deleted file mode 100644 index 32ca2cc7..00000000 --- a/programming-old/javascript/api-reference/enum/EnumBarcodeFormat.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -layout: default-layout -title: EnumBarcodeFormat - Dynamsoft Barcode Reader JavaScript Edition API -description: ThUse this enum data type to set constants for barcode format when using Dynamsoft Barcode Reader JavaScript Edition in your project.. -keywords: EnumBarcodeFormat, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: EnumBarcodeFormat -permalink: /programming/javascript/api-reference/enum/EnumBarcodeFormat.html ---- - - -# EnumBarcodeFormat - -```typescript -enum EnumBarcodeFormat{ - BF_ALL = 0xFE3FFFFF, - BF_ONED = 0x3007FF, - BF_GS1_DATABAR = 0x3F800, - BF_CODE_39 = 0x1, - BF_CODE_128 = 0x2, - BF_CODE_93 = 0x4, - BF_CODABAR = 0x8, - BF_CODE_11 = 0x200000, - BF_ITF = 0x10, - BF_EAN_13 = 0x20, - BF_EAN_8 = 0x40, - BF_UPC_A = 0x80, - BF_UPC_E = 0x100, - BF_INDUSTRIAL_25 = 0x200, - BF_CODE_39_EXTENDED = 0x400, - BF_GS1_DATABAR_OMNIDIRECTIONAL = 0x800, - BF_GS1_DATABAR_TRUNCATED = 0x1000, - BF_GS1_DATABAR_STACKED = 0x2000, - BF_GS1_DATABAR_STACKED_OMNIDIRECTIONAL = 0x4000, - BF_GS1_DATABAR_EXPANDED = 0x8000, - BF_GS1_DATABAR_EXPANDED_STACKED = 0x10000, - BF_GS1_DATABAR_LIMITED = 0x20000, - BF_PATCHCODE = 0x40000, - BF_PDF417 = 0x2000000, - BF_QR_CODE = 0x4000000, - BF_DATAMATRIX = 0x8000000, - BF_AZTEC = 0x10000000, - BF_MAXICODE = 0x20000000, - BF_MICRO_QR = 0x40000000, - BF_MICRO_PDF417 = 0x80000, - BF_GS1_COMPOSITE = 0x80000000, - BF_MSI_CODE = 0x100000, - BF_NULL = 0x00 -} -``` diff --git a/programming-old/javascript/api-reference/enum/EnumBarcodeFormat_2-v8.8.7.md b/programming-old/javascript/api-reference/enum/EnumBarcodeFormat_2-v8.8.7.md deleted file mode 100644 index 3b20b161..00000000 --- a/programming-old/javascript/api-reference/enum/EnumBarcodeFormat_2-v8.8.7.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -layout: default-layout -title: EnumBarcodeFormat_2 - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows the EnumBarcodeFormat_2 of the BarcodeReader Class of Dynamsoft Barcode Reader JavaScript SDK. -keywords: EnumBarcodeFormat_2, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: EnumBarcodeFormat_2 -permalink: /programming/javascript/api-reference/enum/EnumBarcodeFormat_2-v8.8.7.html ---- - - -# EnumBarcodeFormat_2 - -```typescript -enum EnumBarcodeFormat_2{ - BF2_NULL = 0x00, - BF2_POSTALCODE = 0x01F00000, - BF2_NONSTANDARD_BARCODE = 0x01, - BF2_USPSINTELLIGENTMAIL = 0x00100000, - BF2_POSTNET = 0x00200000, - BF2_PLANET = 0x00400000, - BF2_AUSTRALIANPOST = 0x00800000, - BF2_RM4SCC = 0x01000000, - BF2_DOTCODE = 0x02 -} -``` diff --git a/programming-old/javascript/api-reference/enum/EnumBarcodeFormat_2-v9.3.1.md b/programming-old/javascript/api-reference/enum/EnumBarcodeFormat_2-v9.3.1.md deleted file mode 100644 index 8d40b72c..00000000 --- a/programming-old/javascript/api-reference/enum/EnumBarcodeFormat_2-v9.3.1.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -layout: default-layout -title: EnumBarcodeFormat_2 - Dynamsoft Barcode Reader JavaScript Edition API -description: Use this enum data type to set constants for barcode format when using Dynamsoft Barcode Reader JavaScript Edition in your project.. -keywords: EnumBarcodeFormat_2, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: EnumBarcodeFormat_2 -permalink: /programming/javascript/api-reference/enum/EnumBarcodeFormat_2-v9.3.1.html ---- - - -# EnumBarcodeFormat_2 - -```typescript -enum EnumBarcodeFormat_2 { - BF2_AUSTRALIANPOST = 0x00800000, - BF2_DOTCODE = 0x02 - BF2_NONSTANDARD_BARCODE = 0x01, - BF2_NULL = 0x00, - BF2_PHARMACODE = 0x0c, - BF2_PHARMACODE_ONE_TRACK = 0x04, - BF2_PHARMACODE_TWO_TRACK = 0x08, - BF2_PLANET = 0x00400000, - BF2_POSTALCODE = 0x01F00000, - BF2_POSTNET = 0x00200000, - BF2_RM4SCC = 0x01000000, - BF2_USPSINTELLIGENTMAIL = 0x00100000 -} -``` diff --git a/programming-old/javascript/api-reference/enum/EnumBarcodeFormat_2.md b/programming-old/javascript/api-reference/enum/EnumBarcodeFormat_2.md deleted file mode 100644 index 175fa04a..00000000 --- a/programming-old/javascript/api-reference/enum/EnumBarcodeFormat_2.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -layout: default-layout -title: EnumBarcodeFormat_2 - Dynamsoft Barcode Reader JavaScript Edition API -description: Use this enum data type to set constants for barcode format when using Dynamsoft Barcode Reader JavaScript Edition in your project.. -keywords: EnumBarcodeFormat_2, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: EnumBarcodeFormat_2 -permalink: /programming/javascript/api-reference/enum/EnumBarcodeFormat_2.html ---- - - -# EnumBarcodeFormat_2 - -```typescript -enum EnumBarcodeFormat_2 { - BF2_AUSTRALIANPOST = 0x00800000, - BF2_DOTCODE = 0x02 - BF2_NONSTANDARD_BARCODE = 0x01, - BF2_NULL = 0x00, - BF2_PHARMACODE = 0x0c, - BF2_PHARMACODE_ONE_TRACK = 0x04, - BF2_PHARMACODE_TWO_TRACK = 0x08, - BF2_PLANET = 0x00400000, - BF2_POSTALCODE = 0x01F00000, - BF2_POSTNET = 0x00200000, - BF2_RM4SCC = 0x01000000, - BF2_USPSINTELLIGENTMAIL = 0x00100000, - BF2_ALL = 0xFFFFFFFF -} -``` diff --git a/programming-old/javascript/api-reference/enum/EnumBinarizationMode.md b/programming-old/javascript/api-reference/enum/EnumBinarizationMode.md deleted file mode 100644 index d54504c0..00000000 --- a/programming-old/javascript/api-reference/enum/EnumBinarizationMode.md +++ /dev/null @@ -1,23 +0,0 @@ ---- -layout: default-layout -title: EnumBinarizationMode - Dynamsoft Barcode Reader JavaScript Edition API -description: Use this enum data type to set constants for binarization mode of barcodes when using Dynamsoft Barcode Reader JavaScript Edition in your project.. -keywords: EnumBinarizationMode, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: EnumBinarizationMode -permalink: /programming/javascript/api-reference/enum/EnumBinarizationMode.html ---- - - -# EnumBinarizationMode - -```typescript -enum EnumBinarizationMode{ - BM_AUTO = 0x01, - BM_LOCAL_BLOCK = 0x02, - BM_SKIP = 0x00, - BM_THRESHOLD = 0x04, - BM_REV = 0x80000000 -} -``` diff --git a/programming-old/javascript/api-reference/enum/EnumClarityCalculationMethod.md b/programming-old/javascript/api-reference/enum/EnumClarityCalculationMethod.md deleted file mode 100644 index 6a99ec85..00000000 --- a/programming-old/javascript/api-reference/enum/EnumClarityCalculationMethod.md +++ /dev/null @@ -1,19 +0,0 @@ ---- -layout: default-layout -title: EnumClarityCalculationMethod - Dynamsoft Barcode Reader JavaScript Edition API -description: Use this enum data type to set constants for clarity calculation method of barcodes when using Dynamsoft Barcode Reader JavaScript Edition in your project.. -keywords: EnumClarityCalculationMethod, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: EnumClarityCalculationMethod -permalink: /programming/javascript/api-reference/enum/EnumClarityCalculationMethod.html ---- - - -# EnumClarityCalculationMethod - -```typescript -enum EnumClarityCalculationMethod { - ECCM_CONTRAST = 0x01 -} -``` diff --git a/programming-old/javascript/api-reference/enum/EnumClarityFilterMode.md b/programming-old/javascript/api-reference/enum/EnumClarityFilterMode.md deleted file mode 100644 index a6f89113..00000000 --- a/programming-old/javascript/api-reference/enum/EnumClarityFilterMode.md +++ /dev/null @@ -1,19 +0,0 @@ ---- -layout: default-layout -title: EnumClarityFilterMode - Dynamsoft Barcode Reader JavaScript Edition API -description: Use this enum data type to set constants for clarity filter mode of barcodes when using Dynamsoft Barcode Reader JavaScript Edition in your project.. -keywords: EnumClarityFilterMode, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: EnumClarityFilterMode -permalink: /programming/javascript/api-reference/enum/EnumClarityFilterMode.html ---- - - -# EnumClarityFilterMode - -```typescript -enum EnumClarityFilterMode { - CFM_GENERAL = 0x01 -} -``` diff --git a/programming-old/javascript/api-reference/enum/EnumColourClusteringMode.md b/programming-old/javascript/api-reference/enum/EnumColourClusteringMode.md deleted file mode 100644 index a8b19731..00000000 --- a/programming-old/javascript/api-reference/enum/EnumColourClusteringMode.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -layout: default-layout -title: EnumColourClusteringMode - Dynamsoft Barcode Reader JavaScript Edition API -description: Use this enum data type to set constants for colour clustering mode of barcodes when using Dynamsoft Barcode Reader JavaScript Edition in your project.. -keywords: EnumColourClusteringMode, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: EnumColourClusteringMode -permalink: /programming/javascript/api-reference/enum/EnumColourClusteringMode.html ---- - - -# EnumColourClusteringMode - -```typescript -enum EnumColourClusteringMode{ - CCM_AUTO = 0x00000001, - CCM_GENERAL_HSV = 0x00000002, - CCM_SKIP = 0x00, - CCM_REV = 0x80000000 -} -``` diff --git a/programming-old/javascript/api-reference/enum/EnumColourConversionMode.md b/programming-old/javascript/api-reference/enum/EnumColourConversionMode.md deleted file mode 100644 index d62d7399..00000000 --- a/programming-old/javascript/api-reference/enum/EnumColourConversionMode.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -layout: default-layout -title: EnumColourConversionMode - Dynamsoft Barcode Reader JavaScript Edition API -description: Use this enum data type to set constants for colour conversion mode of barcodes when using Dynamsoft Barcode Reader JavaScript Edition in your project.. -keywords: EnumColourConversionMode, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: EnumColourConversionMode -permalink: /programming/javascript/api-reference/enum/EnumColourConversionMode.html ---- - - -# EnumColourConversionMode - -```typescript -enum EnumColourConversionMode { - CICM_GENERAL = 0x01, - CICM_SKIP = 0x00, - CICM_REV = 0x80000000 -} -``` diff --git a/programming-old/javascript/api-reference/enum/EnumConflictMode.md b/programming-old/javascript/api-reference/enum/EnumConflictMode.md deleted file mode 100644 index e72edb9c..00000000 --- a/programming-old/javascript/api-reference/enum/EnumConflictMode.md +++ /dev/null @@ -1,20 +0,0 @@ ---- -layout: default-layout -title: EnumConflictMode - Dynamsoft Barcode Reader JavaScript Edition API -description: Use this enum data type to set constants for conflict mode of barcodes when using Dynamsoft Barcode Reader JavaScript Edition in your project.. -keywords: EnumConflictMode, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: EnumConflictMode -permalink: /programming/javascript/api-reference/enum/EnumConflictMode.html ---- - - -# EnumConflictMode - -```typescript -enum EnumConflictMode { - CM_IGNORE = 1, - CM_OVERWRITE = 2 -} -``` diff --git a/programming-old/javascript/api-reference/enum/EnumDPMCodeReadingMode.md b/programming-old/javascript/api-reference/enum/EnumDPMCodeReadingMode.md deleted file mode 100644 index b4288835..00000000 --- a/programming-old/javascript/api-reference/enum/EnumDPMCodeReadingMode.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -layout: default-layout -title: EnumDPMCodeReadingMode - Dynamsoft Barcode Reader JavaScript Edition API -description: Use this enum data type to set constants for DPM code reading mode of barcodes when using Dynamsoft Barcode Reader JavaScript Edition in your project.. -keywords: EnumDPMCodeReadingMode, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: EnumDPMCodeReadingMode -permalink: /programming/javascript/api-reference/enum/EnumDPMCodeReadingMode.html ---- - - -# EnumDPMCodeReadingMode - -```typescript -enum EnumDPMCodeReadingMode { - DPMCRM_AUTO = 0x01, - DPMCRM_GENERAL = 0x02, - DPMCRM_SKIP = 0x00, - DPMCRM_REV = 0x80000000 -} -``` diff --git a/programming-old/javascript/api-reference/enum/EnumDeblurMode.md b/programming-old/javascript/api-reference/enum/EnumDeblurMode.md deleted file mode 100644 index ce16973b..00000000 --- a/programming-old/javascript/api-reference/enum/EnumDeblurMode.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -layout: default-layout -title: EnumDeblurMode - Dynamsoft Barcode Reader JavaScript Edition API -description: Use this enum data type to set constants for deblur mode of barcodes when using Dynamsoft Barcode Reader JavaScript Edition in your project.. -keywords: EnumDeblurMode, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: EnumDeblurMode -permalink: /programming/javascript/api-reference/enum/EnumDeblurMode.html ---- - - -# EnumDeblurMode - -```typescript -enum EnumDeblurMode { - DM_SKIP = 0, - DM_DIRECT_BINARIZATION = 1, - DM_THRESHOLD_BINARIZATION = 2, - DM_GRAY_EQUALIZATION = 4, - DM_SMOOTHING = 8, - DM_MORPHING = 0x10, - DM_DEEP_ANALYSIS = 0x20, - DM_SHARPENING = 0x40 -} -``` diff --git a/programming-old/javascript/api-reference/enum/EnumDeformationResistingMode.md b/programming-old/javascript/api-reference/enum/EnumDeformationResistingMode.md deleted file mode 100644 index afb8a5fa..00000000 --- a/programming-old/javascript/api-reference/enum/EnumDeformationResistingMode.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -layout: default-layout -title: EnumDeformationResistingMode - Dynamsoft Barcode Reader JavaScript Edition API -description: Use this enum data type to set constants for deformation resisting mode of barcodes when using Dynamsoft Barcode Reader JavaScript Edition in your project.. -keywords: EnumDeformationResistingMode, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: EnumDeformationResistingMode -permalink: /programming/javascript/api-reference/enum/EnumDeformationResistingMode.html ---- - - -# EnumDeformationResistingMode - -```typescript -enum EnumDeformationResistingMode { - DRM_AUTO = 0x01, - DRM_GENERAL = 0x02, - DRM_BROAD_WARP = 0x04, - DRM_LOCAL_REFERENCE = 0x08, - DRM_DEWRINKLE = 0x10, - DRM_SKIP = 0x00, - DRM_REV = 0x80000000 -} -``` diff --git a/programming-old/javascript/api-reference/enum/EnumErrorCode.md b/programming-old/javascript/api-reference/enum/EnumErrorCode.md deleted file mode 100644 index f0da5300..00000000 --- a/programming-old/javascript/api-reference/enum/EnumErrorCode.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -layout: default-layout -title: EnumErrorCode - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows the EnumErrorCode of the BarcodeReader Class of Dynamsoft Barcode Reader JavaScript SDK. -keywords: EnumErrorCode, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: EnumErrorCode -permalink: /programming/javascript/api-reference/enum/EnumErrorCode.html ---- - -# EnumErrorCode - -```typescript -enum EnumErrorCode{ - DBR_SYSTEM_EXCEPTION = 1, - DBR_SUCCESS = 0, - DBR_UNKNOWN = -10000, - DBR_NO_MEMORY = -10001, - DBR_NULL_REFERENCE = -10002, - DBR_LICENSE_INVALID = -10003, - DBR_LICENSE_EXPIRED = -10004, - DBR_FILE_NOT_FOUND = -10005, - DBR_FILETYPE_NOT_SUPPORTED = -10006, - DBR_BPP_NOT_SUPPORTED = -10007, - DBR_INDEX_INVALID = -10008, - DBR_BARCODE_FORMAT_INVALID = -10009, - DBR_CUSTOM_REGION_INVALID = -10010, - DBR_MAX_BARCODE_NUMBER_INVALID = -10011, - DBR_IMAGE_READ_FAILED = -10012, - DBR_TIFF_READ_FAILED = -10013, - DBR_QR_LICENSE_INVALID = -10016, - DBR_1D_LICENSE_INVALID = -10017, - DBR_DIB_BUFFER_INVALID = -10018, - DBR_PDF417_LICENSE_INVALID = -10019, - DBR_DATAMATRIX_LICENSE_INVALID = -10020, - DBR_PDF_READ_FAILED = -10021, - DBR_PDF_DLL_MISSING = -10022, - DBR_PAGE_NUMBER_INVALID = -10023, - DBR_CUSTOM_SIZE_INVALID = -10024, - DBR_CUSTOM_MODULESIZE_INVALID = -10025, - DBR_RECOGNITION_TIMEOUT = -10026, - DBR_JSON_PARSE_FAILED = -10030, - DBR_JSON_TYPE_INVALID = -10031, - DBR_JSON_KEY_INVALID = -10032, - DBR_JSON_VALUE_INVALID = -10033, - DBR_JSON_NAME_KEY_MISSING = -10034, - DBR_JSON_NAME_VALUE_DUPLICATED = -10035, - DBR_TEMPLATE_NAME_INVALID = -10036, - DBR_JSON_NAME_REFERENCE_INVALID = -10037, - DBR_PARAMETER_VALUE_INVALID = -10038, - DBR_DOMAIN_NOT_MATCHED = -10039, - DBR_RESERVEDINFO_NOT_MATCHED = -10040, - DBR_AZTEC_LICENSE_INVALID = -10041, - DBR_LICENSE_DLL_MISSING = -10042, - DBR_LICENSEKEY_NOT_MATCHED = -10043, - DBR_REQUESTED_FAILED = -10044, - DBR_LICENSE_INIT_FAILED = -10045, - DBR_PATCHCODE_LICENSE_INVALID = -10046, - DBR_POSTALCODE_LICENSE_INVALID = -10047, - DBR_DPM_LICENSE_INVALID = -10048, - DBR_FRAME_DECODING_THREAD_EXISTS = -10049, - DBR_STOP_DECODING_THREAD_FAILED = -10050, - DBR_SET_MODE_ARGUMENT_ERROR = -10051, - DBR_LICENSE_CONTENT_INVALID = -10052, - DBR_LICENSE_KEY_INVALID = -10053, - DBR_LICENSE_DEVICE_RUNS_OUT = -10054, - DBR_GET_MODE_ARGUMENT_ERROR = -10055, - DBR_IRT_LICENSE_INVALID = -10056, - DBR_MAXICODE_LICENSE_INVALID = -10057, - DBR_GS1_DATABAR_LICENSE_INVALID = -10058, - DBR_GS1_COMPOSITE_LICENSE_INVALID = -10059, - DBR_PANORAMA_LICENSE_INVALID = -10060, - DBR_DOTCODE_LICENSE_INVALID = -10061, - DBR_PHARMACODE_LICENSE_INVALID = -10062, - DBR_IMAGE_ORIENTATION_INVALID = -10063, - DMERR_NO_LICENSE = -20000, - DMERR_LICENSE_SYNC_FAILED = -20003, - DMERR_TRIAL_LICENSE = -20010, - DMERR_FAILED_TO_REACH_LTS = -20200 -} -``` - -> Note: Error codes between -20199 and -20100 are thrown by the License Server. See DLS Error List for details. diff --git a/programming-old/javascript/api-reference/enum/EnumGrayscaleTransformationMode.md b/programming-old/javascript/api-reference/enum/EnumGrayscaleTransformationMode.md deleted file mode 100644 index b2cece5d..00000000 --- a/programming-old/javascript/api-reference/enum/EnumGrayscaleTransformationMode.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -layout: default-layout -title: EnumGrayscaleTransformationMode - Dynamsoft Barcode Reader JavaScript Edition API -description: Use this enum data type to set constants for grayscale transformation mode of barcodes when using Dynamsoft Barcode Reader JavaScript Edition in your project. -keywords: EnumGrayscaleTransformationMode, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: EnumGrayscaleTransformationMode -permalink: /programming/javascript/api-reference/enum/EnumGrayscaleTransformationMode.html ---- - - -# EnumGrayscaleTransformationMode - -```typescript -enum EnumGrayscaleTransformationMode { - GTM_INVERTED = 0x01, - GTM_ORIGINAL = 0x02, - GTM_SKIP = 0x00, - GTM_REV = 0x80000000 -} -``` diff --git a/programming-old/javascript/api-reference/enum/EnumIMResultDataType.md b/programming-old/javascript/api-reference/enum/EnumIMResultDataType.md deleted file mode 100644 index dd50496e..00000000 --- a/programming-old/javascript/api-reference/enum/EnumIMResultDataType.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -layout: default-layout -title: EnumIMResultDataType - Dynamsoft Barcode Reader JavaScript Edition API -description: Use this enum data type to set constants for data type result of barcodes when using Dynamsoft Barcode Reader JavaScript Edition in your project. -keywords: EnumIMResultDataType, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: EnumIMResultDataType -permalink: /programming/javascript/api-reference/enum/EnumIMResultDataType.html ---- - - -# EnumIMResultDataType - -```typescript -enum EnumIMResultDataType { - IMRDT_IMAGE = 0x01, - IMRDT_CONTOUR = 0x02, - IMRDT_LINESEGMENT = 0x04, - IMRDT_LOCALIZATIONRESULT = 0x08, - IMRDT_REGIONOFINTEREST = 0x10, - IMRDT_QUADRILATERAL = 0x20 -} -``` diff --git a/programming-old/javascript/api-reference/enum/EnumImagePixelFormat.md b/programming-old/javascript/api-reference/enum/EnumImagePixelFormat.md deleted file mode 100644 index faa1d73c..00000000 --- a/programming-old/javascript/api-reference/enum/EnumImagePixelFormat.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -layout: default-layout -title: EnumImagePixelFormat - Dynamsoft Barcode Reader JavaScript Edition API -description: Use this enum data type to set constants for image pixel format of barcodes when using Dynamsoft Barcode Reader JavaScript Edition in your project. -keywords: EnumImagePixelFormat, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: EnumImagePixelFormat -permalink: /programming/javascript/api-reference/enum/EnumImagePixelFormat.html ---- - - -# EnumImagePixelFormat - -```typescript -enum EnumImagePixelFormat{ - IPF_Binary = 0, - IPF_BinaryInverted = 1, - IPF_GrayScaled = 2, - IPF_NV21 = 3, - IPF_RGB_565 = 4, - IPF_RGB_555 = 5, - IPF_RGB_888 = 6, - IPF_ARGB_8888 = 7, - IPF_RGB_161616 = 8, - IPF_ARGB_16161616 = 9, - IPF_ABGR_8888 = 10, - IPF_ABGR_16161616 = 11, - IPF_BGR_888 = 12 -} -``` diff --git a/programming-old/javascript/api-reference/enum/EnumImagePreprocessingMode.md b/programming-old/javascript/api-reference/enum/EnumImagePreprocessingMode.md deleted file mode 100644 index d56f5b98..00000000 --- a/programming-old/javascript/api-reference/enum/EnumImagePreprocessingMode.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -layout: default-layout -title: EnumImagePreprocessingMode - Dynamsoft Barcode Reader JavaScript Edition API -description: Use this enum data type to set constants for image preprocessing mode resisting mode of barcodes when using Dynamsoft Barcode Reader JavaScript Edition in your project.. -keywords: EnumImagePreprocessingMode, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: EnumImagePreprocessingMode -permalink: /programming/javascript/api-reference/enum/EnumImagePreprocessingMode.html ---- - - -# EnumImagePreprocessingMode - -```typescript -enum EnumImagePreprocessingMode { - IPM_AUTO = 0x01, - IPM_GENERAL = 0x02, - IPM_GRAY_EQUALIZE = 0x04, - IPM_GRAY_SMOOTH = 0x08, - IPM_SHARPEN_SMOOTH = 0x10, - IPM_MORPHOLOGY = 0x20, - IPM_SKIP = 0x00, - IPM_REV = 0x80000000 - } -``` diff --git a/programming-old/javascript/api-reference/enum/EnumIntermediateResultSavingMode.md b/programming-old/javascript/api-reference/enum/EnumIntermediateResultSavingMode.md deleted file mode 100644 index d548e5f9..00000000 --- a/programming-old/javascript/api-reference/enum/EnumIntermediateResultSavingMode.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -layout: default-layout -title: EnumIntermediateResultSavingMode - Dynamsoft Barcode Reader JavaScript Edition API -description: Use this enum data type to set constants for intermediate result saving mode of barcodes when using Dynamsoft Barcode Reader JavaScript Edition in your project. -keywords: EnumIntermediateResultSavingMode, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: EnumIntermediateResultSavingMode -permalink: /programming/javascript/api-reference/enum/EnumIntermediateResultSavingMode.html ---- - - -# EnumIntermediateResultSavingMode - -```typescript -enum EnumIntermediateResultSavingMode { - IRSM_MEMORY = 0x01, - IRSM_FILESYSTEM = 0x02, - IRSM_BOTH = 0x04 -} -``` diff --git a/programming-old/javascript/api-reference/enum/EnumIntermediateResultType.md b/programming-old/javascript/api-reference/enum/EnumIntermediateResultType.md deleted file mode 100644 index 93b3a653..00000000 --- a/programming-old/javascript/api-reference/enum/EnumIntermediateResultType.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -layout: default-layout -title: EnumIntermediateResultType - Dynamsoft Barcode Reader JavaScript Edition API -description: Use this enum data type to set constants for intermediate result type of barcodes when using Dynamsoft Barcode Reader JavaScript Edition in your project. -keywords: EnumIntermediateResultType, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: EnumIntermediateResultType -permalink: /programming/javascript/api-reference/enum/EnumIntermediateResultType.html ---- - - -# EnumIntermediateResultType - -```typescript -enum EnumIntermediateResultType { - IRT_NO_RESULT = 0x00000000, - IRT_ORIGINAL_IMAGE = 0x00000001, - IRT_COLOUR_CLUSTERED_IMAGE = 0x00000002, - IRT_COLOUR_CONVERTED_GRAYSCALE_IMAGE = 0x00000004, - IRT_TRANSFORMED_GRAYSCALE_IMAGE = 0x00000008, - IRT_PREDETECTED_REGION = 0x00000010, - IRT_PREPROCESSED_IMAGE = 0x00000020, - IRT_BINARIZED_IMAGE = 0x00000040, - IRT_TEXT_ZONE = 0x00000080, - IRT_CONTOUR = 0x00000100, - IRT_LINE_SEGMENT = 0x00000200, - IRT_FORM = 0x00000400, - IRT_SEGMENTATION_BLOCK = 0x00000800, - IRT_TYPED_BARCODE_ZONE = 0x00001000, - IRT_PREDETECTED_QUADRILATERAL = 0x00002000 - } -``` diff --git a/programming-old/javascript/api-reference/enum/EnumLocalizationMode.md b/programming-old/javascript/api-reference/enum/EnumLocalizationMode.md deleted file mode 100644 index 0e47b443..00000000 --- a/programming-old/javascript/api-reference/enum/EnumLocalizationMode.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -layout: default-layout -title: EnumLocalizationMode - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows the EnumLocalizationMode of the BarcodeReader Class of Dynamsoft Barcode Reader JavaScript SDK. -keywords: EnumLocalizationMode, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: EnumLocalizationMode -permalink: /programming/javascript/api-reference/enum/EnumLocalizationMode.html ---- - - -# EnumLocalizationMode - -```typescript -enum EnumLocalizationMode{ - LM_SKIP = 0, - LM_AUTO = 1, - LM_CONNECTED_BLOCKS = 2, - LM_LINES = 8, - LM_STATISTICS = 4, - LM_SCAN_DIRECTLY = 0x10, - LM_STATISTICS_MARKS = 0x20, - LM_STATISTICS_POSTAL_CODE = 0x40, - LM_CENTRE = 0x80, - LM_REV = 0x80000000 -} -``` diff --git a/programming-old/javascript/api-reference/enum/EnumPDFReadingMode.md b/programming-old/javascript/api-reference/enum/EnumPDFReadingMode.md deleted file mode 100644 index 1483454f..00000000 --- a/programming-old/javascript/api-reference/enum/EnumPDFReadingMode.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -layout: default-layout -title: EnumPDFReadingMode - Dynamsoft Barcode Reader JavaScript Edition API -description: Use this enum data type to set constants for PDF reading mode of barcodes when using Dynamsoft Barcode Reader JavaScript Edition in your project.. -keywords: EnumPDFReadingMode, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: EnumPDFReadingMode -permalink: /programming/javascript/api-reference/enum/EnumPDFReadingMode.html ---- - - -# EnumPDFReadingMode - -```typescript -enum EnumPDFReadingMode { - PDFRM_RASTER = 0x01, - PDFRM_AUTO = 0x02, - PDFRM_VECTOR = 0x04, - PDFRM_REV = 0x80000000 -} -``` diff --git a/programming-old/javascript/api-reference/enum/EnumQRCodeErrorCorrectionLevel.md b/programming-old/javascript/api-reference/enum/EnumQRCodeErrorCorrectionLevel.md deleted file mode 100644 index ac24a7c9..00000000 --- a/programming-old/javascript/api-reference/enum/EnumQRCodeErrorCorrectionLevel.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -layout: default-layout -title: EnumQRCodeErrorCorrectionLevel - Dynamsoft Barcode Reader JavaScript Edition API -description: Use this enum data type to set constants for QR code error correction level of barcodes when using Dynamsoft Barcode Reader JavaScript Edition in your project. -keywords: EnumQRCodeErrorCorrectionLevel, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: EnumQRCodeErrorCorrectionLevel -permalink: /programming/javascript/api-reference/enum/EnumQRCodeErrorCorrectionLevel.html ---- - - -# EnumQRCodeErrorCorrectionLevel - -```typescript -enum EnumQRCodeErrorCorrectionLevel { - QRECL_ERROR_CORRECTION_H, - QRECL_ERROR_CORRECTION_L, - QRECL_ERROR_CORRECTION_M, - QRECL_ERROR_CORRECTION_Q -} -``` diff --git a/programming-old/javascript/api-reference/enum/EnumRegionPredetectionMode.md b/programming-old/javascript/api-reference/enum/EnumRegionPredetectionMode.md deleted file mode 100644 index b02cb27d..00000000 --- a/programming-old/javascript/api-reference/enum/EnumRegionPredetectionMode.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -layout: default-layout -title: EnumRegionPredetectionMode - Dynamsoft Barcode Reader JavaScript Edition API -description: Use this enum data type to set constants for region predetection mode of barcodes when using Dynamsoft Barcode Reader JavaScript Edition in your project.. -keywords: EnumRegionPredetectionMode, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: EnumRegionPredetectionMode -permalink: /programming/javascript/api-reference/enum/EnumRegionPredetectionMode.html ---- - - -# EnumRegionPredetectionMode - -```typescript -enum EnumRegionPredetectionMode { - RPM_AUTO = 0x01, - RPM_GENERAL = 0x02, - RPM_GENERAL_RGB_CONTRAST = 0x04, - RPM_GENERAL_GRAY_CONTRAST = 0x08, - RPM_GENERAL_HSV_CONTRAST = 0x10, - RPM_SKIP = 0x00, - RPM_REV = 0x80000000 - } -``` diff --git a/programming-old/javascript/api-reference/enum/EnumResultCoordinateType.md b/programming-old/javascript/api-reference/enum/EnumResultCoordinateType.md deleted file mode 100644 index 42745de7..00000000 --- a/programming-old/javascript/api-reference/enum/EnumResultCoordinateType.md +++ /dev/null @@ -1,20 +0,0 @@ ---- -layout: default-layout -title: EnumResultCoordinateType - Dynamsoft Barcode Reader JavaScript Edition API -description: Use this enum data type to set constants for result coordinate type of barcodes when using Dynamsoft Barcode Reader JavaScript Edition in your project.. -keywords: EnumResultCoordinateType, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: EnumResultCoordinateType -permalink: /programming/javascript/api-reference/enum/EnumResultCoordinateType.html ---- - - -# EnumResultCoordinateType - -```typescript -enum EnumResultCoordinateType { - RCT_PIXEL = 0x01, - RCT_PERCENTAGE = 0x02 -} -``` diff --git a/programming-old/javascript/api-reference/enum/EnumResultType.md b/programming-old/javascript/api-reference/enum/EnumResultType.md deleted file mode 100644 index b0dbde76..00000000 --- a/programming-old/javascript/api-reference/enum/EnumResultType.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -layout: default-layout -title: EnumResultType - Dynamsoft Barcode Reader JavaScript Edition API -description: Use this enum data type to set constants for the result type of barcodes when using Dynamsoft Barcode Reader JavaScript Edition in your project. -keywords: EnumResultType, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: EnumResultType -permalink: /programming/javascript/api-reference/enum/EnumResultType.html ---- - - -# EnumResultType - -```typescript -enum EnumResultType{ - RT_STANDARD_TEXT, - RT_RAW_TEXT, - RT_CANDIDATE_TEXT, - RT_PARTIAL_TEXT -} -``` diff --git a/programming-old/javascript/api-reference/enum/EnumScaleUpMode.md b/programming-old/javascript/api-reference/enum/EnumScaleUpMode.md deleted file mode 100644 index fcbbac73..00000000 --- a/programming-old/javascript/api-reference/enum/EnumScaleUpMode.md +++ /dev/null @@ -1,23 +0,0 @@ ---- -layout: default-layout -title: EnumScaleUpMode - Dynamsoft Barcode Reader JavaScript Edition API -description: Use this enum data type to set constants for scale up mode of barcodes when using Dynamsoft Barcode Reader JavaScript Edition in your project. -keywords: EnumScaleUpMode, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: EnumScaleUpMode -permalink: /programming/javascript/api-reference/enum/EnumScaleUpMode.html ---- - - -# EnumScaleUpMode - -```typescript -enum EnumScaleUpMode { - SUM_AUTO = 0x01, - SUM_LINEAR_INTERPOLATION = 0x02, - SUM_NEAREST_NEIGHBOUR_INTERPOLATION = 0x04, - SUM_SKIP = 0x00, - SUM_REV = 0x80000000 -} -``` diff --git a/programming-old/javascript/api-reference/enum/EnumTerminatePhase.md b/programming-old/javascript/api-reference/enum/EnumTerminatePhase.md deleted file mode 100644 index e34d62f0..00000000 --- a/programming-old/javascript/api-reference/enum/EnumTerminatePhase.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -layout: default-layout -title: EnumTerminatePhase - Dynamsoft Barcode Reader JavaScript Edition API -description: Use this enum data type to set constants for terminate phase of barcodes when using Dynamsoft Barcode Reader JavaScript Edition in your project. -keywords: EnumTerminatePhase, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: EnumTerminatePhase -permalink: /programming/javascript/api-reference/enum/EnumTerminatePhase.html ---- - - -# EnumTerminatePhase - -```typescript -enum EnumTerminatePhase { - TP_REGION_PREDETECTED = 1, // Terminate after the barcode region is pre-detected. - TP_IMAGE_PREPROCESSED = 2, // Terminate after the image is preprocessed. - TP_IMAGE_BINARIZED = 4, // Terminate after the image is binarized. - TP_BARCODE_LOCALIZED = 8, // Terminate after the barcode zone is localized. - TP_BARCODE_TYPE_DETERMINED = 16, // Terminate after the barcode type is identified. - TP_BARCODE_RECOGNIZED = 32 // Terminate after the barcode is recognized. -} -``` diff --git a/programming-old/javascript/api-reference/enum/EnumTextFilterMode.md b/programming-old/javascript/api-reference/enum/EnumTextFilterMode.md deleted file mode 100644 index d408e97b..00000000 --- a/programming-old/javascript/api-reference/enum/EnumTextFilterMode.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -layout: default-layout -title: EnumTextFilterMode - Dynamsoft Barcode Reader JavaScript Edition API -description: Use this enum data type to set constants for text filter mode of barcodes when using Dynamsoft Barcode Reader JavaScript Edition in your project. -keywords: EnumTextFilterMode, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: EnumTextFilterMode -permalink: /programming/javascript/api-reference/enum/EnumTextFilterMode.html ---- - - -# EnumTextFilterMode - -```typescript -enum EnumTextFilterMode { - TFM_AUTO = 0x01, - TFM_GENERAL_CONTOUR = 0x02, - TFM_SKIP = 0x00, - TFM_REV = 0x80000000 -} -``` diff --git a/programming-old/javascript/api-reference/enum/EnumTextResultOrderMode.md b/programming-old/javascript/api-reference/enum/EnumTextResultOrderMode.md deleted file mode 100644 index 2d2ed4f7..00000000 --- a/programming-old/javascript/api-reference/enum/EnumTextResultOrderMode.md +++ /dev/null @@ -1,23 +0,0 @@ ---- -layout: default-layout -title: EnumTextResultOrderMode - Dynamsoft Barcode Reader JavaScript Edition API -description: Use this enum data type to set constants for text result order mode of barcodes when using Dynamsoft Barcode Reader JavaScript Edition in your project. -keywords: EnumTextResultOrderMode, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: EnumTextResultOrderMode -permalink: /programming/javascript/api-reference/enum/EnumTextResultOrderMode.html ---- - - -# EnumTextResultOrderMode - -```typescript -enum EnumTextResultOrderMode { - TROM_CONFIDENCE = 0x01, - TROM_POSITION = 0x02, - TROM_FORMAT = 0x04, - TROM_SKIP = 0x00, - TROM_REV = 0x80000000 -} -``` diff --git a/programming-old/javascript/api-reference/enum/EnumTextureDetectionMode.md b/programming-old/javascript/api-reference/enum/EnumTextureDetectionMode.md deleted file mode 100644 index 05c8f6c4..00000000 --- a/programming-old/javascript/api-reference/enum/EnumTextureDetectionMode.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -layout: default-layout -title: EnumTextureDetectionMode - Dynamsoft Barcode Reader JavaScript Edition API -description: Use this enum data type to set constants for texture detection mode of barcodes when using Dynamsoft Barcode Reader JavaScript Edition in your project. -keywords: EnumTextureDetectionMode, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: EnumTextureDetectionMode -permalink: /programming/javascript/api-reference/enum/EnumTextureDetectionMode.html ---- - - -# EnumTextureDetectionMode - -```typescript -enum EnumTextureDetectionMode { - TDM_AUTO = 0x01, - TDM_GENERAL_WIDTH_CONCENTRATION = 0x02, - TDM_SKIP = 0x00, - TDM_REV = 0x80000000 -} -``` diff --git a/programming-old/javascript/api-reference/global-interfaces-v7.6.0.md b/programming-old/javascript/api-reference/global-interfaces-v7.6.0.md deleted file mode 100644 index 2fac92fa..00000000 --- a/programming-old/javascript/api-reference/global-interfaces-v7.6.0.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -layout: default-layout -title: v7.6.0 Global Interfaces - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows Global Interfaces of Dynamsoft Barcode Reader JavaScript SDK. -keywords: BarcodeReaderException, FurtherModes, LocalizationResult, Region, RuntimeSettings, TextResult, global interfaces, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: false -permalink: /programming/javascript/api-reference/global-interfaces-v7.6.0.html ---- - - -# Javascript API Reference - Global Interfaces - -| Interface | Description | -|----------------------|-------------| -| [BarcodeReaderException](#barcodereaderexception) | Exceptions raised for Barcode Reader errors. | -| [FurtherModes](#furthermodes) | Stores additional modes. | -| [LocalizationResult](#localizationresult) | Stores the localization result of the detected barcode. | -| [Region](#region) | Stores the barcode region information.| -| [RuntimeSettings](#runtimesettings) | Stores the barcode reading runtime settings. | -| [TextResult](#textresult) | Stores the decoded barcode text results. | - ---- - -## BarcodeReaderException - -Exceptions raised for Barcode Reader errors. - -### Properties - -| Property | Type | Description | -|----------------------|------|-------------| -| `Error` | *ErrorConstructor* | | -| `code`optional | [EnumErrorCode]({{ site.enumerations }}error-code.html) | The error code. | -| `message` | *string* | Error message describing the current exception inherited from `Error.message`. | -| `name` | *string* | Error name of the current exception inherited from `Error.name`. | -| `stack`optional | *string* | Call stack at the time the current exception was thrown inherited from `Error.stack`. | - -## FurtherModes - -Stores the FurtherModes. - -### Properties - -| Property | Type | Description | -|----------------------|------|-------------| -| `accompanyingTextRecognitionModes` | [*`AccompanyingTextRecognitionMode`*]({{ site.enumerations }}parameter-mode-enums.html#accompanyingtextrecognitionmode) | Sets the mode and priority to recognize accompanying text. **Currently unsupported.** | -| `barcodeColourModes` | [*`BarcodeColourMode`*]({{ site.enumerations }}parameter-mode-enums.html#barcodecolourmode) | Sets the mode and priority for the barcode colour mode used to process the barcode zone. | -| `barcodeComplementModes` | [*`BarcodeComplementMode`*]({{ site.enumerations }}parameter-mode-enums.html#barcodecomplementmode) | Sets the mode and priority to complement the missing parts in the barcode. | -| `colourClusteringModes` | [*`ColourClusteringMode`*]({{ site.enumerations }}parameter-mode-enums.html#colourclusteringmode) | Sets the mode and priority for colour categorization. | -| `colourConversionModes` | [*`ColourConversionMode`*]({{ site.enumerations }}parameter-mode-enums.html#colourconversionmode) | Sets the mode and priority for converting a colour image to a grayscale image. | -| `deformationResistingModes` | [*`DeformationResistingMode`*]({{ site.enumerations }}parameter-mode-enums.html#deformationresistingmode) | Sets the mode and priority for deformation resisting. | -| `dpmCodeReadingModes` | [*`DPMCodeReadingMode`*]({{ site.enumerations }}parameter-mode-enums.html#dpmcodereadingmode) | Sets the mode and priority for DPM code reading. | -| `grayscaleTransformationModes` | [*`GrayscaleTransformationMode`*]({{ site.enumerations }}parameter-mode-enums.html#grayscaletransformationmode) | Sets the mode and priority for the grayscale image conversion. | -| `imagePreprocessingModes` | [*`ImagePreprocessingMode`*]({{ site.enumerations }}parameter-mode-enums.html#imagepreprocessingmode) | Sets the mode and priority for image preprocessing algorithms. | -| `regionPredetectionModes` | [*`RegionPredetectionMode`*]({{ site.enumerations }}parameter-mode-enums.html#regionpredetectionmode) | Sets the region pre-detection mode for barcodes search. | -| `textAssistedCorrectionMode` | [*`TextAssistedCorrectionMode`*]({{ site.enumerations }}parameter-mode-enums.html#textassistedcorrectionmode) | Sets the mode of text assisted correction for barcode decoding. | -| `textFilterModes` | [*`TextFilterMode`*]({{ site.enumerations }}parameter-mode-enums.html#textfiltermode) | Sets the mode and priority for text filter. | -| `textureDetectionModes` | [*`TextureDetectionMode`*]({{ site.enumerations }}parameter-mode-enums.html#texturedetectionmode) | Sets the mode and priority for texture detection. | - -## LocalizationResult - -Stores the localization result of the detected barcode. - -### Properties - -| Property | Type | Description | -|------------------|------|-------------| -| angle | *number* | The angle of a barcode. Values range from 0 to 360. | -| x1 | *number* | The X coordinate of the left-most point. | -| x2 | *number* | The X coordinate of the second point in a clockwise direction. | -| x3 | *number* | The X coordinate of the third point in a clockwise direction. | -| x4 | *number* | The X coordinate of the fourth point in a clockwise direction. | -| y1 | *number* | The Y coordinate of the left-most point. | -| y2 | *number* | The Y coordinate of the second point in a clockwise direction. | -| y3 | *number* | The Y coordinate of the third point in a clockwise direction. | -| y4 | *number* | The Y coordinate of the fourth point in a clockwise direction. | - - -#### :+1: Tips and Tricks - -* The left-most corner of the barcode is the starting point (x1, y1). The following corner points (x2, y2), (x3, y3), (x4, y4) will be returned in the clockwise direction. - -![Barcode coordinates](assets/localizationresult.png) - -## Region - -Stores the region information. - -### Properties - -| Property | Type | Default Value | Description | -|--------------------|------|---------------|-------------| -| `regionBottom` | *number* | `0` | The bottom-most coordinate or percentage of the region. | -| `regionLeft` | *number* | `0` | The left-most coordinate or percentage of the region. | -| `regionRight` | *number* | `0` | The right-most coordinate or percentage of the region. | -| `regionTop` | *number* | `0` | The top-most coordinate or percentage of the region. | -| `regionMeasuredByPercentage` | *number \| boolean* | `0` | Set measure of region by percentage or coordinate.
    `0` by coordinate
    `1` by percentage| - -## RuntimeSettings - -Stores the barcode reading runtime settings. These settings control the barcode recognition process. - -### Properties - -| Property | Type | Default Value | Description | -|--------------------|------|---------------|-------------| -| [barcodeFormatIds]({{ site.enumerations }}format-enums.html#barcodeformat) | *number* | `BF_ALL (-32505857)` | The selected barcode formats to be read from group 1 of 2. | -| [barcodeFormatIds_2]({{ site.enumerations }}format-enums.html#barcodeformat_2) | *number* | `BF2_NULL (0)` | The selected barcode formats to be read from group 2 of 2. | -| `binarizationModes` | [EnumBinarizationMode[]]({{ site.enumerations }}parameter-mode-enums.html#binarizationmode) | `[BM_LOCAL_BLOCK, BM_SKIP, BM_SKIP, BM_SKIP, BM_SKIP, BM_SKIP, BM_SKIP, BM_SKIP]` | The mode and priority for binarization. | -| `deblurLevel`[1](#1-tips-and-tricks) | *number* | `BarcodeReader`: `9`
    `BarcodeScanner`: `0` | The degree of blurriness of the barcode.
    Value range: `[0, 9]`| -| `expectedBarcodesCount`[2](#1-tips-and-tricks) | *number* | `BarcodeReader`: `512`
    `BarcodeScanner`: `0` | The number of barcodes expected to be detected for each image.
    Value range: `[0, 0x7fffffff]` | -| [furtherModes](#FurtherModes) | *strong* | | Additional modes. | -| `intermediateResultSavingMode` | [EnumIntermediateResultSavingMode]({{ site.enumerations }}result-enums.html#intermediateresultsavingmode) | `IRSM_MEMORY (1)` | The mode for saving intermediate result. | -| `intermediateResultTypes` | [EnumIntermediateResultType]({{ site.enumerations }}result-enums.html#intermediateresulttype) | `IRT_NO_RESULT (0)` | The types of intermediate result to be kept for further reference. | -| [localizationModes]({{ site.enumerations }}parameter-mode-enums.html#localizationmode) | *number[]* | `BarcodeReader`: `[LM_CONNECTED_BLOCKS, LM_SCAN_DIRECTLY, LM_STATISTICS, LM_LINES, LM_SKIP, LM_SKIP, LM_SKIP, LM_SKIP]`
    `BarcodeScanner`: `[LM_CONNECTED_BLOCKS, LM_SKIP, LM_SKIP, LM_SKIP, LM_SKIP, LM_SKIP, LM_SKIP, LM_SKIP]` | The mode and priority for localization algorithms. | -| `minBarcodeTextLength`[3](#1-tips-and-tricks) | *number* | `0` | The range of barcode text length for barcodes search.
    Value range: `[0, 0x7fffffff]`| -| `minResultConfidence`[4](#1-tips-and-tricks) | *number* | `0` | The minimum confidence of the result.
    Value range: `[0, 100]`| -| `region` | [Region](#region) | | The barcode region definition. | -| [resultCoordinateType]({{ site.enumerations }}result-enums.html#resultcoordinatetype) | *number* | `RCT_PIXEL (1)` | The format for the coordinates returned. | -| `returnBarcodeZoneClarity` | *number* | `0` | Whether to report the clarity of the barcode zone.
    Value range: `[0, 1]`| -| `scaleDownThreshold`[5](#1-tips-and-tricks) | *number* | `BarcodeReader`: `100000`
    `BarcodeScanner`: `2300` | The threshold for the image shrinking.
    Value range: `[512, 0x7fffffff]` | -| `scaleUpModes` | [EnumScaleUpMode[]]({{ site.enumerations }}parameter-mode-enums.html#scaleupmode) | `[SUM_AUTO, SUM_SKIP, SUM_SKIP, SUM_SKIP, SUM_SKIP, SUM_SKIP, SUM_SKIP, SUM_SKIP]` | The mode and priority to control the sampling methods of scale-up for linear barcode with small module sizes. | -| `terminatePhase`[6](#1-tips-and-tricks) | [EnumTerminatePhase]({{ site.enumerations }}parameter-mode-enums.html#terminatephase) | `TP_BARCODE_RECOGNIZED (32)` | The phase where the algorithm stops. | -| `textResultOrderModes` | [EnumTextResultOrderMode[]]({{ site.enumerations }}result-enums.html#textresultordermode) | `[TROM_CONFIDENCE, TROM_POSITION, TROM_FORMAT, TROM_SKIP, TROM_SKIP, TROM_SKIP, TROM_SKIP, TROM_SKIP]` | The mode and priority for the order of the text results returned. | -| `timeout` | *number* | `BarcodeReader`: `100000`
    `BarcodeScanner`: `10000` | The maximum amount of time measured in ms to be spent searching for a barcode per page. It does not include the time taken to load/decode an image from disk into memory.
    Value range: `[0, 0x7fffffff]` | - -#### :+1: Tips and Tricks - -* `1` : If you have a blurry image, you can set `deblurLevel` to a larger value. The higher the value, the more effort the library will spend to decode images, but it may also slow down the recognition process. - -* `2` : Setting `expectedBarcodesCount` to `0` represents an "unknown" count and the library will try to find *at least* one barcode. `1` will result in trying to find exactly one barcode. Once a barcode is found, the library will stop the localization process and perform barcode decoding. `n` means the library will try to find `n` barcodes. If the library only finds `m` where `m < n` barcode(s), it will try a different [localization algorithm]({{ site.enumerations }}parameter-mode-enums.html#localizationmode) until `n` barcodes are located, or all algorithms are tried. - -* `3` : `0` means no limitation on the barcode text length. - -* `4` : `0` means no limitation on the result confidence. - -* `5` : If the shorter edge size is larger than the given threshold value, the library will calculate the required height and width of the barcode image and shrink the image to that size before localization. Otherwise, the library will perform barcode localization on the original image. - -* `6` : When the recognition result is not desired, you can set this parameter to skip certain processing stages. - -* `coverage` is the default setting for `BarcodeReader` and `speed` for `BarcodeScanner`. See [updateRuntimeSettings](BarcodeReader/methods/parameter-and-runtime-settings.md#updateRuntimeSettings) - -## TextResult - -Stores the decoded barcode text results. - -### Properties - -| Property | Type | Description | -|----------------------|------|-------------| -| `barcodeBytes` | *number[]* | Barcode result content in a byte array. | -| `barcodeFormat` | *number* \| [EnumBarcodeFormat]({{ site.enumerations }}format-enums.html#barcodeformat) | The barcode format. | -| `barcodeFormatString` | *string* | Barcode type as a string. | -| `barcodeText` | *string* | The barcode result text. | -| `localizationResult` | [LocalizationResult](#localizationresult) | The corresponding localization result. | diff --git a/programming-old/javascript/api-reference/global-interfaces.md b/programming-old/javascript/api-reference/global-interfaces.md deleted file mode 100644 index 3839f285..00000000 --- a/programming-old/javascript/api-reference/global-interfaces.md +++ /dev/null @@ -1,171 +0,0 @@ ---- -layout: default-layout -title: Global Interfaces - Dynamsoft Barcode Reader JavaScript Edition API Reference -description: This page shows Global Interfaces of Dynamsoft Barcode Reader JavaScript SDK. -keywords: BarcodeReaderException, FurtherModes, LocalizationResult, Region, RuntimeSettings, TextResult, global interfaces, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: false -permalink: /programming/javascript/api-reference/global-interfaces.html ---- - - - -# JavaScript API Reference - Global Interfaces - -| Interface | Description | -|----------------------|-------------| -| [BarcodeReaderException](#barcodereaderexception) | Exceptions raised for Barcode Reader errors. | -| [FurtherModes](#furthermodes) | Stores additional modes. | -| [LocalizationResult](#localizationresult) | Stores the localization result of the detected barcode. | -| [Region](#region) | Stores the barcode region information.| -| [RuntimeSettings](#runtimesettings) | Stores the barcode reading runtime settings. | -| [TextResult](#textresult) | Stores the decoded barcode text results. | - ---- - -## BarcodeReaderException - -Exceptions raised for Barcode Reader errors. - -### Properties - -| Property | Type | Description | -|----------------------|------|-------------| -| `Error` | *ErrorConstructor* | | -| `code`optional | [EnumErrorCode]({{ site.enumerations }}error-code.html) | The error code. | -| `message` | *string* | Error message describing the current exception inherited from `Error.message`. | -| `name` | *string* | Error name of the current exception inherited from `Error.name`. | -| `stack`optional | *string* | Call stack at the time the current exception was thrown inherited from `Error.stack`. | - -## FurtherModes - -Stores the FurtherModes. - -### Properties - -| Property | Type | Description | -|----------------------|------|-------------| -| `barcodeColourModes` | [*`BarcodeColourMode`*]({{ site.enumerations }}parameter-mode-enums.html#barcodecolourmode) | Sets the mode and priority for the barcode colour mode used to process the barcode zone. | -| `barcodeComplementModes` | [*`BarcodeComplementMode`*]({{ site.enumerations }}parameter-mode-enums.html#barcodecomplementmode) | Sets the mode and priority to complement the missing parts in the barcode. | -| `colourClusteringModes` | [*`ColourClusteringMode`*]({{ site.enumerations }}parameter-mode-enums.html#colourclusteringmode) | Sets the mode and priority for colour categorization. | -| `colourConversionModes` | [*`ColourConversionMode`*]({{ site.enumerations }}parameter-mode-enums.html#colourconversionmode) | Sets the mode and priority for converting a colour image to a grayscale image. | -| `deformationResistingModes` | [*`DeformationResistingMode`*]({{ site.enumerations }}parameter-mode-enums.html#deformationresistingmode) | Sets the mode and priority for deformation resisting. | -| `dpmCodeReadingModes` | [*`DPMCodeReadingMode`*]({{ site.enumerations }}parameter-mode-enums.html#dpmcodereadingmode) | Sets the mode and priority for DPM code reading. | -| `grayscaleTransformationModes` | [*`GrayscaleTransformationMode`*]({{ site.enumerations }}parameter-mode-enums.html#grayscaletransformationmode) | Sets the mode and priority for the grayscale image conversion. | -| `imagePreprocessingModes` | [*`ImagePreprocessingMode`*]({{ site.enumerations }}parameter-mode-enums.html#imagepreprocessingmode) | Sets the mode and priority for image preprocessing algorithms. | -| `regionPredetectionModes` | [*`RegionPredetectionMode`*]({{ site.enumerations }}parameter-mode-enums.html#regionpredetectionmode) | Sets the region pre-detection mode for barcodes search. | -| `textAssistedCorrectionMode` | [*`TextAssistedCorrectionMode`*]({{ site.enumerations }}parameter-mode-enums.html#textassistedcorrectionmode) | Sets the mode of text assisted correction for barcode decoding. | -| `textFilterModes` | [*`TextFilterMode`*]({{ site.enumerations }}parameter-mode-enums.html#textfiltermode) | Sets the mode and priority for text filter. | -| `textureDetectionModes` | [*`TextureDetectionMode`*]({{ site.enumerations }}parameter-mode-enums.html#texturedetectionmode) | Sets the mode and priority for texture detection. | - -## LocalizationResult - -Stores the localization result of the detected barcode. - -### Properties - -| Property | Type | Description | -|------------------|------|-------------| -| angle | *number* | The angle of a barcode. Values range from 0 to 360. | -| x1 | *number* | The X coordinate of the left-most point. | -| x2 | *number* | The X coordinate of the second point in a clockwise direction. | -| x3 | *number* | The X coordinate of the third point in a clockwise direction. | -| x4 | *number* | The X coordinate of the fourth point in a clockwise direction. | -| y1 | *number* | The Y coordinate of the left-most point. | -| y2 | *number* | The Y coordinate of the second point in a clockwise direction. | -| y3 | *number* | The Y coordinate of the third point in a clockwise direction. | -| y4 | *number* | The Y coordinate of the fourth point in a clockwise direction. | - - -#### :+1: Tips and Tricks - -* The left-most corner of the barcode is the starting point (x1, y1). The following corner points (x2, y2), (x3, y3), (x4, y4) will be returned in the clockwise direction. - -![Barcode coordinates](assets/localizationresult.png) - -## Region - -Stores the region information. - -### Properties - -| Property | Type | Default Value | Description | -|--------------------|------|---------------|-------------| -| `regionBottom` | *number* | `0` | The bottom-most coordinate or percentage of the region. | -| `regionLeft` | *number* | `0` | The left-most coordinate or percentage of the region. | -| `regionRight` | *number* | `0` | The right-most coordinate or percentage of the region. | -| `regionTop` | *number* | `0` | The top-most coordinate or percentage of the region. | -| `regionMeasuredByPercentage` | *number \| boolean* | `0` | Set measure of region by percentage or coordinate.
    `0` by coordinate
    `1` by percentage| - -## RuntimeSettings - -Stores the barcode reading runtime settings. These settings control the barcode recognition process. - -### Properties - -| Property | Type | Default Value | Description | -|--------------------|------|---------------|-------------| -| [barcodeFormatIds]({{ site.enumerations }}format-enums.html#barcodeformat) | *number* | `BF_ALL (-32505857)` | The selected barcode formats to be read from group 1 of 2. | -| [barcodeFormatIds_2]({{ site.enumerations }}format-enums.html#barcodeformat_2) | *number* | `BF2_NULL (0)` | The selected barcode formats to be read from group 2 of 2. | -| `barcodeZoneMinDistanceToImageBorders` | *number* | `BarcodeReader`: `0`
    `BarcodeScanner`: `0` | Sets the minimum distance (in pixels) between the barcode zone and image borders.
    Value range: `[0, 0x7fffffff]` | -| `binarizationModes` | [EnumBinarizationMode[]]({{ site.enumerations }}parameter-mode-enums.html#binarizationmode) | `[BM_LOCAL_BLOCK, BM_SKIP, BM_SKIP, BM_SKIP, BM_SKIP, BM_SKIP, BM_SKIP, BM_SKIP]` | The mode and priority for binarization. | -| `deblurLevel`[1](#1-tips-and-tricks) | *number* | `BarcodeReader`: `9`
    `BarcodeScanner`: `0` | **deprecated** The degree of blurriness of the barcode.
    Value range: `[0, 9]`| -| `deblurModes` | [EnumDeblurMode[]]({{ site.enumerations }}parameter-mode-enums.html#deblurmode) | `[DM_SKIP, DM_SKIP, DM_SKIP, DM_SKIP, DM_SKIP, DM_SKIP, DM_SKIP, DM_SKIP, DM_SKIP, DM_SKIP]` | Sets the mode and priority for deblurring. | -| `expectedBarcodesCount`[2](#1-tips-and-tricks) | *number* | `BarcodeReader`: `512`
    `BarcodeScanner`: `0` | The number of barcodes expected to be detected for each image.
    Value range: `[0, 0x7fffffff]` | -| [furtherModes](#FurtherModes) | *strong* | | Additional modes. | -| `intermediateResultSavingMode` | [EnumIntermediateResultSavingMode]({{ site.enumerations }}result-enums.html#intermediateresultsavingmode) | `IRSM_MEMORY (1)` | The mode for saving intermediate result. | -| `intermediateResultTypes` | [EnumIntermediateResultType]({{ site.enumerations }}result-enums.html#intermediateresulttype) | `IRT_NO_RESULT (0)` | The types of intermediate result to be kept for further reference. | -| [localizationModes]({{ site.enumerations }}parameter-mode-enums.html#localizationmode) | *number[]* | `BarcodeReader`: `[LM_CONNECTED_BLOCKS, LM_SCAN_DIRECTLY, LM_STATISTICS, LM_LINES, LM_SKIP, LM_SKIP, LM_SKIP, LM_SKIP]`
    `BarcodeScanner`: `[LM_CONNECTED_BLOCKS, LM_SKIP, LM_SKIP, LM_SKIP, LM_SKIP, LM_SKIP, LM_SKIP, LM_SKIP]` | The mode and priority for localization algorithms. | -| `minBarcodeTextLength`[3](#1-tips-and-tricks) | *number* | `0` | The range of barcode text length for barcodes search.
    Value range: `[0, 0x7fffffff]`| -| `minResultConfidence`[4](#1-tips-and-tricks) | *number* | `0` | The minimum confidence of the result.
    Value range: `[0, 100]`| -| `region` | [Region](#region) | | The barcode region definition. | -| [resultCoordinateType]({{ site.enumerations }}result-enums.html#resultcoordinatetype) | *number* | `RCT_PIXEL (1)` | The format for the coordinates returned. | -| `returnBarcodeZoneClarity` | *number* | `0` | Whether to report the clarity of the barcode zone.
    Value range: `[0, 1]`| -| `scaleDownThreshold`[5](#1-tips-and-tricks) | *number* | `BarcodeReader`: `100000`
    `BarcodeScanner`: `2300` | The threshold for the image shrinking.
    Value range: `[512, 0x7fffffff]` | -| `scaleUpModes` | [EnumScaleUpMode[]]({{ site.enumerations }}parameter-mode-enums.html#scaleupmode) | `[SUM_AUTO, SUM_SKIP, SUM_SKIP, SUM_SKIP, SUM_SKIP, SUM_SKIP, SUM_SKIP, SUM_SKIP]` | The mode and priority to control the sampling methods of scale-up for linear barcode with small module sizes. | -| `terminatePhase`[6](#1-tips-and-tricks) | [EnumTerminatePhase]({{ site.enumerations }}parameter-mode-enums.html#terminatephase) | `TP_BARCODE_RECOGNIZED (32)` | The phase where the algorithm stops. | -| `textResultOrderModes` | [EnumTextResultOrderMode[]]({{ site.enumerations }}result-enums.html#textresultordermode) | `[TROM_CONFIDENCE, TROM_POSITION, TROM_FORMAT, TROM_SKIP, TROM_SKIP, TROM_SKIP, TROM_SKIP, TROM_SKIP]` | The mode and priority for the order of the text results returned. | -| `timeout` | *number* | `BarcodeReader`: `100000`
    `BarcodeScanner`: `10000` | The maximum amount of time measured in ms to be spent searching for a barcode per page. It does not include the time taken to load/decode an image from disk into memory.
    Value range: `[0, 0x7fffffff]` | - -#### :+1: Tips and Tricks - -* `1` : If you have a blurry image, you can set `deblurLevel` to a larger value. The higher the value, the more effort the library will spend to decode images, but it may also slow down the recognition process. - -* `2` : Setting `expectedBarcodesCount` to `0` represents an "unknown" count and the library will try to find *at least* one barcode. `1` will result in trying to find exactly one barcode. Once a barcode is found, the library will stop the localization process and perform barcode decoding. `n` means the library will try to find `n` barcodes. If the library only finds `m` where `m < n` barcode(s), it will try a different [localization algorithm]({{ site.enumerations }}parameter-mode-enums.html#localizationmode) until `n` barcodes are located, or all algorithms are tried. - -* `3` : `0` means no limitation on the barcode text length. - -* `4` : `0` means no limitation on the result confidence. - -* `5` : If the shorter edge size is larger than the given threshold value, the library will calculate the required height and width of the barcode image and shrink the image to that size before localization. Otherwise, the library will perform barcode localization on the original image. - -* `6` : When the recognition result is not desired, you can set this parameter to skip certain processing stages. - -* `coverage` is the default setting for `BarcodeReader` and `speed` for `BarcodeScanner`. See [updateRuntimeSettings](BarcodeReader/methods/parameter-and-runtime-settings.md#updateRuntimeSettings) - -## TextResult - -Stores the decoded barcode text results. - -### Properties - -| Property | Type | Description | -|--------------------|------|-------------| -| `barcodeBytes` | *number[]* | Barcode result content in a byte array. | -| `barcodeFormat` | *number* | [EnumBarcodeFormat]({{ site.enumerations }}format-enums.html#barcodeformat) | The barcode format. | -| `barcodeFormatString` | *string* | Barcode type as a string. | -| `barcodeText` | *string* | The barcode result text. | -| `localizationResult` | [LocalizationResult](#localizationresult) | The corresponding localization result. | -| `exception` | [Exception](#exception) | License exception information. | - - - -## Exception - -Stores exception code and message in case of a license exception. - -| Property | Description | -|-------------------|-------------| -| `code` | Exception code | -| `message` | Exception message | diff --git a/programming-old/javascript/api-reference/index-v7.6.0.md b/programming-old/javascript/api-reference/index-v7.6.0.md deleted file mode 100644 index 28f3edaf..00000000 --- a/programming-old/javascript/api-reference/index-v7.6.0.md +++ /dev/null @@ -1,262 +0,0 @@ ---- -layout: default-layout -title: v7.6.0 Entry Page - Dynamsoft Barcode Reader JavaScript Edition API -description: This is the main page of Dynamsoft Barcode Reader JavaScript SDK API Reference. -keywords: api reference, javascript, js -needAutoGenerateSidebar: false -breadcrumbText: API Reference -permalink: /programming/javascript/api-reference/index-v7.6.0.html ---- - - -# Reference - -[BarcodeReader](#barcodereader) -- Decode barcodes from images - * [Methods](#barcodereader-methods) - * [Properties](#barcodereader-properties) - * [Accessors](#barcodereader-accessors) - - -[BarcodeScanner](#barcodescanner) -- Decode barcodes from videos - * [Methods](#barcodescanner-methods) - * [Properties](#barcodescanner-properties) - * [Accessors](#barcodescanner-accessors) - * [Interfaces](#barcodescanner-interfaces) - -[Global Interfaces](#global-interfaces) - -[Enumerations](#enumerations) - - ---- - -## BarcodeReader - -The `BarcodeReader` class is used for **image** decoding. - -### `BarcodeReader` Methods - -#### Initialize and Destroy - -The following methods are related to initializing and destroying the `BarcodeReader` object. - -| Method | Description | -|----------------------|-------------| -| [createInstance](BarcodeReader/methods/initialize-and-destroy.md#createinstance) | Create a `BarcodeReader` object. | -| [destroy](BarcodeReader/methods/initialize-and-destroy.md#destroy) | Destroy the `BarcodeReader` object. | -| [detectEnvironment](BarcodeReader/methods/initialize-and-destroy.md#detectenvironment) | Detect the current environment. | -| [isLoaded](BarcodeReader/methods/initialize-and-destroy.md#isloaded) | Check if the decoding module is loaded. | -| [loadWasm](BarcodeReader/methods/initialize-and-destroy.md#loadwasm) | Manually load and compile the decoding WASM module. | - -#### Decode - -The following methods are related to decoding barcodes. - -| Method | Description | -|----------------------|-------------| -| [decode](BarcodeReader/methods/decode.md#decode) | Decode barcodes from images, binary data, URLs, and more. | -| [decodeBase64String](BarcodeReader/methods/decode.md#decodebase64string) | Decode barcodes from a base64 encoded string. | -| [decodeBuffer](BarcodeReader/methods/decode.md#decodebuffer) | Decode barcodes from raw buffer. | -| [decodeUrl](BarcodeReader/methods/decode.md#decodeurl) | Decode barcodes from a URL. | - -#### Parameter and Runtime Settings - -The following methods are related to customizing mode and runtime settings. - -| Method | Description | -|----------------------|-------------| -| [getModeArgument](BarcodeReader/methods/parameter-and-runtime-settings.md#getmodeargument) | Get argument value for the specified mode parameter. | -| [setModeArgument](BarcodeReader/methods/parameter-and-runtime-settings.md#setmodeargument) | Set argument value for the specified mode parameter. | -| [getRuntimeSettings](BarcodeReader/methods/parameter-and-runtime-settings.md#getruntimesettings) | Get current runtime settings. | -| [resetRuntimeSettings](BarcodeReader/methods/parameter-and-runtime-settings.md#resetruntimesettings) | Reset runtime settings to default. | -| [updateRuntimeSettings](BarcodeReader/methods/parameter-and-runtime-settings.md#updateruntimesettings) | Modify and update the current runtime settings. | - -### `BarcodeReader` Properties - -| Property | Description | -|----------------------|-------------| -| [_bUseFullFeature](BarcodeReader/properties.md#_busefullfeature) | If set to `true`, use the fully-featured WASM module. | -| `bDestroyed` | Indicates whether a `BarcodeScanner` object has been destroyed. | -| `bSaveOriCanvas` | If set to `true`, save the original image to canvas. | -| `oriCanvas` | The original canvas element. | - - -### `BarcodeReader` Accessors - -| Accessors | Description | -|----------------------|-------------| -| [engineResourcePath](BarcodeReader/accessors.md#engineresourcepath) | Get or set the engine (WASM) location. | -| [productKeys](BarcodeReader/accessors.md#productkeys) | Get or set the Dynamsoft Barcode Reader SDK product keys. | -| [version](BarcodeReader/accessors.md#version) | Get current version. | - ---- -## BarcodeScanner - -The `BarcodeScanner` class is used for **video** decoding. - -### `BarcodeScanner` Methods - -#### Initialize and Destroy - -The following methods are related to initializing and destroying the `BarcodeScanner` object. - -| Method | Description | -|----------------------|-------------| -| [createInstance](BarcodeScanner/methods/initialize-and-destroy.md#createinstance) | Create a `BarcodeScanner` object. | -| [destroy](BarcodeScanner/methods/initialize-and-destroy.md#destroy) | Destroy the `BarcodeScanner` object. | -| [getUIElement](BarcodeScanner/methods/initialize-and-destroy.md#getuielement) | Get HTML element containing the `BarcodeScanner` object. | -| [setUIElement](BarcodeScanner/methods/initialize-and-destroy.md#setuielement) | set html element containing the `barcodescanner` object. | - -#### Camera Controls - -The following methods are related to controlling the camera and its settings. - -| Method | Description | -|----------------------|-------------| -| [getAllCameras](BarcodeScanner/methods/camera-controls.md#getallcameras) | Get information of all available cameras on the device. | -| [getCurrentCamera](BarcodeScanner/methods/camera-controls.md#getcurrentcamera) | Get information about the currently used camera. | -| [setCurrentCamera](BarcodeScanner/methods/camera-controls.md#setcurrentcamera) | Set camera by its information or device ID. | -| [hide](BarcodeScanner/methods/camera-controls.md#hide) | Stop the camera and hide the camera UI element. | -| [show](BarcodeScanner/methods/camera-controls.md#show) | Show the camera UI element, open the camera, and start decoding. | -| [close](BarcodeScanner/methods/camera-controls.md#close) | Close and release the camera. | -| [isOpen](BarcodeScanner/methods/camera-controls.md#isopen) | Check if the camera is open. | -| [open](BarcodeScanner/methods/camera-controls.md#open) | Open the camera. | -| [pause](BarcodeScanner/methods/camera-controls.md#pause) | Pause the video stream. | -| [play](BarcodeScanner/methods/camera-controls.md#play) | Continue the video stream. | -| [stop](BarcodeScanner/methods/camera-controls.md#stop) | Stop the video and release the camera. | -| [pauseScan](BarcodeScanner/methods/camera-controls.md#pausescan) | Pause the video decoding process. | -| [resumeScan](BarcodeScanner/methods/camera-controls.md#resumescan) | Resume the video decoding process. | - -#### Capture Settings - -The following methods are related to the camera's capture settings. - -| Method | Description | -|----------------------|-------------| -| [getCapabilities](BarcodeScanner/methods/capture-settings.md#getcapabilities) | Get the camera capabilities. | -| [getResolution](BarcodeScanner/methods/capture-settings.md#getresolution) | Get current video resolution. | -| [setResolution](BarcodeScanner/methods/capture-settings.md#setresolution) | Set current video resolution. | -| [getScanSettings](BarcodeScanner/methods/capture-settings.md#getscansettings) | Get current scan settings. | -| [updateScanSettings](BarcodeScanner/methods/capture-settings.md#updatescansettings) | Modify and update scan settings. | -| [getVideoSettings](BarcodeScanner/methods/capture-settings.md#getvideosettings) | Get current video settings. | -| [updateVideoSettings](BarcodeScanner/methods/capture-settings.md#updatevideosettings) | Modify and update video settings. | -| [setColorTemperature](BarcodeScanner/methods/capture-settings.md#setcolortemperature) | Adjust the video colour temperature. | -| [setExposureCompensation](BarcodeScanner/methods/capture-settings.md#setexposurecompensation) | Adjust the video exposure level. | -| [setFrameRate](BarcodeScanner/methods/capture-settings.md#setframerate) | Adjust the video frame rate. | -| [setZoom](BarcodeScanner/methods/capture-settings.md#setzoom) | Adjust the video zoom ratio. | -| [turnOffTorch](BarcodeScanner/methods/capture-settings.md#turnofftorch) | Turn off the torch/flashlight. | -| [turnOnTorch](BarcodeScanner/methods/capture-settings.md#turnontorch) | Turn on the torch/flashlight. | - -#### Runtime Settings - -The following methods are related to customizing runtime settings. - -| Method | Description | -|----------------------|-------------| -| [updateRuntimeSettings](BarcodeScanner/methods/runtime-settings.md#updateruntimesettings.md) | Modify and update the current runtime settings. | - - -#### Inherited Methods - -The following methods are inherited from the `BarcodeReader` class. - -* [detectEnvironment](BarcodeReader/methods/initialize-and-destroy.md#detectenvironment) -* [isLoaded](BarcodeReader/methods/initialize-and-destroy.md#isloaded) -* [loadWasm](BarcodeReader/methods/initialize-and-destroy.md#loadwasm) -* [getModeArgument](BarcodeReader/methods/parameter-and-runtime-settings.md#getmodeargument) -* [setModeArgument](BarcodeReader/methods/parameter-and-runtime-settings.md#setmodeargument) -* [getRuntimeSettings](BarcodeReader/methods/parameter-and-runtime-settings.md#getruntimesettings) -* [resetRuntimeSettings](BarcodeReader/methods/parameter-and-runtime-settings.md#resetruntimesettings) - -### `BarcodeScanner` Properties - -| Property | Description | -|----------------------|-------------| -| `bPlaySoundOnSuccessfulRead` | If set to `true`, a sound will be played when a barcode is read successfully. | -| [barcodeFillStyle](BarcodeScanner/properties.md#barcodefillstyle) | Set the style used when filling in located barcode. | -| `barcodeLineWidth` | Set the width of the located barcode border. | -| [barcodeStrokeStyle](BarcodeScanner/properties.md#barcodestrokestyle) | Set the style of the located barcode border. | -| [regionMaskFillStyle](BarcodeScanner/properties.md#regionmaskfillstyle) | Set the style used when filling the mask beyond the region. | -| `regionMaskLineWidth` | Set the width of the region border. | -| [regionMaskStrokeStyle](BarcodeScanner/properties.md#regionmaskstrokestyle) | Set the style of the region border. | -| [onFrameRead](BarcodeScanner/properties.md#onframeread) | Triggered a frame has been scanned. | -| [onPlayed](BarcodeScanner/properties.md#onplayed) | Triggered when the camera video stream is played. | -| [onUnduplicatedRead](BarcodeScanner/properties.md#onunduplicatedread) | Triggered when a new, unduplicated barcode is found. | - -#### Inherited Properties - -The following properties are inherited from the `BarcodeReader` class. - -* [_bUseFullFeature](BarcodeReader/properties.md#_busefullfeature) -* `bDestroyed` -* `bSaveOriCanvas` -* `oriCanvas` - -### `BarcodeScanner` Accessors - -| Accessors | Description | -|----------------------|-------------| -| [singleFrameMode](BarcodeScanner/accessors.md#singleframemode) | If set to `true`, single video frames will be used instead of a continuous video stream. | -| [soundOnSuccessfulRead](BarcodeScanner/accessors.md#soundonsuccessfulread) | Get or set the sound to play when a barcode is read successfully. | -| [defaultUIElementURL](BarcodeScanner/accessors.md#defaultuielementurl) | Get or set the default scanner UI. | - -#### Inherited Accessors - -The following accessors are inherited from the `BarcodeReader` class. - -* [engineResourcePath](BarcodeReader/accessors.md#engineresourcepath) -* [productKeys](BarcodeReader/accessors.md#productkeys) -* [version](BarcodeReader/accessors.md#version) - -### `BarcodeScanner` Interfaces - -| Interface | Description | -|----------------------|-------------| -| [FrameFilter](BarcodeScanner/interfaces.md#framefilter) | Filter and discard video frames while focusing. | -| [ScanSettings](BarcodeScanner/interfaces.md#scansettings) | Configures the video stream settings. | -| [ScannerPlayCallbackInfo](BarcodeScanner/interfaces.md#scannerplaycallbackinfo) | Stores the height and width constraints of the video stream. | -| [VideoDeviceInfo](BarcodeScanner/interfaces.md#videodeviceinfo) | Stores the video device information. | - - ---- -## Global Interfaces - -| Interface | Description | -|----------------------|-------------| -| [BarcodeReaderException](global-interfaces.md#barcodereaderexception) | Exceptions raised for Barcode Reader errors. | -| [FurtherModes](global-interfaces.md#furthermodes) | Stores additional modes. | -| [LocalizationResult](global-interfaces.md#localizationresult) | Stores the localization result of the detected barcode. | -| [Region](global-interfaces.md#region) | Stores the barcode region information.| -| [RuntimeSettings](global-interfaces.md#runtimesettings) | Stores the barcode reading runtime settings. | -| [TextResult](global-interfaces.md#textresult) | Stores the decoded barcode text results. | - ---- -## Enumerations - -* [EnumAccompanyingTextRecognitionMode]({{ site.enumerations }}parameter-mode-enums.html#accompanyingtextrecognitionmode) -* [EnumBarcodeColourMode]({{ site.enumerations }}parameter-mode-enums.html#barcodecolourmode) -* [EnumBarcodeComplementMode]({{ site.enumerations }}parameter-mode-enums.html#barcodecomplementmode) -* [EnumBarcodeFormat]({{ site.enumerations }}format-enums.html#barcodeformat) -* [EnumBarcodeFormat_2]({{ site.enumerations }}format-enums.html#barcodeformat_2) -* [EnumBinarizationMode]({{ site.enumerations }}parameter-mode-enums.html#binarizationmode) -* [EnumColourClusteringMode]({{ site.enumerations }}parameter-mode-enums.html#colourclusteringmode) -* [EnumColourConversionMode]({{ site.enumerations }}parameter-mode-enums.html#colourconversionmode) -* [EnumDeformationResistingMode]({{ site.enumerations }}parameter-mode-enums.html#deformationresistingmode) -* [EnumDPMCodeReadingMode]({{ site.enumerations }}parameter-mode-enums.html#dpmcodereadingmode) -* [EnumErrorCode]({{ site.enumerations }}error-code.html) -* [EnumGrayscaleTransformationMode]({{ site.enumerations }}parameter-mode-enums.html#grayscaletransformationmode) -* [EnumImagePixelFormat]({{ site.enumerations }}other-enums.html#imagepixelformat) -* [EnumImagePreprocessingMode]({{ site.enumerations }}parameter-mode-enums.html#imagepreprocessingmode) -* [EnumIMResultDataType]({{ site.enumerations }}result-enums.html#imresultdatatype) -* [EnumIntermediateResultSavingMode]({{ site.enumerations }}result-enums.html#intermediateresultsavingmode) -* [EnumIntermediateResultType]({{ site.enumerations }}result-enums.html#intermediateresulttype) -* [EnumLocalizationMode]({{ site.enumerations }}parameter-mode-enums.html#localizationmode) -* [EnumRegionPredetectionMode]({{ site.enumerations }}parameter-mode-enums.html#regionpredetectionmode) -* [EnumResultCoordinateType]({{ site.enumerations }}result-enums.html#resultcoordinatetype) -* [EnumResultType]({{ site.enumerations }}result-enums.html#resulttype) -* [EnumScaleUpMode]({{ site.enumerations }}parameter-mode-enums.html#scaleupmode) -* [EnumTerminatePhase]({{ site.enumerations }}parameter-mode-enums.html#terminatephase) -* [EnumTextAssistedCorrectionMode]({{ site.enumerations }}parameter-mode-enums.html#textassistedcorrectionmode) -* [EnumTextFilterMode]({{ site.enumerations }}parameter-mode-enums.html#textfiltermode) -* [EnumTextResultOrderMode]({{ site.enumerations }}result-enums.html#textresultordermode) -* [EnumTextureDetectionMode]({{ site.enumerations }}parameter-mode-enums.html#texturedetectionmode) diff --git a/programming-old/javascript/api-reference/index-v8.1.2.md b/programming-old/javascript/api-reference/index-v8.1.2.md deleted file mode 100644 index 3a99b030..00000000 --- a/programming-old/javascript/api-reference/index-v8.1.2.md +++ /dev/null @@ -1,275 +0,0 @@ ---- -layout: default-layout -title: v8.1.2 Entry Page - Dynamsoft Barcode Reader JavaScript Edition API -description: This is the main page of Dynamsoft Barcode Reader JavaScript SDK API Reference. -keywords: api reference, javascript, js -needAutoGenerateSidebar: false -breadcrumbText: API Reference -permalink: /programming/javascript/api-reference/index-v8.1.2.html ---- - - -# Dynamsoft Barcode Reader SDK - JavaScript API Reference - -BarcodeReader -- Decode barcodes from images - * [Methods](#barcodereader-class-methods) - * [Properties](#barcodereader-class-properties) - -BarcodeScanner -- Decode barcodes from videos - * [Methods](#barcodescanner-class-methods) - * [Properties](#barcodescanner-class-properties) - * [Interfaces](#barcodescanner-interfaces) - -[Global Interfaces](#global-interfaces) - -[Enumerations](#enumerations) - ---- - -* BarcodeReader - -The `BarcodeReader` class is used for **image** decoding. - -## `BarcodeReader` *Class* Methods - -### Initialize - -The following methods are related to the initialization of `BarcodeReader` instances. - -| Method | Description | -|----------------------|-------------| -| [createInstance](BarcodeReader/methods/initialize-and-destroy.md#createinstance) | Create a `BarcodeReader` instance. | -| [detectEnvironment](BarcodeReader/methods/initialize-and-destroy.md#detectenvironment) | Detect the current environment. | -| [isLoaded](BarcodeReader/methods/initialize-and-destroy.md#isloaded) | Check if the decoding module is loaded. | -| [loadWasm](BarcodeReader/methods/initialize-and-destroy.md#loadwasm) | Manually load and compile the decoding WASM module. | - -## `BarcodeReader` *Instance* Methods - -### Destroy - -| Method | Description | -|----------------------|-------------| -| [destroy](BarcodeReader/methods/initialize-and-destroy.md#destroy) | Destroy the `BarcodeReader` instance. | - -### Decode - -The following methods are related to decoding barcodes. - -| Method | Description | -|----------------------|-------------| -| [decode](BarcodeReader/methods/decode.md#decode) | Decode barcodes from images, binary data, URLs, and more. | -| [decodeBase64String](BarcodeReader/methods/decode.md#decodebase64string) | Decode barcodes from a base64 encoded string. | -| [decodeBuffer](BarcodeReader/methods/decode.md#decodebuffer) | Decode barcodes from raw buffer. | -| [decodeUrl](BarcodeReader/methods/decode.md#decodeurl) | Decode barcodes from a URL. | - -### Parameter and Runtime Settings - -The following methods are related to customizing mode and runtime settings. - -| Method | Description | -|----------------------|-------------| -| [getRuntimeSettings](BarcodeReader/methods/parameter-and-runtime-settings.md#getruntimesettings) | Get current runtime settings. | -| [resetRuntimeSettings](BarcodeReader/methods/parameter-and-runtime-settings.md#resetruntimesettings) | Reset runtime settings to default. | -| [updateRuntimeSettings](BarcodeReader/methods/parameter-and-runtime-settings.md#updateruntimesettings) | Modify and update the current runtime settings. | -| [getModeArgument](BarcodeReader/methods/parameter-and-runtime-settings.md#getmodeargument) | Get argument value for the specified mode parameter. | -| [setModeArgument](BarcodeReader/methods/parameter-and-runtime-settings.md#setmodeargument) | Set argument value for the specified mode parameter. | - -## `BarcodeReader` *Class* Properties - -| Property | Description | -|----------------------|-------------| -| [_bUseFullFeature](BarcodeReader/properties.md#_busefullfeature) | If set to `true`, use the full-featured WASM module. | -| [engineResourcePath](BarcodeReader/properties.md#engineresourcepath) | Get or set the engine (WASM) location. | -| [productKeys](BarcodeReader/properties.md#productkeys) | Get or set the Dynamsoft Barcode Reader SDK product keys. | -| [version](BarcodeReader/properties.md#version) | Get the current version. | -| [licenseServer](BarcodeReader/properties.md#licenseServer) | Specify by URL the license server from where authorization is acquired at runtime. | -| [handshakeCode](BarcodeReader/properties.md#handshakeCode) | Specify the Handshake Code which determines what authorization is acquired. | -| [sessionPassword](BarcodeReader/properties.md#sessionPassword) | Specify a password which protects the Handshake Code from abuse. | - -## `BarcodeReader` *Instance* Properties - -| Property | Description | -|----------------------|-------------| -| `bDestroyed` | Indicates whether a `BarcodeReader` instance has been destroyed. | -| `bSaveOriCanvas` | If set to `true`, save the original image in `oriCanvas`. | -| `oriCanvas` | An [OffscreenCanvas](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas) object that holds the original image. | -| `_bUseWebgl` | Whether to enable image preprocessing with WebGL APIs, this API may change in the future. | - - ---- -* BarcodeScanner - -The `BarcodeScanner` class is used for **video** decoding. - -## `BarcodeScanner` *Class* Methods - -### Initialize - -The following methods are related to the initialization of `BarcodeScanner` instances. - -| Method | Description | -|----------------------|-------------| -| [createInstance](BarcodeScanner/methods/initialize-and-destroy.md#createinstance) | Create a `BarcodeScanner` instance. | -| [detectEnvironment](BarcodeReader/methods/initialize-and-destroy.md#detectenvironment) | Detect the current environment. Inherited from the `BarcodeReader` class. | -| [isLoaded](BarcodeReader/methods/initialize-and-destroy.md#isloaded) | Check if the decoding module is loaded. Inherited from the `BarcodeReader` class. | -| [loadWasm](BarcodeReader/methods/initialize-and-destroy.md#loadwasm) | Manually load and compile the decoding WASM module. Inherited from the `BarcodeReader` class. | - -## `BarcodeScanner` *Instance* Methods - -The `BarcodeScanner` class is used for **video** decoding. - -### Destroy - -| Method | Description | -|----------------------|-------------| -| [destroy](BarcodeScanner/methods/initialize-and-destroy.md#destroy) | Destroy the `BarcodeScanner` instance. | - -### UI Element - -| Method | Description | -|----------------------|-------------| -| [getUIElement](BarcodeScanner/methods/initialize-and-destroy.md#getuielement) | Get HTML element containing the `BarcodeScanner` instance. | -| [setUIElement](BarcodeScanner/methods/initialize-and-destroy.md#setuielement) | Set html element containing the `BarcodeScanner` instance. | - -### Camera Control - -The following methods are related to controlling the camera and its settings. - -| Method | Description | -|----------------------|-------------| -| [getAllCameras](BarcodeScanner/methods/camera-controls.md#getallcameras) | Get information of all available cameras on the device. | -| [getCurrentCamera](BarcodeScanner/methods/camera-controls.md#getcurrentcamera) | Get information about the currently used camera. | -| [setCurrentCamera](BarcodeScanner/methods/camera-controls.md#setcurrentcamera) | Set camera by its information or device ID. | -| [show](BarcodeScanner/methods/camera-controls.md#show) | Show the camera UI element, open the camera, and start decoding. | -| [showVideo](BarcodeScanner/methods/camera-controls.md#showvideo) | Show the camera UI element, open the camera but do not start decoding. | -| [hide](BarcodeScanner/methods/camera-controls.md#hide) | Stop the camera and hide the camera UI element. | -| [open](BarcodeScanner/methods/camera-controls.md#open) | Open the camera. | -| [close](BarcodeScanner/methods/camera-controls.md#close) | Close and release the camera. | -| [isOpen](BarcodeScanner/methods/camera-controls.md#isopen) | Check if the camera is open. | -| [play](BarcodeScanner/methods/camera-controls.md#play) | Continue the video stream. | -| [pause](BarcodeScanner/methods/camera-controls.md#pause) | Pause the video stream. | -| [stop](BarcodeScanner/methods/camera-controls.md#stop) | Stop the video and release the camera. | -| [pauseScan](BarcodeScanner/methods/camera-controls.md#pausescan) | Pause the video decoding process. | -| [resumeScan](BarcodeScanner/methods/camera-controls.md#resumescan) | Resume the video decoding process. | - -### Capture Settings - -The following methods are related to the camera's capture settings. - -| Method | Description | -|----------------------|-------------| -| [getCapabilities](BarcodeScanner/methods/capture-settings.md#getcapabilities) | Get the camera capabilities. | -| [getResolution](BarcodeScanner/methods/capture-settings.md#getresolution) | Get current video resolution. | -| [setResolution](BarcodeScanner/methods/capture-settings.md#setresolution) | Set current video resolution. | -| [getScanSettings](BarcodeScanner/methods/capture-settings.md#getscansettings) | Get current scan settings. | -| [updateScanSettings](BarcodeScanner/methods/capture-settings.md#updatescansettings) | Modify and update scan settings. | -| [getVideoSettings](BarcodeScanner/methods/capture-settings.md#getvideosettings) | Get current video settings. | -| [updateVideoSettings](BarcodeScanner/methods/capture-settings.md#updatevideosettings) | Modify and update video settings. | -| [setColorTemperature](BarcodeScanner/methods/capture-settings.md#setcolortemperature) | Adjust the video colour temperature. | -| [setExposureCompensation](BarcodeScanner/methods/capture-settings.md#setexposurecompensation) | Adjust the video exposure level. | -| [setFrameRate](BarcodeScanner/methods/capture-settings.md#setframerate) | Adjust the video frame rate. | -| [setZoom](BarcodeScanner/methods/capture-settings.md#setzoom) | Adjust the video zoom ratio. | -| [turnOnTorch](BarcodeScanner/methods/capture-settings.md#turnontorch) | Turn on the torch/flashlight. | -| [turnOffTorch](BarcodeScanner/methods/capture-settings.md#turnofftorch) | Turn off the torch/flashlight. | - -### Runtime Settings - -The following methods are related to customizing runtime settings. - -| Method | Description | -|----------------------|-------------| -| [getRuntimeSettings](BarcodeReader/methods/parameter-and-runtime-settings.md#getruntimesettings) | Get current runtime settings. Inherited from the `BarcodeReader` class. | -| [resetRuntimeSettings](BarcodeReader/methods/parameter-and-runtime-settings.md#resetruntimesettings) | Reset runtime settings to default.Inherited from the `BarcodeReader` class. | -| [updateRuntimeSettings](BarcodeScanner/methods/runtime-settings.md#updateruntimesettings.md) | Modify and update the current runtime settings. | -| [getModeArgument](BarcodeReader/methods/parameter-and-runtime-settings.md#getmodeargument) | Get argument value for the specified mode parameter. Inherited from the `BarcodeReader` class. | -| [setModeArgument](BarcodeReader/methods/parameter-and-runtime-settings.md#setmodeargument) | Set argument value for the specified mode parameter. Inherited from the `BarcodeReader` class. | - -## `BarcodeScanner` *Class* Properties - -| Property | Description | -|----------------------|-------------| -| [defaultUIElementURL](BarcodeScanner/properties.md#defaultuielementurl) | Get or set the default scanner UI. | -| [bUseFullFeature](BarcodeReader/properties.md#_busefullfeature) | If set to `true`, use the full-featured WASM module. Inherited from the `BarcodeReader` class. | -| [engineResourcePath](BarcodeReader/properties.md#engineresourcepath) | Get or set the engine (WASM) location. Inherited from the `BarcodeReader` class. | -| [productKeys](BarcodeReader/properties.md#productkeys) | Get or set the Dynamsoft Barcode Reader SDK product keys. Inherited from the `BarcodeReader` class. | -| [version](BarcodeReader/properties.md#version) | Get the current version. Inherited from the `BarcodeReader` class. | -| [licenseServer](BarcodeReader/properties.md#licenseServer) | Specify by URL the license server from where authorization is acquired at runtime. Inherited from the `BarcodeReader` class. | -| [handshakeCode](BarcodeReader/properties.md#handshakeCode) | Specify the Handshake Code which determines what authorization is acquired. Inherited from the `BarcodeReader` class. | -| [sessionPassword](BarcodeReader/properties.md#sessionPassword) | Specify a password which protects the Handshake Code from abuse. Inherited from the `BarcodeReader` class. | - -## `BarcodeScanner` *Instance* Properties - -| Property | Description | -|----------------------|-------------| -| `bDestroyed` | Indicates whether a `BarcodeScanner` instance has been destroyed. Inherited from the `BarcodeReader` class. | -| `bSaveOriCanvas` | If set to `true`, save the original image in `oriCanvas`. Inherited from the `BarcodeReader` class. | -| `oriCanvas` | An [OffscreenCanvas](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas) object that holds the original image. Inherited from the `BarcodeReader` class. | -| `_bUseWebgl` | Whether to enable image preprocessing with WebGL APIs, this API may change in the future. Inherited from the `BarcodeReader` class. | -| [bPlaySoundOnSuccessfulRead](BarcodeScanner/properties.md#bplaysoundonsuccessfulread) | If set to `true`, a sound will be played when a barcode is read successfully. You can change the sound using [soundOnSuccessfulRead](BarcodeScanner/properties.md#soundonsuccessfulread)| -| [bVibrateOnSuccessfulRead](BarcodeScanner/properties.md#bvibrateonsuccessfulread) | Whether to vibrate when the scanner reads a barcode successfully. | -| [barcodeFillStyle](BarcodeScanner/properties.md#barcodefillstyle) | Set the style used when filling in located barcode. | -| `barcodeLineWidth` | Set the width of the located barcode border. | -| [barcodeStrokeStyle](BarcodeScanner/properties.md#barcodestrokestyle) | Set the style of the located barcode border. | -| [regionMaskFillStyle](BarcodeScanner/properties.md#regionmaskfillstyle) | Set the style used when filling the mask beyond the region. | -| `regionMaskLineWidth` | Set the width of the region border. | -| [regionMaskStrokeStyle](BarcodeScanner/properties.md#regionmaskstrokestyle) | Set the style of the region border. | -| [onFrameRead](BarcodeScanner/properties.md#onframeread) | Triggered a frame has been scanned. | -| [onPlayed](BarcodeScanner/properties.md#onplayed) | Triggered when the camera video stream is played. | -| [onUnduplicatedRead](BarcodeScanner/properties.md#onunduplicatedread) | Triggered when a new, unduplicated barcode is found. | -| [singleFrameMode](BarcodeScanner/properties.md#singleframemode) | If set to `true`, single video frames will be used instead of a continuous video stream. | -| [soundOnSuccessfulRead](BarcodeScanner/properties.md#soundonsuccessfulread) | Get or set the sound to play when a barcode is read successfully. | -| [vibrateDuration](BarcodeScanner/properties.md#vibrateduration) | Get or set how long the vibration lasts. | - -## `BarcodeScanner` Interfaces - -| Interface | Description | -|----------------------|-------------| -| [FrameFilter](BarcodeScanner/interfaces.md#framefilter) | Filter and discard video frames while focusing. | -| [ScanSettings](BarcodeScanner/interfaces.md#scansettings) | Configures the video stream settings. | -| [ScannerPlayCallbackInfo](BarcodeScanner/interfaces.md#scannerplaycallbackinfo) | Stores the height and width constraints of the video stream. | -| [VideoDeviceInfo](BarcodeScanner/interfaces.md#videodeviceinfo) | Stores the video device information. | - ---- -## Global Interfaces - -| Interface | Description | -|----------------------|-------------| -| [BarcodeReaderException](global-interfaces.md#barcodereaderexception) | Exceptions raised for Barcode Reader errors. | -| [FurtherModes](global-interfaces.md#furthermodes) | Stores additional modes. | -| [LocalizationResult](global-interfaces.md#localizationresult) | Stores the localization result of the detected barcode. | -| [Region](global-interfaces.md#region) | Stores the barcode region information.| -| [RuntimeSettings](global-interfaces.md#runtimesettings) | Stores the barcode reading runtime settings. | -| [TextResult](global-interfaces.md#textresult) | Stores the decoded barcode text results. | - ---- -## Enumerations - -* [EnumBarcodeColourMode]({{ site.enumerations }}parameter-mode-enums.html#barcodecolourmode) -* [EnumBarcodeComplementMode]({{ site.enumerations }}parameter-mode-enums.html#barcodecomplementmode) -* [EnumBarcodeFormat]({{ site.enumerations }}format-enums.html#barcodeformat) -* [EnumBarcodeFormat_2]({{ site.enumerations }}format-enums.html#barcodeformat_2) -* [EnumBinarizationMode]({{ site.enumerations }}parameter-mode-enums.html#binarizationmode) -* [EnumColourClusteringMode]({{ site.enumerations }}parameter-mode-enums.html#colourclusteringmode) -* [EnumColourConversionMode]({{ site.enumerations }}parameter-mode-enums.html#colourconversionmode) -* [EnumDeblurMode]({{ site.enumerations }}parameter-mode-enums.html#deblurmode) -* [EnumDeformationResistingMode]({{ site.enumerations }}parameter-mode-enums.html#deformationresistingmode) -* [EnumDMChargeWay]({{ site.enumerations }}other-enums.html#dm_chargeway) -* [EnumDMLicenseModule]({{ site.enumerations }}other-enums.html#dm_licensemodule) -* [EnumDMUUIDGenerationMethod]({{ site.enumerations }}other-enums.html#dm_uuidgenerationmethod) -* [EnumDPMCodeReadingMode]({{ site.enumerations }}parameter-mode-enums.html#dpmcodereadingmode) -* [EnumErrorCode]({{ site.enumerations }}error-code.html) -* [EnumGrayscaleTransformationMode]({{ site.enumerations }}parameter-mode-enums.html#grayscaletransformationmode) -* [EnumImagePixelFormat]({{ site.enumerations }}other-enums.html#imagepixelformat) -* [EnumImagePreprocessingMode]({{ site.enumerations }}parameter-mode-enums.html#imagepreprocessingmode) -* [EnumIMResultDataType]({{ site.enumerations }}result-enums.html#imresultdatatype) -* [EnumIntermediateResultSavingMode]({{ site.enumerations }}result-enums.html#intermediateresultsavingmode) -* [EnumIntermediateResultType]({{ site.enumerations }}result-enums.html#intermediateresulttype) -* [EnumLocalizationMode]({{ site.enumerations }}parameter-mode-enums.html#localizationmode) -* [EnumRegionPredetectionMode]({{ site.enumerations }}parameter-mode-enums.html#regionpredetectionmode) -* [EnumResultCoordinateType]({{ site.enumerations }}result-enums.html#resultcoordinatetype) -* [EnumResultType]({{ site.enumerations }}result-enums.html#resulttype) -* [EnumScaleUpMode]({{ site.enumerations }}parameter-mode-enums.html#scaleupmode) -* [EnumTerminatePhase]({{ site.enumerations }}parameter-mode-enums.html#terminatephase) -* [EnumTextFilterMode]({{ site.enumerations }}parameter-mode-enums.html#textfiltermode) -* [EnumTextResultOrderMode]({{ site.enumerations }}result-enums.html#textresultordermode) -* [EnumTextureDetectionMode]({{ site.enumerations }}parameter-mode-enums.html#texturedetectionmode) diff --git a/programming-old/javascript/api-reference/index-v8.2.5.md b/programming-old/javascript/api-reference/index-v8.2.5.md deleted file mode 100644 index 11e881e9..00000000 --- a/programming-old/javascript/api-reference/index-v8.2.5.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -layout: default-layout -title: v8.2.5 Entry Page - Dynamsoft Barcode Reader JavaScript Edition API -description: This is the main page of Dynamsoft Barcode Reader JavaScript SDK API Reference. -keywords: BarcodeScanner, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: API Reference -permalink: /programming/javascript/api-reference/index-v8.2.5.html ---- - -# Dynamsoft Barcode Reader SDK - JavaScript API Reference - -Classes - -- [BarcodeReader](BarcodeReader.md): Reads barcodes from images. -- [BarcodeScanner](BarcodeScanner.md) : Gets camera input and scans barcodes from video frames. - -Interfaces - -- [LocalizationResult](interface/LocalizationResult.md) -- [Region](interface/Region.md) -- [RuntimeSettings](interface/RuntimeSettings.md) -- [ScannerPlayCallbackInfo](interface/ScannerPlayCallbackInfo.md) -- [ScanSettings](interface/ScanSettings.md) -- [TextResult](interface/TextResult.md) -- [VideoDeviceInfo](interface/VideoDeviceInfo.md) - -Enums - -- [EnumBarcodeColourMode](enum/EnumBarcodeColourMode.md) -- [EnumBarcodeComplementMode](enum/EnumBarcodeComplementMode.md) -- [EnumBarcodeFormat](enum/EnumBarcodeFormat.md) -- [EnumBarcodeFormat_2](enum/EnumBarcodeFormat_2.md) -- [EnumBinarizationMode](enum/EnumBinarizationMode.md) -- [EnumClarityCalculationMethod](enum/EnumClarityCalculationMethod.md) -- [EnumClarityFilterMode](enum/EnumClarityFilterMode.md) -- [EnumColourClusteringMode](enum/EnumColourClusteringMode.md) -- [EnumColourConversionMode](enum/EnumColourConversionMode.md) -- [EnumConflictMode](enum/EnumConflictMode.md) -- [EnumDeblurMode](enum/EnumDeblurMode.md) -- [EnumDeformationResistingMode](enum/EnumDeformationResistingMode.md) -- [EnumDPMCodeReadingMode](enum/EnumDPMCodeReadingMode.md) -- [EnumErrorCode](enum/EnumErrorCode.md) -- [EnumGrayscaleTransformationMode](enum/EnumGrayscaleTransformationMode.md) -- [EnumImagePixelFormat](enum/EnumImagePixelFormat.md) -- [EnumImagePreprocessingMode](enum/EnumImagePreprocessingMode.md) -- [EnumIMResultDataType](enum/EnumIMResultDataType.md) -- [EnumIntermediateResultSavingMode](enum/EnumIntermediateResultSavingMode.md) -- [EnumIntermediateResultType](enum/EnumIntermediateResultType.md) -- [EnumLocalizationMode](enum/EnumLocalizationMode.md) -- [EnumPDFReadingMode](enum/EnumPDFReadingMode.md) -- [EnumQRCodeErrorCorrectionLevel](enum/EnumQRCodeErrorCorrectionLevel.md) -- [EnumRegionPredetectionMode](enum/EnumRegionPredetectionMode.md) -- [EnumResultCoordinateType](enum/EnumResultCoordinateType.md) -- [EnumResultType](enum/EnumResultType.md) -- [EnumScaleUpMode](enum/EnumScaleUpMode.md) -- [EnumTerminatePhase](enum/EnumTerminatePhase.md) -- [EnumTextFilterMode](enum/EnumTextFilterMode.md) -- [EnumTextResultOrderMode](enum/EnumTextResultOrderMode.md) -- [EnumTextureDetectionMode](enum/EnumTextureDetectionMode.md) - diff --git a/programming-old/javascript/api-reference/index-v8.4.0.md b/programming-old/javascript/api-reference/index-v8.4.0.md deleted file mode 100644 index 6abe197e..00000000 --- a/programming-old/javascript/api-reference/index-v8.4.0.md +++ /dev/null @@ -1,236 +0,0 @@ ---- -layout: default-layout -title: v8.4.0 Entry Page - Dynamsoft Barcode Reader JavaScript Edition API -description: This is the main page of Dynamsoft Barcode Reader JavaScript SDK API Reference. -keywords: BarcodeScanner, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -noTitleIndex: true -breadcrumbText: API Reference -permalink: /programming/javascript/api-reference/index-v8.4.0.html ---- - -# JavaScript API Reference - -The library comes with two primary Classes: `BarcodeReader` and `BarcodeScanner`. - -## BarcodeReader - -A low-level barcode reader that processes still images and return barcode results. The following code snippet shows its basic usage. - -```js -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -let results = await reader.decode(imageSource); -for(let result of results){ - console.log(result.barcodeText); -} -``` - -The APIs for this class include - -### Create and Destroy Instances - -| API Name | Description | -|---|---| -| [createInstance]({{ site.js }}api-reference/BarcodeReader-v8.4.0.html#createinstance) | Creates a `BarcodeReader` instance. | -| [destroy]({{ site.js }}api-reference/BarcodeReader-v8.4.0.html#destroy) | Destroies the BarcodeReader instance. | -| [bDestroyed]({{ site.js }}api-reference/BarcodeReader-v8.4.0.html#bdestroyed) | Indicates whether the instance has been destroyed. | - -### Decode Barcodes - -| API Name | Description | -|---|---| -| [decode]({{ site.js }}api-reference/BarcodeReader-v8.4.0.html#decode) | Decodes barcodes from an image. | -| [decodeBase64String]({{ site.js }}api-reference/BarcodeReader-v8.4.0.html#decodebase64string) | Decodes barcodes from a base64-encoded image (with or without MIME). | -| [decodeUrl]({{ site.js }}api-reference/BarcodeReader-v8.4.0.html#decodeurl) | Decodes barcodes from an image specified by its URL. | -| [decodeBuffer]({{ site.js }}api-reference/BarcodeReader-v8.4.0.html#decodebuffer) | Decodes barcodes from raw image data. | - -### Change Settings - -| API Name | Description | -|---|---| -| [getRuntimeSettings]({{ site.js }}api-reference/BarcodeReader-v8.4.0.html#getruntimesettings) | Returns the current runtime settings. | -| [updateRuntimeSettings]({{ site.js }}api-reference/BarcodeReader-v8.4.0.html#updateruntimesettings) | Updates runtime settings with a given struct or a preset template. | -| [resetRuntimeSettings]({{ site.js }}api-reference/BarcodeReader-v8.4.0.html#resetruntimesettings) | Resets all parameters to default values. | -| [getModeArgument]({{ site.js }}api-reference/BarcodeReader-v8.4.0.html#getmodeargument) | Returns the argument value for the specified mode parameter. | -| [setModeArgument]({{ site.js }}api-reference/BarcodeReader-v8.4.0.html#setmodeargument) | Sets the argument value for the specified mode parameter. | - -### Auxiliary - -| API Name | Description | -|---|---| -| [bSaveOriCanvas]({{ site.js }}api-reference/BarcodeReader-v8.4.0.html#bsaveoricanvas) | Whether to save the original image into a <canvas> element. | -| [oriCanvas]({{ site.js }}api-reference/BarcodeReader-v8.4.0.html#oricanvas) | An `HTMLCanvasElement` that holds the original image. | - -
    - -## BarcodeScanner - -A barcode scanner object gets access to a camera via the [MediaDevices](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices) interface, then uses its built-in UI to show the camera input and perform continuous barcode scanning on the incoming frames. - -The default built-in UI of each barcode scanner is defined in the file "dbr.scanner.html". If used directly, the UI will fit the entire page and sit on top. There are a few ways to customize it, read more on how to [Customize the UI](../user-guide/#customize-the-ui). - -Although a barcode scanner is designed to scan barcodes from a video input, it also supports a special mode called [singleFrameMode]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#singleframemode) which allows the user to select a still image or take a shot with the mobile camera for barcode scanning. - -The following code snippet shows the basic usage of the `BarcodeScanner` class. - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -scanner.onUnduplicatedRead = txt => console.log(txt); -await scanner.show(); -``` - -The `BarcodeScanner` is a child class of [BarcodeReader](./BarcodeReader.md) and inherits all its methods and properties. APIs not directly inherited include - - -### Create and Destroy Instances - -| API Name | Description | -|---|---| -| [createInstance]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#createinstance) | Creates a `BarcodeScanner` instance. | -| [destroy]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#destroy) | Destroys the `BarcodeScanner` instance. | -| [bDestroyed]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#bdestroyed) | Indicates whether the instance has been destroyed. | - -### Decode Barcodes - -| API Name | Description | -|---|---| -| [onUnduplicatedRead]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#onunduplicatedread) | This event is triggered when a new, unduplicated barcode is found. | -| [onFrameRead]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#onframeread) | This event is triggered after the library finishes scanning a frame. | -| [decodeCurrentFrame]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#decodecurrentframe) | Scans the current frame of the video for barcodes. | - -### Basic Interaction - -| API Name | Description | -|---|---| -| [show]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#show) | Binds and shows UI, opens the camera and starts decoding. | -| [hide]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#hide) | Stops decoding, releases camera and unbinds UI. | -| [pauseScan]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#pausescan) | Pauses the decoding process. | -| [resumeScan]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#resumescan) | Resumes the decoding process. | - -### Scan Settings - -| API Name | Description | -|---|---| -| [bPlaySoundOnSuccessfulRead]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#bplaysoundonsuccessfulread) | Whether and when to play sound on barcode recognition. | -| [soundOnSuccessfullRead]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#soundonsuccessfullread) | Specifies the sound to play on barcode recognition. | -| [bVibrateOnSuccessfulRead]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#bvibrateonsuccessfulread) | Whether and when to vibrate on barcode recognition. | -| [vibrateDuration]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#vibrateduration) | Returns or sets how long the vibration lastsin milliseconds. | -| [singleFrameMode]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#singleframemode) | Returns or sets whether to enable the singe-frame mode. | | -| [getScanSettings]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#getscansettings) | Returns the current scan settings. | -| [updateScanSettings]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#updatescansettings) | Changes scan settings with the object passed in. | - -### UI Control - -| API Name | Description | -|---|---| -| [getUIElement]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#getuielement) | Returns the HTML element that is used by the `BarcodeScanner` instance. | -| [setUIElement]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#setuielement) | Specifies an HTML element for the `BarcodeScanner` instance to use as its UI. | -| [defaultUIElementURL]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#defaultuielementurl) | Returns or sets the URL of the .html file that defines the default UI Element. | -| [barcodeFillStyle]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#barcodefillstyle) | Specifies the color used inside the shape which highlights a found barcode. | -| [barcodeStrokeStyle]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#barcodestrokestyle) | Specifies the color used to paint the outline of the shape which highlights a found barcode. | -| [barcodeLineWidth]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#barcodelinewidth) | Specifies the line width of the outline of the shape which highlights a found barcode. | -| [regionMaskFillStyle]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#regionmaskfillstyle) | Specifies the color used in the square-loop shape between the actual scanning area and the boundary of the video input. | -| [regionMaskStrokeStyle]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#regionmaskstrokestyle) | Specifies the color used to paint the outline of the scanning region. | -| [regionMaskLineWidth]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#regionmasklinewidth) | Specifies the width of the outline of the scanning region. | - -### Camera Control - -| API Name | Description | -|---|---| -| [getAllCameras]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#getallcameras) | Returns infomation of all available cameras on the device. | -| [getCurrentCamera]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#getcurrentcamera) | Returns information about the current camera. | -| [setCurrentCamera]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#setcurrentcamera) | Chooses a camera as the video source. | -| [getResolution]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#getresolution) | Returns the resolution of the current video input. | -| [setResolution]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#setresolution) | Sets the resolution of the current video input. | -| [getVideoSettings]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#getvideosettings) | Returns the current video settings. | -| [updateVideoSettings]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#updatevideosettings) | Changes the video input. | -| [openVideo]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#openvideo) | Binds UI and opens the camera to show the video stream. | -| [showVideo]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#showvideo) | Similar to openVideo but will also show the UI Element if it is hidden. | -| [play]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#play) | Play the video if it is already open but paused or stopped. | -| [onPlayed]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#onplayed) | This event is triggered when the video stream starts playing. | -| [pause]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#pause) | Pauses the video without releasing the camera. | -| [stop]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#stop) | Stops the video and releases the camera. | - -### Advanced Camera Control - -| API Name | Description | -|---|---| -| [getCapabilities]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#getcapabilities) | Inspects and returns the capabilities of the current camera. | -| [getCameraSettings]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#getcamerasettings) | Returns the current values for each constrainable property of the current camera. | -| [setFrameRate]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#setframerate) | Adjusts the frame rate. | -| [setColorTemperature]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#setcolortemperature) | Adjusts the color temperature. | -| [setExposureCompensation]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#setexposurecompensation) | Sets the exposure compensation index. | -| [setZoom]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#setzoom) | Sets the exposure compensation index. | -| [turnOnTorch]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#turnontorch) | Turns on the torch/flashlight. | -| [turnOffTorch]({{ site.js }}api-reference/BarcodeScanner-v8.4.0.html#turnofftorch) | Turns off the torch/flashlight. | - -## License Control - -The library provides flexible licensing options with the support of the following APIs - -* [licenseServer](LicenseControl-v8.8.7.md#licenseserver) -* [organizationID](LicenseControl-v8.8.7.md#organizationid) -* [handshakeCode](LicenseControl-v8.8.7.md#handshakecode) -* [sessionPassword](LicenseControl-v8.8.7.md#sessionpassword) -* [deviceFriendlyName](LicenseControl-v8.8.7.md#devicefriendlyname) -* [productKeys](LicenseControl-v8.8.7.md#productkeys) - -## Initialization Control - -The following static methods and properties help to set up the runtime environment for the library. - -* [_bUseFullFeature]({{ site.js }}api-reference/InitializationControl-v8.4.0.html#_busefullfeature) -* [engineResourcePath]({{ site.js }}api-reference/InitializationControl-v8.4.0.html#engineresourcepath) -* [loadWasm]({{ site.js }}api-reference/InitializationControl-v8.4.0.html#loadwasm) -* [isLoaded]({{ site.js }}api-reference/InitializationControl-v8.4.0.html#isloaded) -* [version]({{ site.js }}api-reference/InitializationControl-v8.4.0.html#version) -* [detectEnvironment]({{ site.js }}api-reference/InitializationControl-v8.4.0.html#detectenvironment) - -## Interfaces and Enums - -In order to make the code more predictable and readable, the library defines a series of supporting interfaces and enumerations. - -### Interfaces - -* [LocalizationResult](interface/LocalizationResult.md) -* [Region](interface/Region.md) -* [RuntimeSettings](interface/RuntimeSettings.md) -* [ScannerPlayCallbackInfo](interface/ScannerPlayCallbackInfo.md) -* [ScanSettings](interface/ScanSettings.md) -* [TextResult](interface/TextResult.md) -* [VideoDeviceInfo](interface/VideoDeviceInfo.md) - -### Enums - -* [EnumBarcodeColourMode](enum/EnumBarcodeColourMode.md) -* [EnumBarcodeComplementMode](enum/EnumBarcodeComplementMode.md) -* [EnumBarcodeFormat](enum/EnumBarcodeFormat.md) -* [EnumBarcodeFormat_2](enum/EnumBarcodeFormat_2.md) -* [EnumBinarizationMode](enum/EnumBinarizationMode.md) -* [EnumClarityCalculationMethod](enum/EnumClarityCalculationMethod.md) -* [EnumClarityFilterMode](enum/EnumClarityFilterMode.md) -* [EnumColourClusteringMode](enum/EnumColourClusteringMode.md) -* [EnumColourConversionMode](enum/EnumColourConversionMode.md) -* [EnumConflictMode](enum/EnumConflictMode.md) -* [EnumDeblurMode](enum/EnumDeblurMode.md) -* [EnumDeformationResistingMode](enum/EnumDeformationResistingMode.md) -* [EnumDPMCodeReadingMode](enum/EnumDPMCodeReadingMode.md) -* [EnumErrorCode](enum/EnumErrorCode.md) -* [EnumGrayscaleTransformationMode](enum/EnumGrayscaleTransformationMode.md) -* [EnumImagePixelFormat](enum/EnumImagePixelFormat.md) -* [EnumImagePreprocessingMode](enum/EnumImagePreprocessingMode.md) -* [EnumIMResultDataType](enum/EnumIMResultDataType.md) -* [EnumIntermediateResultSavingMode](enum/EnumIntermediateResultSavingMode.md) -* [EnumIntermediateResultType](enum/EnumIntermediateResultType.md) -* [EnumLocalizationMode](enum/EnumLocalizationMode.md) -* [EnumPDFReadingMode](enum/EnumPDFReadingMode.md) -* [EnumQRCodeErrorCorrectionLevel](enum/EnumQRCodeErrorCorrectionLevel.md) -* [EnumRegionPredetectionMode](enum/EnumRegionPredetectionMode.md) -* [EnumResultCoordinateType](enum/EnumResultCoordinateType.md) -* [EnumResultType](enum/EnumResultType.md) -* [EnumScaleUpMode](enum/EnumScaleUpMode.md) -* [EnumTerminatePhase](enum/EnumTerminatePhase.md) -* [EnumTextFilterMode](enum/EnumTextFilterMode.md) -* [EnumTextResultOrderMode](enum/EnumTextResultOrderMode.md) -* [EnumTextureDetectionMode](enum/EnumTextureDetectionMode.md) diff --git a/programming-old/javascript/api-reference/index-v8.8.7.md b/programming-old/javascript/api-reference/index-v8.8.7.md deleted file mode 100644 index b6900f2c..00000000 --- a/programming-old/javascript/api-reference/index-v8.8.7.md +++ /dev/null @@ -1,242 +0,0 @@ ---- -layout: default-layout -title: v8.8.7 Entry Page - Dynamsoft Barcode Reader JavaScript Edition API -description: This is the main page of Dynamsoft Barcode Reader JavaScript SDK API Reference. -keywords: BarcodeScanner, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -noTitleIndex: true -breadcrumbText: API Reference -permalink: /programming/javascript/api-reference/index-v8.8.7.html ---- - -# JavaScript API Reference - -The Dynamsoft Barcode Reader JavaScript library comes with two primary classes: `BarcodeReader` and `BarcodeScanner`. - -## BarcodeReader - -A low-level barcode reader that processes still images and returns barcode results. The following code snippet shows its basic usage: - -```js -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -let results = await reader.decode(imageSource); -for(let result of results){ - console.log(result.barcodeText); -} -``` - -The APIs for this class include: - -### Create and Destroy Instances - -| API Name | Description | -|---|---| -| [createInstance()](BarcodeReader.md#createinstance) | Creates a `BarcodeReader` instance. | -| [destroyContext()](BarcodeReader.md#destroycontext) | Destroys the `BarcodeReader` instance. | -| [isContextDestroyed()](BarcodeReader.md#iscontextdestroyed) | Returns whether the instance has been destroyed. | - -### Decode Barcodes - -| API Name | Description | -|---|---| -| [decode()](BarcodeReader.md#decode) | Decodes barcodes from an image. | -| [decodeBase64String()](BarcodeReader.md#decodebase64string) | Decodes barcodes from a base64-encoded image (with or without MIME). | -| [decodeUrl()](BarcodeReader.md#decodeurl) | Decodes barcodes from an image specified by its URL. | -| [decodeBuffer()](BarcodeReader.md#decodebuffer) | Decodes barcodes from raw image data. | - -### Change Settings - -| API Name | Description | -|---|---| -| [getRuntimeSettings()](BarcodeReader.md#getruntimesettings) | Returns the current runtime settings. | -| [updateRuntimeSettings()](BarcodeReader.md#updateruntimesettings) | Updates runtime settings with a given struct or a preset template. | -| [resetRuntimeSettings()](BarcodeReader.md#resetruntimesettings) | Resets all parameters to default values. | -| [getModeArgument()](BarcodeReader.md#getmodeargument) | Returns the argument value for the specified mode parameter. | -| [setModeArgument()](BarcodeReader.md#setmodeargument) | Sets the argument value for the specified mode parameter. | - -### Auxiliary - -| API Name | Description | -|---|---| -| [ifSaveOriginalImageInACanvas](BarcodeReader.md#ifsaveoriginalimageinacanvas) | Whether to save the original image into a <canvas> element. | -| [getOriginalImageInACanvas()](BarcodeReader.md#getoriginalimageinacanvas) | Returns an `HTMLCanvasElement` that holds the original image. | - -
    - -## BarcodeScanner - -A barcode scanner object gets access to a camera via the [MediaDevices](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices) interface, then uses its built-in UI to show the camera input and performs continuous barcode scanning on the incoming frames. - -The default built-in UI of each barcode scanner is defined in the file `dbr.scanner.html` and it fits the entire page and sits on top. Read more on how to [Customize the UI](../user-guide/#customize-the-ui). - -Although a barcode scanner is designed to scan barcodes from a video input, it also supports a special mode called [singleFrameMode](BarcodeScanner.md#singleframemode) which allows users to select a still image or take a shot with the camera for barcode scanning. - -The following code snippet shows the basic usage of the `BarcodeScanner` class. - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -scanner.onUnduplicatedRead = txt => console.log(txt); -await scanner.show(); -``` - -The `BarcodeScanner` is a child class of [BarcodeReader](./BarcodeReader.md) and inherits all its methods and properties. APIs not directly inherited include: - -### Create and Destroy Instances - -| API Name | Description | -|---|---| -| [createInstance()](BarcodeScanner.md#createinstance) | Creates a `BarcodeScanner` instance. | -| [destroyContext()](BarcodeScanner.md#destroycontext) | Destroys the `BarcodeScanner` instance. | -| [isContextDestroyed()](BarcodeScanner.md#iscontextdestroyed) | Returns whether the instance has been destroyed. | - -### Decode Barcodes - -| API Name | Description | -|---|---| -| [onUnduplicatedRead](BarcodeScanner.md#onunduplicatedread) | This event is triggered when a new, unduplicated barcode is found. | -| [onFrameRead](BarcodeScanner.md#onframeread) | This event is triggered after the library finishes scanning a frame. | - -### Basic Interaction - -| API Name | Description | -|---|---| -| [show()](BarcodeScanner.md#show) | Binds and shows UI, opens the camera and starts decoding. | -| [hide()](BarcodeScanner.md#hide) | Stops decoding, releases camera, hides and unbinds UI. | -| [open()](BarcodeScanner.md#open) | Binds UI, opens the camera and starts decoding. Meant for use with frameworks like Angular, Vue, React. | -| [close()](BarcodeScanner.md#close) | Stops decoding, releases camera and unbinds UI. Meant for use with frameworks like Angular, Vue, React. | - -### Scan Settings - -| API Name | Description | -|---|---| -| [whenToPlaySoundforSuccessfulRead](BarcodeScanner.md#whentoplaysoundforsuccessfulread) | Sets when to play sound on barcode recognition. | -| [soundOnSuccessfullRead](BarcodeScanner.md#soundonsuccessfullread) | Specifies the sound to play on barcode recognition. | -| [whenToVibrateforSuccessfulRead](BarcodeScanner.md#whentovibrateforsuccessfulread) | Sets when to vibrate on barcode recognition. | -| [vibrateDuration](BarcodeScanner.md#vibrateduration) | Returns or sets how long the vibration lasts in milliseconds. | -| [singleFrameMode](BarcodeScanner.md#singleframemode) | Returns or sets whether to enable the singe-frame mode. | -| [getScanSettings()](BarcodeScanner.md#getscansettings) | Returns the current scan settings. | -| [updateScanSettings()](BarcodeScanner.md#updatescansettings) | Changes scan settings with the object passed in. | - -### UI Control - -| API Name | Description | -|---|---| -| [getUIElement()](BarcodeScanner.md#getuielement) | Returns the HTML element that is used by the `BarcodeScanner` instance. | -| [setUIElement()](BarcodeScanner.md#setuielement) | Specifies an HTML element for the `BarcodeScanner` instance to use as its UI. | -| [defaultUIElementURL](BarcodeScanner.md#defaultuielementurl) | Returns or sets the URL of the .html file that defines the default UI Element. | -| [barcodeFillStyle](BarcodeScanner.md#barcodefillstyle) | Specifies the color used inside the shape which highlights a found barcode. | -| [barcodeStrokeStyle](BarcodeScanner.md#barcodestrokestyle) | Specifies the color used to paint the outline of the shape which highlights a found barcode. | -| [barcodeLineWidth](BarcodeScanner.md#barcodelinewidth) | Specifies the line width of the outline of the shape which highlights a found barcode. | -| [regionMaskFillStyle](BarcodeScanner.md#regionmaskfillstyle) | Specifies the color used in the square-loop shape between the actual scanning area and the boundary of the video input. | -| [regionMaskStrokeStyle](BarcodeScanner.md#regionmaskstrokestyle) | Specifies the color used to paint the outline of the scanning region. | -| [regionMaskLineWidth](BarcodeScanner.md#regionmasklinewidth) | Specifies the width of the outline of the scanning region. | - -### Camera Control - -| API Name | Description | -|---|---| -| [getAllCameras()](BarcodeScanner.md#getallcameras) | Returns infomation of all available cameras on the device. | -| [getCurrentCamera()](BarcodeScanner.md#getcurrentcamera) | Returns information about the current camera. | -| [setCurrentCamera()](BarcodeScanner.md#setcurrentcamera) | Chooses a camera as the video source. | -| [getResolution()](BarcodeScanner.md#getresolution) | Returns the resolution of the current video input. | -| [setResolution()](BarcodeScanner.md#setresolution) | Sets the resolution of the current video input. | -| [getVideoSettings()](BarcodeScanner.md#getvideosettings) | Returns the current video settings. | -| [updateVideoSettings()](BarcodeScanner.md#updatevideosettings) | Changes the video input. | - -### Video Decoding Process Control - -| API Name | Description | -|---|---| -| [play()](BarcodeScanner.md#play) | Play the video if it is already open but paused or stopped. | -| [onPlayed](BarcodeScanner.md#onplayed) | This event is triggered when the video stream starts playing. | -| [pauseScan()](BarcodeScanner.md#pausescan) | Pauses the decoding process. | -| [resumeScan()](BarcodeScanner.md#resumescan) | Resumes the decoding process. | -| [pause()](BarcodeScanner.md#pause) | Pauses the video without releasing the camera. | -| [stop()](BarcodeScanner.md#stop) | Stops the video and releases the camera. | - -### Advanced Camera Control - -| API Name | Description | -|---|---| -| [getCapabilities()](BarcodeScanner.md#getcapabilities) | Inspects and returns the capabilities of the current camera. | -| [getCameraSettings()](BarcodeScanner.md#getcamerasettings) | Returns the current values for each constrainable property of the current camera. | -| [setFrameRate()](BarcodeScanner.md#setframerate) | Adjusts the frame rate. | -| [setColorTemperature()](BarcodeScanner.md#setcolortemperature) | Adjusts the color temperature. | -| [setExposureCompensation()](BarcodeScanner.md#setexposurecompensation) | Sets the exposure compensation index. | -| [setZoom()](BarcodeScanner.md#setzoom) | Sets the exposure compensation index. | -| [turnOnTorch()](BarcodeScanner.md#turnontorch) | Turns on the torch/flashlight. | -| [turnOffTorch()](BarcodeScanner.md#turnofftorch) | Turns off the torch/flashlight. | - -## License Control - -The library provides flexible licensing options with the support of the following APIs: - -* [license](LicenseControl.md#license) -* [licenseServer](LicenseControl.md#licenseserver) -* [sessionPassword](LicenseControl.md#sessionpassword) -* [deviceFriendlyName](LicenseControl.md#devicefriendlyname) - -Deprecated APIs: - -* [organizationID](LicenseControl.md#organizationid) -* [handshakeCode](LicenseControl.md#handshakecode) -* [productKeys](LicenseControl.md#productkeys) - -## Initialization Control - -The following static methods and properties help to set up the runtime environment for the library: - -* [engineResourcePath](InitializationControl.md#engineresourcepath) -* [loadWasm()](InitializationControl.md#loadwasm) -* [isLoaded()](InitializationControl.md#isloaded) -* [version](InitializationControl.md#version) -* [detectEnvironment()](InitializationControl.md#detectenvironment) - -## Interfaces and Enums - -In order to make the code more predictable and readable, the library defines a series of supporting interfaces and enumerations: - -### Interfaces - -* [LocalizationResult](interface/LocalizationResult.md) -* [Region](interface/Region.md) -* [RuntimeSettings](interface/RuntimeSettings.md) -* [ScannerPlayCallbackInfo](interface/ScannerPlayCallbackInfo.md) -* [ScanSettings](interface/ScanSettings.md) -* [TextResult](interface/TextResult.md) -* [VideoDeviceInfo](interface/VideoDeviceInfo.md) - -### Enums - -* [EnumBarcodeColourMode](enum/EnumBarcodeColourMode.md) -* [EnumBarcodeComplementMode](enum/EnumBarcodeComplementMode.md) -* [EnumBarcodeFormat](enum/EnumBarcodeFormat.md) -* [EnumBarcodeFormat_2](enum/EnumBarcodeFormat_2.md) -* [EnumBinarizationMode](enum/EnumBinarizationMode.md) -* [EnumClarityCalculationMethod](enum/EnumClarityCalculationMethod.md) -* [EnumClarityFilterMode](enum/EnumClarityFilterMode.md) -* [EnumColourClusteringMode](enum/EnumColourClusteringMode.md) -* [EnumColourConversionMode](enum/EnumColourConversionMode.md) -* [EnumConflictMode](enum/EnumConflictMode.md) -* [EnumDeblurMode](enum/EnumDeblurMode.md) -* [EnumDeformationResistingMode](enum/EnumDeformationResistingMode.md) -* [EnumDPMCodeReadingMode](enum/EnumDPMCodeReadingMode.md) -* [EnumErrorCode](enum/EnumErrorCode.md) -* [EnumGrayscaleTransformationMode](enum/EnumGrayscaleTransformationMode.md) -* [EnumImagePixelFormat](enum/EnumImagePixelFormat.md) -* [EnumImagePreprocessingMode](enum/EnumImagePreprocessingMode.md) -* [EnumIMResultDataType](enum/EnumIMResultDataType.md) -* [EnumIntermediateResultSavingMode](enum/EnumIntermediateResultSavingMode.md) -* [EnumIntermediateResultType](enum/EnumIntermediateResultType.md) -* [EnumLocalizationMode](enum/EnumLocalizationMode.md) -* [EnumPDFReadingMode](enum/EnumPDFReadingMode.md) -* [EnumQRCodeErrorCorrectionLevel](enum/EnumQRCodeErrorCorrectionLevel.md) -* [EnumRegionPredetectionMode](enum/EnumRegionPredetectionMode.md) -* [EnumResultCoordinateType](enum/EnumResultCoordinateType.md) -* [EnumResultType](enum/EnumResultType.md) -* [EnumScaleUpMode](enum/EnumScaleUpMode.md) -* [EnumTerminatePhase](enum/EnumTerminatePhase.md) -* [EnumTextFilterMode](enum/EnumTextFilterMode.md) -* [EnumTextResultOrderMode](enum/EnumTextResultOrderMode.md) -* [EnumTextureDetectionMode](enum/EnumTextureDetectionMode.md) diff --git a/programming-old/javascript/api-reference/index-v9.0.0.md b/programming-old/javascript/api-reference/index-v9.0.0.md deleted file mode 100644 index 0f259c9b..00000000 --- a/programming-old/javascript/api-reference/index-v9.0.0.md +++ /dev/null @@ -1,232 +0,0 @@ ---- -layout: default-layout -title: v9.0.0 Entry Page - Dynamsoft Barcode Reader JavaScript Edition API -description: This is the main page of Dynamsoft Barcode Reader JavaScript SDK API Reference. -keywords: BarcodeScanner, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -noTitleIndex: true -breadcrumbText: API Reference -permalink: /programming/javascript/api-reference/index-v9.0.0.html ---- - -# JavaScript API Reference - -The Dynamsoft Barcode Reader JavaScript library comes with two primary classes: `BarcodeReader` and `BarcodeScanner`. - -## BarcodeReader - -A low-level barcode reader that processes still images and returns barcode results. The following code snippet shows its basic usage: - -```js -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -let results = await reader.decode(imageSource); -for(let result of results){ - console.log(result.barcodeText); -} -``` - -The APIs for this class include: - -### Create and Destroy Instances - -| API Name | Description | -|---|---| -| [createInstance()](BarcodeReader.md#createinstance) | Creates a `BarcodeReader` instance. | -| [destroyContext()](BarcodeReader.md#destroycontext) | Destroys the `BarcodeReader` instance. | -| [isContextDestroyed()](BarcodeReader.md#iscontextdestroyed) | Returns whether the instance has been destroyed. | - -### Decode Barcodes - -| API Name | Description | -|---|---| -| [decode()](BarcodeReader.md#decode) | Decodes barcodes from an image. | -| [decodeBase64String()](BarcodeReader.md#decodebase64string) | Decodes barcodes from a base64-encoded image (with or without MIME). | -| [decodeUrl()](BarcodeReader.md#decodeurl) | Decodes barcodes from an image specified by its URL. | -| [decodeBuffer()](BarcodeReader.md#decodebuffer) | Decodes barcodes from raw image data. | - -### Change Settings - -| API Name | Description | -|---|---| -| [getRuntimeSettings()](BarcodeReader.md#getruntimesettings) | Returns the current runtime settings. | -| [updateRuntimeSettings()](BarcodeReader.md#updateruntimesettings) | Updates runtime settings with a given struct or a preset template. | -| [resetRuntimeSettings()](BarcodeReader.md#resetruntimesettings) | Resets all parameters to default values. | -| [outputRuntimeSettingsToString()](BarcodeReader.md#outputruntimesettingstostring) | Return the current RuntimeSettings in the form of a string. | -| [getModeArgument()](BarcodeReader.md#getmodeargument) | Returns the argument value for the specified mode parameter. | -| [setModeArgument()](BarcodeReader.md#setmodeargument) | Sets the argument value for the specified mode parameter. | - -### Auxiliary - -| API Name | Description | -|---|---| -| [ifSaveOriginalImageInACanvas](BarcodeReader.md#ifsaveoriginalimageinacanvas) | Whether to save the original image into a <canvas> element. | -| [getOriginalImageInACanvas()](BarcodeReader.md#getoriginalimageinacanvas) | Returns an `HTMLCanvasElement` that holds the original image. | - -
    - -## BarcodeScanner - -A barcode scanner object gets access to a camera via the [MediaDevices](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices) interface, then uses its built-in UI to show the camera input and performs continuous barcode scanning on the incoming frames. - -The default built-in UI of each barcode scanner is defined in the file `dbr.ui.html` and it fits the entire page and sits on top. Read more on how to [Customize the UI](../user-guide/#customize-the-ui). - -Although a barcode scanner is designed to scan barcodes from a video input, it also supports a special mode called [singleFrameMode](BarcodeScanner.md#singleframemode) which allows users to select a still image or take a shot with the camera for barcode scanning. - -The following code snippet shows the basic usage of the `BarcodeScanner` class. - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -scanner.onUniqueRead = txt => console.log(txt); -await scanner.show(); -``` - -The `BarcodeScanner` is a child class of [BarcodeReader](./BarcodeReader.md) and inherits all its methods and properties. APIs not directly inherited include: - -### Create and Destroy Instances - -| API Name | Description | -|---|---| -| [createInstance()](BarcodeScanner.md#createinstance) | Creates a `BarcodeScanner` instance. | -| [destroyContext()](BarcodeScanner.md#destroycontext) | Destroys the `BarcodeScanner` instance. | -| [isContextDestroyed()](BarcodeScanner.md#iscontextdestroyed) | Returns whether the instance has been destroyed. | - -### Decode Barcodes - -| API Name | Description | -|---|---| -| [onUniqueRead](BarcodeScanner.md#onUniqueRead) | This event is triggered when a new, unduplicated barcode is found. | -| [onFrameRead](BarcodeScanner.md#onframeread) | This event is triggered after the library finishes scanning a frame. | - -### Basic Interaction - -| API Name | Description | -|---|---| -| [show()](BarcodeScanner.md#show) | Binds and shows UI, opens the camera and starts decoding. | -| [hide()](BarcodeScanner.md#hide) | Stops decoding, releases camera, hides and unbinds UI. | -| [open()](BarcodeScanner.md#open) | Binds UI, opens the camera and starts decoding. Meant for use with frameworks like Angular, Vue, React. | -| [close()](BarcodeScanner.md#close) | Stops decoding, releases camera and unbinds UI. Meant for use with frameworks like Angular, Vue, React. | - -### Scan Settings - -| API Name | Description | -|---|---| -| [singleFrameMode](BarcodeScanner.md#singleframemode) | Returns or sets whether to enable the singe-frame mode. | -| [getScanSettings()](BarcodeScanner.md#getscansettings) | Returns the current scan settings. | -| [updateScanSettings()](BarcodeScanner.md#updatescansettings) | Changes scan settings with the object passed in. | - -### UI Control - -| API Name | Description | -|---|---| -| [getUIElement()](BarcodeScanner.md#getuielement) | Returns the HTML element that is used by the `BarcodeScanner` instance. | -| [setUIElement()](BarcodeScanner.md#setuielement) | Specifies an HTML element for the `BarcodeScanner` instance to use as its UI. | -| [defaultUIElementURL](BarcodeScanner.md#defaultuielementurl) | Returns or sets the URL of the .html file that defines the default UI Element. | -| [barcodeFillStyle](BarcodeScanner.md#barcodefillstyle) | Specifies the color used inside the shape which highlights a found barcode. | -| [barcodeStrokeStyle](BarcodeScanner.md#barcodestrokestyle) | Specifies the color used to paint the outline of the shape which highlights a found barcode. | -| [barcodeLineWidth](BarcodeScanner.md#barcodelinewidth) | Specifies the line width of the outline of the shape which highlights a found barcode. | -| [regionMaskFillStyle](BarcodeScanner.md#regionmaskfillstyle) | Specifies the color used in the square-loop shape between the actual scanning area and the boundary of the video input. | -| [regionMaskStrokeStyle](BarcodeScanner.md#regionmaskstrokestyle) | Specifies the color used to paint the outline of the scanning region. | -| [regionMaskLineWidth](BarcodeScanner.md#regionmasklinewidth) | Specifies the width of the outline of the scanning region. | - -### Camera Control - -| API Name | Description | -|---|---| -| [getAllCameras()](BarcodeScanner.md#getallcameras) | Returns infomation of all available cameras on the device. | -| [getCurrentCamera()](BarcodeScanner.md#getcurrentcamera) | Returns information about the current camera. | -| [setCurrentCamera()](BarcodeScanner.md#setcurrentcamera) | Chooses a camera as the video source. | -| [getResolution()](BarcodeScanner.md#getresolution) | Returns the resolution of the current video input. | -| [setResolution()](BarcodeScanner.md#setresolution) | Sets the resolution of the current video input. | -| [getVideoSettings()](BarcodeScanner.md#getvideosettings) | Returns the current video settings. | -| [updateVideoSettings()](BarcodeScanner.md#updatevideosettings) | Changes the video input. | - -### Video Decoding Process Control - -| API Name | Description | -|---|---| -| [play()](BarcodeScanner.md#play) | Play the video if it is already open but paused or stopped. | -| [onPlayed](BarcodeScanner.md#onplayed) | This event is triggered when the video stream starts playing. | -| [pauseScan()](BarcodeScanner.md#pausescan) | Pauses the decoding process. | -| [resumeScan()](BarcodeScanner.md#resumescan) | Resumes the decoding process. | -| [pause()](BarcodeScanner.md#pause) | Pauses the video without releasing the camera. | -| [stop()](BarcodeScanner.md#stop) | Stops the video and releases the camera. | - -### Advanced Camera Control - -| API Name | Description | -|---|---| -| [getCapabilities()](BarcodeScanner.md#getcapabilities) | Inspects and returns the capabilities of the current camera. | -| [getCameraSettings()](BarcodeScanner.md#getcamerasettings) | Returns the current values for each constrainable property of the current camera. | -| [getFrameRate()](BarcodeScanner.md#getframerate) | Returns the real-time frame rate. | -| [setFrameRate()](BarcodeScanner.md#setframerate) | Adjusts the frame rate. | -| [setColorTemperature()](BarcodeScanner.md#setcolortemperature) | Adjusts the color temperature. | -| [setExposureCompensation()](BarcodeScanner.md#setexposurecompensation) | Sets the exposure compensation index. | -| [setFocus()](BarcodeScanner.md#setfocus) | Sets the focus mode and focus distance of the camera. | -| [getFocus()](BarcodeScanner.md#getfocus) | Gets the focus mode and focus distance of the camera. | -| [setZoom()](BarcodeScanner.md#setzoom) | Sets the exposure compensation index. | -| [turnOnTorch()](BarcodeScanner.md#turnontorch) | Turns on the torch/flashlight. | -| [turnOffTorch()](BarcodeScanner.md#turnofftorch) | Turns off the torch/flashlight. | - -## License Control - -* [license](LicenseControl.md#license) -* [deviceFriendlyName](LicenseControl.md#devicefriendlyname) - -## Initialization Control - -The following static methods and properties help to set up the runtime environment for the library: - -* [engineResourcePath](InitializationControl.md#engineresourcepath) -* [loadWasm()](InitializationControl.md#loadwasm) -* [isWasmLoaded()](InitializationControl.md#iswasmloaded) -* [version](InitializationControl.md#version) -* [detectEnvironment()](InitializationControl.md#detectenvironment) - -## Interfaces and Enums - -In order to make the code more predictable and readable, the library defines a series of supporting interfaces and enumerations: - -### Interfaces - -* [LocalizationResult](interface/LocalizationResult.md) -* [Region](interface/Region.md) -* [RuntimeSettings](interface/RuntimeSettings.md) -* [ScannerPlayCallbackInfo](interface/ScannerPlayCallbackInfo.md) -* [ScanSettings](interface/ScanSettings.md) -* [TextResult](interface/TextResult.md) -* [VideoDeviceInfo](interface/VideoDeviceInfo.md) - -### Enums - -* [EnumBarcodeColourMode](enum/EnumBarcodeColourMode.md) -* [EnumBarcodeComplementMode](enum/EnumBarcodeComplementMode.md) -* [EnumBarcodeFormat](enum/EnumBarcodeFormat.md) -* [EnumBarcodeFormat_2](enum/EnumBarcodeFormat_2.md) -* [EnumBinarizationMode](enum/EnumBinarizationMode.md) -* [EnumClarityCalculationMethod](enum/EnumClarityCalculationMethod.md) -* [EnumClarityFilterMode](enum/EnumClarityFilterMode.md) -* [EnumColourClusteringMode](enum/EnumColourClusteringMode.md) -* [EnumColourConversionMode](enum/EnumColourConversionMode.md) -* [EnumConflictMode](enum/EnumConflictMode.md) -* [EnumDeblurMode](enum/EnumDeblurMode.md) -* [EnumDeformationResistingMode](enum/EnumDeformationResistingMode.md) -* [EnumDPMCodeReadingMode](enum/EnumDPMCodeReadingMode.md) -* [EnumErrorCode](enum/EnumErrorCode.md) -* [EnumGrayscaleTransformationMode](enum/EnumGrayscaleTransformationMode.md) -* [EnumImagePixelFormat](enum/EnumImagePixelFormat.md) -* [EnumImagePreprocessingMode](enum/EnumImagePreprocessingMode.md) -* [EnumIMResultDataType](enum/EnumIMResultDataType.md) -* [EnumIntermediateResultSavingMode](enum/EnumIntermediateResultSavingMode.md) -* [EnumIntermediateResultType](enum/EnumIntermediateResultType.md) -* [EnumLocalizationMode](enum/EnumLocalizationMode.md) -* [EnumPDFReadingMode](enum/EnumPDFReadingMode.md) -* [EnumQRCodeErrorCorrectionLevel](enum/EnumQRCodeErrorCorrectionLevel.md) -* [EnumRegionPredetectionMode](enum/EnumRegionPredetectionMode.md) -* [EnumResultCoordinateType](enum/EnumResultCoordinateType.md) -* [EnumResultType](enum/EnumResultType.md) -* [EnumScaleUpMode](enum/EnumScaleUpMode.md) -* [EnumTerminatePhase](enum/EnumTerminatePhase.md) -* [EnumTextFilterMode](enum/EnumTextFilterMode.md) -* [EnumTextResultOrderMode](enum/EnumTextResultOrderMode.md) -* [EnumTextureDetectionMode](enum/EnumTextureDetectionMode.md) diff --git a/programming-old/javascript/api-reference/index-v9.0.2.md b/programming-old/javascript/api-reference/index-v9.0.2.md deleted file mode 100644 index 4222c94e..00000000 --- a/programming-old/javascript/api-reference/index-v9.0.2.md +++ /dev/null @@ -1,248 +0,0 @@ ---- -layout: default-layout -title: v9.0.2 Index Page - Dynamsoft Barcode Reader JavaScript Edition API -description: Introduction to Dynamsoft Barcode Reader JavaScript Edition. Simply integrate the library to run it on all major modern browsers. -keywords: BarcodeScanner, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -noTitleIndex: true -breadcrumbText: API Reference -permalink: /programming/javascript/api-reference/index-v9.0.2.html ---- - -# JavaScript API Reference - -The Dynamsoft Barcode Reader JavaScript library comes with two primary classes: [BarcodeReader](#barcodereader) and [BarcodeScanner](#barcodescanner). - -## BarcodeReader - -A low-level barcode reader that processes still images and returns barcode results. The following code snippet shows its basic usage: - -```js -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -let results = await reader.decode(imageSource); -for(let result of results){ - console.log(result.barcodeText); -} -``` - -The APIs for this class include: - -### Create and Destroy Instances - -| API Name | Description | -|---|---| -| [createInstance()](BarcodeReader.md#createinstance) | Creates a `BarcodeReader` instance. | -| [destroyContext()](BarcodeReader.md#destroycontext) | Destroys the `BarcodeReader` instance. | -| [isContextDestroyed()](BarcodeReader.md#iscontextdestroyed) | Returns whether the instance has been destroyed. | - -### Decode Barcodes on a Single Image - -| API Name | Description | -|---|---| -| [decode()](BarcodeReader.md#decode) | Decodes barcodes from an image. | -| [decodeBase64String()](BarcodeReader.md#decodebase64string) | Decodes barcodes from a base64-encoded image (with or without MIME). | -| [decodeUrl()](BarcodeReader.md#decodeurl) | Decodes barcodes from an image specified by its URL. | -| [decodeBuffer()](BarcodeReader.md#decodebuffer) | Decodes barcodes from raw image data. | - -### Decode Barcodes on multiple images from an Image Source - -| API Name | Description | -|---|---| -| [setImageSource](BarcodeReader.md#setimagesource) | Sets an image source for continous scanning. | -| [onUniqueRead](BarcodeReader.md#onuniqueread) | This event is triggered when a new, unduplicated barcode is found. | -| [onImageRead](BarcodeReader.md#onimageread) | This event is triggered after the library finishes scanning an image. | -| [startScanning()](BarcodeReader.md#startscanning) | Starts continuous scanning of incoming images. | -| [stopScanning()](BarcodeReader.md#stopscanning) | Stops continuous scanning. | -| [pauseScanning()](BarcodeReader.md#pausescanning) | Pause continuous scanning but keep the video stream. | -| [resumeScanning()](BarcodeReader.md#resumescanning) | Resumes continuous scanning. | -| [getScanSettings()](BarcodeReader.md#getscansettings) | Returns the current scan settings. | -| [updateScanSettings()](BarcodeReader.md#updatescansettings) | Changes scan settings with the object passed in. | - -### Change Settings - -| API Name | Description | -|---|---| -| [getRuntimeSettings()](BarcodeReader.md#getruntimesettings) | Returns the current runtime settings. | -| [updateRuntimeSettings()](BarcodeReader.md#updateruntimesettings) | Updates runtime settings with a given struct or a preset template. | -| [resetRuntimeSettings()](BarcodeReader.md#resetruntimesettings) | Resets all parameters to default values. | -| [outputRuntimeSettingsToString()](BarcodeReader.md#outputruntimesettingstostring) | Return the current RuntimeSettings in the form of a string. | -| [getModeArgument()](BarcodeReader.md#getmodeargument) | Returns the argument value for the specified mode parameter. | -| [setModeArgument()](BarcodeReader.md#setmodeargument) | Sets the argument value for the specified mode parameter. | - -### Auxiliary - -| API Name | Description | -|---|---| -| [ifSaveOriginalImageInACanvas](BarcodeReader.md#ifsaveoriginalimageinacanvas) | Whether to save the original image into a <canvas> element. | -| [getOriginalImageInACanvas()](BarcodeReader.md#getoriginalimageinacanvas) | Returns an `HTMLCanvasElement` that holds the original image. | - -
    - -## BarcodeScanner - -A barcode scanner object gets access to a camera via the [MediaDevices](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices) interface, then uses its built-in UI to show the camera input and performs continuous barcode scanning on the incoming frames. - -The default built-in UI of a barcode scanner object is defined in the file `dbr.ui.html`. The UI fits the entire page and sits on top. Read more on how to [Customize the UI](../user-guide/#customize-the-ui). - -Although a barcode scanner is designed to scan barcodes from a video input, it also supports a special mode called [singleFrameMode](BarcodeScanner.md#singleframemode) which allows users to select a still image or take a shot with the camera for barcode scanning. - -The following code snippet shows the basic usage of the `BarcodeScanner` class. - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -scanner.onUniqueRead = txt => console.log(txt); -await scanner.show(); -``` - -The `BarcodeScanner` class is based on [BarcodeReader](./BarcodeReader.md) and inherits most of its methods and properties. The following APIs are different or unique: - -### Create and Destroy Instances - -| API Name | Description | -|---|---| -| [createInstance()](BarcodeScanner.md#createinstance) | Creates a `BarcodeScanner` instance. | -| [destroyContext()](BarcodeScanner.md#destroycontext) | Destroys the `BarcodeScanner` instance. | -| [isContextDestroyed()](BarcodeScanner.md#iscontextdestroyed) | Returns whether the instance has been destroyed. | - -### Decode Barcodes - -| API Name | Description | -|---|---| -| [onUniqueRead](BarcodeScanner.md#onUniqueRead) | This event is triggered when a new, unduplicated barcode is found. | -| [onFrameRead](BarcodeScanner.md#onframeread) | This event is triggered after the library finishes scanning a frame. | - -### Basic Interaction - -| API Name | Description | -|---|---| -| [show()](BarcodeScanner.md#show) | Binds and shows UI, opens the camera and starts decoding. | -| [hide()](BarcodeScanner.md#hide) | Stops decoding, releases camera, hides and unbinds UI. | -| [open()](BarcodeScanner.md#open) | Binds UI, opens the camera and starts decoding. | -| [close()](BarcodeScanner.md#close) | Stops decoding, releases camera and unbinds UI. | - -### Scan Settings - -| API Name | Description | -|---|---| -| [singleFrameMode](BarcodeScanner.md#singleframemode) | Returns or sets whether to enable the singe-frame mode. | -| [getScanSettings()](BarcodeScanner.md#getscansettings) | Returns the current scan settings. | -| [updateScanSettings()](BarcodeScanner.md#updatescansettings) | Changes scan settings with the object passed in. | - -### UI Control - -| API Name | Description | -|---|---| -| [getUIElement()](BarcodeScanner.md#getuielement) | Returns the HTML element that is used by the `BarcodeScanner` instance. | -| [setUIElement()](BarcodeScanner.md#setuielement) | Specifies an HTML element for the `BarcodeScanner` instance to use as its UI. | -| [defaultUIElementURL](BarcodeScanner.md#defaultuielementurl) | Returns or sets the URL of the .html file that defines the default UI Element. | -| [barcodeFillStyle](BarcodeScanner.md#barcodefillstyle) | Specifies the color used inside the shape which highlights a found barcode. | -| [barcodeStrokeStyle](BarcodeScanner.md#barcodestrokestyle) | Specifies the color used to paint the outline of the shape which highlights a found barcode. | -| [barcodeLineWidth](BarcodeScanner.md#barcodelinewidth) | Specifies the line width of the outline of the shape which highlights a found barcode. | -| [regionMaskFillStyle](BarcodeScanner.md#regionmaskfillstyle) | Specifies the color used in the square-loop shape between the actual scanning area and the boundary of the video input. | -| [regionMaskStrokeStyle](BarcodeScanner.md#regionmaskstrokestyle) | Specifies the color used to paint the outline of the scanning region. | -| [regionMaskLineWidth](BarcodeScanner.md#regionmasklinewidth) | Specifies the width of the outline of the scanning region. | -| [setVideoFit()](BarcodeScanner.md#setvideofit) | Sets the `object-fit` CSS property of the video element. | -| [ifShowScanRegionMask](BarcodeScanner.md#ifshowscanregionmask) | Whether to show or hide the scan region mask. | - -### Camera Control - -| API Name | Description | -|---|---| -| [getAllCameras()](BarcodeScanner.md#getallcameras) | Returns infomation of all available cameras on the device. | -| [getCurrentCamera()](BarcodeScanner.md#getcurrentcamera) | Returns information about the current camera. | -| [setCurrentCamera()](BarcodeScanner.md#setcurrentcamera) | Chooses a camera as the video source. | -| [getResolution()](BarcodeScanner.md#getresolution) | Returns the resolution of the current video input. | -| [setResolution()](BarcodeScanner.md#setresolution) | Sets the resolution of the current video input. | -| [getVideoSettings()](BarcodeScanner.md#getvideosettings) | Returns the current video settings. | -| [updateVideoSettings()](BarcodeScanner.md#updatevideosettings) | Changes the video input. | - -### Video Decoding Process Control - -| API Name | Description | -|---|---| -| [play()](BarcodeScanner.md#play) | Play the video if it is already open but paused or stopped. | -| [onPlayed](BarcodeScanner.md#onplayed) | This event is triggered when the video stream starts playing. | -| [pauseScan()](BarcodeScanner.md#pausescan) | Pauses the decoding process. | -| [resumeScan()](BarcodeScanner.md#resumescan) | Resumes the decoding process. | -| [pause()](BarcodeScanner.md#pause) | Pauses the video without releasing the camera. | -| [stop()](BarcodeScanner.md#stop) | Stops the video and releases the camera. | - -### Advanced Camera Control - -| API Name | Description | -|---|---| -| [getCapabilities()](BarcodeScanner.md#getcapabilities) | Inspects and returns the capabilities of the current camera. | -| [getCameraSettings()](BarcodeScanner.md#getcamerasettings) | Returns the current values for each constrainable property of the current camera. | -| [getFrameRate()](BarcodeScanner.md#getframerate) | Returns the real-time frame rate. | -| [setFrameRate()](BarcodeScanner.md#setframerate) | Adjusts the frame rate. | -| [setColorTemperature()](BarcodeScanner.md#setcolortemperature) | Adjusts the color temperature. | -| [setExposureCompensation()](BarcodeScanner.md#setexposurecompensation) | Sets the exposure compensation index. | -| [setFocus()](BarcodeScanner.md#setfocus) | Sets the focus mode and focus distance of the camera. | -| [getFocus()](BarcodeScanner.md#getfocus) | Gets the focus mode and focus distance of the camera. | -| [setZoom()](BarcodeScanner.md#setzoom) | Sets the exposure compensation index. | -| [turnOnTorch()](BarcodeScanner.md#turnontorch) | Turns on the torch/flashlight. | -| [turnOffTorch()](BarcodeScanner.md#turnofftorch) | Turns off the torch/flashlight. | - -## License Control - -* [license](LicenseControl.md#license) -* [deviceFriendlyName](LicenseControl.md#devicefriendlyname) - -## Initialization Control - -The following static methods and properties help to set up the runtime environment for the library: - -* [engineResourcePath](InitializationControl.md#engineresourcepath) -* [loadWasm()](InitializationControl.md#loadwasm) -* [isWasmLoaded()](InitializationControl.md#iswasmloaded) -* [version](InitializationControl.md#version) -* [detectEnvironment()](InitializationControl.md#detectenvironment) - -## Interfaces and Enums - -In order to make the code more predictable and readable, the library defines a series of supporting interfaces and enumerations: - -### Interfaces - -* [LocalizationResult](interface/LocalizationResult.md) -* [Region](interface/Region.md) -* [RuntimeSettings](interface/RuntimeSettings.md) -* [ScannerPlayCallbackInfo](interface/ScannerPlayCallbackInfo.md) -* [ScanSettings](interface/ScanSettings.md) -* [TextResult](interface/TextResult.md) -* [VideoDeviceInfo](interface/VideoDeviceInfo.md) - -### Enums - -* [EnumBarcodeColourMode](enum/EnumBarcodeColourMode.md) -* [EnumBarcodeComplementMode](enum/EnumBarcodeComplementMode.md) -* [EnumBarcodeFormat](enum/EnumBarcodeFormat.md) -* [EnumBarcodeFormat_2](enum/EnumBarcodeFormat_2.md) -* [EnumBinarizationMode](enum/EnumBinarizationMode.md) -* [EnumClarityCalculationMethod](enum/EnumClarityCalculationMethod.md) -* [EnumClarityFilterMode](enum/EnumClarityFilterMode.md) -* [EnumColourClusteringMode](enum/EnumColourClusteringMode.md) -* [EnumColourConversionMode](enum/EnumColourConversionMode.md) -* [EnumConflictMode](enum/EnumConflictMode.md) -* [EnumDeblurMode](enum/EnumDeblurMode.md) -* [EnumDeformationResistingMode](enum/EnumDeformationResistingMode.md) -* [EnumDPMCodeReadingMode](enum/EnumDPMCodeReadingMode.md) -* [EnumErrorCode](enum/EnumErrorCode.md) -* [EnumGrayscaleTransformationMode](enum/EnumGrayscaleTransformationMode.md) -* [EnumImagePixelFormat](enum/EnumImagePixelFormat.md) -* [EnumImagePreprocessingMode](enum/EnumImagePreprocessingMode.md) -* [EnumIMResultDataType](enum/EnumIMResultDataType.md) -* [EnumIntermediateResultSavingMode](enum/EnumIntermediateResultSavingMode.md) -* [EnumIntermediateResultType](enum/EnumIntermediateResultType.md) -* [EnumLocalizationMode](enum/EnumLocalizationMode.md) -* [EnumPDFReadingMode](enum/EnumPDFReadingMode.md) -* [EnumQRCodeErrorCorrectionLevel](enum/EnumQRCodeErrorCorrectionLevel.md) -* [EnumRegionPredetectionMode](enum/EnumRegionPredetectionMode.md) -* [EnumResultCoordinateType](enum/EnumResultCoordinateType.md) -* [EnumResultType](enum/EnumResultType.md) -* [EnumScaleUpMode](enum/EnumScaleUpMode.md) -* [EnumTerminatePhase](enum/EnumTerminatePhase.md) -* [EnumTextFilterMode](enum/EnumTextFilterMode.md) -* [EnumTextResultOrderMode](enum/EnumTextResultOrderMode.md) -* [EnumTextureDetectionMode](enum/EnumTextureDetectionMode.md) diff --git a/programming-old/javascript/api-reference/index-v9.2.13.md b/programming-old/javascript/api-reference/index-v9.2.13.md deleted file mode 100644 index ad3ec6c0..00000000 --- a/programming-old/javascript/api-reference/index-v9.2.13.md +++ /dev/null @@ -1,254 +0,0 @@ ---- -layout: default-layout -title: v9.2.13 Index Page - Dynamsoft Barcode Reader JavaScript Edition API -description: Introduction to Dynamsoft Barcode Reader JavaScript Edition. Simply integrate the library to run it on all major modern browsers. -keywords: BarcodeScanner, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -noTitleIndex: true -breadcrumbText: API Reference -permalink: /programming/javascript/api-reference/index-v9.2.13.html ---- - -# JavaScript API Reference - -The Dynamsoft Barcode Reader JavaScript library comes with two primary classes: [BarcodeReader](#barcodereader) and [BarcodeScanner](#barcodescanner). - -## BarcodeReader - -A low-level barcode reader that processes still images and returns barcode results. The following code snippet shows its basic usage: - -```js -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -let results = await reader.decode(imageSource); -for(let result of results){ - console.log(result.barcodeText); -} -``` - -The APIs for this class include: - -### Create and Destroy Instances - -| API Name | Description | -|---|---| -| [createInstance()](BarcodeReader.md#createinstance) | Creates a `BarcodeReader` instance. | -| [destroyContext()](BarcodeReader.md#destroycontext) | Destroys the `BarcodeReader` instance. | -| [isContextDestroyed()](BarcodeReader.md#iscontextdestroyed) | Returns whether the instance has been destroyed. | - -### Decode Barcodes on a Single Image - -| API Name | Description | -|---|---| -| [decode()](BarcodeReader.md#decode) | Decodes barcodes from an image. | -| [decodeBase64String()](BarcodeReader.md#decodebase64string) | Decodes barcodes from a base64-encoded image (with or without MIME). | -| [decodeUrl()](BarcodeReader.md#decodeurl) | Decodes barcodes from an image specified by its URL. | -| [decodeBuffer()](BarcodeReader.md#decodebuffer) | Decodes barcodes from raw image data. | - -### Decode Barcodes on multiple images from an Image Source - -| API Name | Description | -|---|---| -| [setImageSource](BarcodeReader.md#setimagesource) | Sets an image source for continous scanning. | -| [onUniqueRead](BarcodeReader.md#onuniqueread) | This event is triggered when a new, unduplicated barcode is found. | -| [onImageRead](BarcodeReader.md#onimageread) | This event is triggered after the library finishes scanning an image. | -| [startScanning()](BarcodeReader.md#startscanning) | Starts continuous scanning of incoming images. | -| [stopScanning()](BarcodeReader.md#stopscanning) | Stops continuous scanning. | -| [pauseScanning()](BarcodeReader.md#pausescanning) | Pause continuous scanning but keep the video stream. | -| [resumeScanning()](BarcodeReader.md#resumescanning) | Resumes continuous scanning. | -| [getScanSettings()](BarcodeReader.md#getscansettings) | Returns the current scan settings. | -| [updateScanSettings()](BarcodeReader.md#updatescansettings) | Changes scan settings with the object passed in. | - -### Change Settings - -| API Name | Description | -|---|---| -| [getRuntimeSettings()](BarcodeReader.md#getruntimesettings) | Returns the current runtime settings. | -| [initRuntimeSettingsWithString](BarcodeReader.md#initruntimesettingswithstring) | Initializes the Runtime Settings with the settings in the given JSON string. | -| [updateRuntimeSettings()](BarcodeReader.md#updateruntimesettings) | Updates runtime settings with a given struct or a preset template. | -| [resetRuntimeSettings()](BarcodeReader.md#resetruntimesettings) | Resets all parameters to default values. | -| [outputRuntimeSettingsToString()](BarcodeReader.md#outputruntimesettingstostring) | Return the current RuntimeSettings in the form of a string. | -| [getModeArgument()](BarcodeReader.md#getmodeargument) | Returns the argument value for the specified mode parameter. | -| [setModeArgument()](BarcodeReader.md#setmodeargument) | Sets the argument value for the specified mode parameter. | - -### Auxiliary - -| API Name | Description | -|---|---| -| [ifSaveOriginalImageInACanvas](BarcodeReader.md#ifsaveoriginalimageinacanvas) | Whether to save the original image into a <canvas> element. | -| [getOriginalImageInACanvas()](BarcodeReader.md#getoriginalimageinacanvas) | Returns an `HTMLCanvasElement` that holds the original image. | - -
    - -## BarcodeScanner - -A barcode scanner object gets access to a camera via the [MediaDevices](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices) interface, then uses its built-in UI to show the camera input and performs continuous barcode scanning on the incoming frames. - -The default built-in UI of a barcode scanner object is defined in the file `dbr.ui.html`. The UI fits the entire page and sits on top. Read more on how to [Customize the UI](../user-guide/#customize-the-ui). - -Although a barcode scanner is designed to scan barcodes from a video input, it also supports a special mode called [singleFrameMode](BarcodeScanner.md#singleframemode) which allows users to select a still image or take a shot with the camera for barcode scanning. - -The following code snippet shows the basic usage of the `BarcodeScanner` class. - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -scanner.onUniqueRead = txt => console.log(txt); -await scanner.show(); -``` - -The `BarcodeScanner` class is based on [BarcodeReader](./BarcodeReader.md) and inherits most of its methods and properties. The following APIs are different or unique: - -### Create and Destroy Instances - -| API Name | Description | -|---|---| -| [createInstance()](BarcodeScanner.md#createinstance) | Creates a `BarcodeScanner` instance. | -| [destroyContext()](BarcodeScanner.md#destroycontext) | Destroys the `BarcodeScanner` instance. | -| [isContextDestroyed()](BarcodeScanner.md#iscontextdestroyed) | Returns whether the instance has been destroyed. | - -### Decode Barcodes - -| API Name | Description | -|---|---| -| [onUniqueRead](BarcodeScanner.md#onUniqueRead) | This event is triggered when a new, unduplicated barcode is found. | -| [onFrameRead](BarcodeScanner.md#onframeread) | This event is triggered after the library finishes scanning a frame. | - -### Basic Interaction - -| API Name | Description | -|---|---| -| [show()](BarcodeScanner.md#show) | Binds and shows UI, opens the camera and starts decoding. | -| [hide()](BarcodeScanner.md#hide) | Stops decoding, releases camera, hides and unbinds UI. | -| [open()](BarcodeScanner.md#open) | Binds UI, opens the camera and starts decoding. | -| [close()](BarcodeScanner.md#close) | Stops decoding, releases camera and unbinds UI. | - -### Scan Settings - -| API Name | Description | -|---|---| -| [singleFrameMode](BarcodeScanner.md#singleframemode) | Returns or sets whether to enable the singe-frame mode. | -| [getScanSettings()](BarcodeScanner.md#getscansettings) | Returns the current scan settings. | -| [updateScanSettings()](BarcodeScanner.md#updatescansettings) | Changes scan settings with the object passed in. | - -### UI Control - -| API Name | Description | -|---|---| -| [getUIElement()](BarcodeScanner.md#getuielement) | Returns the HTML element that is used by the `BarcodeScanner` instance. | -| [setUIElement()](BarcodeScanner.md#setuielement) | Specifies an HTML element for the `BarcodeScanner` instance to use as its UI. | -| [defaultUIElementURL](BarcodeScanner.md#defaultuielementurl) | Returns or sets the URL of the .html file that defines the default UI Element. | -| [barcodeFillStyle](BarcodeScanner.md#barcodefillstyle) | Specifies the color used inside the shape which highlights a found barcode. | -| [barcodeStrokeStyle](BarcodeScanner.md#barcodestrokestyle) | Specifies the color used to paint the outline of the shape which highlights a found barcode. | -| [barcodeLineWidth](BarcodeScanner.md#barcodelinewidth) | Specifies the line width of the outline of the shape which highlights a found barcode. | -| [regionMaskFillStyle](BarcodeScanner.md#regionmaskfillstyle) | Specifies the color used in the square-loop shape between the actual scanning area and the boundary of the video input. | -| [regionMaskStrokeStyle](BarcodeScanner.md#regionmaskstrokestyle) | Specifies the color used to paint the outline of the scanning region. | -| [regionMaskLineWidth](BarcodeScanner.md#regionmasklinewidth) | Specifies the width of the outline of the scanning region. | -| [setVideoFit()](BarcodeScanner.md#setvideofit) | Sets the `object-fit` CSS property of the video element. | -| [ifShowScanRegionMask](BarcodeScanner.md#ifshowscanregionmask) | Whether to show or hide the scan region mask. | - -### Camera Control - -| API Name | Description | -|---|---| -| [ifSkipCameraInspection](BarcodeScanner.md#ifskipcamerainspection) | Returns or sets whether to skip camera inspection at initialization to save time. | -| [ifSaveLastUsedCamera](BarcodeScanner.md#ifsavelastusedcamera) | Returns or sets whether to save the last used camera and resolution. | -| [getAllCameras()](BarcodeScanner.md#getallcameras) | Returns infomation of all available cameras on the device. | -| [getCurrentCamera()](BarcodeScanner.md#getcurrentcamera) | Returns information about the current camera. | -| [setCurrentCamera()](BarcodeScanner.md#setcurrentcamera) | Chooses a camera as the video source. | -| [getResolution()](BarcodeScanner.md#getresolution) | Returns the resolution of the current video input. | -| [setResolution()](BarcodeScanner.md#setresolution) | Sets the resolution of the current video input. | -| [getVideoSettings()](BarcodeScanner.md#getvideosettings) | Returns the current video settings. | -| [updateVideoSettings()](BarcodeScanner.md#updatevideosettings) | Changes the video input. | -| [onWarning](BarcodeScanner.md#onwarning) | A callback which is triggered when the resolution is not ideal (<720P). | - -### Video Decoding Process Control - -| API Name | Description | -|---|---| -| [play()](BarcodeScanner.md#play) | Play the video if it is already open but paused or stopped. | -| [onPlayed](BarcodeScanner.md#onplayed) | This event is triggered when the video stream starts playing. | -| [pauseScan()](BarcodeScanner.md#pausescan) | Pauses the decoding process. | -| [resumeScan()](BarcodeScanner.md#resumescan) | Resumes the decoding process. | -| [pause()](BarcodeScanner.md#pause) | Pauses the video without releasing the camera. | -| [stop()](BarcodeScanner.md#stop) | Stops the video and releases the camera. | -| [videoSrc](BarcodeScanner.md#videosrc) | Sets or returns the source of the video. | - -### Advanced Camera Control - -| API Name | Description | -|---|---| -| [getCapabilities()](BarcodeScanner.md#getcapabilities) | Inspects and returns the capabilities of the current camera. | -| [getCameraSettings()](BarcodeScanner.md#getcamerasettings) | Returns the current values for each constrainable property of the current camera. | -| [getFrameRate()](BarcodeScanner.md#getframerate) | Returns the real-time frame rate. | -| [setFrameRate()](BarcodeScanner.md#setframerate) | Adjusts the frame rate. | -| [setColorTemperature()](BarcodeScanner.md#setcolortemperature) | Adjusts the color temperature. | -| [setExposureCompensation()](BarcodeScanner.md#setexposurecompensation) | Sets the exposure compensation index. | -| [setFocus()](BarcodeScanner.md#setfocus) | Sets the focus mode and focus distance of the camera. | -| [getFocus()](BarcodeScanner.md#getfocus) | Gets the focus mode and focus distance of the camera. | -| [setZoom()](BarcodeScanner.md#setzoom) | Sets the exposure compensation index. | -| [turnOnTorch()](BarcodeScanner.md#turnontorch) | Turns on the torch/flashlight. | -| [turnOffTorch()](BarcodeScanner.md#turnofftorch) | Turns off the torch/flashlight. | - -## License Control - -* [license](LicenseControl.md#license) -* [deviceFriendlyName](LicenseControl.md#devicefriendlyname) - -## Initialization Control - -The following static methods and properties help to set up the runtime environment for the library: - -* [engineResourcePath](InitializationControl.md#engineresourcepath) -* [loadWasm()](InitializationControl.md#loadwasm) -* [isWasmLoaded()](InitializationControl.md#iswasmloaded) -* [version](InitializationControl.md#version) -* [detectEnvironment()](InitializationControl.md#detectenvironment) -* [onWarning](InitializationControl.md#onwarning) - -## Interfaces and Enums - -In order to make the code more predictable and readable, the library defines a series of supporting interfaces and enumerations: - -### Interfaces - -* [LocalizationResult](interface/LocalizationResult.md) -* [Region](interface/Region.md) -* [RuntimeSettings](interface/RuntimeSettings.md) -* [ScannerPlayCallbackInfo](interface/ScannerPlayCallbackInfo.md) -* [ScanSettings](interface/ScanSettings.md) -* [TextResult](interface/TextResult.md) -* [VideoDeviceInfo](interface/VideoDeviceInfo.md) - -### Enums - -* [EnumBarcodeColourMode](enum/EnumBarcodeColourMode.md) -* [EnumBarcodeComplementMode](enum/EnumBarcodeComplementMode.md) -* [EnumBarcodeFormat](enum/EnumBarcodeFormat.md) -* [EnumBarcodeFormat_2](enum/EnumBarcodeFormat_2.md) -* [EnumBinarizationMode](enum/EnumBinarizationMode.md) -* [EnumClarityCalculationMethod](enum/EnumClarityCalculationMethod.md) -* [EnumClarityFilterMode](enum/EnumClarityFilterMode.md) -* [EnumColourClusteringMode](enum/EnumColourClusteringMode.md) -* [EnumColourConversionMode](enum/EnumColourConversionMode.md) -* [EnumConflictMode](enum/EnumConflictMode.md) -* [EnumDeblurMode](enum/EnumDeblurMode.md) -* [EnumDeformationResistingMode](enum/EnumDeformationResistingMode.md) -* [EnumDPMCodeReadingMode](enum/EnumDPMCodeReadingMode.md) -* [EnumErrorCode](enum/EnumErrorCode.md) -* [EnumGrayscaleTransformationMode](enum/EnumGrayscaleTransformationMode.md) -* [EnumImagePixelFormat](enum/EnumImagePixelFormat.md) -* [EnumImagePreprocessingMode](enum/EnumImagePreprocessingMode.md) -* [EnumIMResultDataType](enum/EnumIMResultDataType.md) -* [EnumIntermediateResultSavingMode](enum/EnumIntermediateResultSavingMode.md) -* [EnumIntermediateResultType](enum/EnumIntermediateResultType.md) -* [EnumLocalizationMode](enum/EnumLocalizationMode.md) -* [EnumPDFReadingMode](enum/EnumPDFReadingMode.md) -* [EnumQRCodeErrorCorrectionLevel](enum/EnumQRCodeErrorCorrectionLevel.md) -* [EnumRegionPredetectionMode](enum/EnumRegionPredetectionMode.md) -* [EnumResultCoordinateType](enum/EnumResultCoordinateType.md) -* [EnumResultType](enum/EnumResultType.md) -* [EnumScaleUpMode](enum/EnumScaleUpMode.md) -* [EnumTerminatePhase](enum/EnumTerminatePhase.md) -* [EnumTextFilterMode](enum/EnumTextFilterMode.md) -* [EnumTextResultOrderMode](enum/EnumTextResultOrderMode.md) -* [EnumTextureDetectionMode](enum/EnumTextureDetectionMode.md) diff --git a/programming-old/javascript/api-reference/index-v9.6.10.md b/programming-old/javascript/api-reference/index-v9.6.10.md deleted file mode 100644 index 2c6ac89b..00000000 --- a/programming-old/javascript/api-reference/index-v9.6.10.md +++ /dev/null @@ -1,274 +0,0 @@ ---- -layout: default-layout -title: API Reference Index - Dynamsoft Barcode Reader JavaScript Edition -description: Introduction to Dynamsoft Barcode Reader JavaScript Edition. Simply integrate the library to run it on all major modern browsers. -keywords: BarcodeScanner, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -noTitleIndex: true -breadcrumbText: API Reference -permalink: /programming/javascript/api-reference/index-v9.6.10.html ---- - -# JavaScript API Reference - -The Dynamsoft Barcode Reader JavaScript library comes with two primary classes: [BarcodeReader](#barcodereader) and [BarcodeScanner](#barcodescanner). - -## BarcodeReader - -A low-level barcode reader that processes still images and returns barcode results. The following code snippet shows its basic usage: - -```js -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -let results = await reader.decode(imageSource); -for(let result of results){ - console.log(result.barcodeText); -} -``` - -The APIs for this class include: - -### Create and Destroy Instances - -| API Name | Description | -| ----------------------------------------------------------- | ------------------------------------------------ | -| [createInstance()](BarcodeReader.md#createinstance) | Creates a `BarcodeReader` instance. | -| [destroyContext()](BarcodeReader.md#destroycontext) | Destroys the `BarcodeReader` instance. | -| [isContextDestroyed()](BarcodeReader.md#iscontextdestroyed) | Returns whether the instance has been destroyed. | - -### Decode Barcodes on a Single Image - -| API Name | Description | -| ----------------------------------------------------------- | -------------------------------------------------------------------- | -| [decode()](BarcodeReader.md#decode) | Decodes barcodes from an image. | -| [decodeBase64String()](BarcodeReader.md#decodebase64string) | Decodes barcodes from a base64-encoded image (with or without MIME). | -| [decodeUrl()](BarcodeReader.md#decodeurl) | Decodes barcodes from an image specified by its URL. | -| [decodeBuffer()](BarcodeReader.md#decodebuffer) | Decodes barcodes from raw image data. | - -### Decode Barcodes on multiple images from an Image Source - -| API Name | Description | -| ----------------------------------------------------------- | --------------------------------------------------------------------- | -| [setImageSource](BarcodeReader.md#setimagesource) | Sets an image source for continous scanning. | -| [onUniqueRead](BarcodeReader.md#onuniqueread) | This event is triggered when a new, unduplicated barcode is found. | -| [onImageRead](BarcodeReader.md#onimageread) | This event is triggered after the library finishes scanning an image. | -| [startScanning()](BarcodeReader.md#startscanning) | Starts continuous scanning of incoming images. | -| [stopScanning()](BarcodeReader.md#stopscanning) | Stops continuous scanning. | -| [pauseScanning()](BarcodeReader.md#pausescanning) | Pause continuous scanning but keep the video stream. | -| [resumeScanning()](BarcodeReader.md#resumescanning) | Resumes continuous scanning. | -| [getScanSettings()](BarcodeReader.md#getscansettings) | Returns the current scan settings. | -| [updateScanSettings()](BarcodeReader.md#updatescansettings) | Changes scan settings with the object passed in. | - -### Change Settings - -| API Name | Description | -| --------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | -| [getRuntimeSettings()](BarcodeReader.md#getruntimesettings) | Returns the current runtime settings. | -| [initRuntimeSettingsWithString](BarcodeReader.md#initruntimesettingswithstring) | Initializes the Runtime Settings with the settings in the given JSON string. | -| [updateRuntimeSettings()](BarcodeReader.md#updateruntimesettings) | Updates runtime settings with a given struct or a preset template. | -| [resetRuntimeSettings()](BarcodeReader.md#resetruntimesettings) | Resets all parameters to default values. | -| [outputRuntimeSettingsToString()](BarcodeReader.md#outputruntimesettingstostring) | Return the current RuntimeSettings in the form of a string. | -| [getModeArgument()](BarcodeReader.md#getmodeargument) | Returns the argument value for the specified mode parameter. | -| [setModeArgument()](BarcodeReader.md#setmodeargument) | Sets the argument value for the specified mode parameter. | - -### Auxiliary - -| API Name | Description | -| ----------------------------------------------------------------------------- | ----------------------------------------------------------------- | -| [ifSaveOriginalImageInACanvas](BarcodeReader.md#ifsaveoriginalimageinacanvas) | Whether to save the original image into a <canvas> element. | -| [getOriginalImageInACanvas()](BarcodeReader.md#getoriginalimageinacanvas) | Returns an `HTMLCanvasElement` that holds the original image. | - -
    - -## BarcodeScanner - -A barcode scanner object gets access to a camera via the [MediaDevices](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices) interface, then uses its built-in UI to show the camera input and performs continuous barcode scanning on the incoming frames. - -The default built-in UI of a barcode scanner object is defined in the file `dbr.ui.html`. The UI fits the entire page and sits on top. Read more on how to [Customize the UI](../user-guide/#customize-the-ui). - -Although a barcode scanner is designed to scan barcodes from a video input, it also supports a special mode called [singleFrameMode](BarcodeScanner.md#singleframemode) which allows users to select a still image or take a shot with the camera for barcode scanning. - -The following code snippet shows the basic usage of the `BarcodeScanner` class. - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -scanner.onUniqueRead = txt => console.log(txt); -await scanner.show(); -``` - -The `BarcodeScanner` class is based on [BarcodeReader](./BarcodeReader.md) and inherits most of its methods and properties. The following APIs are different or unique: - -### Create and Destroy Instances - -| API Name | Description | -| ------------------------------------------------------------ | ------------------------------------------------ | -| [createInstance()](BarcodeScanner.md#createinstance) | Creates a `BarcodeScanner` instance. | -| [destroyContext()](BarcodeScanner.md#destroycontext) | Destroys the `BarcodeScanner` instance. | -| [isContextDestroyed()](BarcodeScanner.md#iscontextdestroyed) | Returns whether the instance has been destroyed. | - -### Decode Barcodes - -| API Name | Description | -| ---------------------------------------------- | -------------------------------------------------------------------- | -| [onUniqueRead](BarcodeScanner.md#onUniqueRead) | This event is triggered when a new, unduplicated barcode is found. | -| [onFrameRead](BarcodeScanner.md#onframeread) | This event is triggered after the library finishes scanning a frame. | - -### Basic Interaction - -| API Name | Description | -| ------------------------------------ | --------------------------------------------------------- | -| [show()](BarcodeScanner.md#show) | Binds and shows UI, opens the camera and starts decoding. | -| [hide()](BarcodeScanner.md#hide) | Stops decoding, releases camera, hides and unbinds UI. | -| [open()](BarcodeScanner.md#open) | Binds UI, opens the camera and starts decoding. | -| [close()](BarcodeScanner.md#close) | Stops decoding, releases camera and unbinds UI. | -| [isOpen()](BarcodeScanner.md#isopen) | Indicates whether the camera is turned on. | - -### Scan Settings - -| API Name | Description | -| ------------------------------------------------------------ | ------------------------------------------------------- | -| [singleFrameMode](BarcodeScanner.md#singleframemode) | Returns or sets whether to enable the singe-frame mode. | -| [getScanSettings()](BarcodeScanner.md#getscansettings) | Returns the current scan settings. | -| [updateScanSettings()](BarcodeScanner.md#updatescansettings) | Changes scan settings with the object passed in. | - -### UI Control - -| API Name | Description | -| ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | -| [getUIElement()](BarcodeScanner.md#getuielement) | Returns the HTML element that is used by the `BarcodeScanner` instance. | -| [setUIElement()](BarcodeScanner.md#setuielement) | Specifies an HTML element for the `BarcodeScanner` instance to use as its UI. | -| [defaultUIElementURL](BarcodeScanner.md#defaultuielementurl) | Returns or sets the URL of the .html file that defines the default UI Element. | -| [barcodeFillStyle](BarcodeScanner.md#barcodefillstyle) | Specifies the color used inside the shape which highlights a found barcode. | -| [barcodeStrokeStyle](BarcodeScanner.md#barcodestrokestyle) | Specifies the color used to paint the outline of the shape which highlights a found barcode. | -| [barcodeLineWidth](BarcodeScanner.md#barcodelinewidth) | Specifies the line width of the outline of the shape which highlights a found barcode. | -| [barcodeFillStyleBeforeVerification](BarcodeScanner.md#barcodefillstylebeforeverification) | Specifies the color used inside the shape which highlights a found linear barcode which has not been verified. | -| [barcodeStrokeStyleBeforeVerification](BarcodeScanner.md#barcodestrokestylebeforeverification) | Specifies the color used to paint the outline of the shape which highlights a found linear barcode which has not been verified. | -| [barcodeLineWidthBeforeVerification](BarcodeScanner.md#barcodelinewidthbeforeverification) | Specifies the line width of the outline of the shape which highlights a found linear barcode which has not been verified. | -| [regionMaskFillStyle](BarcodeScanner.md#regionmaskfillstyle) | Specifies the color used in the square-loop shape between the actual scanning area and the boundary of the video input. | -| [regionMaskStrokeStyle](BarcodeScanner.md#regionmaskstrokestyle) | Specifies the color used to paint the outline of the scanning region. | -| [regionMaskLineWidth](BarcodeScanner.md#regionmasklinewidth) | Specifies the width of the outline of the scanning region. | -| [setVideoFit()](BarcodeScanner.md#setvideofit) | Sets the `object-fit` CSS property of the video element. | -| [getVideoFit()](BarcodeScanner.md#getvideofit) | Returns the value of the `s` CSS property of the video element. | -| [ifShowScanRegionMask](BarcodeScanner.md#ifshowscanregionmask) | Whether to show or hide the scan region mask. | -| [showTip()](BarcodeScanner.md#showtip) | Shows a Tip message. | -| [hideTip()](BarcodeScanner.md#hidetip) | Hides the Tip message. | -| [updateTipMessage()](BarcodeScanner.md#updatetipmessage) | Changes the Tip message. | -| [onTipSuggested()](BarcodeScanner.md#ontipsuggested) | An event that gets triggered whenever a Tip is suggested. | - -### Camera Control - -| API Name | Description | -| ------------------------------------------------------------------ | --------------------------------------------------------------------------------- | -| [ifSkipCameraInspection](BarcodeScanner.md#ifskipcamerainspection) | Returns or sets whether to skip camera inspection at initialization to save time. | -| [ifSaveLastUsedCamera](BarcodeScanner.md#ifsavelastusedcamera) | Returns or sets whether to save the last used camera and resolution. | -| [getAllCameras()](BarcodeScanner.md#getallcameras) | Returns infomation of all available cameras on the device. | -| [getCurrentCamera()](BarcodeScanner.md#getcurrentcamera) | Returns information about the current camera. | -| [setCurrentCamera()](BarcodeScanner.md#setcurrentcamera) | Chooses a camera as the video source. | -| [getResolution()](BarcodeScanner.md#getresolution) | Returns the resolution of the current video input. | -| [setResolution()](BarcodeScanner.md#setresolution) | Sets the resolution of the current video input. | -| [getVideoSettings()](BarcodeScanner.md#getvideosettings) | Returns the current video settings. | -| [updateVideoSettings()](BarcodeScanner.md#updatevideosettings) | Changes the video input. | -| [onWarning](BarcodeScanner.md#onwarning) | A callback which is triggered when the resolution is not ideal (<720P). | -| [testCameraAccess](BarcodeScanner.md#testcameraaccess) | Test whether there is an available camera. | - -### Video Decoding Process Control - -| API Name | Description | -| -------------------------------------------- | ------------------------------------------------------------- | -| [play()](BarcodeScanner.md#play) | Play the video if it is already open but paused or stopped. | -| [onPlayed](BarcodeScanner.md#onplayed) | This event is triggered when the video stream starts playing. | -| [pauseScan()](BarcodeScanner.md#pausescan) | Pauses the decoding process. | -| [resumeScan()](BarcodeScanner.md#resumescan) | Resumes the decoding process. | -| [pause()](BarcodeScanner.md#pause) | Pauses the video without releasing the camera. | -| [stop()](BarcodeScanner.md#stop) | Stops the video and releases the camera. | -| [videoSrc](BarcodeScanner.md#videosrc) | Sets or returns the source of the video. | - -### Advanced Camera Control - -| API Name | Description | -| ---------------------------------------------------------------------- | --------------------------------------------------------------------------------- | -| [getCapabilities()](BarcodeScanner.md#getcapabilities) | Inspects and returns the capabilities of the current camera. | -| [getCameraSettings()](BarcodeScanner.md#getcamerasettings) | Returns the current values for each constrainable property of the current camera. | -| [getFrameRate()](BarcodeScanner.md#getframerate) | Returns the real-time frame rate. | -| [setFrameRate()](BarcodeScanner.md#setframerate) | Adjusts the frame rate. | -| [turnOnTorch()](BarcodeScanner.md#turnontorch) | Turns on the torch/flashlight. | -| [turnOffTorch()](BarcodeScanner.md#turnofftorch) | Turns off the torch/flashlight. | -| [getZoomSettings()](BarcodeScanner.md#getzoomsettings) | Returns the zoom settings. | -| [setZoom()](BarcodeScanner.md#setzoom) | Zooms the video stream. | -| [resetZoom()](BarcodeScanner.md#resetzoom) | Resets the zoom level of the video. | -| [getFocusSettings()](BarcodeScanner.md#getfocussettings) | Returns the focus settings. | -| [setFocus()](BarcodeScanner.md#setfocus) | Sets how the camera focuses. | -| [enableTapToFocus()](BarcodeScanner.md#enabletaptofocus) | Enables manual camera focus when clicking/tapping on the video. | -| [disableTapToFocus()](BarcodeScanner.md#disabletaptofocus) | Disables manual camera focus when clicking/tapping on the video. | -| [isTapToFocusEnabled()](BarcodeScanner.md#istaptofocusenabled) | Returns whether clicking/tapping on the video invokes the camera to focus. | -| [getColorTemperature()](BarcodeScanner.md#getcolortemperature) | Returns the color temperature of the selected camera. | -| [setColorTemperature()](BarcodeScanner.md#setcolortemperature) | Adjusts the color temperature of the selected camera. | -| [getExposureCompensation()](BarcodeScanner.md#getexposurecompensation) | Returns the exposure compensation index of the selected camera. | -| [setExposureCompensation()](BarcodeScanner.md#setexposurecompensation) | Sets the exposure compensation index of the selected camera. | - -## License Control - -* [license](LicenseControl.md#license) -* [deviceFriendlyName](LicenseControl.md#devicefriendlyname) - -## Initialization Control - -The following static methods and properties help to set up the runtime environment for the library: - -* [engineResourcePath](InitializationControl.md#engineresourcepath) -* [loadWasm()](InitializationControl.md#loadwasm) -* [isWasmLoaded()](InitializationControl.md#iswasmloaded) -* [version](InitializationControl.md#version) -* [detectEnvironment()](InitializationControl.md#detectenvironment) -* [onWarning](InitializationControl.md#onwarning) - -## Interfaces and Enums - -In order to make the code more predictable and readable, the library defines a series of supporting interfaces and enumerations: - -### Interfaces - -* [LocalizationResult](interface/LocalizationResult.md) -* [Region](interface/Region.md) -* [RuntimeSettings](interface/RuntimeSettings.md) -* [FurtherModes](interface/FurtherModes.md) -* [ScannerPlayCallbackInfo](interface/ScannerPlayCallbackInfo.md) -* [ScanSettings](interface/ScanSettings.md) -* [TextResult](interface/TextResult.md) -* [VideoDeviceInfo](interface/VideoDeviceInfo.md) -* [imagesource](interface/imagesource.md) -* [dsimage](interface/dsimage.md) - -### Enums - -* [EnumBarcodeColourMode](enum/EnumBarcodeColourMode.md) -* [EnumBarcodeComplementMode](enum/EnumBarcodeComplementMode.md) -* [EnumBarcodeFormat](enum/EnumBarcodeFormat.md) -* [EnumBarcodeFormat_2](enum/EnumBarcodeFormat_2.md) -* [EnumBinarizationMode](enum/EnumBinarizationMode.md) -* [EnumClarityCalculationMethod](enum/EnumClarityCalculationMethod.md) -* [EnumClarityFilterMode](enum/EnumClarityFilterMode.md) -* [EnumColourClusteringMode](enum/EnumColourClusteringMode.md) -* [EnumColourConversionMode](enum/EnumColourConversionMode.md) -* [EnumConflictMode](enum/EnumConflictMode.md) -* [EnumDeblurMode](enum/EnumDeblurMode.md) -* [EnumDeformationResistingMode](enum/EnumDeformationResistingMode.md) -* [EnumDPMCodeReadingMode](enum/EnumDPMCodeReadingMode.md) -* [EnumErrorCode](enum/EnumErrorCode.md) -* [EnumGrayscaleTransformationMode](enum/EnumGrayscaleTransformationMode.md) -* [EnumImagePixelFormat](enum/EnumImagePixelFormat.md) -* [EnumImagePreprocessingMode](enum/EnumImagePreprocessingMode.md) -* [EnumIMResultDataType](enum/EnumIMResultDataType.md) -* [EnumIntermediateResultSavingMode](enum/EnumIntermediateResultSavingMode.md) -* [EnumIntermediateResultType](enum/EnumIntermediateResultType.md) -* [EnumLocalizationMode](enum/EnumLocalizationMode.md) -* [EnumPDFReadingMode](enum/EnumPDFReadingMode.md) -* [EnumQRCodeErrorCorrectionLevel](enum/EnumQRCodeErrorCorrectionLevel.md) -* [EnumRegionPredetectionMode](enum/EnumRegionPredetectionMode.md) -* [EnumResultCoordinateType](enum/EnumResultCoordinateType.md) -* [EnumResultType](enum/EnumResultType.md) -* [EnumScaleUpMode](enum/EnumScaleUpMode.md) -* [EnumTerminatePhase](enum/EnumTerminatePhase.md) -* [EnumTextFilterMode](enum/EnumTextFilterMode.md) -* [EnumTextResultOrderMode](enum/EnumTextResultOrderMode.md) -* [EnumTextureDetectionMode](enum/EnumTextureDetectionMode.md) \ No newline at end of file diff --git a/programming-old/javascript/api-reference/index-v9.6.42.md b/programming-old/javascript/api-reference/index-v9.6.42.md deleted file mode 100644 index f1e407d6..00000000 --- a/programming-old/javascript/api-reference/index-v9.6.42.md +++ /dev/null @@ -1,275 +0,0 @@ ---- -layout: default-layout -title: API Reference Index - Dynamsoft Barcode Reader JavaScript Edition -description: Introduction to Dynamsoft Barcode Reader JavaScript Edition. Simply integrate the library to run it on all major modern browsers. -keywords: BarcodeScanner, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -noTitleIndex: true -breadcrumbText: API Reference -permalink: /programming/javascript/api-reference/index-v9.6.42.html ---- - -# JavaScript API Reference - -The Dynamsoft Barcode Reader JavaScript library comes with two primary classes: [BarcodeReader](#barcodereader) and [BarcodeScanner](#barcodescanner). - -## BarcodeReader - -A low-level barcode reader that processes still images and returns barcode results. The following code snippet shows its basic usage: - -```js -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -let results = await reader.decode(imageSource); -for(let result of results){ - console.log(result.barcodeText); -} -``` - -The APIs for this class include: - -### Create and Destroy Instances - -| API Name | Description | -| ----------------------------------------------------------- | ------------------------------------------------ | -| [createInstance()](BarcodeReader.md#createinstance) | Creates a `BarcodeReader` instance. | -| [destroyContext()](BarcodeReader.md#destroycontext) | Destroys the `BarcodeReader` instance. | -| [isContextDestroyed()](BarcodeReader.md#iscontextdestroyed) | Returns whether the instance has been destroyed. | - -### Decode Barcodes on a Single Image - -| API Name | Description | -| ----------------------------------------------------------- | -------------------------------------------------------------------- | -| [decode()](BarcodeReader.md#decode) | Decodes barcodes from an image. | -| [decodeBase64String()](BarcodeReader.md#decodebase64string) | Decodes barcodes from a base64-encoded image (with or without MIME). | -| [decodeUrl()](BarcodeReader.md#decodeurl) | Decodes barcodes from an image specified by its URL. | -| [decodeBuffer()](BarcodeReader.md#decodebuffer) | Decodes barcodes from raw image data. | - -### Decode Barcodes on multiple images from an Image Source - -| API Name | Description | -| ----------------------------------------------------------- | --------------------------------------------------------------------- | -| [setImageSource](BarcodeReader.md#setimagesource) | Sets an image source for continous scanning. | -| [onUniqueRead](BarcodeReader.md#onuniqueread) | This event is triggered when a new, unduplicated barcode is found. | -| [onImageRead](BarcodeReader.md#onimageread) | This event is triggered after the library finishes scanning an image. | -| [startScanning()](BarcodeReader.md#startscanning) | Starts continuous scanning of incoming images. | -| [stopScanning()](BarcodeReader.md#stopscanning) | Stops continuous scanning. | -| [pauseScanning()](BarcodeReader.md#pausescanning) | Pause continuous scanning but keep the video stream. | -| [resumeScanning()](BarcodeReader.md#resumescanning) | Resumes continuous scanning. | -| [getScanSettings()](BarcodeReader.md#getscansettings) | Returns the current scan settings. | -| [updateScanSettings()](BarcodeReader.md#updatescansettings) | Changes scan settings with the object passed in. | - -### Change Settings - -| API Name | Description | -| --------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | -| [getRuntimeSettings()](BarcodeReader.md#getruntimesettings) | Returns the current runtime settings. | -| [initRuntimeSettingsWithString](BarcodeReader.md#initruntimesettingswithstring) | Initializes the Runtime Settings with the settings in the given JSON string. | -| [updateRuntimeSettings()](BarcodeReader.md#updateruntimesettings) | Updates runtime settings with a given struct or a preset template. | -| [resetRuntimeSettings()](BarcodeReader.md#resetruntimesettings) | Resets all parameters to default values. | -| [outputRuntimeSettingsToString()](BarcodeReader.md#outputruntimesettingstostring) | Return the current RuntimeSettings in the form of a string. | -| [getModeArgument()](BarcodeReader.md#getmodeargument) | Returns the argument value for the specified mode parameter. | -| [setModeArgument()](BarcodeReader.md#setmodeargument) | Sets the argument value for the specified mode parameter. | - -### Auxiliary - -| API Name | Description | -| ----------------------------------------------------------------------------- | ----------------------------------------------------------------- | -| [ifSaveOriginalImageInACanvas](BarcodeReader.md#ifsaveoriginalimageinacanvas) | Whether to save the original image into a <canvas> element. | -| [getOriginalImageInACanvas()](BarcodeReader.md#getoriginalimageinacanvas) | Returns an `HTMLCanvasElement` that holds the original image. | - -
    - -## BarcodeScanner - -A barcode scanner object gets access to a camera via the [MediaDevices](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices) interface, then uses its built-in UI to show the camera input and performs continuous barcode scanning on the incoming frames. - -The default built-in UI of a barcode scanner object is defined in the file `dbr.ui.html`. The UI fits the entire page and sits on top. Read more on how to [Customize the UI](../user-guide/#customize-the-ui). - -Although a barcode scanner is designed to scan barcodes from a video input, it also supports a special mode called [singleFrameMode](BarcodeScanner.md#singleframemode) which allows users to select a still image or take a shot with the camera for barcode scanning. - -The following code snippet shows the basic usage of the `BarcodeScanner` class. - -```js -let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); -scanner.onUniqueRead = txt => console.log(txt); -await scanner.show(); -``` - -The `BarcodeScanner` class is based on [BarcodeReader](./BarcodeReader.md) and inherits most of its methods and properties. The following APIs are different or unique: - -### Create and Destroy Instances - -| API Name | Description | -| ------------------------------------------------------------ | ------------------------------------------------ | -| [createInstance()](BarcodeScanner.md#createinstance) | Creates a `BarcodeScanner` instance. | -| [destroyContext()](BarcodeScanner.md#destroycontext) | Destroys the `BarcodeScanner` instance. | -| [isContextDestroyed()](BarcodeScanner.md#iscontextdestroyed) | Returns whether the instance has been destroyed. | - -### Decode Barcodes - -| API Name | Description | -| ---------------------------------------------- | -------------------------------------------------------------------- | -| [onUniqueRead](BarcodeScanner.md#onUniqueRead) | This event is triggered when a new, unduplicated barcode is found. | -| [onFrameRead](BarcodeScanner.md#onframeread) | This event is triggered after the library finishes scanning a frame. | - -### Basic Interaction - -| API Name | Description | -| ------------------------------------ | --------------------------------------------------------- | -| [show()](BarcodeScanner.md#show) | Binds and shows UI, opens the camera and starts decoding. | -| [hide()](BarcodeScanner.md#hide) | Stops decoding, releases camera, hides and unbinds UI. | -| [open()](BarcodeScanner.md#open) | Binds UI, opens the camera and starts decoding. | -| [close()](BarcodeScanner.md#close) | Stops decoding, releases camera and unbinds UI. | -| [isOpen()](BarcodeScanner.md#isopen) | Indicates whether the camera is turned on. | - -### Scan Settings - -| API Name | Description | -| ------------------------------------------------------------ | ------------------------------------------------------- | -| [singleFrameMode](BarcodeScanner.md#singleframemode) | Returns or sets whether to enable the singe-frame mode. | -| [getScanSettings()](BarcodeScanner.md#getscansettings) | Returns the current scan settings. | -| [updateScanSettings()](BarcodeScanner.md#updatescansettings) | Changes scan settings with the object passed in. | - -### UI Control - -| API Name | Description | -| ---------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [getUIElement()](BarcodeScanner.md#getuielement) | Returns the HTML element that is used by the `BarcodeScanner` instance. | -| [setUIElement()](BarcodeScanner.md#setuielement) | Specifies an HTML element for the `BarcodeScanner` instance to use as its UI. | -| [defaultUIElementURL](BarcodeScanner.md#defaultuielementurl) | Returns or sets the URL of the .html file that defines the default UI Element. | -| [barcodeFillStyle](BarcodeScanner.md#barcodefillstyle) | Specifies the color used inside the shape which highlights a found barcode. | -| [barcodeStrokeStyle](BarcodeScanner.md#barcodestrokestyle) | Specifies the color used to paint the outline of the shape which highlights a found barcode. | -| [barcodeLineWidth](BarcodeScanner.md#barcodelinewidth) | Specifies the line width of the outline of the shape which highlights a found barcode. | -| [barcodeFillStyleBeforeVerification](BarcodeScanner.md#barcodefillstylebeforeverification) | Specifies the color used inside the shape which highlights a found linear barcode which has not been verified. | -| [barcodeStrokeStyleBeforeVerification](BarcodeScanner.md#barcodestrokestylebeforeverification) | Specifies the color used to paint the outline of the shape which highlights a found linear barcode which has not been verified. | -| [barcodeLineWidthBeforeVerification](BarcodeScanner.md#barcodelinewidthbeforeverification) | Specifies the line width of the outline of the shape which highlights a found linear barcode which has not been verified. | -| [regionMaskFillStyle](BarcodeScanner.md#regionmaskfillstyle) | Specifies the color used in the square-loop shape between the actual scanning area and the boundary of the video input. | -| [regionMaskStrokeStyle](BarcodeScanner.md#regionmaskstrokestyle) | Specifies the color used to paint the outline of the scanning region. | -| [regionMaskLineWidth](BarcodeScanner.md#regionmasklinewidth) | Specifies the width of the outline of the scanning region. | -| [setVideoFit()](BarcodeScanner.md#setvideofit) | Sets the `object-fit` CSS property of the video element. | -| [ifShowScanRegionMask](BarcodeScanner.md#ifshowscanregionmask) | Whether to show or hide the scan region mask. | -| [showTip()](BarcodeScanner.md#showtip) | Shows a Tip message. | -| [hideTip()](BarcodeScanner.md#hidetip) | Hides the Tip message. | -| [updateTipMessage()](BarcodeScanner.md#updatetipmessage) | Changes the Tip message. | -| [onTipSuggested()](BarcodeScanner.md#ontipsuggested) | An event that gets triggered whenever a Tip is suggested. | -| [convertToPageCoordinates()](BarcodeScanner.md#converttopagecoordinates) | Converts coordinates of a barcode location to the coordinates relative to the top left point of the entire document. | -| [convertToClientCoordinates()](BarcodeScanner.md#converttoclientcoordinates) | Converts coordinates of a barcode location to the coordinates within the application's viewport at which the event occurred (as opposed to the coordinate within the page). | - -### Camera Control - -| API Name | Description | -| ------------------------------------------------------------------ | --------------------------------------------------------------------------------- | -| [ifSkipCameraInspection](BarcodeScanner.md#ifskipcamerainspection) | Returns or sets whether to skip camera inspection at initialization to save time. | -| [ifSaveLastUsedCamera](BarcodeScanner.md#ifsavelastusedcamera) | Returns or sets whether to save the last used camera and resolution. | -| [getAllCameras()](BarcodeScanner.md#getallcameras) | Returns infomation of all available cameras on the device. | -| [getCurrentCamera()](BarcodeScanner.md#getcurrentcamera) | Returns information about the current camera. | -| [setCurrentCamera()](BarcodeScanner.md#setcurrentcamera) | Chooses a camera as the video source. | -| [getResolution()](BarcodeScanner.md#getresolution) | Returns the resolution of the current video input. | -| [setResolution()](BarcodeScanner.md#setresolution) | Sets the resolution of the current video input. | -| [getVideoSettings()](BarcodeScanner.md#getvideosettings) | Returns the current video settings. | -| [updateVideoSettings()](BarcodeScanner.md#updatevideosettings) | Changes the video input. | -| [onWarning](BarcodeScanner.md#onwarning) | A callback which is triggered when the resolution is not ideal (<720P). | -| [testCameraAccess](BarcodeScanner.md#testcameraaccess) | Test whether there is an available camera. | - -### Video Decoding Process Control - -| API Name | Description | -| -------------------------------------------- | ------------------------------------------------------------- | -| [play()](BarcodeScanner.md#play) | Play the video if it is already open but paused or stopped. | -| [onPlayed](BarcodeScanner.md#onplayed) | This event is triggered when the video stream starts playing. | -| [pauseScan()](BarcodeScanner.md#pausescan) | Pauses the decoding process. | -| [resumeScan()](BarcodeScanner.md#resumescan) | Resumes the decoding process. | -| [pause()](BarcodeScanner.md#pause) | Pauses the video without releasing the camera. | -| [stop()](BarcodeScanner.md#stop) | Stops the video and releases the camera. | -| [videoSrc](BarcodeScanner.md#videosrc) | Sets or returns the source of the video. | - -### Advanced Camera Control - -| API Name | Description | -| ---------------------------------------------------------------------- | --------------------------------------------------------------------------------- | -| [getCapabilities()](BarcodeScanner.md#getcapabilities) | Inspects and returns the capabilities of the current camera. | -| [getCameraSettings()](BarcodeScanner.md#getcamerasettings) | Returns the current values for each constrainable property of the current camera. | -| [getFrameRate()](BarcodeScanner.md#getframerate) | Returns the real-time frame rate. | -| [setFrameRate()](BarcodeScanner.md#setframerate) | Adjusts the frame rate. | -| [turnOnTorch()](BarcodeScanner.md#turnontorch) | Turns on the torch/flashlight. | -| [turnOffTorch()](BarcodeScanner.md#turnofftorch) | Turns off the torch/flashlight. | -| [getZoomSettings()](BarcodeScanner.md#getzoomsettings) | Returns the zoom settings. | -| [setZoom()](BarcodeScanner.md#setzoom) | Zooms the video stream. | -| [resetZoom()](BarcodeScanner.md#resetzoom) | Resets the zoom level of the video. | -| [getFocusSettings()](BarcodeScanner.md#getfocussettings) | Returns the focus settings. | -| [setFocus()](BarcodeScanner.md#setfocus) | Sets how the camera focuses. | -| [enableTapToFocus()](BarcodeScanner.md#enabletaptofocus) | Enables manual camera focus when clicking/tapping on the video. | -| [disableTapToFocus()](BarcodeScanner.md#disabletaptofocus) | Disables manual camera focus when clicking/tapping on the video. | -| [isTapToFocusEnabled()](BarcodeScanner.md#istaptofocusenabled) | Returns whether clicking/tapping on the video invokes the camera to focus. | -| [getColorTemperature()](BarcodeScanner.md#getcolortemperature) | Returns the color temperature of the selected camera. | -| [setColorTemperature()](BarcodeScanner.md#setcolortemperature) | Adjusts the color temperature of the selected camera. | -| [getExposureCompensation()](BarcodeScanner.md#getexposurecompensation) | Returns the exposure compensation index of the selected camera. | -| [setExposureCompensation()](BarcodeScanner.md#setexposurecompensation) | Sets the exposure compensation index of the selected camera. | - -## License Control - -* [license](LicenseControl.md#license) -* [deviceFriendlyName](LicenseControl.md#devicefriendlyname) - -## Initialization Control - -The following static methods and properties help to set up the runtime environment for the library: - -* [engineResourcePath](InitializationControl.md#engineresourcepath) -* [loadWasm()](InitializationControl.md#loadwasm) -* [isWasmLoaded()](InitializationControl.md#iswasmloaded) -* [version](InitializationControl.md#version) -* [detectEnvironment()](InitializationControl.md#detectenvironment) -* [onWarning](InitializationControl.md#onwarning) - -## Interfaces and Enums - -In order to make the code more predictable and readable, the library defines a series of supporting interfaces and enumerations: - -### Interfaces - -* [LocalizationResult](interface/LocalizationResult.md) -* [Region](interface/Region.md) -* [RuntimeSettings](interface/RuntimeSettings.md) -* [FurtherModes](interface/FurtherModes.md) -* [ScannerPlayCallbackInfo](interface/ScannerPlayCallbackInfo.md) -* [ScanSettings](interface/ScanSettings.md) -* [TextResult](interface/TextResult.md) -* [VideoDeviceInfo](interface/VideoDeviceInfo.md) -* [imagesource](interface/imagesource.md) -* [dsimage](interface/dsimage.md) - -### Enums - -* [EnumBarcodeColourMode](enum/EnumBarcodeColourMode.md) -* [EnumBarcodeComplementMode](enum/EnumBarcodeComplementMode.md) -* [EnumBarcodeFormat](enum/EnumBarcodeFormat.md) -* [EnumBarcodeFormat_2](enum/EnumBarcodeFormat_2.md) -* [EnumBinarizationMode](enum/EnumBinarizationMode.md) -* [EnumClarityCalculationMethod](enum/EnumClarityCalculationMethod.md) -* [EnumClarityFilterMode](enum/EnumClarityFilterMode.md) -* [EnumColourClusteringMode](enum/EnumColourClusteringMode.md) -* [EnumColourConversionMode](enum/EnumColourConversionMode.md) -* [EnumConflictMode](enum/EnumConflictMode.md) -* [EnumDeblurMode](enum/EnumDeblurMode.md) -* [EnumDeformationResistingMode](enum/EnumDeformationResistingMode.md) -* [EnumDPMCodeReadingMode](enum/EnumDPMCodeReadingMode.md) -* [EnumErrorCode](enum/EnumErrorCode.md) -* [EnumGrayscaleTransformationMode](enum/EnumGrayscaleTransformationMode.md) -* [EnumImagePixelFormat](enum/EnumImagePixelFormat.md) -* [EnumImagePreprocessingMode](enum/EnumImagePreprocessingMode.md) -* [EnumIMResultDataType](enum/EnumIMResultDataType.md) -* [EnumIntermediateResultSavingMode](enum/EnumIntermediateResultSavingMode.md) -* [EnumIntermediateResultType](enum/EnumIntermediateResultType.md) -* [EnumLocalizationMode](enum/EnumLocalizationMode.md) -* [EnumPDFReadingMode](enum/EnumPDFReadingMode.md) -* [EnumQRCodeErrorCorrectionLevel](enum/EnumQRCodeErrorCorrectionLevel.md) -* [EnumRegionPredetectionMode](enum/EnumRegionPredetectionMode.md) -* [EnumResultCoordinateType](enum/EnumResultCoordinateType.md) -* [EnumResultType](enum/EnumResultType.md) -* [EnumScaleUpMode](enum/EnumScaleUpMode.md) -* [EnumTerminatePhase](enum/EnumTerminatePhase.md) -* [EnumTextFilterMode](enum/EnumTextFilterMode.md) -* [EnumTextResultOrderMode](enum/EnumTextResultOrderMode.md) -* [EnumTextureDetectionMode](enum/EnumTextureDetectionMode.md) \ No newline at end of file diff --git a/programming-old/javascript/api-reference/interface/FurtherModes.md b/programming-old/javascript/api-reference/interface/FurtherModes.md deleted file mode 100644 index f307843f..00000000 --- a/programming-old/javascript/api-reference/interface/FurtherModes.md +++ /dev/null @@ -1,161 +0,0 @@ ---- -layout: default-layout -title: Interface - FurtherModes - Dynamsoft Barcode Reader JavaScript Edition API -description: Use this interface syntax to set further modes for barcodes when using Dynamsoft Barcode Reader JavaScript Edition in your project. -keywords: FurtherModes, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: FurtherModes -permalink: /programming/javascript/api-reference/interface/FurtherModes.html ---- - -# FurtherModes - -## Attributes - -| Attribute | Type | -|---------- | ---- | -| [colourConversionModes](#colourconversionmodes) | *number | [EnumColourConversionMode](../enum/EnumColourConversionMode.md)* | -| [grayscaleTransformationModes](#grayscaletransformationmodes) | *number | [EnumGrayscaleTransformationMode](../enum/EnumGrayscaleTransformationMode.md)* | -| [regionPredetectionModes](#regionpredetectionmodes) | *number | [EnumRegionPredetectionMode](../enum/EnumRegionPredetectionMode.md)* | -| [imagePreprocessingModes](#imagepreprocessingmodes) | *number | [EnumImagePreprocessingMode](../enum/EnumImagePreprocessingMode.md)* | -| [textureDetectionModes](#texturedetectionmodes) | *number | [EnumTextureDetectionMode](../enum/EnumTextureDetectionMode.md)* | -| [dpmCodeReadingModes](#dpmcodereadingmodes) | *number | [EnumDPMCodeReadingMode](../enum/EnumDPMCodeReadingMode.md)* | -| [deformationResistingModes](#deformationresistingmodes) | *number | [EnumDeformationResistingMode](../enum/EnumDeformationResistingMode.md)* | -| [barcodeComplementModes](#barcodecolourmodes) | *number | [EnumBarcodeComplementMode](../enum/EnumBarcodeComplementMode.md)* | -| [barcodeColourModes](#barcodecolourmodes) | *number | [EnumBarcodeColourMode](../enum/EnumBarcodeColourMode.md)* | - -### colourConversionModes - -Sets the modes and their correspondent priorities when the SDK is required to convert a colour image to a grayscale one. - -**Value Range** Please see the [EnumColourConversionMode](../enum/EnumColourConversionMode.md) items. - -**Default Value** `[CICM_GENERAL,CICM_SKIP,CICM_SKIP,CICM_SKIP,CICM_SKIP,CICM_SKIP,CICM_SKIP,CICM_SKIP]` - -### grayscaleTransformationModes - -This parameter should be mainly used when trying to read light on dark barcodes. By default, the SDK is configured to read dark on light barcodes. - -**Value Range** An array of [EnumGrayscaleTransformationMode](../enum/EnumGrayscaleTransformationMode.md) items. - -**Default Value** `[GTM_ORIGINAL,GTM_SKIP,GTM_SKIP,GTM_SKIP,GTM_SKIP,GTM_SKIP,GTM_SKIP,GTM_SKIP]` - -**Remarks** If you are primarily scanning dark on light barcodes, it is best to set the highest priority item in the array to `GTM_INVERTED`. - -```js -let runtimeSettings = await reader.getRuntimeSettings(); -runtimeSettings.furtherModes.grayscaleTransformationModes[0] = Dynamsoft.DBR.EnumGrayscaleTransformationMode.GTM_INVERTED; -await reader.updateRuntimeSettings(runtimeSettings); -``` - -### regionPredetectionModes - -This parameters helps speed up the recognition process by detecting regions of interest automatically. Pre-detection is based on the colour/grayscale distribution of each area, and then choosing areas of interest based on the priority of the region predetction modes. - -**Value Range** Array of [EnumRegionPredetectionMode](../enum/EnumRegionPredetectionMode.md) items. - -**Default Value** `[RPM_GENERAL,RPM_SKIP,RPM_SKIP,RPM_SKIP,RPM_SKIP,RPM_SKIP,RPM_SKIP,RPM_SKIP]` - -**Remarks** If the image is large, and the barcode is very small relative to the whole image, then it is recommended to enable region predetction to speed up the localization process and recognition accuracy. - -```js -let runtimeSettings = await reader.getRuntimeSettings(); -runtimeSettings.furtherModes.regionPredetectionModes[0] = Dynamsoft.DBR.EnumRegionPredetectionMode.RPM_GENERAL_RGB_CONTRAST; -runtimeSettings.furtherModes.regionPredetectionModes[1] = Dynamsoft.DBR.EnumRegionPredetectionMode.RPM_GENERAL; -await reader.updateRuntimeSettings(runtimeSettings); -``` - -### imagePreprocessingModes - -This parameter helps enhance or keep the features of barcode zones by processing colour or grayscale images, in turn improving the localization process. - -**Value Range** Array of [EnumImagePreprocessingMode](../enum/EnumImagePreprocessingMode.md) items. - -**Default Value** `[IPM_GENERAL,IPM_SKIP,IPM_SKIP,IPM_SKIP,IPM_SKIP,IPM_SKIP,IPM_SKIP,IPM_SKIP]` - -**Remarks** In order for barcodes to be localized, the barcode must have clear barcode zone features that the algorithm uses to find the barcode and in turn recognize it. By enhancing some of the available zone features, the process of finding the barcode can also potentially become more effective. - -```js -let runtimeSettings = await reader.getRuntimeSettings(); -runtimeSettings.furtherModes.imagePreprocessingModes[0] = Dynamsoft.DBR.EnumImagePreprocessingMode.IPM_GRAY_SMOOTH; -runtimeSettings.furtherModes.imagePreprocessingModes[1] = Dynamsoft.DBR.EnumImagePreprocessingMode.IPM_SHARPEN_SMOOTH; -await reader.updateRuntimeSettings(runtimeSettings); -``` - -### textureDetectionModes - -When scanning 1D barcodes, this parameter helps reduce the time cost and error probability caused by textures that can resemble 1D barcodes. - -**Value Range** Array of [EnumTextureDetectionMode](../enum/EnumTextureDetectionMode.md) items. - -**Default Value** `[TDM_GENERAL_WIDTH_CONCENTRATION,TDM_SKIP,TDM_SKIP,TDM_SKIP,TDM_SKIP,TDM_SKIP,TDM_SKIP,TDM_SKIP]` - -**Remarks** Mainly applicable when scanning 1D barcodes. - -```js -let runtimeSettings = await reader.getRuntimeSettings(); -runtimeSettings.furtherModes.textureDetectionModes[0] = Dynamsoft.DBR.EnumTextureDetectionMode.TDM_SKIP; // to disable this parameter completely -await reader.updateRuntimeSettings(runtimeSettings); -``` - -### dpmCodeReadingModes - -This parameter should only be enabled when working with DPM codes. By default, DPM reading is disabled. - -**Value Range** Array of [EnumDPMCodeReadingMode](../enum/EnumDPMCodeReadingMode.md) items - -**Default Value** `[DPMCRM_SKIP,DPMCRM_SKIP,DPMCRM_SKIP,DPMCRM_SKIP,DPMCRM_SKIP,DPMCRM_SKIP,DPMCRM_SKIP,DPMCRM_SKIP]` - -```js -let runtimeSettings = await reader.getRuntimeSettings(); -runtimeSettings.furtherModes.dpmCodeReadingModes[0] = Dynamsoft.DBR.EnumDPMCodeReadingMode.DPMCRM_GENERAL; // to enable DPM code reading set the highest priority item to General -await reader.updateRuntimeSettings(runtimeSettings); -``` - -### deformationResistingModes - -This parameter should be used when handling distorted or deformed barcodes. Currently, there is only one general mode that deal with the deformation resistance, so if you are looking to enable this feature, then please refer to the code snippet. - -**Value Range** Array of [EnumDeformationResistingMode](../enum/EnumDeformationResistingMode.md) items - -**Default Value** `[DRM_SKIP,DRM_SKIP,DRM_SKIP,DRM_SKIP,DRM_SKIP,DRM_SKIP,DRM_SKIP,DRM_SKIP]` - -```js -let runtimeSettings = await reader.getRuntimeSettings(); -runtimeSettings.furtherModes.deformationResistingModes[0] = Dynamsoft.DBR.EnumDeformationResistingMode.DRM_GENERAL; // to enable deformation resistance set the highest priority item to General -await reader.updateRuntimeSettings(runtimeSettings); -``` - -### barcodeComplementModes - -When dealing with a barcode that has 'missing' parts, this parameter controls how to complement the missing parts of said barcode. - -**Value Range** Array of [EnumBarcodeComplementMode](../enum/EnumBarcodeComplementMode.md) items - -**Default Value** `[BCM_SKIP,BCM_SKIP,BCM_SKIP,BCM_SKIP,BCM_SKIP,BCM_SKIP,BCM_SKIP,BCM_SKIP]` - -```js -let runtimeSettings = await reader.getRuntimeSettings(); -runtimeSettings.furtherModes.barcodeComplementModes[0] = Dynamsoft.DBR.EnumBarcodeComplementMode.BCM_GENERAL; // to enable the barcode complement feature set the highest priority item to General -await reader.updateRuntimeSettings(runtimeSettings); -``` - -### barcodeColourModes - -**Please note that this API is not yet applicable. Please use [grayscaleTransformationModes](#grayscaletransformationmodes) instead.** - -In most cases, barcodes come as a dark image with a light background (e.g. black barcode on a white background). However, that is not always the case as the barcodes can come as a light image with a dark background, or some other variation. - -**Value Range** Array of [EnumBarcodeColourMode](../enum/EnumBarcodeColourMode.md) items - -**Default Value** `[BICM_DARK_ON_LIGHT,BICM_SKIP,BICM_SKIP,BICM_SKIP,BICM_SKIP,BICM_SKIP,BICM_SKIP,BICM_SKIP]` - -**Remarks** To learn about the purpose of each mode, please refer to this [page](https://www.dynamsoft.com/barcode-reader/parameters/reference/barcode-colour-modes.html?ver=latest). - -```js -let runtimeSettings = await reader.getRuntimeSettings(); -runtimeSettings.furtherModes.barcodeColourModes[0] = Dynamsoft.DBR.EnumBarcodeColourMode.BICM_DARK_ON_LIGHT; // to support both dark-on-light and light-on-dark barcodes then the array must contain both modes. -runtimeSettings.furtherModes.barcodeColourModes[1] = Dynamsoft.DBR.EnumBarcodeColourMode.BICM_LIGHT_ON_DARK; // to support both dark-on-light and light-on-dark barcodes then the array must contain both modes. -await reader.updateRuntimeSettings(runtimeSettings); -``` diff --git a/programming-old/javascript/api-reference/interface/LocalizationResult-v9.6.2.md b/programming-old/javascript/api-reference/interface/LocalizationResult-v9.6.2.md deleted file mode 100644 index cfe30f38..00000000 --- a/programming-old/javascript/api-reference/interface/LocalizationResult-v9.6.2.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -layout: default-layout -title: Interface - LocalizationResult - Dynamsoft Barcode Reader JavaScript Edition API -description: Use this interface syntax to set localization results for barcodes when using Dynamsoft Barcode Reader JavaScript Edition in your project. -keywords: LocalizationResult, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: LocalizationResult -permalink: /programming/javascript/api-reference/interface/LocalizationResult-v9.6.2.html ---- - - -# LocalizationResult - -`interface` LocalizationResult - -* angle: *number* - - > The angle of a barcode. Values range from 0 to 360. - -* x1: *number* - - > The X coordinate of the left-most point. - -* x2: *number* - - > The X coordinate of the second point in a clockwise direction. - -* x3: *number* - - > The X coordinate of the third point in a clockwise direction. - -* x4: *number* - - > The X coordinate of the fourth point in a clockwise direction. - -* y1: *number* - - > The Y coordinate of the left-most point. - -* y2: *number* - - > The Y coordinate of the second point in a clockwise direction. - -* y3: *number* - - > The Y coordinate of the third point in a clockwise direction. - -* y4: *number* - - > The Y coordinate of the fourth point in a clockwise direction. - -* confidence: *number* - - > The confidence, or accuracy, of the localization result. - -* resultCoordinateType: *number* - - > Determines whether the coordinates of a located barcode (x1,x2,x3,etc.) are shared as pixel coordinates or as percentages of the total dimensions of the image or frame. To learn more, please refer to [EnumResultCoordinateType](../enum/EnumResultCoordinateType.md). - -![localizationresult](../assets/localizationresult.png) diff --git a/programming-old/javascript/api-reference/interface/LocalizationResult.md b/programming-old/javascript/api-reference/interface/LocalizationResult.md deleted file mode 100644 index b21fe37d..00000000 --- a/programming-old/javascript/api-reference/interface/LocalizationResult.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -layout: default-layout -title: Interface - LocalizationResult - Dynamsoft Barcode Reader JavaScript Edition API -description: Use this interface syntax to set localization results for barcodes when using Dynamsoft Barcode Reader JavaScript Edition in your project. -keywords: LocalizationResult, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: LocalizationResult -permalink: /programming/javascript/api-reference/interface/LocalizationResult.html ---- - - -# LocalizationResult - -`interface` LocalizationResult - -* transformationMatrix: *Array* - - > A transformation matrix that can transform the coordinates of the four resultPoints so that they show up correctly on the displayed image. - -* angle: *number* - - > The angle of a barcode. Values range from 0 to 360. - -* x1: *number* - - > The X coordinate of the left-most point. - -* x2: *number* - - > The X coordinate of the second point in a clockwise direction. - -* x3: *number* - - > The X coordinate of the third point in a clockwise direction. - -* x4: *number* - - > The X coordinate of the fourth point in a clockwise direction. - -* y1: *number* - - > The Y coordinate of the left-most point. - -* y2: *number* - - > The Y coordinate of the second point in a clockwise direction. - -* y3: *number* - - > The Y coordinate of the third point in a clockwise direction. - -* y4: *number* - - > The Y coordinate of the fourth point in a clockwise direction. - -* confidence: *number* - - > The confidence, or accuracy, of the localization result. - -* resultCoordinateType: *number* - - > Determines whether the coordinates of a located barcode (x1,x2,x3,etc.) are shared as pixel coordinates or as percentages of the total dimensions of the image or frame. To learn more, please refer to [EnumResultCoordinateType](../enum/EnumResultCoordinateType.md). - -![localizationresult](../assets/localizationresult.png) diff --git a/programming-old/javascript/api-reference/interface/Region.md b/programming-old/javascript/api-reference/interface/Region.md deleted file mode 100644 index 43294204..00000000 --- a/programming-old/javascript/api-reference/interface/Region.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -layout: default-layout -title: Interface - Region - Dynamsoft Barcode Reader JavaScript Edition API -description: Use this interface syntax to set region class for barcodes when using Dynamsoft Barcode Reader JavaScript Edition in your project.. -keywords: Region, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: Region -permalink: /programming/javascript/api-reference/interface/Region.html ---- - - -# Region - -`interface` Region - -* regionBottom: *number* - -* regionRight: *number* - -* regionLeft: *number* - -* regionTop: *number* - -* regionMeasuredByPercentage: *number | boolean* - - > `1` means `true`. `0` means `false`. diff --git a/programming-old/javascript/api-reference/interface/RuntimeSettings.md b/programming-old/javascript/api-reference/interface/RuntimeSettings.md deleted file mode 100644 index 3de01a78..00000000 --- a/programming-old/javascript/api-reference/interface/RuntimeSettings.md +++ /dev/null @@ -1,456 +0,0 @@ ---- -layout: default-layout -title: Interface - RuntimeSettings - Dynamsoft Barcode Reader JavaScript Edition API -description: Use this interface syntax to set runtime settings for barcodes when using Dynamsoft Barcode Reader JavaScript Edition in your project. -keywords: RuntimeSettings, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: RuntimeSettings -permalink: /programming/javascript/api-reference/interface/RuntimeSettings.html ---- - - -# RuntimeSettings - -## Attributes - -| Attribute | Type | -|---------- | ---- | -| [barcodeFormatIds](#barcodeformatids) | *number | [EnumBarcodeFormat](../enum/EnumBarcodeFormat.md)* | -| [barcodeFormatIds_2](#barcodeformatids_2) | *number | [EnumBarcodeFormat_2](../enum/EnumBarcodeFormat_2.md)* | -| [expectedBarcodesCount](#expectedbarcodescount) | *number* | -| [deblurLevel](#deblurlevel) | *number* | -| [scaleDownThreshold](#scaledownthreshold) | *number* | -| [localizationModes](#localizationmodes) | *number | [EnumLocalizationMode](../enum/EnumLocalizationMode.md)* | -| [binarizationModes](#binarizationmodes) | *number | [EnumResultCoordinateType](../enum/EnumResultCoordinateType.md)* | -| [region](#region) | [*`Region`*](Region.md) | -| [minBarcodeTextLength](#minbarcodetextlength) | *number* | -| [minResultConfidence](#minresultconfidence) | *number* | -| [resultCoordinateType](#resultcoordinatetype) | *number | [EnumResultCoordinateType](../enum/EnumResultCoordinateType.md)* | -| [intermediateResultTypes](#intermediateresulttypes) | *number | [EnumIntermediateResultType](../enum/EnumIntermediateResultType.md)* | -| [intermediateResultSavingMode](#intermediateresultsavingmode) | *number | [EnumIntermediateResultSavingMode](../enum/EnumIntermediateResultSavingMode.md)* | -| [deblurModes](#deblurmodes) | *number | [EnumDeblurMode](../enum/EnumDeblurMode.md)* | -| [scaleUpModes](#scaleupmodes) | *number | [EnumScaleUpMode](../enum/EnumScaleUpMode.md)* | -| [terminatePhase](#terminatephase) | *number | [EnumTerminatePhase](../enum/EnumTerminatePhase.md)* | -| [timeout](#timeout) | *number* | -| [furtherModes](#furthermodes) | *[FurtherModes](FurtherModes.md)* | -| [barcodeZoneMinDistanceToImageBorders](#barcodezonemindistancetoimageborders) | *number* | -| [maxAlgorithmThreadCount](#maxalgorithmthreadcount) | *number* | -| [returnBarcodeZoneClarity](#returnbarcodezoneclarity) | *number* | -| [textResultOrderModes](#textresultordermodes) | *[EnumTextResultOrderMode](../enum/EnumTextResultOrderMode.md)* | - -### barcodeFormatIds - -Sets the formats of the barcode in BarcodeFormat group 1 to be read. Barcode formats in BarcodeFormat group 1 can be combined. - -**Value Range** A combined value of the [EnumBarcodeFormat](../enum/EnumBarcodeFormat.md) items. - -**Default Value** `BF_ALL` - -**Remarks** If the barcode type(s) are certain, specifying the barcode type(s) to be read will speed up the recognition process. If you are looking to set a barcode format that is included in the second group, please refer to barcodeFormatIds_2. - -```js -let runtimeSettings = await reader.getRuntimeSettings(); -runtimeSettings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_ONED | Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE; -await reader.updateRuntimeSettings(runtimeSettings); -``` - -### barcodeFormatIds_2 - -Sets the formats of the barcode in BarcodeFormat group 2 to be read. Barcode formats in BarcodeFormat group 1 can be combined. - -**Value Range** A combined value of the [EnumBarcodeFormat_2](../enum/EnumBarcodeFormat_2.md) items. - -**Default Value** `BF2_NULL` - -**Remarks** If the barcode type(s) are certain, specifying the barcode type(s) to be read will speed up the recognition process. - -```js -let runtimeSettings = await reader.getRuntimeSettings(); -runtimeSettings.barcodeFormatIds_2 = Dynamsoft.DBR.EnumBarcodeFormat_2.BF2_POSTALCODE | Dynamsoft.DBR.EnumBarcodeFormat_2.BF2_POSTNET; -await reader.updateRuntimeSettings(runtimeSettings); -``` - -### expectedBarcodesCount - -Sets the number of barcodes expected to be detected for each image. - -**Value Range** [0, 0x7fffffff] - -**Default Value** 1 - -**Remarks** The following explains the value: - -* 0: means Unknown and it will return the result of the first successful [localization mode](../enum/EnumLocalizationMode.md) attempt. -* 1: try to find one barcode. If one barcode is found, the library will stop the localization process and perform barcode decoding. -* n: try to find n barcodes. If the library only finds m (m < n) barcode, it will try different algorithms till n barcodes are found or all algorithms are tried. - -```js -let runtimeSettings = await reader.getRuntimeSettings(); -runtimeSettings.expectedBarcodesCount = 3; -await reader.updateRuntimeSettings(runtimeSettings); -``` - -### deblurLevel - -Sets the degree of blurriness of the barcode. - -**Value Range** [0, 9] - -**Default Value** 0 - -```js -let runtimeSettings = await reader.getRuntimeSettings(); -runtimeSettings.deblurLevel = 9; -await reader.updateRuntimeSettings(runtimeSettings); -``` - -### scaleDownThreshold - -Sets the threshold used to determine if an image will be shrunk during the localization process. - -**Value Range** [512, 0x7fffffff] - -**Default Value** 2300 - -**Remarks** If the shortest edge size is larger than the given threshold value, the library will calculate the required height and width of the barcode image and shrink the image to that size before localization. Otherwise, the library will perform barcode localization on the original image. - -```js -let runtimeSettings = await reader.getRuntimeSettings(); -runtimeSettings.scaleDownThreshold = 1000; -await reader.updateRuntimeSettings(runtimeSettings); -``` - -### localizationModes - -Sets the mode and priority for localization algorithms. - -**Value Range:** Please see [EnumLocalizationMode](../enum/EnumLocalizationMode.md) to learn of the different localization types. - -**Default Value** `[LM_SCAN_DIRECTLY, LM_CONNECTED_BLOCKS, LM_SKIP, LM_SKIP, LM_SKIP, LM_SKIP, LM_SKIP, LM_SKIP]` - -**Remarks** To learn more of the purpose of localization in the algorithm, please refer to this [Algorithm Overview](https://www.dynamsoft.com/barcode-reader/introduction/architecture.html?ver=latest) page. - -```js -let runtimeSettings = await reader.getRuntimeSettings(); -runtimeSettings.localizationModes = [Dynamsoft.DBR.EnumLocalizationMode -.LM_CONNECTED_BLOCKS, Dynamsoft.DBR.EnumLocalizationMode.LM_SCAN_DIRECTLY, Dynamsoft.DBR.EnumLocalizationMode.LM_LINES, 0, 0, 0, 0, 0]; -await reader.updateRuntimeSettings(runtimeSettings); -``` - -### binarizationModes - -Sets the mode and priority between the different algorithms of the binarization process. - -**Value Range** Please see [EnumBinarizationMode](../enum/EnumBinarizationMode.md) - -**Default Value** `[BM_LOCAL_BLOCK, BM_SKIP, BM_SKIP, BM_SKIP, BM_SKIP, BM_SKIP, BM_SKIP, BM_SKIP]` - -**Remarks** To learn more of where binarization stands in our algorithm, please refer to this [Algorithm Overview](https://www.dynamsoft.com/barcode-reader/introduction/architecture.html?ver=latest) page. - -```js -let runtimeSettings = await reader.getRuntimeSettings(); -runtimeSettings.binarizationModes[0] = Dynamsoft.DBR.EnumBinarizationMode.BM_SKIP; -await reader.updateRuntimeSettings(runtimeSettings); -``` - -### region - -Sets the [Region](Region.md) including the regionTop, regionLeft, regionRight, regionBottom and regionMeasuredByPercentage. To learn more about how the region parameters work, please refer to the [Region section of the Parameters Template](https://www.dynamsoft.com/barcode-reader/docs/core/parameters/structure-and-interfaces-of-parameters.html?ver=latest#regiondefinition-and-how-it-works) - -```js -// Use a region positioned at the centre with 50% width and 50% height of the frame -let runtimeSettings = await reader.getRuntimeSettings(); -runtimeSettings.region.regionLeft = 25; -runtimeSettings.region.regionTop = 25; -runtimeSettings.region.regionRight = 75; -runtimeSettings.region.regionBottom = 75; -runtimeSettings.region.regionMeasuredByPercentage = true; -await reader.updateRuntimeSettings(runtimeSettings); -``` - -> Experimental feature: -> -> When using the [BarcodeScanner](../BarcodeScanner.md) class, `region` can be an array. For example `region = [r0, r1, r2]`, 0th frame use `r0`, 1st use `r1`, 2nd use `r2`, 3rd use `r0`, and then loop like this. -> -> ```js -> let runtimeSettings = await reader.getRuntimeSettings(); -> runtimeSettings.region = [ -> null, // full image -> {regionLeft:25,regionTop:25,regionRight:75,regionBottom:75,regionMeasuredByPercentage:true}, // center 50% -> {regionLeft:5,regionTop:45,regionRight:95,regionBottom:55,regionMeasuredByPercentage:true}, // width 90%, height 10% -> ]; -> await reader.updateRuntimeSettings(runtimeSettings); -> ``` - -### minBarcodeTextLength - -Sets the minimum barcode text length that the SDK will detect. If a barcode's text is shorter than this value, the SDK will reject that result. A value of 0 means there is no limitation on the barcode text length. - -**Value Range** [0, 0x7fffffff] - -**Default Value** 0 - -```js -let runtimeSettings = await reader.getRuntimeSettings(); -runtimeSettings.minBarcodeTextLength = 6; // reject barcode results shorter than 6 characters -await reader.updateRuntimeSettings(runtimeSettings); -``` - -### minResultConfidence - -Sets the minimum confidence of the barcode result that the SDK will accept. If a barcode result's confidence is lower than this value, the result is rejected. A value of 0 means there is no limitation on the result confidence. - -**Value Range** [0, 0x7fffffff] - -**Default Value** 30 - -```js -let runtimeSettings = await reader.getRuntimeSettings(); -runtimeSettings.minResultConfidence = 30; // reject any barcodes that have a confidence lower than 30 -await reader.updateRuntimeSettings(runtimeSettings); -``` - -### resultCoordinateType - -Determines what the format for the result coordinates is. The default coordinate type is a pixel format. - -**Value Range** Please see [EnumResultCoordinateType](../enum/EnumResultCoordinateType.md) - -**Default Value** `EnumResultCoordinateType.RCT_PIXEL` - -```js -let runtimeSettings = await reader.getRuntimeSettings(); -runtimeSettings.resultCoordinateType = Dynamsoft.DBR.EnumResultCoordinateType.RCT_PERCENTAGE; // report coordinates in percentage rather than pixel -await reader.updateRuntimeSettings(runtimeSettings); -``` - -### intermediateResultTypes - -Sets which types of intermediate result to be kept for further reference. - -**Value Range** A combined value of the [EnumIntermediateResultType](../enum/EnumIntermediateResultType.md) items. - -**Default Value** `IRT_NO_RESULT` - -```js -let runtimeSettings = await reader.getRuntimeSettings(); -runtimeSettings.intermediateResultTypes = Dynamsoft.DBR.EnumIntermediateResultType.IRT_ORIGINAL_IMAGE; -// or if you would like to combine values to obtain multiple intermediate result types -runtimeSettings.intermediateResultTypes = Dynamsoft.DBR.EnumIntermediateResultType.IRT_ORIGINAL_IMAGE | Dynamsoft.DBR.EnumIntermediateResultType.IRT_BINARIZED_IMAGE; -await reader.updateRuntimeSettings(runtimeSettings); -``` - -### intermediateResultSavingMode - -Determines how the intermediate results (if being collected) are saved. - -**Value Range** A specifed value from the [EnumIntermediateResultSavingMode](../enum/EnumIntermediateResultSavingMode.md) items. - -**Default Value** `IRSM_MEMORY` - -```js -let runtimeSettings = await reader.getRuntimeSettings(); -runtimeSettings.intermediateResultSavingMode = Dynamsoft.DBR.EnumIntermediateResultSavingMode.IRSM_FILESYSTEM; -await reader.updateRuntimeSettings(runtimeSettings); -``` - -### deblurModes - -Sets the mode and priority for deblurring and is the evolution of the `deblurLevel` parameter. - -**Value Range** Please see the [EnumDeblurMode](../enum/EnumDeblurMode.md) items. - -**Default Value** `[DM_SKIP,DM_SKIP,DM_SKIP,DM_SKIP,DM_SKIP,DM_SKIP,DM_SKIP,DM_SKIP,DM_SKIP,DM_SKIP]` - -**Remarks** The array index represents the priority of the mode. The smaller the index, the higher the priority. The deblurModes parameter should be used as the deblurLevel parameter will be deprecated in a future version. - -```js -let runtimeSettings = await reader.getRuntimeSettings(); -runtimeSettings.deblurModes[0] = Dynamsoft.DBR.EnumDeblurMode.DM_GRAY_EQUALIZATION; // sets the highest priority item to Gray Equalization -await reader.updateRuntimeSettings(runtimeSettings); -``` - -### scaleUpModes - -Sets the mode and priority to control the sampling scale-up methods for linear (1D) barcodes with small module sizes. - -**Value Range** Please see the [EnumScaleUpMode](../enum/EnumScaleUpMode.md) items. - -**Default Value** `[SUM_AUTO, SUM_SKIP, SUM_SKIP, SUM_SKIP, SUM_SKIP, SUM_SKIP, SUM_SKIP, SUM_SKIP]` - -**Remarks** Please note that this only applies to 1D barcodes. - -```js -let runtimeSettings = await reader.getRuntimeSettings(); -runtimeSettings.scaleUpModes[0] = Dynamsoft.DBR.EnumScaleUpMode.SUM_LINEAR_INTERPOLATION; // sets the highest priority item to Linear Interpolation -await reader.updateRuntimeSettings(runtimeSettings); -``` - -### terminatePhase - -This parameter specifies a certain stage to terminate the decoding. By default, the decoding process will only terminate after all these stages are completed and the barcode is recognized (`TP_BARCODE_RECOGNIZED`). - -**Value Range** Please see the [EnumScaleUpMode](../enum/EnumTerminatePhase.md) items. - -**Default Value** `TP_BARCODE_RECOGNIZED`. - -**Remarks** After the termination, we can acquire information generated in the process as `Intermediate Results` which include the following: - -> Note that for the JavaScript Edition, the intermediate result is only available when it is presented as an image. - -| Enumeration name | Notes | Available in JavaScript Edition | -|---|----|---| -| IRT_NO_RESULT | No information at all. | NA | -| IRT_ORIGINAL_IMAGE | The original image processed by the barcode reader. | Yes | -| IRT_COLOUR_CONVERTED_GRAYSCALE_IMAGE | Converted grayscale image based on the original image. | Yes | -| IRT_TRANSFORMED_GRAYSCALE_IMAGE | Transformed grayscale image (e.g. color inversion). | Yes | -| IRT_PREDETECTED_REGION | The coordinates of the predetected region. | No | -| IRT_PREPROCESSED_IMAGE | The preprocessed image. | Yes | -| IRT_BINARIZED_IMAGE | The binarized image. | Yes | -| IRT_TEXT_ZONE | Coordinates of the zones of text found on the image. | No | -| IRT_CONTOUR | Contours found on the image that surrounds different areas on the image. | No | -| IRT_LINE_SEGMENT | Detected line segments. | No | -| IRT_TYPED_BARCODE_ZONE | Coordinates of the barcode zones with determined barcode type(s). | No | -| IRT_PREDETECTED_QUADRILATERAL | Coordinates of the predetected quadrilaterals. | No | - -```javascript -// Obtains the current runtime settings of DBR. -let rs = await scanner.getRuntimeSettings(); -// Sets the termination phase. -rs.terminatePhase = Dynamsoft.DBR.EnumTerminatePhase.TP_BARCODE_TYPE_DETERMINED; -// Sets the intermidate result types. -rs.intermediateResultTypes = - Dynamsoft.DBR.EnumIntermediateResultType.IRT_ORIGINAL_IMAGE | - Dynamsoft.DBR.EnumIntermediateResultType.IRT_BINARIZED_IMAGE | - Dynamsoft.DBR.EnumIntermediateResultType.IRT_COLOUR_CONVERTED_GRAYSCALE_IMAGE | - Dynamsoft.DBR.EnumIntermediateResultType.IRT_TRANSFORMED_GRAYSCALE_IMAGE | - Dynamsoft.DBR.EnumIntermediateResultType.IRT_PREPROCESSED_IMAGE; -// Updates the settings. -await scanner.updateRuntimeSettings(rs); -const interval = setInterval(async() => { - try { - // Shows the intermediate results (images) on the page. - let cvss = await scanner.getIntermediateCanvas(); - if (cvss.length > 0) { - for (let cvs of cvss) { - document.body.appendChild(cvs); - } - scanner.destroyContext(); - clearInterval(interval); - } - } catch (ex) { - console.error(ex); - } -}, 1000); -await scanner.show(); -``` - -### timeout - -Sets the maximum amount of time (in milliseconds) that should be spent searching for a barcode per page. It does not include the time taken to load/decode an image (TIFF, PNG, etc) from disk into memory. - -**Value Range** [0, 0x7fffffff] - -**Default Value** 10000 - -**Remarks** If you want to stop reading barcodes after a certain period of time, you can use this parameter to set a timeout. - -### furtherModes - -The FurtherModes interface offers a more advanced set of runtime settings that can potentially improve performance. To understand the full extent of the further modes, please check out the [FurtherModes](FurtherModes.md) interface page. - -### barcodeZoneMinDistanceToImageBorders - -Sets the minimum distance (in pixels) between the barcode zone and image borders. - -**Value Range** [0, 0x7fffffff] - -**Default Value** 0 - -**Remarks** 0: means no limitation on the distance. - -```js -let runtimeSettings = await reader.getRuntimeSettings(); -runtimeSettings.barcodeZoneMinDistanceToImageBorders = 30; -await reader.updateRuntimeSettings(runtimeSettings); -``` - -### maxAlgorithmThreadCount - -Sets the number of threads the image processing algorithm will use to decode barcodes. - -**Value Range** [1, 4] - -**Default Value** 4 - -**Remarks** To keep a balance between speed and quality, the library concurrently runs four different threads for barcode decoding by default. - -```js -let runtimeSettings = await reader.getRuntimeSettings(); -runtimeSettings.maxAlgorithmThreadCount = 1; -await reader.updateRuntimeSettings(runtimeSettings); -``` - - -### returnBarcodeZoneClarity - -Sets whether or not to return the clarity of the barcode zone. - -**Value Range** [0,1] - -**Default Value** 0 - -**Remarks** 0: Do not return the clarity of the barcode zone; 1: Return the clarity of the barcode zone. - -```js -let runtimeSettings = await reader.getRuntimeSettings(); -runtimeSettings.returnBarcodeZoneClarity = 1; -await reader.updateRuntimeSettings(runtimeSettings); -``` - -### textResultOrderModes - -Sets the mode and priority for the order of the text results returned. - -**Value Range** Each array item can be any one of the [EnumTextResultOrderMode](../enum/EnumTextResultOrderMode.md) Enumeration items. - -**Default Value** `[TROM_CONFIDENCE, TROM_POSITION, TROM_FORMAT, TROM_SKIP, TROM_SKIP, TROM_SKIP, TROM_SKIP, TROM_SKIP]` - -**Remarks** The array index represents the priority of the item. The smaller the index, the higher the priority. - -```js -let runtimeSettings = await reader.getRuntimeSettings(); -runtimeSettings.textResultOrderModes[0] = Dynamsoft.DBR.TextResultOrderMode.TROM_POSITION; // sets the highest priority item to TROM_POSITION -await reader.updateRuntimeSettings(runtimeSettings); -``` diff --git a/programming-old/javascript/api-reference/interface/ScanSettings-v8.8.7.md b/programming-old/javascript/api-reference/interface/ScanSettings-v8.8.7.md deleted file mode 100644 index b090056d..00000000 --- a/programming-old/javascript/api-reference/interface/ScanSettings-v8.8.7.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -layout: default-layout -title: Interface - v8.8.7 ScanSettings - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows the ScanSettings of the BarcodeReader Class of Dynamsoft Barcode Reader JavaScript SDK. -keywords: ScanSettings, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: ScanSettings -permalink: /programming/javascript/api-reference/interface/ScanSettings-v8.8.7.html ---- - - -# ScanSettings - -`interface` ScanSettings - -* intervalTime?: *number* - - > Scan interval used to allow the library to release the CPU periodically. Measured in ms. - -* duplicateForgetTime?: *number* - - > Ignore duplicated results found in the specified time period. Measured in ms. - -```js -let scanSettings = await scanner.getScanSettings(); -scanSettings.intervalTime = 100; // 100ms -scanSettings.duplicateForgetTime = 3000; // 3s -await scanner.updateScanSettings(scanSettings); -``` diff --git a/programming-old/javascript/api-reference/interface/ScanSettings-v9.0.2.md b/programming-old/javascript/api-reference/interface/ScanSettings-v9.0.2.md deleted file mode 100644 index bb24df9b..00000000 --- a/programming-old/javascript/api-reference/interface/ScanSettings-v9.0.2.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -layout: default-layout -title: Interface - ScanSettings - Dynamsoft Barcode Reader JavaScript Edition API -description: Use this interface syntax to set scan settings for barcodes when using Dynamsoft Barcode Reader JavaScript Edition in your project. -keywords: ScanSettings, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: ScanSettings -permalink: /programming/javascript/api-reference/interface/ScanSettings-v9.0.2.html ---- - -# ScanSettings - -`interface` ScanSettings - -* intervalTime?: *number* - - > Scan interval used to allow the library to release the CPU periodically. Measured in ms. The default value is `0`. - -* duplicateForgetTime?: *number* - - > Ignore duplicated results found in the specified time period. Measured in ms. The default value is `3000`. - -* whenToPlaySoundforSuccessfulRead?: *string* - - > Sets when to play sound on barcode recognition (user input is required on iOS or [Chrome](https://developer.chrome.com/blog/autoplay/#chrome-enterprise-policies) for any sound to play). Allowed values are - > - > * `never` : never play sound, the default value; - > * `frame` : play sound when one or multiple barcodes are found on a frame; - > * `unique` : play sound when a unique barcode is found (if multiple unique barcodes are found on the same frame, play only once). - -* soundOnSuccessfullRead?: *string* - - > Specifies the sound to play on barcode recognition. If not specified, the default one is used. - -* whenToVibrateforSuccessfulRead?: *string* - - > Sets when to vibrate on barcode recognition (user input is required on iOS or [Chrome](https://developer.chrome.com/blog/autoplay/#chrome-enterprise-policies) for the vibration). Allowed values are - > - > * `never`: never vibrate, the default value; - > * `frame`: vibrate when one or multiple barcodes are found on a frame; - > * `unique`: vibrate when a unique barcode is found (if multiple unique barcodes are found on the same frame, vibrate only once). - -* vibrateDuration?: *number* - - > Returns or sets how long the vibration lasts in milliseconds. The default value is `300` . - -```js -let scanSettings = await scanner.getScanSettings(); -scanSettings.intervalTime = 100; // 100ms -scanSettings.whenToPlaySoundforSuccessfulRead = "never"; -scanSettings.whenToVibrateforSuccessfulRead = "never"; -scanSettings.duplicateForgetTime = 3000; // 3s -await scanner.updateScanSettings(scanSettings); -``` diff --git a/programming-old/javascript/api-reference/interface/ScanSettings-v9.3.1.md b/programming-old/javascript/api-reference/interface/ScanSettings-v9.3.1.md deleted file mode 100644 index c72799d2..00000000 --- a/programming-old/javascript/api-reference/interface/ScanSettings-v9.3.1.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -layout: default-layout -title: Interface - ScanSettings - Dynamsoft Barcode Reader JavaScript Edition API -description: Use this interface syntax to set scan settings for barcodes when using Dynamsoft Barcode Reader JavaScript Edition in your project. -keywords: ScanSettings, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: ScanSettings -permalink: /programming/javascript/api-reference/interface/ScanSettings-v9.3.1.html ---- - -# ScanSettings - -`interface` ScanSettings - -* intervalTime?: *number* - - > Scan interval used to allow the library to release the CPU periodically. Measured in ms. The default value is `0`. - -* duplicateForgetTime?: *number* - - > Ignore duplicated results found in the specified time period. Measured in ms. The default value is `3000`. - -* whenToPlaySoundforSuccessfulRead?: *string* - - > Sets when to play sound on barcode recognition (user input is required on iOS or [Chrome](https://developer.chrome.com/blog/autoplay/#chrome-enterprise-policies) for any sound to play). Allowed values are - > - > * `never` : never play sound, the default value; - > * `frame` : play sound when one or multiple barcodes are found on a frame; - > * `unique` : play sound when a unique barcode is found (if multiple unique barcodes are found on the same frame, play only once). - -* soundOnSuccessfullRead?: *string* - - > Specifies the sound to play on barcode recognition. If not specified, the default one is used. - -* whenToVibrateforSuccessfulRead?: *string* - - > Sets when to vibrate on barcode recognition (user input is required on iOS or [Chrome](https://developer.chrome.com/blog/autoplay/#chrome-enterprise-policies) for the vibration). Allowed values are - > - > * `never`: never vibrate, the default value; - > * `frame`: vibrate when one or multiple barcodes are found on a frame; - > * `unique`: vibrate when a unique barcode is found (if multiple unique barcodes are found on the same frame, vibrate only once). - -* vibrateDuration?: *number* - - > Returns or sets how long the vibration lasts in milliseconds. The default value is `300` . - -```js -let scanSettings = await scanner.getScanSettings(); -scanSettings.intervalTime = 100; // 100ms -scanSettings.whenToPlaySoundforSuccessfulRead = "never"; -scanSettings.whenToVibrateforSuccessfulRead = "never"; -scanSettings.duplicateForgetTime = 3000; // 3s -await scanner.updateScanSettings(scanSettings); -``` - -* captureAndDecodeInParallel?: *boolean* - - > Returns or sets whether to capture the next frame while the previous frame is being decoded to save time. The default value is `true`. diff --git a/programming-old/javascript/api-reference/interface/ScanSettings.md b/programming-old/javascript/api-reference/interface/ScanSettings.md deleted file mode 100644 index d7c53a32..00000000 --- a/programming-old/javascript/api-reference/interface/ScanSettings.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -layout: default-layout -title: Interface - ScanSettings - Dynamsoft Barcode Reader JavaScript Edition API -description: Use this interface syntax to set scan settings for barcodes when using Dynamsoft Barcode Reader JavaScript Edition in your project. -keywords: ScanSettings, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: ScanSettings -permalink: /programming/javascript/api-reference/interface/ScanSettings.html ---- - -# ScanSettings - -`interface` ScanSettings - -* intervalTime?: *number* - - > Scan interval used to allow the library to release the CPU periodically. Measured in ms. The default value is `0`. - -* duplicateForgetTime?: *number* - - > Ignore duplicated results found in the specified time period. Measured in ms. The default value is `3000`, the maximum is `10000`. - -* whenToPlaySoundforSuccessfulRead?: *string* - - > Sets when to play sound on barcode recognition (user input is required on iOS or [Chrome](https://developer.chrome.com/blog/autoplay/#chrome-enterprise-policies) for any sound to play). Allowed values are - > - > * `never` : never play sound, the default value; - > * `frame` : play sound when one or multiple barcodes are found on a frame; - > * `unique` : play sound when a unique barcode is found (if multiple unique barcodes are found on the same frame, play only once). - -* soundOnSuccessfullRead?: *string* - - > Specifies the sound to play on barcode recognition. If not specified, the default one is used. - -* whenToVibrateforSuccessfulRead?: *string* - - > Sets when to vibrate on barcode recognition (user input is required on iOS or [Chrome](https://developer.chrome.com/blog/autoplay/#chrome-enterprise-policies) for the vibration). Allowed values are - > - > * `never`: never vibrate, the default value; - > * `frame`: vibrate when one or multiple barcodes are found on a frame; - > * `unique`: vibrate when a unique barcode is found (if multiple unique barcodes are found on the same frame, vibrate only once). - -* vibrateDuration?: *number* - - > Returns or sets how long the vibration lasts in milliseconds. The default value is `300` . - -```js -let scanSettings = await scanner.getScanSettings(); -scanSettings.intervalTime = 100; // 100ms -scanSettings.whenToPlaySoundforSuccessfulRead = "never"; -scanSettings.whenToVibrateforSuccessfulRead = "never"; -scanSettings.duplicateForgetTime = 3000; // 3s -await scanner.updateScanSettings(scanSettings); -``` - -* captureAndDecodeInParallel?: *boolean* - - > Returns or sets whether to capture the next frame while the previous frame is being decoded to save time. The default value is `true`. - -* autoZoom?: *boolean* - - > Returns or sets whether to automatically zoom in on the video if the barcode appears too small in the video feed and fails to be read. This feature requires a intermediate_results module license. The default value is `false`. - -* autoFocus?: *boolean* - - > Returns or sets whether to automatically focus on the video when a barcode is found but fails to be read. This feature requires a intermediate_results module license. The default value is `false`. - -* autoSuggestTip? *boolean* - - > Returns or sets whether to automatically suggest Tip messages. This feature requires a intermediate_results module license. The default value is `false`. diff --git a/programming-old/javascript/api-reference/interface/ScannerPlayCallbackInfo.md b/programming-old/javascript/api-reference/interface/ScannerPlayCallbackInfo.md deleted file mode 100644 index 7faac581..00000000 --- a/programming-old/javascript/api-reference/interface/ScannerPlayCallbackInfo.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -layout: default-layout -title: Interface - ScannerPlayCallbackInfo - Dynamsoft Barcode Reader JavaScript Edition API -description: Use this interface syntax to set scanner play callback info for barcodes when using Dynamsoft Barcode Reader JavaScript Edition in your project.. -keywords: ScannerPlayCallbackInfo, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: ScannerPlayCallbackInfo -permalink: /programming/javascript/api-reference/interface/ScannerPlayCallbackInfo.html ---- - - -# ScannerPlayCallbackInfo - -`interface` ScannerPlayCallbackInfo - -* deviceId: *string* - -* width: *number* - -* height: *number* - -```js -scanner.onPlayed = rsl=>{ console.log(rsl.width+'x'+rsl.height) }; -await scanner.show(); // or open, play, setCurrentCamera, like these. -``` diff --git a/programming-old/javascript/api-reference/interface/TextResult.md b/programming-old/javascript/api-reference/interface/TextResult.md deleted file mode 100644 index acf10fff..00000000 --- a/programming-old/javascript/api-reference/interface/TextResult.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -layout: default-layout -title: Interface - TextResult - Dynamsoft Barcode Reader JavaScript Edition API -description: Use this interface syntax to set text results for barcodes when using Dynamsoft Barcode Reader JavaScript Edition in your project. -keywords: TextResult, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: TextResult -permalink: /programming/javascript/api-reference/interface/TextResult.html ---- - - -# TextResult - -`interface` TextResult - -* barcodeText: *string* - - > The barcode text. - -* barcodeFormat: *number | [EnumBarcodeFormat](../enum/EnumBarcodeFormat.md)* - - > The barcode format. - -* barcodeFormatString: *string* - - > Barcode type in string. - -* barcodeBytes: *number[]* - - > The barcode content in a byte array. - -* localizationResult: *[LocalizationResult](LocalizationResult.md)* - - > The corresponding localization result. - -```js -let reader = await Dynamsoft.DBR.BarcodeReader.createInstance(); -let results = await reader.decode(imageSource); -for(let result of results){ - console.log(result.barcodeText); -} -``` diff --git a/programming-old/javascript/api-reference/interface/VideoDeviceInfo.md b/programming-old/javascript/api-reference/interface/VideoDeviceInfo.md deleted file mode 100644 index 19c6313c..00000000 --- a/programming-old/javascript/api-reference/interface/VideoDeviceInfo.md +++ /dev/null @@ -1,19 +0,0 @@ ---- -layout: default-layout -title: Interface - VideoDeviceInfo - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows the VideoDeviceInfo Interface of Dynamsoft Barcode Reader JavaScript SDK. -keywords: VideoDeviceInfo, BarcodeReader, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: VideoDeviceInfo -permalink: /programming/javascript/api-reference/interface/VideoDeviceInfo.html ---- - - -# VideoDeviceInfo - -`interface` VideoDeviceInfo - -* deviceId: *string* - -* label: *string* diff --git a/programming-old/javascript/api-reference/interface/dsimage.md b/programming-old/javascript/api-reference/interface/dsimage.md deleted file mode 100644 index 1b9d229a..00000000 --- a/programming-old/javascript/api-reference/interface/dsimage.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -layout: default-layout -title: Interface - Point - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows the Point interface of Dynamsoft Barcode Reader JavaScript Edition. -keywords: Point, javascript, interface -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: Point -permalink: /programming/javascript/api-reference/interface/dsimage.html ---- - -# DSImage - -Interface that defines an image acquired by an Image Source. - -## Attributes - -| Attribute | Type | -|---------- | ---- | -| [data](#data) | *Uint8Array* | -| [width](#width) | *number* | -| [height](#height) | *number* | -| [pixelFormat](#pixelformat) | *string* | - -### data - -The image data. - -### width - -The width of the image. - -### height - -The height of the image. - -### pixelFormat - -The pixel format of the image. Allowed values are "grey", "rgb", "bgr", "rgba", "bgra". diff --git a/programming-old/javascript/api-reference/interface/imagesource.md b/programming-old/javascript/api-reference/interface/imagesource.md deleted file mode 100644 index a8291fe5..00000000 --- a/programming-old/javascript/api-reference/interface/imagesource.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -layout: default-layout -title: Interface - ImageSource - Dynamsoft Barcode Reader JavaScript API -description: This page shows the ImageSource interface of Dynamsoft Barcode Reader for JavaScript. -keywords: imagesource, javascript, interface -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: Point -permalink: /programming/javascript/api-reference/interface/imagesource.html ---- - -# ImageSource - -Interface that defines an Image Source. - -## Members - -### getImage() - -Returns an image from the Image Source. - -```typescript -/** - * @param index Specifies the index of the image. If undefined, the Image Source will determine which image to return. - */ -getImage(index?: number): Promise | DSImage; -``` diff --git a/programming-old/javascript/api-reference/interface/warning.md b/programming-old/javascript/api-reference/interface/warning.md deleted file mode 100644 index 2f0166e4..00000000 --- a/programming-old/javascript/api-reference/interface/warning.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -layout: default-layout -title: Interface Warning - Dynamsoft Barcode Reader JavaScript Edition API -description: This page shows the Warning Interface of Dynamsoft Barcode Reader JavaScript SDK. -keywords: Warning, BarcodeScanner, api reference, javascript, js -needAutoGenerateSidebar: false -noTitleIndex: true -breadcrumbText: Warning -permalink: /programming/javascript/api-reference/interface/warning.html ---- - -# Warning - -`interface` Warning - -* id: `number` - - A number that identifies the warning. - -* message: `string` - - A string that describes the warning. diff --git a/programming-old/javascript/index-v7.6.0.md b/programming-old/javascript/index-v7.6.0.md deleted file mode 100644 index 5a3bcc30..00000000 --- a/programming-old/javascript/index-v7.6.0.md +++ /dev/null @@ -1,23 +0,0 @@ ---- -layout: default-layout -title: v7.6.0 Entry Page - Dynamsoft Barcode Reader JavaScript Edition -description: This is the main page of Dynamsoft Barcode Reader JavaScript SDK. -keywords: javascript, js -needAutoGenerateSidebar: false -breadcrumbText: JavaScript -permalink: /programming/javascript/index-v7.6.0.html ---- - -# Dynamsoft Barcode Reader JavaScript Edition - Documentation - -The JavaScript documentation mainly consists of two parts. One is the [User Guide](#getting-started) that provides a brief guide for how to integrate the Dynamsoft Barcode Reader to your application or run the samples. The other is the [API Reference](#api-reference) that offers the manual of interfaces used for reading barcodes. - -## Getting Started - -- [User Guide](user-guide/) - -## API Reference - -- [BarcodeReader](api-reference/#barcodereader) -- [BarcodeScanner](api-reference/#barcodescanner) -- [Global Interfaces](api-reference/#global-interfaces) diff --git a/programming-old/javascript/index-v8.2.5.md b/programming-old/javascript/index-v8.2.5.md deleted file mode 100644 index 6b25f7d1..00000000 --- a/programming-old/javascript/index-v8.2.5.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -layout: default-layout -title: v8.2.5 Entry Page - Dynamsoft Barcode Reader JavaScript Edition -description: This is the main page of Dynamsoft Barcode Reader JavaScript SDK. -keywords: javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -breadcrumbText: JavaScript -permalink: /programming/javascript/index-v8.2.5.html ---- - -# Dynamsoft Barcode Reader JavaScript Edition - Introduction - -This version of Dynamsoft Barcode Reader (hereinafter referred to as "the library") is based on JavaScript and WebAssembly and can run in all major modern browsers on all major platforms. It is ideal for - -* Organizations who already have sophisticated websites and do not intend to develop mobile applications for the same purposes; -* Organizations whose customers have no desire to install applications for temporary usage of their services. - -## Fast Integration - -With the library integrated, end users can open the web page in a browser, access their cameras and read barcodes directly from the video input. The integration can be done with just a few lines of code and without the hassle of installing anything. - -``` html - - -``` - -The above lines of code has completed the integration of the library into a web page and this is made possible with the following two features. - -### Built-in Camera Control - -Customers generally need to scan a barcode on the fly at which time there is no better input than the camera hooked to or built into the device itself. The library uses the powerful **MediaDevices** interface (provided by the browser itself) to instantly connect the video input of the camera with the back-end decoding engine. - -### Interactive UI - -Good interaction design is essential for a website, the same is true for SDKs such as the library. As shown in the screenshot below, the library streams the video on the page, guides the user where to aim and highlights the areas where barcodes are found. - -![Interactive UI](assets/interactive-ui.png) - -> NOTE: -> -> When the client opens the page, the library is immediately initialized in the background, which takes a few seconds to complete. By the time the customer is asked to scan a barcode, the library will already be ready. - -## High Performance - -Barcode reading is usually just an auxiliary way to assist a small step in a complex workflow. Customers like the convenience, but if it takes too long or is error-prone, their patience will quickly run out. Therefore, high performance is crucial. - -### Unparalleled Speed - -The library showcases Dynamsoft's cutting-edge technology in light-speed recognition of barcodes. In most cases, an image gets deblurred, binarized and read under 100 milliseconds. - - - -### Proficiency in Handling Difficult Environments - -The actual use environment is unpredictable. The barcode may appear distorted, inverted, or partially damaged; the background may be textured or spotted; the light may be very low, and there may be shadows and glare. The library handles all these cases with its rich image processing algorithms through various adjustable settings. - - - -### Exceptional Accuracy - -The library does a lot of preparation work to make sure the barcode is as legible as possible for the decoding engine to read. This ensures a very high accuracy. In addition, the library achieves even higher accuracy through the following ways: - -* The library has a confidence score for each recognition which can be used to filter unwanted results; -* In the case of continuous scanning, the library compares the results of multiple consecutive recognitions and return only the results confirmed by at least two efforts. - -Through many experiences, the library has also cultivated its error correction ability against barcodes which do not strictly abide by the specification as well as deformed barcodes caused by improper printing. - -## Usage Scenarios - -The library is designed for websites. Common usage scenarios include: - -### Retail - -Most if not all products on the market now have barcodes on their packaging. Customers can scan the barcode to place an order, register a product for post-sales service or just trace the product to its origin. - -### ID Scanning - -All driver's licenses issued in the USA and Canada by the American Association of Motor Vehicle Administrators (AAMVA) have a PDF417 Barcode on them. The information encoded in the Barcode follows the DL/ID Card Design Standard (CDS) and can be easily parsed to meaningful form fields. - -Other ID cards that come with barcodes include the Permanent Account Number (PAN) Card in India, Driver's license in South Africa, etc. - -### VIN Scanning - -Every vehicle has its own Vehicle Identification Number (VIN). When printing the number on the vehicle, many manufacturers also print a barcode alongside it. Customers can scan the barcode to register for an insurance claim or look up vehicle information like maintenance records, mileage rollbacks, etc. - -### Inventory Management - -Inventory management is a highly stressful and arduous process where both efficiency and accuracy are crucial. Customers can use the library to scan multiple items at the same time which greatly boosts efficiency. - -## See Also - -### User Guide - -For a fast start, read the [User Guide](user-guide/). - -### Demo and Samples - -To see the library in action, check out the [Demo and Samples](./samples-demos/index.md) - -### API Reference - -For a overview of the APIs, see the [API Reference](api-reference/). - -### Release Notes - -For a peek of the library history, check the [Release Notes](release-notes/). - -### Acquire Licenses - -Interested to acquire a license? Visit our Online Store. diff --git a/programming-old/javascript/index-v8.4.0.md b/programming-old/javascript/index-v8.4.0.md deleted file mode 100644 index f15b1bd2..00000000 --- a/programming-old/javascript/index-v8.4.0.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -layout: default-layout -title: v8.4.0 Entry Page - Dynamsoft Barcode Reader JavaScript Edition -description: This is the main page of Dynamsoft Barcode Reader JavaScript SDK. -keywords: javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -breadcrumbText: JavaScript -permalink: /programming/javascript/index-v8.4.0.html ---- - -# Dynamsoft Barcode Reader JavaScript Edition - Introduction - -This version of Dynamsoft Barcode Reader (hereinafter referred to as "the library") is based on JavaScript and WebAssembly and can run in all major modern browsers on all major platforms. It is ideal for - -* Organizations who already have sophisticated websites and do not intend to develop mobile applications for the same purposes; -* Organizations whose customers have no desire to install applications for temporary usage of their services. - -## Fast Integration - -With the library integrated, end users can open the web page in a browser, access their cameras and read barcodes directly from the video input. The integration can be done with just a few lines of code and without the hassle of installing anything. - -``` html - - -``` - -The above lines of code has completed the integration of the library into a web page and this is made possible with the following two features. - -### Built-in Camera Control - -Customers generally need to scan a barcode on the fly at which time there is no better input than the camera hooked to or built into the device itself. The library uses the powerful **MediaDevices** interface (provided by the browser itself) to instantly connect the video input of the camera with the back-end decoding engine. - -### Interactive UI - -Good interaction design is essential for a website, the same is true for SDKs such as the library. As shown in the screenshot below, the library streams the video on the page, guides the user where to aim and highlights the areas where barcodes are found. - -![Interactive UI](assets/interactive-ui.png) - -> NOTE: -> -> When the client opens the page, the library is immediately initialized in the background, which takes a few seconds to complete. By the time the customer is asked to scan a barcode, the library will already be ready. - -## High Performance - -Barcode reading is usually just an auxiliary way to assist a small step in a complex workflow. Customers like the convenience, but if it takes too long or is error-prone, their patience will quickly run out. Therefore, high performance is crucial. - -### Unparalleled Speed - -The library showcases Dynamsoft's cutting-edge technology in light-speed recognition of barcodes. In most cases, an image gets deblurred, binarized and read under 100 milliseconds. - - - -### Proficiency in Handling Difficult Environments - -The actual use environment is unpredictable. The barcode may appear distorted, inverted, or partially damaged; the background may be textured or spotted; the light may be very low, and there may be shadows and glare. The library handles all these cases with its rich image processing algorithms through various adjustable settings. - - - -### Exceptional Accuracy - -The library does a lot of preparation work to make sure the barcode is as legible as possible for the decoding engine to read. This ensures a very high accuracy. In addition, the library achieves even higher accuracy through the following ways: - -* The library has a confidence score for each recognition which can be used to filter unwanted results; -* In the case of continuous scanning, the library compares the results of multiple consecutive recognitions and return only the results confirmed by at least two efforts. - -Through many experiences, the library has also cultivated its error correction ability against barcodes which do not strictly abide by the specification as well as deformed barcodes caused by improper printing. - -## Usage Scenarios - -The library is designed for websites. Common usage scenarios include: - -### Retail - -Most if not all products on the market now have barcodes on their packaging. Customers can scan the barcode to place an order, register a product for post-sales service or just trace the product to its origin. - -### ID Scanning - -All driver's licenses issued in the USA and Canada by the American Association of Motor Vehicle Administrators (AAMVA) have a PDF417 Barcode on them. The information encoded in the Barcode follows the DL/ID Card Design Standard (CDS) and can be easily parsed to meaningful form fields. - -Other ID cards that come with barcodes include the Permanent Account Number (PAN) Card in India, Driver's license in South Africa, etc. - -### VIN Scanning - -Every vehicle has its own Vehicle Identification Number (VIN). When printing the number on the vehicle, many manufacturers also print a barcode alongside it. Customers can scan the barcode to register for an insurance claim or look up vehicle information like maintenance records, mileage rollbacks, etc. - -### Inventory Management - -Inventory management is a highly stressful and arduous process where both efficiency and accuracy are crucial. Customers can use the library to scan multiple items at the same time which greatly boosts efficiency. - -## See Also - -### User Guide - -For a fast start, read the [User Guide](user-guide/). - -### Demo and Samples - -To see the library in action, check out the [Demo and Samples](samples-demos/index.md) - -### API Reference - -For a overview of the APIs, see the [API Reference](api-reference/). - -### Release Notes - -For a peek of the library history, check the [Release Notes](release-notes/). - -### Acquire Licenses - -Interested to acquire a license? Visit our Online Store. diff --git a/programming-old/javascript/index-v8.6.0.md b/programming-old/javascript/index-v8.6.0.md deleted file mode 100644 index 164c9e2a..00000000 --- a/programming-old/javascript/index-v8.6.0.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -layout: default-layout -title: v8.6.0 Entry Page - Dynamsoft Barcode Reader JavaScript Edition -description: This is the main page of Dynamsoft Barcode Reader JavaScript SDK. -keywords: javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -breadcrumbText: JavaScript -permalink: /programming/javascript/index-v8.6.0.html ---- - -# Dynamsoft Barcode Reader JavaScript Edition - Introduction - -This version of Dynamsoft Barcode Reader (hereinafter referred to as "the library") is based on JavaScript and WebAssembly and can run in all major modern browsers on all major platforms. It is ideal for - -* Organizations who already have sophisticated websites and do not intend to develop mobile applications for the same purposes; -* Organizations whose customers have no desire to install applications for temporary usage of their services. - -## Fast Integration - -With the library integrated, end users can open the web page in a browser, access their cameras and read barcodes directly from the video input. The integration can be done with just a few lines of code and without the hassle of installing anything. - -``` html - - -``` - -The above lines of code has completed the integration of the library into a web page and this is made possible with the following two features. - -### Built-in Camera Control - -Customers generally need to scan a barcode on the fly at which time there is no better input than the camera hooked to or built into the device itself. The library uses the powerful **MediaDevices** interface (provided by the browser itself) to instantly connect the video input of the camera with the back-end decoding engine. - -### Interactive UI - -Good interaction design is essential for a website, the same is true for SDKs such as the library. As shown in the screenshot below, the library streams the video on the page, guides the user where to aim and highlights the areas where barcodes are found. - -![Interactive UI](assets/interactive-ui.png) - -> NOTE: -> -> When the client opens the page, the library is immediately initialized in the background, which takes a few seconds to complete. By the time the customer is asked to scan a barcode, the library will already be ready. - -## High Performance - -Barcode reading is usually just an auxiliary way to assist a small step in a complex workflow. Customers like the convenience, but if it takes too long or is error-prone, their patience will quickly run out. Therefore, high performance is crucial. - -### Unparalleled Speed - -The library showcases Dynamsoft's cutting-edge technology in light-speed recognition of barcodes. In most cases, an image gets deblurred, binarized and read under 100 milliseconds. - - - -### Proficiency in Handling Difficult Environments - -The actual use environment is unpredictable. The barcode may appear distorted, inverted, or partially damaged; the background may be textured or spotted; the light may be very low, and there may be shadows and glare. The library handles all these cases with its rich image processing algorithms through various adjustable settings. - - - -### Exceptional Accuracy - -The library does a lot of preparation work to make sure the barcode is as legible as possible for the decoding engine to read. This ensures a very high accuracy. In addition, the library achieves even higher accuracy through the following ways: - -* The library has a confidence score for each recognition which can be used to filter unwanted results; -* In the case of continuous scanning, the library compares the results of multiple consecutive recognitions and return only the results confirmed by at least two efforts. - -Through many experiences, the library has also cultivated its error correction ability against barcodes which do not strictly abide by the specification as well as deformed barcodes caused by improper printing. - -## Usage Scenarios - -The library is designed for websites. Common usage scenarios include: - -### Retail - -Most if not all products on the market now have barcodes on their packaging. Customers can scan the barcode to place an order, register a product for post-sales service or just trace the product to its origin. - -### ID Scanning - -All driver's licenses issued in the USA and Canada by the American Association of Motor Vehicle Administrators (AAMVA) have a PDF417 Barcode on them. The information encoded in the Barcode follows the DL/ID Card Design Standard (CDS) and can be easily parsed to meaningful form fields. - -Other ID cards that come with barcodes include the Permanent Account Number (PAN) Card in India, Driver's license in South Africa, etc. - -### VIN Scanning - -Every vehicle has its own Vehicle Identification Number (VIN). When printing the number on the vehicle, many manufacturers also print a barcode alongside it. Customers can scan the barcode to register for an insurance claim or look up vehicle information like maintenance records, mileage rollbacks, etc. - -### Inventory Management - -Inventory management is a highly stressful and arduous process where both efficiency and accuracy are crucial. Customers can use the library to scan multiple items at the same time which greatly boosts efficiency. - -## See Also - -### User Guide - -For a fast start, read the [User Guide](user-guide/). - -### Demo and Samples - -To see the library in action, check out the [Demo and Samples](samples-demos/index.md). - -### API Reference - -For a overview of the APIs, see the [API Reference](api-reference/). - -### Release Notes - -For a peek of the library history, check the [Release Notes](release-notes/). - -### Acquire Licenses - -Interested to acquire a license? Visit our Online Store. diff --git a/programming-old/javascript/index-v8.6.3.md b/programming-old/javascript/index-v8.6.3.md deleted file mode 100644 index 4deb0d53..00000000 --- a/programming-old/javascript/index-v8.6.3.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -layout: default-layout -title: v8.6.3 Entry Page - Dynamsoft Barcode Reader JavaScript Edition -description: This is the main page of Dynamsoft Barcode Reader JavaScript SDK. -keywords: javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -breadcrumbText: JavaScript -permalink: /programming/javascript/index-v8.6.3.html ---- - -# Dynamsoft Barcode Reader JavaScript Edition - Introduction - -This version of Dynamsoft Barcode Reader (hereinafter referred to as "the library") is based on JavaScript and WebAssembly and can run in all major modern browsers on all major platforms. It is ideal for - -* Organizations who already have sophisticated websites and do not intend to develop mobile applications for the same purposes; -* Organizations whose customers have no desire to install applications for temporary usage of their services. - -## Fast Integration - -With the library integrated, end users can open the web page in a browser, access their cameras and read barcodes directly from the video input. The integration can be done with just a few lines of code and without the hassle of installing anything. - -``` html - - -``` - -The above lines of code has completed the integration of the library into a web page and this is made possible with the following two features. - -### Built-in Camera Control - -Customers generally need to scan a barcode on the fly at which time there is no better input than the camera hooked to or built into the device itself. The library uses the powerful **MediaDevices** interface (provided by the browser itself) to instantly connect the video input of the camera with the back-end decoding engine. - -### Interactive UI - -Good interaction design is essential for a website, the same is true for SDKs such as the library. As shown in the screenshot below, the library streams the video on the page, guides the user where to aim and highlights the areas where barcodes are found. - -![Interactive UI](assets/interactive-ui.png) - -> NOTE: -> -> When the client opens the page, the library is immediately initialized in the background, which takes a few seconds to complete. By the time the customer is asked to scan a barcode, the library will already be ready. - -## High Performance - -Barcode reading is usually just an auxiliary way to assist a small step in a complex workflow. Customers like the convenience, but if it takes too long or is error-prone, their patience will quickly run out. Therefore, high performance is crucial. - -### Unparalleled Speed - -The library showcases Dynamsoft's cutting-edge technology in light-speed recognition of barcodes. In most cases, an image gets deblurred, binarized and read under 100 milliseconds. - - - -### Proficiency in Handling Difficult Environments - -The actual use environment is unpredictable. The barcode may appear distorted, inverted, or partially damaged; the background may be textured or spotted; the light may be very low, and there may be shadows and glare. The library handles all these cases with its rich image processing algorithms through various adjustable settings. - - - -### Exceptional Accuracy - -The library does a lot of preparation work to make sure the barcode is as legible as possible for the decoding engine to read. This ensures a very high accuracy. In addition, the library achieves even higher accuracy through the following ways: - -* The library has a confidence score for each recognition which can be used to filter unwanted results; -* In the case of continuous scanning, the library compares the results of multiple consecutive recognitions and return only the results confirmed by at least two efforts. - -Through many experiences, the library has also cultivated its error correction ability against barcodes which do not strictly abide by the specification as well as deformed barcodes caused by improper printing. - -## Usage Scenarios - -The library is designed for websites. Common usage scenarios include: - -### Retail - -Most if not all products on the market now have barcodes on their packaging. Customers can scan the barcode to place an order, register a product for post-sales service or just trace the product to its origin. - -### ID Scanning - -All driver's licenses issued in the USA and Canada by the American Association of Motor Vehicle Administrators (AAMVA) have a PDF417 Barcode on them. The information encoded in the Barcode follows the DL/ID Card Design Standard (CDS) and can be easily parsed to meaningful form fields. - -Other ID cards that come with barcodes include the Permanent Account Number (PAN) Card in India, Driver's license in South Africa, etc. - -### VIN Scanning - -Every vehicle has its own Vehicle Identification Number (VIN). When printing the number on the vehicle, many manufacturers also print a barcode alongside it. Customers can scan the barcode to register for an insurance claim or look up vehicle information like maintenance records, mileage rollbacks, etc. - -### Inventory Management - -Inventory management is a highly stressful and arduous process where both efficiency and accuracy are crucial. Customers can use the library to scan multiple items at the same time which greatly boosts efficiency. - -## See Also - -### User Guide - -For a fast start, read the [User Guide](user-guide/). - -### Demo and Samples - -To see the library in action, check out the [Demo and Samples](./samples-demos/index.md) - -### API Reference - -For a overview of the APIs, see the [API Reference](api-reference/). - -### Release Notes - -For a peek of the library history, check the [Release Notes](release-notes/). - -### Acquire Licenses - -Interested to acquire a license? Visit our Online Store. diff --git a/programming-old/javascript/index-v8.8.0.md b/programming-old/javascript/index-v8.8.0.md deleted file mode 100644 index 11debaa2..00000000 --- a/programming-old/javascript/index-v8.8.0.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -layout: default-layout -title: v78.80 Entry Page - Dynamsoft Barcode Reader JavaScript Edition -description: This is the main page of Dynamsoft Barcode Reader JavaScript SDK. -keywords: javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -breadcrumbText: JavaScript -permalink: /programming/javascript/index-v8.8.0.html ---- - -# Dynamsoft Barcode Reader JavaScript Edition - Introduction - -This version of Dynamsoft Barcode Reader (hereinafter referred to as "the library") is based on JavaScript and WebAssembly and can run in all major modern browsers on all major platforms. It is ideal for - -* Organizations who already have sophisticated websites and do not intend to develop mobile applications for the same purposes; -* Organizations whose customers have no desire to install applications for temporary usage of their services. - -## Fast Integration - -With the library integrated, end users can open the web page in a browser, access their cameras and read barcodes directly from the video input. The integration can be done with just a few lines of code and without the hassle of installing anything. - -``` html - - -``` - -The above lines of code has completed the integration of the library into a web page and this is made possible with the following two features. - -### Built-in Camera Control - -Customers generally need to scan a barcode on the fly at which time there is no better input than the camera hooked to or built into the device itself. The library uses the powerful **MediaDevices** interface (provided by the browser itself) to instantly connect the video input of the camera with the back-end decoding engine. - -### Interactive UI - -Good interaction design is essential for a website, the same is true for SDKs such as the library. As shown in the screenshot below, the library streams the video on the page, guides the user where to aim and highlights the areas where barcodes are found. - -![Interactive UI](assets/interactive-ui.png) - -> NOTE: -> -> When the client opens the page, the library is immediately initialized in the background, which takes a few seconds to complete. By the time the customer is asked to scan a barcode, the library will already be ready. - -## High Performance - -Barcode reading is usually just an auxiliary way to assist a small step in a complex workflow. Customers like the convenience, but if it takes too long or is error-prone, their patience will quickly run out. Therefore, high performance is crucial. - -### Unparalleled Speed - -The library showcases Dynamsoft's cutting-edge technology in light-speed recognition of barcodes. In most cases, an image gets deblurred, binarized and read under 100 milliseconds. - - - -### Proficiency in Handling Difficult Environments - -The actual use environment is unpredictable. The barcode may appear distorted, inverted, or partially damaged; the background may be textured or spotted; the light may be very low, and there may be shadows and glare. The library handles all these cases with its rich image processing algorithms through various adjustable settings. - - - -### Exceptional Accuracy - -The library does a lot of preparation work to make sure the barcode is as legible as possible for the decoding engine to read. This ensures a very high accuracy. In addition, the library achieves even higher accuracy through the following ways: - -* The library has a confidence score for each recognition which can be used to filter unwanted results; -* In the case of continuous scanning, the library compares the results of multiple consecutive recognitions and return only the results confirmed by at least two efforts. - -Through many experiences, the library has also cultivated its error correction ability against barcodes which do not strictly abide by the specification as well as deformed barcodes caused by improper printing. - -## Usage Scenarios - -The library is designed for websites. Common usage scenarios include: - -### Retail - -Most if not all products on the market now have barcodes on their packaging. Customers can scan the barcode to place an order, register a product for post-sales service or just trace the product to its origin. - -### ID Scanning - -All driver's licenses issued in the USA and Canada by the American Association of Motor Vehicle Administrators (AAMVA) have a PDF417 Barcode on them. The information encoded in the Barcode follows the DL/ID Card Design Standard (CDS) and can be easily parsed to meaningful form fields. - -Other ID cards that come with barcodes include the Permanent Account Number (PAN) Card in India, Driver's license in South Africa, etc. - -### VIN Scanning - -Every vehicle has its own Vehicle Identification Number (VIN). When printing the number on the vehicle, many manufacturers also print a barcode alongside it. Customers can scan the barcode to register for an insurance claim or look up vehicle information like maintenance records, mileage rollbacks, etc. - -### Inventory Management - -Inventory management is a highly stressful and arduous process where both efficiency and accuracy are crucial. Customers can use the library to scan multiple items at the same time which greatly boosts efficiency. - -## See Also - -### User Guide - -For a fast start, read the [User Guide](user-guide/). - -### Demo and Samples - -To see the library in action, check out the [Demo and Samples](./samples-demos/index.md) - -### API Reference - -For a overview of the APIs, see the [API Reference](api-reference/). - -### Release Notes - -For a peek of the library history, check the [Release Notes](release-notes/). - -### Acquire Licenses - -Interested to acquire a license? Visit our Online Store. diff --git a/programming-old/javascript/index-v8.8.3.md b/programming-old/javascript/index-v8.8.3.md deleted file mode 100644 index 040067a9..00000000 --- a/programming-old/javascript/index-v8.8.3.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -layout: default-layout -title: v8.8.3 Entry Page - Dynamsoft Barcode Reader JavaScript Edition -description: This is the main page of Dynamsoft Barcode Reader JavaScript SDK. -keywords: javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -breadcrumbText: JavaScript -permalink: /programming/javascript/index-v8.8.3.html ---- - -# Dynamsoft Barcode Reader JavaScript Edition - Introduction - -This version of Dynamsoft Barcode Reader (hereinafter referred to as "the library") is based on JavaScript and WebAssembly and can run in all major modern browsers on all major platforms. It is ideal for - -* Organizations who already have sophisticated websites and do not intend to develop mobile applications for the same purposes; -* Organizations whose customers have no desire to install applications for temporary usage of their services. - -## Fast Integration - -With the library integrated, end users can open the web page in a browser, access their cameras and read barcodes directly from the video input. The integration can be done with just a few lines of code and without the hassle of installing anything. - -``` html - - -``` - -The above lines of code has completed the integration of the library into a web page and this is made possible with the following two features. - -### Built-in Camera Control - -Customers generally need to scan a barcode on the fly at which time there is no better input than the camera hooked to or built into the device itself. The library uses the powerful **MediaDevices** interface (provided by the browser itself) to instantly connect the video input of the camera with the back-end decoding engine. - -### Interactive UI - -Good interaction design is essential for a website, the same is true for SDKs such as the library. As shown in the screenshot below, the library streams the video on the page, guides the user where to aim and highlights the areas where barcodes are found. - -![Interactive UI](assets/interactive-ui.png) - -> NOTE: -> -> When the client opens the page, the library is immediately initialized in the background, which takes a few seconds to complete. By the time the customer is asked to scan a barcode, the library will already be ready. - -## High Performance - -Barcode reading is usually just an auxiliary way to assist a small step in a complex workflow. Customers like the convenience, but if it takes too long or is error-prone, their patience will quickly run out. Therefore, high performance is crucial. - -### Unparalleled Speed - -The library showcases Dynamsoft's cutting-edge technology in light-speed recognition of barcodes. In most cases, an image gets deblurred, binarized and read under 100 milliseconds. - - - -### Proficiency in Handling Difficult Environments - -The actual use environment is unpredictable. The barcode may appear distorted, inverted, or partially damaged; the background may be textured or spotted; the light may be very low, and there may be shadows and glare. The library handles all these cases with its rich image processing algorithms through various adjustable settings. - - - -### Exceptional Accuracy - -The library does a lot of preparation work to make sure the barcode is as legible as possible for the decoding engine to read. This ensures a very high accuracy. In addition, the library achieves even higher accuracy through the following ways: - -* The library has a confidence score for each recognition which can be used to filter unwanted results; -* In the case of continuous scanning, the library compares the results of multiple consecutive recognitions and return only the results confirmed by at least two efforts. - -Through many experiences, the library has also cultivated its error correction ability against barcodes which do not strictly abide by the specification as well as deformed barcodes caused by improper printing. - -## Usage Scenarios - -The library is designed for websites. Common usage scenarios include: - -### Retail - -Most if not all products on the market now have barcodes on their packaging. Customers can scan the barcode to place an order, register a product for post-sales service or just trace the product to its origin. - -### ID Scanning - -All driver's licenses issued in the USA and Canada by the American Association of Motor Vehicle Administrators (AAMVA) have a PDF417 Barcode on them. The information encoded in the Barcode follows the DL/ID Card Design Standard (CDS) and can be easily parsed to meaningful form fields. - -Other ID cards that come with barcodes include the Permanent Account Number (PAN) Card in India, Driver's license in South Africa, etc. - -### VIN Scanning - -Every vehicle has its own Vehicle Identification Number (VIN). When printing the number on the vehicle, many manufacturers also print a barcode alongside it. Customers can scan the barcode to register for an insurance claim or look up vehicle information like maintenance records, mileage rollbacks, etc. - -### Inventory Management - -Inventory management is a highly stressful and arduous process where both efficiency and accuracy are crucial. Customers can use the library to scan multiple items at the same time which greatly boosts efficiency. - -## See Also - -### User Guide - -For a fast start, read the [User Guide](user-guide/). - -### Demo and Samples - -To see the library in action, check out the [Demo and Samples](./samples-demos/index.md) - -### API Reference - -For a overview of the APIs, see the [API Reference](api-reference/). - -### Release Notes - -For a peek of the library history, check the [Release Notes](release-notes/). - -### Acquire Licenses - -Interested to acquire a license? Visit our Online Store. diff --git a/programming-old/javascript/index-v8.8.5.md b/programming-old/javascript/index-v8.8.5.md deleted file mode 100644 index 37614665..00000000 --- a/programming-old/javascript/index-v8.8.5.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -layout: default-layout -title: v8.8.5 Entry Page - Dynamsoft Barcode Reader JavaScript Edition -description: This is the main page of Dynamsoft Barcode Reader JavaScript SDK. -keywords: javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -breadcrumbText: JavaScript -permalink: /programming/javascript/index-v8.8.5.html ---- - -# Dynamsoft Barcode Reader JavaScript Edition - Introduction - -This version of Dynamsoft Barcode Reader (hereinafter referred to as "the library") is based on JavaScript and WebAssembly and can run in all major modern browsers on all major platforms. It is ideal for - -* Organizations who already have sophisticated websites and do not intend to develop mobile applications for the same purposes; -* Organizations whose customers have no desire to install applications for temporary usage of their services. - -## Fast Integration - -With the library integrated, end users can open the web page in a browser, access their cameras and read barcodes directly from the video input. The integration can be done with just a few lines of code and without the hassle of installing anything. - -``` html - - -``` - -The above lines of code has completed the integration of the library into a web page and this is made possible with the following two features. - -### Built-in Camera Control - -Customers generally need to scan a barcode on the fly at which time there is no better input than the camera hooked to or built into the device itself. The library uses the powerful **MediaDevices** interface (provided by the browser itself) to instantly connect the video input of the camera with the back-end decoding engine. - -### Interactive UI - -Good interaction design is essential for a website, the same is true for SDKs such as the library. As shown in the screenshot below, the library streams the video on the page, guides the user where to aim and highlights the areas where barcodes are found. - -![Interactive UI](assets/interactive-ui.png) - -> NOTE: -> -> When the client opens the page, the library is immediately initialized in the background, which takes a few seconds to complete. By the time the customer is asked to scan a barcode, the library will already be ready. - -## High Performance - -Barcode reading is usually just an auxiliary way to assist a small step in a complex workflow. Customers like the convenience, but if it takes too long or is error-prone, their patience will quickly run out. Therefore, high performance is crucial. - -### Unparalleled Speed - -The library showcases Dynamsoft's cutting-edge technology in light-speed recognition of barcodes. In most cases, an image gets deblurred, binarized and read under 100 milliseconds. - - - -### Proficiency in Handling Difficult Environments - -The actual use environment is unpredictable. The barcode may appear distorted, inverted, or partially damaged; the background may be textured or spotted; the light may be very low, and there may be shadows and glare. The library handles all these cases with its rich image processing algorithms through various adjustable settings. - - - -### Exceptional Accuracy - -The library does a lot of preparation work to make sure the barcode is as legible as possible for the decoding engine to read. This ensures a very high accuracy. In addition, the library achieves even higher accuracy through the following ways: - -* The library has a confidence score for each recognition which can be used to filter unwanted results; -* In the case of continuous scanning, the library compares the results of multiple consecutive recognitions and return only the results confirmed by at least two efforts. - -Through many experiences, the library has also cultivated its error correction ability against barcodes which do not strictly abide by the specification as well as deformed barcodes caused by improper printing. - -## Usage Scenarios - -The library is designed for websites. Common usage scenarios include: - -### Retail - -Most if not all products on the market now have barcodes on their packaging. Customers can scan the barcode to place an order, register a product for post-sales service or just trace the product to its origin. - -### ID Scanning - -All driver's licenses issued in the USA and Canada by the American Association of Motor Vehicle Administrators (AAMVA) have a PDF417 Barcode on them. The information encoded in the Barcode follows the DL/ID Card Design Standard (CDS) and can be easily parsed to meaningful form fields. - -Other ID cards that come with barcodes include the Permanent Account Number (PAN) Card in India, Driver's license in South Africa, etc. - -### VIN Scanning - -Every vehicle has its own Vehicle Identification Number (VIN). When printing the number on the vehicle, many manufacturers also print a barcode alongside it. Customers can scan the barcode to register for an insurance claim or look up vehicle information like maintenance records, mileage rollbacks, etc. - -### Inventory Management - -Inventory management is a highly stressful and arduous process where both efficiency and accuracy are crucial. Customers can use the library to scan multiple items at the same time which greatly boosts efficiency. - -## See Also - -### User Guide - -For a fast start, read the [User Guide](user-guide/). - -### Demo and Samples - -To see the library in action, check out the [Demo and Samples](./samples-demos/index.md) - -### API Reference - -For a overview of the APIs, see the [API Reference](api-reference/). - -### Release Notes - -For a peek of the library history, check the [Release Notes](release-notes/). - -### Acquire Licenses - -Interested to acquire a license? Visit our Online Store. diff --git a/programming-old/javascript/index-v8.8.7.md b/programming-old/javascript/index-v8.8.7.md deleted file mode 100644 index 70db3893..00000000 --- a/programming-old/javascript/index-v8.8.7.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -layout: default-layout -title: v8.8.7 Entry Page - Dynamsoft Barcode Reader JavaScript Edition -description: This is the main page of Dynamsoft Barcode Reader JavaScript SDK. -keywords: javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -breadcrumbText: JavaScript -permalink: /programming/javascript/index-v8.8.7.html ---- - -# Dynamsoft Barcode Reader JavaScript Edition - Introduction - -This version of Dynamsoft Barcode Reader (hereinafter referred to as "the library") is based on JavaScript and WebAssembly and can run in all major modern browsers on all major platforms. It is ideal for - -* Organizations who already have sophisticated websites and do not intend to develop mobile applications for the same purposes; -* Organizations whose customers have no desire to install applications for temporary usage of their services. - -## Fast Integration - -With the library integrated, end users can open the web page in a browser, access their cameras and read barcodes directly from the video input. The integration can be done with just a few lines of code and without the hassle of installing anything. - -``` html - - -``` - -The above lines of code has completed the integration of the library into a web page and this is made possible with the following two features. - -### Built-in Camera Control - -Customers generally need to scan a barcode on the fly at which time there is no better input than the camera hooked to or built into the device itself. The library uses the powerful **MediaDevices** interface (provided by the browser itself) to instantly connect the video input of the camera with the back-end decoding engine. - -### Interactive UI - -Good interaction design is essential for a website, the same is true for SDKs such as the library. As shown in the screenshot below, the library streams the video on the page, guides the user where to aim and highlights the areas where barcodes are found. - -![Interactive UI](assets/interactive-ui.png) - -## High Performance - -Barcode reading is usually just an auxiliary way to assist a small step in a complex workflow. Customers like the convenience, but if it takes too long or is error-prone, their patience will quickly run out. Therefore, high performance is crucial. - -### Unparalleled Speed - -The library showcases Dynamsoft's cutting-edge technology in light-speed recognition of barcodes. In most cases, an image gets deblurred, binarized and read under 100 milliseconds. - - - -### Proficiency in Handling Difficult Environments - -The actual use environment is unpredictable. The barcode may appear distorted, inverted, or partially damaged; the background may be textured or spotted; the light may be very low, and there may be shadows and glare. The library handles all these cases with its rich image processing algorithms through various adjustable settings. - - - -### Exceptional Accuracy - -The library does a lot of preparation work to make sure the barcode is as legible as possible for the decoding engine to read. This ensures a very high accuracy. In addition, the library achieves even higher accuracy through the following ways: - -* The library has a confidence score for each recognition which can be used to filter unwanted results; -* In the case of continuous scanning, the library compares the results of multiple consecutive recognitions and return only the results confirmed by at least two efforts. - -Through many experiences, the library has also cultivated its error correction ability against barcodes which do not strictly abide by the specification as well as deformed barcodes caused by improper printing. - -## Usage Scenarios - -The library is designed for websites. Common usage scenarios include: - -### Retail - -Most if not all products on the market now have barcodes on their packaging. Customers can scan the barcode to place an order, register a product for post-sales service or just trace the product to its origin. - -### ID Scanning - -All driver's licenses issued in the USA and Canada by the American Association of Motor Vehicle Administrators (AAMVA) have a PDF417 Barcode on them. The information encoded in the Barcode follows the DL/ID Card Design Standard (CDS) and can be easily parsed to meaningful form fields. - -Other ID cards that come with barcodes include the Permanent Account Number (PAN) Card in India, Driver's license in South Africa, etc. - -### VIN Scanning - -Every vehicle has its own Vehicle Identification Number (VIN). When printing the number on the vehicle, many manufacturers also print a barcode alongside it. Customers can scan the barcode to register for an insurance claim or look up vehicle information like maintenance records, mileage rollbacks, etc. - -### Inventory Management - -Inventory management is a highly stressful and arduous process where both efficiency and accuracy are crucial. Customers can use the library to scan multiple items at the same time which greatly boosts efficiency. - -## See Also - -### User Guide - -For a fast start, read the [User Guide](user-guide/). - -### Demo and Samples - -To see the library in action, check out the [Demo and Samples](samples-demos/) - -### API Reference - -For a overview of the APIs, see the [API Reference](api-reference/). - -### Release Notes - -For a peek of the library history, check the [Release Notes](release-notes/). - -### Acquire Licenses - -Interested to acquire a license? Visit our Online Store. diff --git a/programming-old/javascript/index-v9.0.0.md b/programming-old/javascript/index-v9.0.0.md deleted file mode 100644 index cd7db9fc..00000000 --- a/programming-old/javascript/index-v9.0.0.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -layout: default-layout -title: v9.0.0 Entry Page - Dynamsoft Barcode Reader JavaScript Edition -description: This is the main page of Dynamsoft Barcode Reader JavaScript SDK. -keywords: javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -breadcrumbText: JavaScript -permalink: /programming/javascript/index-v9.0.0.html ---- - -# Dynamsoft Barcode Reader JavaScript Edition - Introduction - -This version of Dynamsoft Barcode Reader is based on JavaScript and WebAssembly and can run in all major modern browsers on all major platforms. It is ideal for - -* Organizations who already have sophisticated websites and do not intend to develop mobile applications for the same purposes; -* Organizations whose customers have no desire to install applications for temporary usage of their services. - -## Fast Integration - -With the library integrated, end users can open the web page in a browser, access their cameras and read barcodes directly from the video input. The integration can be done with just a few lines of code and without the hassle of installing anything. - -``` html - - -``` - -The above lines of code has completed the integration of the library into a web page and this is made possible with the following two features. - -### Built-in Camera Control - -Customers generally need to scan a barcode on the fly at which time there is no better input than the camera hooked to or built into the device itself. The library uses the powerful **MediaDevices** interface (provided by the browser itself) to instantly connect the video input of the camera with the back-end decoding engine. - -### Interactive UI - -Good interaction design is essential for a website, the same is true for SDKs such as the library. As shown in the screenshot below, the library streams the video on the page, guides the user where to aim and highlights the areas where barcodes are found. - -![Interactive UI](assets/interactive-ui.png) - -## High Performance - -Barcode reading is usually just an auxiliary way to assist a small step in a complex workflow. Customers like the convenience, but if it takes too long or is error-prone, their patience will quickly run out. Therefore, high performance is crucial. - -### Unparalleled Speed - -The library showcases Dynamsoft's cutting-edge technology in light-speed recognition of barcodes. In most cases, an image gets deblurred, binarized and read under 100 milliseconds. - - - -### Proficiency in Handling Difficult Environments - -The actual use environment is unpredictable. The barcode may appear distorted, inverted, or partially damaged; the background may be textured or spotted; the light may be very low, and there may be shadows and glare. The library handles all these cases with its rich image processing algorithms through various adjustable settings. - - - -### Exceptional Accuracy - -The library does a lot of preparation work to make sure the barcode is as legible as possible for the decoding engine to read. This ensures a very high accuracy. In addition, the library achieves even higher accuracy through the following ways: - -* The library has a confidence score for each recognition which can be used to filter unwanted results; -* In the case of continuous scanning, the library compares the results of multiple consecutive recognitions and return only the results confirmed by at least two efforts. - -Through many experiences, the library has also cultivated its error correction ability against barcodes which do not strictly abide by the specification as well as deformed barcodes caused by improper printing. - -## Usage Scenarios - -The library is designed for websites. Common usage scenarios include: - -### Retail - -Most if not all products on the market now have barcodes on their packaging. Customers can scan the barcode to place an order, register a product for post-sales service or just trace the product to its origin. - -### ID Scanning - -All driver's licenses issued in the USA and Canada by the American Association of Motor Vehicle Administrators (AAMVA) have a PDF417 Barcode on them. The information encoded in the Barcode follows the DL/ID Card Design Standard (CDS) and can be easily parsed to meaningful form fields. - -Other ID cards that come with barcodes include the Permanent Account Number (PAN) Card in India, Driver's license in South Africa, etc. - -### VIN Scanning - -Every vehicle has its own Vehicle Identification Number (VIN). When printing the number on the vehicle, many manufacturers also print a barcode alongside it. Customers can scan the barcode to register for an insurance claim or look up vehicle information like maintenance records, mileage rollbacks, etc. - -### Inventory Management - -Inventory management is a highly stressful and arduous process where both efficiency and accuracy are crucial. Customers can use the library to scan multiple items at the same time which greatly boosts efficiency. - -## See Also - -### User Guide - -For a fast start, read the [User Guide](user-guide/). - -### Demo and Samples - -To see the library in action, check out the [Demo and Samples](samples-demos/) - -### API Reference - -For a overview of the APIs, see the [API Reference](api-reference/). - -### Release Notes - -For a peek of the library history, check the [Release Notes](release-notes/). - -### Acquire Licenses - -Interested to acquire a license? Visit our Online Store. diff --git a/programming-old/javascript/index-v9.0.1.md b/programming-old/javascript/index-v9.0.1.md deleted file mode 100644 index 76d213b9..00000000 --- a/programming-old/javascript/index-v9.0.1.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -layout: default-layout -title: v9.0.1 Entry Page - Dynamsoft Barcode Reader JavaScript Edition -description: This is the main page of Dynamsoft Barcode Reader JavaScript SDK. -keywords: javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -breadcrumbText: JavaScript -permalink: /programming/javascript/index-v9.0.1.html ---- - -# Dynamsoft Barcode Reader JavaScript Edition - Introduction - -This version of Dynamsoft Barcode Reader is based on JavaScript and WebAssembly and can run in all major modern browsers on all major platforms. It is ideal for - -* Organizations who already have sophisticated websites and do not intend to develop mobile applications for the same purposes; -* Organizations whose customers have no desire to install applications for temporary usage of their services. - -## Fast Integration - -With the library integrated, end users can open the web page in a browser, access their cameras and read barcodes directly from the video input. The integration can be done with just a few lines of code and without the hassle of installing anything. - -``` html - - -``` - -The above lines of code has completed the integration of the library into a web page and this is made possible with the following two features. - -### Built-in Camera Control - -Customers generally need to scan a barcode on the fly at which time there is no better input than the camera hooked to or built into the device itself. The library uses the powerful **MediaDevices** interface (provided by the browser itself) to instantly connect the video input of the camera with the back-end decoding engine. - -### Interactive UI - -Good interaction design is essential for a website, the same is true for SDKs such as the library. As shown in the screenshot below, the library streams the video on the page, guides the user where to aim and highlights the areas where barcodes are found. - -![Interactive UI](assets/interactive-ui.png) - -## High Performance - -Barcode reading is usually just an auxiliary way to assist a small step in a complex workflow. Customers like the convenience, but if it takes too long or is error-prone, their patience will quickly run out. Therefore, high performance is crucial. - -### Unparalleled Speed - -The library showcases Dynamsoft's cutting-edge technology in light-speed recognition of barcodes. In most cases, an image gets deblurred, binarized and read under 100 milliseconds. - - - -### Proficiency in Handling Difficult Environments - -The actual use environment is unpredictable. The barcode may appear distorted, inverted, or partially damaged; the background may be textured or spotted; the light may be very low, and there may be shadows and glare. The library handles all these cases with its rich image processing algorithms through various adjustable settings. - - - -### Exceptional Accuracy - -The library does a lot of preparation work to make sure the barcode is as legible as possible for the decoding engine to read. This ensures a very high accuracy. In addition, the library achieves even higher accuracy through the following ways: - -* The library has a confidence score for each recognition which can be used to filter unwanted results; -* In the case of continuous scanning, the library compares the results of multiple consecutive recognitions and return only the results confirmed by at least two efforts. - -Through many experiences, the library has also cultivated its error correction ability against barcodes which do not strictly abide by the specification as well as deformed barcodes caused by improper printing. - -## Usage Scenarios - -The library is designed for websites. Common usage scenarios include: - -### Retail - -Most if not all products on the market now have barcodes on their packaging. Customers can scan the barcode to place an order, register a product for post-sales service or just trace the product to its origin. - -### ID Scanning - -All driver's licenses issued in the USA and Canada by the American Association of Motor Vehicle Administrators (AAMVA) have a PDF417 Barcode on them. The information encoded in the Barcode follows the DL/ID Card Design Standard (CDS) and can be easily parsed to meaningful form fields. - -Other ID cards that come with barcodes include the Permanent Account Number (PAN) Card in India, Driver's license in South Africa, etc. - -### VIN Scanning - -Every vehicle has its own Vehicle Identification Number (VIN). When printing the number on the vehicle, many manufacturers also print a barcode alongside it. Customers can scan the barcode to register for an insurance claim or look up vehicle information like maintenance records, mileage rollbacks, etc. - -### Inventory Management - -Inventory management is a highly stressful and arduous process where both efficiency and accuracy are crucial. Customers can use the library to scan multiple items at the same time which greatly boosts efficiency. - -## See Also - -### User Guide - -For a fast start, read the [User Guide](user-guide/). - -### Demo and Samples - -To see the library in action, check out the [Demo and Samples](samples-demos/) - -### API Reference - -For a overview of the APIs, see the [API Reference](api-reference/). - -### Release Notes - -For a peek of the library history, check the [Release Notes](release-notes/). - -### Acquire Licenses - -Interested to acquire a license? Visit our Online Store. diff --git a/programming-old/javascript/index-v9.0.2.md b/programming-old/javascript/index-v9.0.2.md deleted file mode 100644 index 2be9310f..00000000 --- a/programming-old/javascript/index-v9.0.2.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -layout: default-layout -title: v9.0.2 Entry Page - Dynamsoft Barcode Reader JavaScript Edition -description: This is the main page of Dynamsoft Barcode Reader JavaScript SDK. -keywords: javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -noTitleIndex: false -breadcrumbText: JavaScript -permalink: /programming/javascript/index-v9.0.2.html ---- - -# Dynamsoft Barcode Reader JavaScript Edition - -Dynamsoft Barcode Reader (DBR) can be used in JavaScript to add barcode reading capabilities to websites running in modern browsers. It is ideal for - -* Organizations who already have sophisticated websites and do not intend to develop mobile applications for the same purposes; -* Organizations whose customers have no desire to install applications for temporary usage of their services. - -To get a fast start, you can - -* Read the [User Guide](user-guide/) -* Try the [Samples and Demos](samples-demos/) - -The following describes the highlights of DBR when used in JavaScript. - -## Fast Integration - -The following lines of code is all that is required to integrate DBR in JavaScript: - -``` html - - -``` - -After the integration, end users of the web page can open it in a browser, access their cameras and read barcodes directly from the video input. - -### Built-in Camera Control - -Customers generally need to scan a barcode on the fly at which time there is no better input than the camera hooked to or built into the device itself. DBR uses the powerful **MediaDevices** interface (provided by the browser itself) to instantly connect the video input of the camera with the back-end decoding engine. - -### Interactive UI - -Good interaction design is essential for a website, the same is true for SDKs such as DBR. As shown in the screenshot below, DBR streams the video on the page, guides the user where to aim and highlights the areas where barcodes are found. - -![Interactive UI](assets/interactive-ui.png) - -## High Performance - -Barcode reading is usually just an auxiliary way to assist a small step in a complex workflow. Customers like the convenience, but if it takes too long or is error-prone, their patience will quickly run out. Therefore, high performance is crucial. - -### Unparalleled Speed - -DBR showcases Dynamsoft's cutting-edge technology in light-speed recognition of barcodes. In most cases, an image gets deblurred, binarized and read under 100 milliseconds. - -### Proficiency in Handling Difficult Environments - -The actual use environment is unpredictable. The barcode may appear distorted, inverted, or partially damaged; the background may be textured or spotted; the light may be very low, and there may be shadows and glare. DBR handles all these cases with its rich image processing algorithms through various adjustable settings. - -### Exceptional Accuracy - -DBR does a lot of preparation work to make sure the barcode is as legible as possible for the decoding engine to read. This ensures a very high accuracy. In addition, DBR achieves even higher accuracy through the following ways: - -* DBR has a confidence score for each recognition which can be used to filter unwanted results; -* In the case of continuous scanning, DBR compares the results of multiple consecutive recognitions and return only the results confirmed by at least two efforts. - -Through many experiences, DBR has also cultivated its error correction ability against barcodes which do not strictly abide by the specification as well as deformed barcodes caused by improper printing. - -## Next Step - -Read the [User Guide](user-guide/) to start buidling your own websites with barcode reading capabilities. - -## See Also - -### API Reference - -For a overview of the APIs, see the [API Reference](api-reference/). - -### Release Notes - -For a peek of DBR history, check the [Release Notes](release-notes/). diff --git a/programming-old/javascript/index-v9.2.12.md b/programming-old/javascript/index-v9.2.12.md deleted file mode 100644 index 9e2046e6..00000000 --- a/programming-old/javascript/index-v9.2.12.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -layout: default-layout -title: v9.2.12 Introduction - Dynamsoft Barcode Reader JavaScript Edition -description: This is the main page of Dynamsoft Barcode Reader JavaScript SDK. -keywords: javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -noTitleIndex: false -breadcrumbText: JavaScript -permalink: /programming/javascript/index-v9.2.12.html ---- - -# Dynamsoft Barcode Reader JavaScript Edition - -Dynamsoft Barcode Reader (DBR) can be used in JavaScript to add barcode reading capabilities to websites running in modern browsers. It is ideal for - -* Organizations who already have sophisticated websites and do not intend to develop mobile applications for the same purposes; -* Organizations whose customers have no desire to install applications for temporary usage of their services. - -To get a fast start, you can - -* Read the [User Guide](user-guide/) -* Try the [Samples and Demos](samples-demos/) - -The following describes the highlights of DBR when used in JavaScript. - -## Fast Integration - -The following lines of code is all that is required to integrate DBR in JavaScript: - -``` html - - -``` - -After the integration, end users of the web page can open it in a browser, access their cameras and read barcodes directly from the video input. - -### Built-in Camera Control - -Customers generally need to scan a barcode on the fly at which time there is no better input than the camera hooked to or built into the device itself. DBR uses the powerful **MediaDevices** interface (provided by the browser itself) to instantly connect the video input of the camera with the back-end decoding engine. - -### Interactive UI - -Good interaction design is essential for a website, the same is true for SDKs such as DBR. As shown in the screenshot below, DBR streams the video on the page, guides the user where to aim and highlights the areas where barcodes are found. - -![Interactive UI](assets/interactive-ui.png) - -## High Performance - -Barcode reading is usually just an auxiliary way to assist a small step in a complex workflow. Customers like the convenience, but if it takes too long or is error-prone, their patience will quickly run out. Therefore, high performance is crucial. - -### Unparalleled Speed - -DBR showcases Dynamsoft's cutting-edge technology in light-speed recognition of barcodes. In most cases, an image gets deblurred, binarized and read under 100 milliseconds. - -### Proficiency in Handling Difficult Environments - -The actual use environment is unpredictable. The barcode may appear distorted, inverted, or partially damaged; the background may be textured or spotted; the light may be very low, and there may be shadows and glare. DBR handles all these cases with its rich image processing algorithms through various adjustable settings. - -### Exceptional Accuracy - -DBR does a lot of preparation work to make sure the barcode is as legible as possible for the decoding engine to read. This ensures a very high accuracy. In addition, DBR achieves even higher accuracy through the following ways: - -* DBR has a confidence score for each recognition which can be used to filter unwanted results; -* In the case of continuous scanning, DBR compares the results of multiple consecutive recognitions and return only the results confirmed by at least two efforts. - -Through many experiences, DBR has also cultivated its error correction ability against barcodes which do not strictly abide by the specification as well as deformed barcodes caused by improper printing. - -## Next Step - -Read the [User Guide](user-guide/) to start buidling your own websites with barcode reading capabilities. - -## See Also - -### API Reference - -For a overview of the APIs, see the [API Reference](api-reference/). - -### Release Notes - -For a peek of DBR history, check the [Release Notes](release-notes/). diff --git a/programming-old/javascript/index-v9.2.13.md b/programming-old/javascript/index-v9.2.13.md deleted file mode 100644 index f02ea53f..00000000 --- a/programming-old/javascript/index-v9.2.13.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -layout: default-layout -title: v9.2.13 Introduction - Dynamsoft Barcode Reader JavaScript Edition -description: This is the main page of Dynamsoft Barcode Reader JavaScript SDK. -keywords: javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -noTitleIndex: false -breadcrumbText: JavaScript -permalink: /programming/javascript/index-v9.2.13.html ---- - -# Dynamsoft Barcode Reader JavaScript Edition - -Dynamsoft Barcode Reader (DBR) can be used in JavaScript to add barcode reading capabilities to websites running in modern browsers. It is ideal for - -* Organizations who already have sophisticated websites and do not intend to develop mobile applications for the same purposes; -* Organizations whose customers have no desire to install applications for temporary usage of their services. - -To get a fast start, you can - -* Read the [User Guide](user-guide/) -* Try the [Samples and Demos](samples-demos/) - -The following describes the highlights of DBR when used in JavaScript. - -## Fast Integration - -The following lines of code is all that is required to integrate DBR in JavaScript: - -``` html - - -``` - -After the integration, end users of the web page can open it in a browser, access their cameras and read barcodes directly from the video input. - -### Built-in Camera Control - -Customers generally need to scan a barcode on the fly at which time there is no better input than the camera hooked to or built into the device itself. DBR uses the powerful **MediaDevices** interface (provided by the browser itself) to instantly connect the video input of the camera with the back-end decoding engine. - -### Interactive UI - -Good interaction design is essential for a website, the same is true for SDKs such as DBR. As shown in the screenshot below, DBR streams the video on the page, guides the user where to aim and highlights the areas where barcodes are found. - -![Interactive UI](assets/interactive-ui.png) - -## High Performance - -Barcode reading is usually just an auxiliary way to assist a small step in a complex workflow. Customers like the convenience, but if it takes too long or is error-prone, their patience will quickly run out. Therefore, high performance is crucial. - -### Unparalleled Speed - -DBR showcases Dynamsoft's cutting-edge technology in light-speed recognition of barcodes. In most cases, an image gets deblurred, binarized and read under 100 milliseconds. - -### Proficiency in Handling Difficult Environments - -The actual use environment is unpredictable. The barcode may appear distorted, inverted, or partially damaged; the background may be textured or spotted; the light may be very low, and there may be shadows and glare. DBR handles all these cases with its rich image processing algorithms through various adjustable settings. - -### Exceptional Accuracy - -DBR does a lot of preparation work to make sure the barcode is as legible as possible for the decoding engine to read. This ensures a very high accuracy. In addition, DBR achieves even higher accuracy through the following ways: - -* DBR has a confidence score for each recognition which can be used to filter unwanted results; -* In the case of continuous scanning, DBR compares the results of multiple consecutive recognitions and return only the results confirmed by at least two efforts. - -Through many experiences, DBR has also cultivated its error correction ability against barcodes which do not strictly abide by the specification as well as deformed barcodes caused by improper printing. - -## Next Step - -Read the [User Guide](user-guide/) to start buidling your own websites with barcode reading capabilities. - -## See Also - -### API Reference - -For a overview of the APIs, see the [API Reference](api-reference/). - -### Release Notes - -For a peek of DBR history, check the [Release Notes](release-notes/). diff --git a/programming-old/javascript/index-v9.3.0.md b/programming-old/javascript/index-v9.3.0.md deleted file mode 100644 index e17cb2fc..00000000 --- a/programming-old/javascript/index-v9.3.0.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -layout: default-layout -title: v9.3.0 Introduction - Dynamsoft Barcode Reader JavaScript Edition -description: This is the main page of Dynamsoft Barcode Reader JavaScript SDK. -keywords: javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -noTitleIndex: false -breadcrumbText: JavaScript -permalink: /programming/javascript/index-v9.3.0.html ---- - -# Dynamsoft Barcode Reader JavaScript Edition - -Dynamsoft Barcode Reader (DBR) can be used in JavaScript to add barcode reading capabilities to websites running in modern browsers. It is ideal for - -* Organizations who already have sophisticated websites and do not intend to develop mobile applications for the same purposes; -* Organizations whose customers have no desire to install applications for temporary usage of their services. - -To get a fast start, you can - -* Read the [User Guide](user-guide/) -* Try the [Samples and Demos](samples-demos/) - -The following describes the highlights of DBR when used in JavaScript. - -## Fast Integration - -The following lines of code is all that is required to integrate DBR in JavaScript: - -``` html - - -``` - -After the integration, end users of the web page can open it in a browser, access their cameras and read barcodes directly from the video input. - -### Built-in Camera Control - -Customers generally need to scan a barcode on the fly at which time there is no better input than the camera hooked to or built into the device itself. DBR uses the powerful **MediaDevices** interface (provided by the browser itself) to instantly connect the video input of the camera with the back-end decoding engine. - -### Interactive UI - -Good interaction design is essential for a website, the same is true for SDKs such as DBR. As shown in the screenshot below, DBR streams the video on the page, guides the user where to aim and highlights the areas where barcodes are found. - -![Interactive UI](assets/interactive-ui.png) - -## High Performance - -Barcode reading is usually just an auxiliary way to assist a small step in a complex workflow. Customers like the convenience, but if it takes too long or is error-prone, their patience will quickly run out. Therefore, high performance is crucial. - -### Unparalleled Speed - -DBR showcases Dynamsoft's cutting-edge technology in light-speed recognition of barcodes. In most cases, an image gets deblurred, binarized and read under 100 milliseconds. - -### Proficiency in Handling Difficult Environments - -The actual use environment is unpredictable. The barcode may appear distorted, inverted, or partially damaged; the background may be textured or spotted; the light may be very low, and there may be shadows and glare. DBR handles all these cases with its rich image processing algorithms through various adjustable settings. - -### Exceptional Accuracy - -DBR does a lot of preparation work to make sure the barcode is as legible as possible for the decoding engine to read. This ensures a very high accuracy. In addition, DBR achieves even higher accuracy through the following ways: - -* DBR has a confidence score for each recognition which can be used to filter unwanted results; -* In the case of continuous scanning, DBR compares the results of multiple consecutive recognitions and return only the results confirmed by at least two efforts. - -Through many experiences, DBR has also cultivated its error correction ability against barcodes which do not strictly abide by the specification as well as deformed barcodes caused by improper printing. - -## Next Step - -Read the [User Guide](user-guide/) to start buidling your own websites with barcode reading capabilities. - -## See Also - -### API Reference - -For a overview of the APIs, see the [API Reference](api-reference/). - -### Release Notes - -For a peek of DBR history, check the [Release Notes](release-notes/). diff --git a/programming-old/javascript/index-v9.6.32.md b/programming-old/javascript/index-v9.6.32.md deleted file mode 100644 index a1cf8793..00000000 --- a/programming-old/javascript/index-v9.6.32.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -layout: default-layout -title: Introduction - Dynamsoft Barcode Reader JavaScript Edition -description: This is the main page of Dynamsoft Barcode Reader JavaScript SDK. -keywords: javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -noTitleIndex: false -breadcrumbText: JavaScript -permalink: /programming/javascript/index-v9.6.32.html ---- - -# Dynamsoft Barcode Reader JavaScript Edition - -Dynamsoft Barcode Reader (DBR) can be used in JavaScript to add barcode reading capabilities to websites running in modern browsers. It is ideal for - -* Organizations who already have sophisticated websites and do not intend to develop mobile applications for the same purposes; -* Organizations whose customers have no desire to install applications for temporary usage of their services. - -To get a fast start, you can - -* Read the [User Guide](user-guide/) -* Try the [Samples and Demos](samples-demos/) - -The following describes the highlights of DBR when used in JavaScript. - -## Fast Integration - -The following lines of code is all that is required to integrate DBR in JavaScript: - -``` html - - -``` - -After the integration, end users of the web page can open it in a browser, access their cameras and read barcodes directly from the video input. - -### Built-in Camera Control - -Customers generally need to scan a barcode on the fly at which time there is no better input than the camera hooked to or built into the device itself. DBR uses the powerful **MediaDevices** interface (provided by the browser itself) to instantly connect the video input of the camera with the back-end decoding engine. - -### Interactive UI - -Good interaction design is essential for a website, the same is true for SDKs such as DBR. As shown in the screenshot below, DBR streams the video on the page, guides the user where to aim and highlights the areas where barcodes are found. - -![Interactive UI](assets/interactive-ui.png) - -## High Performance - -Barcode reading is usually just an auxiliary way to assist a small step in a complex workflow. Customers like the convenience, but if it takes too long or is error-prone, their patience will quickly run out. Therefore, high performance is crucial. - -### Unparalleled Speed - -DBR showcases Dynamsoft's cutting-edge technology in light-speed recognition of barcodes. In most cases, an image gets deblurred, binarized and read under 100 milliseconds. - -### Proficiency in Handling Difficult Environments - -The actual use environment is unpredictable. The barcode may appear distorted, inverted, or partially damaged; the background may be textured or spotted; the light may be very low, and there may be shadows and glare. DBR handles all these cases with its rich image processing algorithms through various adjustable settings. - -### Exceptional Accuracy - -DBR does a lot of preparation work to make sure the barcode is as legible as possible for the decoding engine to read. This ensures a very high accuracy. In addition, DBR achieves even higher accuracy through the following ways: - -* DBR has a confidence score for each recognition which can be used to filter unwanted results; -* In the case of continuous scanning, DBR compares the results of multiple consecutive recognitions and return only the results confirmed by at least two efforts. - -Through many experiences, DBR has also cultivated its error correction ability against barcodes which do not strictly abide by the specification as well as deformed barcodes caused by improper printing. - -## Next Step - -Read the [User Guide](user-guide/) to start building your own websites with barcode reading capabilities. - -## See Also - -### API Reference - -For a overview of the APIs, see the [API Reference](api-reference/). - -### Release Notes - -For a peek of DBR history, check the [Release Notes](release-notes/). diff --git a/programming-old/javascript/index-v9.6.33.md b/programming-old/javascript/index-v9.6.33.md deleted file mode 100644 index a7c11ac4..00000000 --- a/programming-old/javascript/index-v9.6.33.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -layout: default-layout -title: Introduction - Dynamsoft Barcode Reader JavaScript Edition -description: This is the main page of Dynamsoft Barcode Reader JavaScript SDK. -keywords: javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -noTitleIndex: false -breadcrumbText: JavaScript -permalink: /programming/javascript/index-v9.6.33.html ---- - -# Dynamsoft Barcode Reader JavaScript Edition - -Dynamsoft Barcode Reader (DBR) can be used in JavaScript to add barcode reading capabilities to websites running in modern browsers. It is ideal for - -* Organizations who already have sophisticated websites and do not intend to develop mobile applications for the same purposes; -* Organizations whose customers have no desire to install applications for temporary usage of their services. - -To get a fast start, you can - -* Read the [User Guide](user-guide/) -* Try the [Samples and Demos](samples-demos/) - -The following describes the highlights of DBR when used in JavaScript. - -## Fast Integration - -The following lines of code is all that is required to integrate DBR in JavaScript: - -``` html - - -``` - -After the integration, end users of the web page can open it in a browser, access their cameras and read barcodes directly from the video input. - -### Built-in Camera Control - -Customers generally need to scan a barcode on the fly at which time there is no better input than the camera hooked to or built into the device itself. DBR uses the powerful **MediaDevices** interface (provided by the browser itself) to instantly connect the video input of the camera with the back-end decoding engine. - -### Interactive UI - -Good interaction design is essential for a website, the same is true for SDKs such as DBR. As shown in the screenshot below, DBR streams the video on the page, guides the user where to aim and highlights the areas where barcodes are found. - -![Interactive UI](assets/interactive-ui.png) - -## High Performance - -Barcode reading is usually just an auxiliary way to assist a small step in a complex workflow. Customers like the convenience, but if it takes too long or is error-prone, their patience will quickly run out. Therefore, high performance is crucial. - -### Unparalleled Speed - -DBR showcases Dynamsoft's cutting-edge technology in light-speed recognition of barcodes. In most cases, an image gets deblurred, binarized and read under 100 milliseconds. - -### Proficiency in Handling Difficult Environments - -The actual use environment is unpredictable. The barcode may appear distorted, inverted, or partially damaged; the background may be textured or spotted; the light may be very low, and there may be shadows and glare. DBR handles all these cases with its rich image processing algorithms through various adjustable settings. - -### Exceptional Accuracy - -DBR does a lot of preparation work to make sure the barcode is as legible as possible for the decoding engine to read. This ensures a very high accuracy. In addition, DBR achieves even higher accuracy through the following ways: - -* DBR has a confidence score for each recognition which can be used to filter unwanted results; -* In the case of continuous scanning, DBR compares the results of multiple consecutive recognitions and return only the results confirmed by at least two efforts. - -Through many experiences, DBR has also cultivated its error correction ability against barcodes which do not strictly abide by the specification as well as deformed barcodes caused by improper printing. - -## Next Step - -Read the [User Guide](user-guide/) to start building your own websites with barcode reading capabilities. - -## See Also - -### API Reference - -For a overview of the APIs, see the [API Reference](api-reference/). - -### Release Notes - -For a peek of DBR history, check the [Release Notes](release-notes/). diff --git a/programming-old/javascript/index-v9.6.40.md b/programming-old/javascript/index-v9.6.40.md deleted file mode 100644 index 85810d82..00000000 --- a/programming-old/javascript/index-v9.6.40.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -layout: default-layout -title: Introduction - Dynamsoft Barcode Reader JavaScript Edition -description: This is the main page of Dynamsoft Barcode Reader JavaScript SDK. -keywords: javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -noTitleIndex: false -breadcrumbText: JavaScript -permalink: /programming/javascript/index-v9.6.40.html ---- - -# Dynamsoft Barcode Reader JavaScript Edition - -Dynamsoft Barcode Reader (DBR) can be used in JavaScript to add barcode reading capabilities to websites running in modern browsers. It is ideal for - -* Organizations who already have sophisticated websites and do not intend to develop mobile applications for the same purposes; -* Organizations whose customers have no desire to install applications for temporary usage of their services. - -To get a fast start, you can - -* Read the [User Guide](user-guide/) -* Try the [Samples and Demos](samples-demos/) - -The following describes the highlights of DBR when used in JavaScript. - -## Fast Integration - -The following lines of code is all that is required to integrate DBR in JavaScript: - -``` html - - -``` - -After the integration, end users of the web page can open it in a browser, access their cameras and read barcodes directly from the video input. - -### Built-in Camera Control - -Customers generally need to scan a barcode on the fly at which time there is no better input than the camera hooked to or built into the device itself. DBR uses the powerful **MediaDevices** interface (provided by the browser itself) to instantly connect the video input of the camera with the back-end decoding engine. - -### Interactive UI - -Good interaction design is essential for a website, the same is true for SDKs such as DBR. As shown in the screenshot below, DBR streams the video on the page, guides the user where to aim and highlights the areas where barcodes are found. - -![Interactive UI](assets/interactive-ui.png) - -## High Performance - -Barcode reading is usually just an auxiliary way to assist a small step in a complex workflow. Customers like the convenience, but if it takes too long or is error-prone, their patience will quickly run out. Therefore, high performance is crucial. - -### Unparalleled Speed - -DBR showcases Dynamsoft's cutting-edge technology in light-speed recognition of barcodes. In most cases, an image gets deblurred, binarized and read under 100 milliseconds. - -### Proficiency in Handling Difficult Environments - -The actual use environment is unpredictable. The barcode may appear distorted, inverted, or partially damaged; the background may be textured or spotted; the light may be very low, and there may be shadows and glare. DBR handles all these cases with its rich image processing algorithms through various adjustable settings. - -### Exceptional Accuracy - -DBR does a lot of preparation work to make sure the barcode is as legible as possible for the decoding engine to read. This ensures a very high accuracy. In addition, DBR achieves even higher accuracy through the following ways: - -* DBR has a confidence score for each recognition which can be used to filter unwanted results; -* In the case of continuous scanning, DBR compares the results of multiple consecutive recognitions and return only the results confirmed by at least two efforts. - -Through many experiences, DBR has also cultivated its error correction ability against barcodes which do not strictly abide by the specification as well as deformed barcodes caused by improper printing. - -## Next Step - -Read the [User Guide](user-guide/) to start building your own websites with barcode reading capabilities. - -## See Also - -### API Reference - -For a overview of the APIs, see the [API Reference](api-reference/). - -### Release Notes - -For a peek of DBR history, check the [Release Notes](release-notes/). diff --git a/programming-old/javascript/index-v9.6.42.md b/programming-old/javascript/index-v9.6.42.md deleted file mode 100644 index 3d56107e..00000000 --- a/programming-old/javascript/index-v9.6.42.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -layout: default-layout -title: Introduction - Dynamsoft Barcode Reader JavaScript Edition -description: This is the main page of Dynamsoft Barcode Reader JavaScript SDK. -keywords: javascript, js -needAutoGenerateSidebar: true -needGenerateH3Content: true -noTitleIndex: false -breadcrumbText: JavaScript -permalink: /programming/javascript/index-v9.6.42.html ---- - -# Dynamsoft Barcode Reader JavaScript Edition - -Dynamsoft Barcode Reader (DBR) can be used in JavaScript to add barcode reading capabilities to websites running in modern browsers. It is ideal for - -* Organizations who already have sophisticated websites and do not intend to develop mobile applications for the same purposes; -* Organizations whose customers have no desire to install applications for temporary usage of their services. - -To get a fast start, you can - -* Read the [User Guide](user-guide/) -* Try the [Samples and Demos](samples-demos/) - -The following describes the highlights of DBR when used in JavaScript. - -## Fast Integration - -The following lines of code is all that is required to integrate DBR in JavaScript: - -``` html - - -``` - -After the integration, end users of the web page can open it in a browser, access their cameras and read barcodes directly from the video input. - -### Built-in Camera Control - -Customers generally need to scan a barcode on the fly at which time there is no better input than the camera hooked to or built into the device itself. DBR uses the powerful **MediaDevices** interface (provided by the browser itself) to instantly connect the video input of the camera with the back-end decoding engine. - -### Interactive UI - -Good interaction design is essential for a website, the same is true for SDKs such as DBR. As shown in the screenshot below, DBR streams the video on the page, guides the user where to aim and highlights the areas where barcodes are found. - -![Interactive UI](assets/interactive-ui.png) - -## High Performance - -Barcode reading is usually just an auxiliary way to assist a small step in a complex workflow. Customers like the convenience, but if it takes too long or is error-prone, their patience will quickly run out. Therefore, high performance is crucial. - -### Unparalleled Speed - -DBR showcases Dynamsoft's cutting-edge technology in light-speed recognition of barcodes. In most cases, an image gets deblurred, binarized and read under 100 milliseconds. - -### Proficiency in Handling Difficult Environments - -The actual use environment is unpredictable. The barcode may appear distorted, inverted, or partially damaged; the background may be textured or spotted; the light may be very low, and there may be shadows and glare. DBR handles all these cases with its rich image processing algorithms through various adjustable settings. - -### Exceptional Accuracy - -DBR does a lot of preparation work to make sure the barcode is as legible as possible for the decoding engine to read. This ensures a very high accuracy. In addition, DBR achieves even higher accuracy through the following ways: - -* DBR has a confidence score for each recognition which can be used to filter unwanted results; -* In the case of continuous scanning, DBR compares the results of multiple consecutive recognitions and return only the results confirmed by at least two efforts. - -Through many experiences, DBR has also cultivated its error correction ability against barcodes which do not strictly abide by the specification as well as deformed barcodes caused by improper printing. - -## Next Step - -Read the [User Guide](user-guide/) to start building your own websites with barcode reading capabilities. - -## See Also - -### API Reference - -For a overview of the APIs, see the [API Reference](api-reference/). - -### Release Notes - -For a peek of DBR history, check the [Release Notes](release-notes/). diff --git a/programming-old/javascript/samples-demos/assets/pwa-1.png b/programming-old/javascript/samples-demos/assets/pwa-1.png deleted file mode 100644 index a78034a0..00000000 Binary files a/programming-old/javascript/samples-demos/assets/pwa-1.png and /dev/null differ diff --git a/programming-old/javascript/samples-demos/assets/pwa-2.png b/programming-old/javascript/samples-demos/assets/pwa-2.png deleted file mode 100644 index 57eaa71b..00000000 Binary files a/programming-old/javascript/samples-demos/assets/pwa-2.png and /dev/null differ diff --git a/programming-old/javascript/samples-demos/assets/pwa-3.png b/programming-old/javascript/samples-demos/assets/pwa-3.png deleted file mode 100644 index c62b6cca..00000000 Binary files a/programming-old/javascript/samples-demos/assets/pwa-3.png and /dev/null differ diff --git a/programming-old/javascript/samples-demos/debug.md b/programming-old/javascript/samples-demos/debug.md deleted file mode 100644 index 27b3a62d..00000000 --- a/programming-old/javascript/samples-demos/debug.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -layout: default-layout -title: Debug Sample - Dynamsoft Barcode Reader JavaScript Edition -description: Dynamsoft Barcode Reader JavaScript Edition - Debug Sample -keywords: javascript, js, barcode, vanilla, debug -noTitleIndex: true -breadcrumbText: Debug -permalink: /programming/javascript/samples-demos/debug.html ---- - -# Debug Sample - -This sample is designed to: - -1. Print detailed logs in the browser console to better assist in troubleshooting. -2. Check if your device and browser are compatible with the camera and to what extent. -3. Collect video frames for analysis. (Require to host the sample locally) - -## Collect the video frames for analysis - -Barcode reading is a one-time job, the application either succeeds or fails to read the barcode(s). For the failed scenario, it's possible to make them successful by adjusting the settings provided by the Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library"). However, adjusting the settings could be a bit overwhelming. Therefore, Dynamsoft offers the debug sample that enables customers to capture and save runtime video frames for sending to the Dynamsoft team. With the original images, the team can test and optimize settings for customers. - -The following shows how to host the sample and collect frames. - -### Download the sample - -The sample can be downloaded from - -Debug Sample on GitHub - -Note that the entire folder is required. To download only the files in this folder, try using "https://downgit.github.io/#/home". - -### Set up a local server - -Since the video is usually playing on mobile devices, having these frames uploaded to a self-hosted local server is most convenient, therefore, we first need to set up a local server. - -We make use of the web server that comes with [Express](https://expressjs.com/). - -* Install dependencies - -Run the following script to install all dependencies. - -`npm install` - -* Start the server - -We defined the web server logic in the file "app.js", to start it, run the following script: - -`node app.js` - -Note that we have used self-signed certificates to enable SSL on the port 4443. - -### Use the sample page - -Once the server is up and running, open the page on the device that will do the barcode reading. The URL for the sample is "https://{your-local-ip}:4443/". For example, suppose your ip is 192.168.1.1, the site can be visited at "https://192.168.1.1:4443/". - -> Note that the device should be in the same WiFi network as the server machine. - -You will see a warning due to self-signing. Please ignore and keep processing. - -Click the button "show scanner" and try to read barcodes, the frames will then be uploaded to the folder "debug\public\collect" as images (.png) on the server. When you have collected enough frames, please turn off the scanner, otherwise, new frames will continue to flood in. - -Check the images to make sure that they correctly represent the actual usage scenario, then zip and send them to Dynamsoft for technical assistance. diff --git a/programming-old/javascript/samples-demos/helloworld-angular.md b/programming-old/javascript/samples-demos/helloworld-angular.md deleted file mode 100644 index 861ef873..00000000 --- a/programming-old/javascript/samples-demos/helloworld-angular.md +++ /dev/null @@ -1,320 +0,0 @@ ---- -layout: default-layout -title: Angular Integration Sample - Dynamsoft Barcode Reader JavaScript Edition -description: Dynamsoft Barcode Reader JavaScript Edition - Angular Integration -keywords: javascript, js, barcode, angular -noTitleIndex: true -breadcrumbText: Angular -permalink: /programming/javascript/samples-demos/helloworld-angular.html ---- - -# Hello-world for Angular - Dynamsoft Barcode Reader Sample - -[Angular](https://angular.io/) is one of the most popular and mature JavaScript frameworks. Check out the following on how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") into an Angular application. - -## Official Sample - -* Hello World in Angular - Source Code - -## Preparation - -Make sure you have [node](https://nodejs.org/) and [Angular CLI](https://cli.angular.io/) installed. `node 14.21.3` and `Angular CLI 15.2.1` are used in the example below. - -## Create the sample project - -### Create an out-of-the-box raw Angular application - -```cmd -ng new read-video-angular -``` - -### **CD** to the root directory of the application and install the library - -```cmd -cd read-video-angular -npm install dynamsoft-javascript-barcode -``` - -## Start to implement - -### Add a file "dbr.ts" under "src/app/" to configure the library - -```typescript -import { BarcodeReader } from 'dynamsoft-javascript-barcode'; -BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9'; -BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.42/dist/"; -``` - -> Note: -> -> * `license` specify a license key to use the library. You can visit [https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js](https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js) to get your own trial license good for 30 days. -> * `engineResourcePath` tells the library where to get the necessary resources at runtime. - -### Generate three components -* `video-decode` component help read barcode from camera. -```cmd -ng generate component video-decode -``` -* `img-decode` component help read barcode from still images. -```cmd -ng generate component img-decode -``` -* `hello-world` component offers buttons to switch components above. -```cmd -ng generate component hello-world -``` - -### Edit the video-decode component - -* There is a default UI in `.\node_modules\dynamsoft-javascript-barcode\dist\dbr.ui.html`, which we will use in this sample. Copy everything in this file and replace the original code in `video-decode.component.html`. If you want to customize the UI, see more in `2.ui-tweaking` or [User Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/features/customize-the-ui.html?lang=js). - -* In `video-decode.component.ts`, add code for initializing and destroying the `BarcodeScanner` instance. - -```typescript -import { Component, OnInit } from '@angular/core'; -import { BarcodeScanner } from 'dynamsoft-javascript-barcode'; -@Component({ - selector: 'app-video-decode', - templateUrl: './video-decode.component.html', - styleUrls: ['./video-decode.component.css'], -}) -export class VideoDecodeComponent implements OnInit { - pScanner: Promise | null = null; - - async ngOnInit(): Promise { - try { - const scanner = await (this.pScanner = BarcodeScanner.createInstance()); - await scanner.setUIElement( - (document.querySelector('.dce-video-container') as HTMLElement).parentElement as HTMLElement - ); - scanner.onFrameRead = (results: any) => { - for (const result of results) { - console.log(result.barcodeText); - } - }; - scanner.onUniqueRead = (txt, result) => { - alert(txt); - }; - await scanner.open(); - } catch (ex: any) { - let errMsg; - if (ex.message.includes('network connection error')) { - errMsg = - 'Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license.'; - } else { - errMsg = ex.message || ex; - } - console.error(errMsg); - alert(errMsg); - } - } - async ngOnDestroy() { - if (this.pScanner) { - (await this.pScanner).destroyContext(); - console.log('BarcodeScanner Component Unmount'); - } - } -} -``` - -> Note: -> -> * The method `createInstance()` is called to initialize the library as soon as the component initializes. -> * To release resources timely, the `BarcodeScanner` instance is destroyed with the component in the callback `ngOnDestroy` . -> * The `setUIElement()` method is used to define the user interface (UI) for the library using the native element in `video-decode.component.html`, which was copied in the previous step. - -### Edit the img-decode component - -* Replace the original code in `img-decode.component.html` with code below to select a local image via `input` element. - -```html -
    -``` - -* Add CSS style in `img-decode.component.css`. - -```css -.ImgDecode { - display: flex; - justify-content: center; - align-items: center; - width: 100%; - border: 1px solid black -} -``` - -* In `img-decode.component.ts`, add code for initializing and destroying the `BarcodeReader` instance. - -```typescript -import { Component, OnInit } from '@angular/core'; -import { BarcodeReader } from 'dynamsoft-javascript-barcode' - -@Component({ - selector: 'app-img-decode', - templateUrl: './img-decode.component.html', - styleUrls: ['./img-decode.component.css'] -}) -export class ImgDecodeComponent implements OnInit { - pReader: Promise | null = null; - - async ngOnInit(): Promise { } - - decodeImg = async (e: any) => { - try { - const reader = await (this.pReader = this.pReader || BarcodeReader.createInstance()); - const results = await reader.decode(e.target.files[0]); - for (const result of results) { - alert(result.barcodeText); - } - if (!results.length) { alert('No barcode found'); } - } catch (ex: any) { - let errMsg; - if (ex.message.includes("network connection error")) { - errMsg = "Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license."; - } else { - errMsg = ex.message||ex; - } - console.error(errMsg); - alert(errMsg); - } - e.target.value = ''; - } - - async ngOnDestroy() { - if (this.pReader) { - (await this.pReader).destroyContext(); - console.log('ImgDecode Component Unmount'); - } - } -} -``` - -> Note: -> -> * The method `createInstance()` is called to initialize the library as soon as the component initializes. -> * To release resources timely, the `BarcodeReader` instance is destroyed with the component in the callback `ngOnDestroy` . - -### Edit the hello-world component - -* Use the components in `hello-world.component.html`. - -```html -
    -

    Hello World for Angularlogo -

    -
    - - -
    -
    - - -
    -
    -``` - -* Define the style of the element in `hello-world.component.css`. - -```css -.helloWorld { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - color: #455A64; -} - -button { - font-size: 1.5rem; - margin: 1.5vh 0; - border: 1px solid black; - background-color: white; - color: black; -} - -.container { - margin: 2vmin auto; - height: 70vh; - width: 80vw; -} - -h1 { - font-size: 1.5em; -} -``` - -* Add following code to `hello-world.component.ts`. - -```typescript -import { Component, OnInit } from '@angular/core'; -import '../dbr'; // import side effects. The license, engineResourcePath, so on. -import { BarcodeScanner } from 'dynamsoft-javascript-barcode'; - -@Component({ - selector: 'app-hello-world', - templateUrl: './hello-world.component.html', - styleUrls: ['./hello-world.component.css'] -}) -export class HelloWorldComponent implements OnInit { - bShowScanner = true; - bShowImgDecode = false; - async ngOnInit(): Promise { - // Load the library on page load to speed things up. - try { - await BarcodeScanner.loadWasm(); - } catch (ex: any) { - let errMsg; - if (ex.message.includes("network connection error")) { - errMsg = "Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license."; - } else { - errMsg = ex.message||ex; - } - console.error(errMsg); - alert(errMsg); - } - } - showScanner(): void { - this.bShowScanner = true; - this.bShowImgDecode = false; - } - showImgDecode(): void { - this.bShowScanner = false; - this.bShowImgDecode = true; - } -} -``` - -> NOTE : -> -> * The method `loadWasm()` initializes the library in the background. - -### Add the hello-world component to `app.component.html` - -Edit the file `app.component.html` to contain nothing but the following - -```html - -``` - -* Try running the project. - -```cmd -ng serve -``` - -If you have followed all the steps correctly, you should now have a functioning page that allows you to scan barcodes from a webcam or a built-in camera. Additionally, if you want to decode a local image, you can click the `Image Decode` button and select the image you want to decode. Any barcodes that are detected will be displayed in a dialog. - -## Development server - -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. - -## Build - -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build. - -## Support - -If you have any questions, feel free to contact Dynamsoft support via [email](mailto:support@dynamsoft.com) or live chat via the "Chat" button. diff --git a/programming-old/javascript/samples-demos/helloworld-electron.md b/programming-old/javascript/samples-demos/helloworld-electron.md deleted file mode 100644 index c1855ea0..00000000 --- a/programming-old/javascript/samples-demos/helloworld-electron.md +++ /dev/null @@ -1,186 +0,0 @@ ---- -layout: default-layout -title: Electron Sample - Dynamsoft Barcode Reader JavaScript Edition -description: Dynamsoft Barcode Reader JavaScript Edition - Electron -keywords: javascript, js, barcode, vanilla, electron -noTitleIndex: true -breadcrumbText: Electron -permalink: /programming/javascript/samples-demos/helloworld-electron.html ---- - -# JavaScript Hello World Sample - Electron - -[Electron](https://www.electronjs.org/) is a framework for creating native applications with web technologies. Follow this guide to learn how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") into an Electron application. - -## Official Sample - -* Read Barcodes from Camera - Source Code - -## Preparation - -Make sure you have [node](https://nodejs.org/) installed. `node 14.16.0` is used in this article. - -## Create an empty Application - -Create a folder with the name "read-video-electron" and a package.json file inside it with the following content: - -```json -{ - "name": "read-video-electron", - "version": "1.0.0", - "description": "How to read barcodes from a video input in an Electron App", - "main": "main.js", - "scripts": { - "start": "electron .", - "test": "echo \"Error: no test specified\" && exit 1" - }, - "author": "tom@dynamsoft.com", - "dependencies": { - "electron": "14.0.1", - "dynamsoft-javascript-barcode": "9.6.1" - } -} -``` - -Then, run `npm install` to install the dependencies. - -```cmd -npm install -``` - -## Start to implement - -### Create a main.js file - -As defined in the package.json file, main.js is the entry point of the application, we define it like this: - -```javascript -const { app, BrowserWindow } = require('electron') - -function createWindow() { - const win = new BrowserWindow({ - width: 800, - height: 600, - }) - win.loadFile('index.html') -} - -app.whenReady().then(() => { - createWindow() - app.on('activate', () => { - if (BrowserWindow.getAllWindows().length === 0) { - createWindow() - } - }) -}) - -app.on('window-all-closed', () => { - if (process.platform !== 'darwin') { - app.quit() - } -}) -``` - -Two modules are imported in this file: - -* `app`: controls the application's event lifecycle. -* `BrowserWindow`: creates and manages application windows. - -The code basically opens index.html in a window. For more information, check out [Electron Quick Start](https://www.electronjs.org/docs/latest/tutorial/quick-start). - -### Create an index.html file - -Create the page to be loaded in the created window. - -```html - - - - - - Read barcodes from a video input in Electron! - - - - -

    Read barcodes from a video input

    - -
    -
    -
    - - - - - - -``` - -The page loads action.js which makes use of the library to create a barcode scanner and read barcodes from a video input: - -```javascript -(async function () { - Dynamsoft.DBR.BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9'; - Dynamsoft.DBR.BarcodeReader.loadWasm(); - let pScanner = null; - document.getElementById('readBarcode').onclick = async () => { - try { - let scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance()); - scanner.onFrameRead = results => { - if (results.length) { - console.log(results); - } - }; - scanner.onUniqueRead = (txt, result) => { - const format = result.barcodeFormat ? result.barcodeFormatString : result.barcodeFormatString_2; - document.getElementById('resultText').value = format + ': ' + txt; - }; - document.getElementById("barcodeScannerUI").appendChild(scanner.getUIElement()); - await scanner.show(); - } catch (ex) { - alert(ex.message); - throw ex; - } - }; -})(); -``` - -Also, style.css defines the styles for the UI - -```css -body { - text-align: center; -} - -#barcodeScannerUI { - width: 100%; - height: 100%; -} - -#UIElement { - margin: 2vmin auto; - text-align: center; - font-size: medium; - height: 40vh; - width: 80vw; -} -#resultText { - display: block; - margin: 0 auto; - padding: 0.4rem 0.8rem; - color: inherit; - width: 80vw; - border: none; - font-size: 1rem; - border-radius: 0.2rem; - text-align: center; -} -``` - -## Run the application - -Run the application with the following command and see how it goes. - -```cmd -npm start -``` diff --git a/programming-old/javascript/samples-demos/helloworld-index.md b/programming-old/javascript/samples-demos/helloworld-index.md deleted file mode 100644 index 7074d7c7..00000000 --- a/programming-old/javascript/samples-demos/helloworld-index.md +++ /dev/null @@ -1,141 +0,0 @@ ---- -layout: default-layout -title: HelloWorld Samples Index - Dynamsoft Barcode Reader JavaScript Edition -description: This is the index page of Dynamsoft Barcode Reader JavaScript SDK HelloWorld samples. -keywords: javascript, js, samples, HelloWorld -noTitleIndex: true -breadcrumbText: JavaScript HelloWorld Samples -needAutoGenerateSidebar: false -permalink: /programming/javascript/samples-demos/helloworld-index.html ---- - -
    - -
    -

    HelloWorld Samples - DBR JavaScript Edition

    -
    -
    -
    Hello World -
    -
    Hello World in - Angular (Angular logo) -
    -
    - Hello World in - React (React logo) -
    -
    - Hello World in - Vue 2 (Vue logo) -
    -
    - Hello World in - Vue 3 (Vue3 logo) -
    -
    - Hello World in - Next.js () -
    -
    - Hello World in - NuxtJS () -
    -
    - Hello World in - Electron (Electron logo) -
    -
    Hello World in PWA -
    -
    -
    - diff --git a/programming-old/javascript/samples-demos/helloworld-minCode.md b/programming-old/javascript/samples-demos/helloworld-minCode.md deleted file mode 100644 index ce375f79..00000000 --- a/programming-old/javascript/samples-demos/helloworld-minCode.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -layout: default-layout -title: Minimal Code Sample - Dynamsoft Barcode Reader JavaScript Edition -description: Dynamsoft Barcode Reader JavaScript Edition - Minimal Code -keywords: javascript, js, barcode, vanilla -noTitleIndex: true -breadcrumbText: Minimal Code -permalink: /programming/javascript/samples-demos/helloworld-minCode.html ---- - -# JavaScript Hello World Sample - Minimal Code - -As explained in the user guide, it takes just a few lines of code to implement Dynamsoft Barcode Reader JavaScript SDK in a web page. Read more about [the simplest implementation](../user-guide/#hello-world---simplest-implementation). - -## Official Sample - -* Read Barcodes from Camera - Source Code diff --git a/programming-old/javascript/samples-demos/helloworld-nextjs.md b/programming-old/javascript/samples-demos/helloworld-nextjs.md deleted file mode 100644 index eeb9fc4d..00000000 --- a/programming-old/javascript/samples-demos/helloworld-nextjs.md +++ /dev/null @@ -1,369 +0,0 @@ ---- -layout: default-layout -title: NextJS Integration Sample - Dynamsoft Barcode Reader JavaScript Edition -description: Dynamsoft Barcode Reader JavaScript Edition - nextJS Integration -keywords: javascript, js, barcode, nextjs -noTitleIndex: true -breadcrumbText: Next.JS -permalink: /programming/javascript/samples-demos/helloworld-nextjs.html ---- - -# JavaScript Hello World Sample - Next.js - -[Next.js](https://nextjs.org/) is an open-source development framework built on top of Node.js enabling [React](https://reactjs.org/) based web applications functionalities such as server-side rendering and generating static websites. Follow this guide to learn how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") into a Next.js application. Note that in this sample we will use `TypeScript`. - -## Official Sample - -* Hello World in Next.js - Source Code - -## Preparation - -Make sure you have [node](https://nodejs.org/) installed. `node 14.21.3` and `next 13.2.4` are used in the example below. - -## Create the sample project - -### Create a Bootstrapped Raw Next.js Application - -```cmd -npx create-next-app@latest --typescript -``` - -### **CD** to the root directory of the application and install the dependencies - -```cmd -npm install dynamsoft-javascript-barcode -``` - -## Start to implement - -### Add a file dbr.ts at the root of the application to configure the library - -```jsx -import { BarcodeReader } from 'dynamsoft-javascript-barcode'; -BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9'; -BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.42/dist/"; -``` - -> Note: -> * `license` specify a license key to use the library. You can visit [https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js](https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js) to get your own trial license good for 30 days. -> * `engineResourcePath` tells the library where to get the necessary resources at runtime. - -### Create a directory "components" and create the following files inside it to represent three components - -* VideoDecode.tsx -* ImgDecode.tsx -* HelloWorld.tsx - -### Edit the `VideoDecode` component - -* In VideoDecode.tsx, add code for initializing and destroying the `BarcodeScanner` instance. The `VideoDecode` component uses `BarcodeScanner` class of the library to help decode barcodes via camera. - -```tsx -import { BarcodeScanner } from "dynamsoft-javascript-barcode"; -import React from 'react'; -import styles from '@/styles/VideoDecode.module.css' - -class VideoDecode extends React.Component { - pScanner: Promise|null = null; - elRef: React.RefObject = React.createRef(); - async componentDidMount() { - try { - const scanner = await (this.pScanner = BarcodeScanner.createInstance()); - // Should judge if scanner is destroyed after 'await', as in development React runs setup and cleanup one extra time before the actual setup in Strict Mode. - if(scanner.isContextDestroyed()) return; - await scanner.setUIElement(this.elRef.current!); - // Should judge if scanner is destroyed after 'await', as in development React runs setup and cleanup one extra time before the actual setup in Strict Mode. - if(scanner.isContextDestroyed()) return; - scanner.onFrameRead = results => { - for (let result of results) { - console.log(result.barcodeText); - } - }; - scanner.onUniqueRead = (txt, result) => { - alert(txt); - } - await scanner.open(); - } catch (ex: any) { - if (ex.message.indexOf("network connection error")) { - let customMsg = "Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license."; - console.log(customMsg); - alert(customMsg); - } - throw ex; - } - } - async componentWillUnmount() { - if (this.pScanner) { - (await this.pScanner).destroyContext(); - console.log('BarcodeScanner Component Unmount'); - } - } - shouldComponentUpdate() { - // Never update UI after mount, dbrjs sdk use native way to bind event, update will remove it. - return false; - } - render() { - return ( -
    - - -
    -
    -
    -
    -
    - - -
    -
    - - - -
    -
    - ); - } -} - -export default VideoDecode; -``` - -> Note: -> * The html code in `render()` and the following code builds the UI for the library. -> -> ```jsx -> await scanner.setUIElement(this.elRef.current!); -> ``` -> -> * To release resources timely, the `BarcodeScanner` instance is destroyed with the component in the callback `componentWillUnmount`. -> * The component should never update (check the code for `shouldComponentUpdate()`) so that events bound to the UI stay valid. - -* Create 'VideoDecode.module.css' under '/styles/' and define the style of the component in it - -```css -.component-barcode-scanner{width:100%;height:100%;/* min-width:640px; */min-height:480px;background:#eee;position:relative;resize:both;} -.dce-bg-loading{display:none;animation:1s linear infinite dce-rotate;width:40%;height:40%;position:absolute;margin:auto;left:0;top:0;right:0;bottom:0;fill:#aaa;} -.dce-bg-camera{display:none;width:40%;height:40%;position:absolute;margin:auto;left:0;top:0;right:0;bottom:0;fill:#aaa;} -.dce-video-container{position:absolute;left:0;top:0;width:100%;height:100%;} -.dce-scanarea{width:100%;height:100%;position:absolute;left:0;top:0;} -.dce-scanlight{display:none;width:100%;height:3%;position:absolute;animation:3s infinite dce-scanlight;border-radius:50%;box-shadow:0px 0px 2vw 1px #00e5ff;background:#fff;} -.div-select-container{position:absolute;left:0;top:0;} -.dce-sel-camera{display:block;} -.dce-sel-resolution{display:block;margin-top:5px;} -.dbr-msg-poweredby{position:absolute;left:50%;bottom:10%;transform:translateX(-50%);} -.dbr-msg-poweredby svg {height:max(3vmin,17px);fill:#FFFFFF;} -@keyframes dce-rotate{from{transform:rotate(0turn);}to{transform:rotate(1turn);}} -@keyframes dce-scanlight{from{top:0;}to{top:97%;}} -``` - -### Edit the `ImgDecode` component - -* In ImgDecode.tsx, add code for initializing and destroying the `BarcodeReader` instance. The `ImgDecode` component uses `BarcodeReader` class of the library to help decode barcodes in an image. - -```tsx -import React, { ChangeEvent, Component } from 'react' -import { BarcodeReader } from "dynamsoft-javascript-barcode"; -import styles from '@/styles/ImgDecode.module.css' - -export default class ImgDecode extends Component { - pReader: Promise = BarcodeReader.createInstance(); - - decodeImg = async (e: ChangeEvent) => { - try { - const reader = await this.pReader; - let results = await reader.decode(e.target.files![0]); - for (let result of results) { - alert(result.barcodeText); - } - if (!results.length) { alert('No barcode found'); } - } catch (ex: any) { - if (ex.message.indexOf("network connection error")) { - let customMsg = "Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license."; - console.log(customMsg); - alert(customMsg); - } - throw ex; - } - e.target.value = ''; - } - - async componentWillUnmount() { - if (this.pReader) { - (await this.pReader).destroyContext(); - console.log('ImgDecode Component Unmount'); - } - } - - render() { - return ( -
    - ) - } -} -``` - -* Create 'ImgDecode.module.css' under '/styles/' and define the style of the component in it - -```css -.ImgDecode { - display: flex; - justify-content: center; - align-items: center; - border: 1px solid black -} -``` - -### Edit the HelloWorld component - -* Add `VideoDecode` and `ImgDecode` components in HelloWorld.tsx - -```tsx -import React from 'react'; -import VideoDecode from './VideoDecode'; -import ImgDecode from './ImgDecode'; -import "../dbr"; // import side effects. The license, engineResourcePath, so on. -import { BarcodeReader } from "dynamsoft-javascript-barcode"; -import styles from '@/styles/HelloWorld.module.css' - -interface isState { - bShowScanner: boolean, - bShowImgDecode: boolean -} - -class HelloWorld extends React.Component { - state = { - bShowScanner: true, - bShowImgDecode: false - }; - - async componentDidMount() { - try { - await BarcodeReader.loadWasm(); - } catch (ex: any) { - if (ex.message.indexOf("network connection error")) { - let customMsg = "Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license."; - console.log(customMsg); - alert(customMsg); - } - throw ex; - } - } - - showScanner = () => { - this.setState({ - bShowScanner: true, - bShowImgDecode: false - }); - } - - showImgDecode = () => { - this.setState({ - bShowScanner: false, - bShowImgDecode: true - }); - } - - render() { - return ( -
    -

    Hello World for Next.js

    -
    - - -
    -
    - {this.state.bShowScanner ? () : ""} - {this.state.bShowImgDecode ? () : ""} -
    -
    - ); - } -} -export default HelloWorld; -``` - -* Create 'HelloWorld.module.css' under '/styles/' and define the style of the component in it - -```css -.helloWorld { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - color: #455A64; -} - -.header { - font-size: 1.5em; -} - -.button { - font-size: 1.5rem; - margin: 1.5vh 0; - border: 1px solid black; - background-color: white; - color: black; -} - -.container { - margin: 2vmin auto; - width: 100%; -} -``` - -### Add the HelloWorld component to /pages/index.tsx - -In index.tsx, import the `HelloWorld` component: - -```jsx -import HelloWorld from '../components/HelloWorld' -``` - -Change the <main> tag like this: - -```jsx -
    -
    - -
    -
    -``` - -* Define the style of the "App" element in styles/Home.module.css - -```css -.UIElement { - margin: 2vmin auto; - text-align: center; - font-size: medium; - width: 80vw; -} -``` - -* Try running the project. - -```cmd -npm run dev -``` - -If you have followed all the steps correctly, you should now have a functioning page that allows you to scan barcodes from a webcam or a built-in camera. Additionally, if you want to decode a local image, you can click the `Image Decode` button and select the image you want to decode. Any barcodes that are detected will be displayed in a dialog. - -## Project Setup - -```sh -npm install -``` - -### Compile and Hot-Reload for Development - -```sh -npm run dev -``` - -### Type-Check, Compile and Minify for Production - -```sh -npm run build -``` \ No newline at end of file diff --git a/programming-old/javascript/samples-demos/helloworld-nuxtjs.md b/programming-old/javascript/samples-demos/helloworld-nuxtjs.md deleted file mode 100644 index 775653ac..00000000 --- a/programming-old/javascript/samples-demos/helloworld-nuxtjs.md +++ /dev/null @@ -1,485 +0,0 @@ ---- -layout: default-layout -title: Nuxt Integration Sample - Dynamsoft Barcode Reader JavaScript Edition -description: Dynamsoft Barcode Reader JavaScript Edition - Nuxt Integration -keywords: javascript, js, barcode, nuxt -noTitleIndex: true -breadcrumbText: Nuxt -permalink: /programming/javascript/samples-demos/helloworld-nuxtjs.html ---- - -# JavaScript Hello World Sample - NuxtJS - -[Nuxt](https://nuxtjs.org/) is a higher-level framework that builds on top of [Vue](https://vuejs.org/). Check out the following guide on how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") into a Nuxt application. Note that in this sample we will use `TypeScript`. - -## Official Sample - -* Hello World in Nuxt - Source Code - -## Preparation - -Make sure you have [node](https://nodejs.org/) installed. `node 14.21.3` and `nuxt 3.2.3` are used in this article. - -## Create the sample project - -### Create a Bootstrapped Nuxt Application - -```cmd -npx nuxi@latest init read-video-nuxtjs -``` - -You will be asked to configure quite a few things for the application during the creation. In our example, we chose the default one in every step. - -### **CD** to the root directory of the application and install the dependencies - -```cmd -cd read-video-nuxtjs -npm install dynamsoft-javascript-barcode -``` - -## Start to implement - -### Add a file "dbr.ts" at the root of the app to configure the library - -```typescript -import { BarcodeReader } from 'dynamsoft-javascript-barcode'; -BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9'; -BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.42/dist/"; -``` - -> Note: -> -> * `license` specify a license key to use the library. You can visit [https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js](https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js) to get your own trial license good for 30 days. -> * `engineResourcePath` tells the library where to get the necessary resources at runtime. - -### Create a directory "components" and create the following files inside it to represent three components - -* VideoDecode.vue -* ImgDecode.vue -* HelloWorld.vue - -### Edit the `VideoDecode` component - -* Add a file `VideoDecode.vue` under "/components/" as the `VideoDecode` component. The `VideoDecode` component uses `BarcodeScanner` class of the library to help decode barcodes via camera. - -* In `VideoDecode.vue`, add code for initializing and destroying the `BarcodeScanner` instance. - -```vue - - - - - -``` - -> Note: -> -> * The element with class name "component-barcode-scanner" is used to build the UI for the library in this line -> -> ```typescript -> await scanner.setUIElement(elRefs.value); -> ``` -> -> * To release resources timely, the `BarcodeScanner` instance is destroyed with the component in the callback `onBeforeUnmount` . - -### Edit the `ImgDecode` component - -* Add a file `ImgDecode.vue` under "/components/" as the `ImgDecode` component. The `ImgDecode` component uses `BarcodeReader` class of the library to help decode barcodes in an image. - -* In `ImgDecode.vue`, add code for initializing and destroying the `BarcodeReader` instance. - -```vue - - - - - -``` - -### Add `VideoDecode` and `ImgDecode` components in `HelloWorld.vue` - -```vue - - - - - -``` - -> NOTE : -> -> * The method `loadWasm()` initializes the library in the background. - -### Add the `HelloWorld` component to `app.vue` - -Edit the file `App.vue` to be like this - -```vue - -``` - -* Try running the project. - -```cmd -npm run dev -``` - -If you have followed all the steps correctly, you should now have a functioning page that allows you to scan barcodes from a webcam or a built-in camera. Additionally, if you want to decode a local image, you can click the `Image Decode` button and select the image you want to decode. Any barcodes that are detected will be displayed in a dialog. - -## Project Setup - -```sh -npm install -``` - -### Compile and Hot-Reload for Development - -```sh -npm run dev -``` - -### Type-Check, Compile and Minify for Production - -```sh -npm run build -``` \ No newline at end of file diff --git a/programming-old/javascript/samples-demos/helloworld-pwa.md b/programming-old/javascript/samples-demos/helloworld-pwa.md deleted file mode 100644 index 6ebaf897..00000000 --- a/programming-old/javascript/samples-demos/helloworld-pwa.md +++ /dev/null @@ -1,213 +0,0 @@ ---- -layout: default-layout -title: PWA Sample - Dynamsoft Barcode Reader JavaScript Edition -description: Dynamsoft Barcode Reader JavaScript Edition - PWA -keywords: javascript, js, barcode, pwa -noTitleIndex: true -breadcrumbText: PWA -permalink: /programming/javascript/samples-demos/helloworld-pwa.html ---- - -# JavaScript Hello World Sample - PWA - -[PWA](https://web.dev/progressive-web-apps/) is short for Progressive Web Apps which stand for web applications that have been designed to behave like platform-specific (native) applications. Check out the following on how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") into a PWA application. - -## Official Sample - -* Hello World in PWA - Source Code - -## Preparation - -We will try to turn our most basic hello world sample into a PWA. - -First, create a file with the name "helloworld-pwa.html" and fill it with the following code: - -```html - - - - - - - Dynamsoft Barcode Reader PWA Sample - Hello World (Decoding via Camera) - - - -

    Hello World for PWA

    - Loading... - - - - - -``` - -Next, set up a secure environment (HTTPs) to run the page "helloworld-pwa.html". This is required because PWAs only run in secure environments. - -In our case, we use IIS to set up a secure site at "https://localhost" and the page is put at the root so that it can be accessed at "https://localhost/helloworld-pwa.html". - -## Make the app progressive - -### Register a service worker for offline support - -As the basis for PWAs, Service Workers are a virtual proxy between the browser and the network. A service worker can serve content offline, handle notifications and perform heavy calculations, etc. all on a separate thread. - -To use a service worker, we first need to register it. In the helloworld-pwa.html file, add the following at the end of the script: - -```javascript -if ('serviceWorker' in navigator) { - navigator.serviceWorker.register('./service-worker.js'); -}; -``` - -Create the service-worker.js file with the following content: - -```javascript -// Files to cache -const cacheName = 'helloworld-pwa'; -const appShellFiles = [ - './helloworld-pwa.html', -]; - -// Installing Service Worker -self.addEventListener('install', (e) => { - console.log('[Service Worker] Install'); - e.waitUntil((async () => { - const cache = await caches.open(cacheName); - console.log('[Service Worker] Caching all: app shell and content'); - await cache.addAll(appShellFiles); - })()); -}); - -self.addEventListener('fetch', (e) => { - e.respondWith((async () => { - const r = await caches.match(e.request); - console.log(`[Service Worker] Fetching resource: ${e.request.url}`); - if (r) { return r; } - const response = await fetch(e.request); - const cache = await caches.open(cacheName); - console.log(`[Service Worker] Caching new resource: ${e.request.url}`); - if (e.request.method !== "POST") - cache.put(e.request, response.clone()); - return response; - })()); -}); -``` - -With the above code, the application can now work offline because the service worker will cache the page helloworld-pwa.html and its related resources. - -For more information, refer to [Making PWAs work offline with Service workers](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Offline_Service_workers). - -> NOTE -> -> Since the files are being cached, changes we make in later steps may not be reflected. Therefore, don't forget to clear the cache after a change is made. To do so, you can run the following in the browser console. -> -> ```javascript -> const cacheName = 'helloworld-pwa'; -> const cache = await caches.delete(cacheName); -> ``` - -### Use a web manifest file to make the application installable - -A web manifest file contains a list of information about a website in a JSON format. This information is used to present the web app correctly for installation on a device. - -In our example, we first create a file "helloworld-pwa.webmanifest" with the following content: - -```json -{ - "name": "Dynamsoft Barcode Reader Progressive Web App", - "short_name": "DBR-PWA", - "description": "Progressive Web App that reads barcodes from a video input with Dynamsoft Barcode Reader.", - "start_url": "./helloworld-pwa.html", - "scope": ".", - "display": "standalone", - "theme_color": "#B12A34", - "background_color": "#B12A34", - "icons": [ - { - "src": "./dynamsoft-512x512.png", - "sizes": "512x512", - "type": "image/png" - }, - { - "src": "./dynamsoft-192x192.png", - "sizes": "192x192", - "type": "image/png" - } - ] -} -``` - -> The icon files can be found in the github repository. - -Then we include the file in the <head> block of the helloworld-pwa.html file: - -```html - -``` - -For compatibility on safari, we need add some `meta` in ``: - -```html - - - - - - - -``` - -Now, if you open the application again in your browser, you will notice an install icon appear on the right side of the address bar. When you click on it, a pop-up will appear asking if you want to install the app. - -Once installed, you can use it like a native app. - -For offline use, you need to cache more files. - -service-worker.js -```javascript -const dbrVersion = "9.6.11"; -const dbrCdn = `https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@${dbrVersion}/dist/`; - -const appShellFiles = [ - './helloworld-pwa.html', - './dynamsoft-192x192.png', - './dynamsoft-512x512.png', - './helloworld-pwa.json', - `${dbrCdn}dbr.js`, - `${dbrCdn}dbr-${dbrVersion}.full.wasm`, - `${dbrCdn}dbr-${dbrVersion}.full.wasm.js`, - `${dbrCdn}dbr-${dbrVersion}.browser.worker.js`, -]; -``` - -## Summary - -In this article we took a look at how you can turn a simple barcode reading page into a PWA that is installable, re-engageable and capable of working offline. To learn more about Progressive web apps, you can click [here](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps). \ No newline at end of file diff --git a/programming-old/javascript/samples-demos/helloworld-reactjs.md b/programming-old/javascript/samples-demos/helloworld-reactjs.md deleted file mode 100644 index 0c3504e9..00000000 --- a/programming-old/javascript/samples-demos/helloworld-reactjs.md +++ /dev/null @@ -1,377 +0,0 @@ ---- -layout: default-layout -title: ReactJS Integration Sample - Dynamsoft Barcode Reader JavaScript Edition -description: Dynamsoft Barcode Reader JavaScript Edition - ReactJS Integration -keywords: javascript, js, barcode, reactjs -noTitleIndex: true -breadcrumbText: React -permalink: /programming/javascript/samples-demos/helloworld-reactjs.html ---- - -# JavaScript Hello World Sample - React - -[React](https://reactjs.org/) is a JavaScript library meant explicitly for creating interactive UIs. Follow this guide to learn how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") into a React application. Note that in this sample we will use `TypeScript` and define components as classes. Also, there is another sample `read-video-react-hooks` showing using `Hooks` in React. - -## Official Sample - -* Hello World in React - Source Code - -## Preparation - -Make sure you have [node](https://nodejs.org/) installed. `node 14.21.3` and `react 18.2.0` used in the example below. - -## Create the sample project - -### Create a Bootstrapped Raw React Application with TypeScript - -```cmd -npx create-react-app read-video-react --template typescript -``` - -### **CD** to the root directory of the application and install the library - -```cmd -cd read-video-react -npm install dynamsoft-javascript-barcode -``` - -## Start to implement - -### Add a file "dbr.ts" under "/src/" to configure the library - -```typescript -import { BarcodeReader } from 'dynamsoft-javascript-barcode'; -BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9'; -BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.42/dist/"; -``` - -> Note: -> -> * `license` specify a license key to use the library. You can visit [https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js](https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js) to get your own trial license good for 30 days. -> * `engineResourcePath` tells the library where to get the necessary resources at runtime. - -### Build directory structure - -* Create a directory "components" under "/src/", and then create another three directories "HelloWorld", "VideoDecode" and "ImgDecode" under "/src/components/". - -### Create and edit the `VideoDecode` component - -* Create `VideoDecode.tsx` and `VideoDecode.css` under "/src/components/VideoDecode/". The `VideoDecode` component uses `BarcodeScanner` class of the library to decode barcodes via camera. - -* In `VideoDecode.tsx`, add code for initializing and destroying the `BarcodeScanner` instance. - -```tsx -import { BarcodeScanner } from "dynamsoft-javascript-barcode"; -import React from 'react'; -import './VideoDecode.css' - -class VideoDecode extends React.Component { - pScanner: Promise|null = null; - elRef: React.RefObject = React.createRef(); - async componentDidMount() { - try { - const scanner = await (this.pScanner = BarcodeScanner.createInstance()); - // Should judge if scanner is destroyed after 'await', as in development React runs setup and cleanup one extra time before the actual setup in Strict Mode. - if(scanner.isContextDestroyed()) return; - await scanner.setUIElement(this.elRef.current!); - // Should judge if scanner is destroyed after 'await', as in development React runs setup and cleanup one extra time before the actual setup in Strict Mode. - if(scanner.isContextDestroyed()) return; - scanner.onFrameRead = results => { - for (let result of results) { - console.log(result.barcodeText); - } - }; - scanner.onUniqueRead = (txt, result) => { - alert(txt); - } - await scanner.open(); - } catch (ex: any) { - if (ex.message.indexOf("network connection error")) { - let customMsg = "Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license."; - console.log(customMsg); - alert(customMsg); - } - throw ex; - } - } - async componentWillUnmount() { - if (this.pScanner) { - (await this.pScanner).destroyContext(); - console.log('BarcodeScanner Component Unmount'); - } - } - shouldComponentUpdate() { - // Never update UI after mount, dbrjs sdk use native way to bind event, update will remove it. - return false; - } - render() { - return ( -
    - - -
    -
    -
    -
    -
    - - -
    -
    - - - -
    -
    - ); - } -} - -export default VideoDecode; -``` - -> Note: -> -> * The html code in `render()` and the following code builds the UI for the library. -> -> ```jsx -> await scanner.setUIElement(this.elRef.current!); -> ``` -> -> * The component should never update (check the code for `shouldComponentUpdate()`) so that events bound to the UI stay valid. - -* Define the style of the element in `VideoDecode.css` - -```css -.component-barcode-scanner{width:100%;height:100%;/* min-width:640px; */min-height:480px;background:#eee;position:relative;resize:both;} -.dce-bg-loading{display:none;animation:1s linear infinite dce-rotate;width:40%;height:40%;position:absolute;margin:auto;left:0;top:0;right:0;bottom:0;fill:#aaa;} -.dce-bg-camera{display:none;width:40%;height:40%;position:absolute;margin:auto;left:0;top:0;right:0;bottom:0;fill:#aaa;} -.dce-video-container{position:absolute;left:0;top:0;width:100%;height:100%;} -.dce-scanarea{width:100%;height:100%;position:absolute;left:0;top:0;} -.dce-scanlight{display:none;width:100%;height:3%;position:absolute;animation:3s infinite dce-scanlight;border-radius:50%;box-shadow:0px 0px 2vw 1px #00e5ff;background:#fff;} -.div-select-container{position:absolute;left:0;top:0;} -.dce-sel-camera{display:block;} -.dce-sel-resolution{display:block;margin-top:5px;} -.dbr-msg-poweredby{position:absolute;left:50%;bottom:10%;transform:translateX(-50%);} -.dbr-msg-poweredby svg {height:max(3vmin,17px);fill:#FFFFFF;} -@keyframes dce-rotate{from{transform:rotate(0turn);}to{transform:rotate(1turn);}} -@keyframes dce-scanlight{from{top:0;}to{top:97%;}} -``` - -### Create and edit the `ImgDecode` component - -* Create `ImgDecode.tsx` and `ImgDecode.css` under "/src/components/ImgDecode/". The `ImgDecode` component uses `BarcodeReader` class of the library to help decode barcodes in an image. - -* In `ImgDecode.tsx`, add code for initializing and destroying the `BarcodeReader` instance. - -```tsx -import React, { ChangeEvent, Component } from 'react' -import { BarcodeReader } from "dynamsoft-javascript-barcode"; -import './ImgDecode.css' - -export default class ImgDecode extends Component { - pReader: Promise = BarcodeReader.createInstance(); - - decodeImg = async (e: ChangeEvent) => { - try { - const reader = await this.pReader; - let results = await reader.decode(e.target.files![0]); - for (let result of results) { - alert(result.barcodeText); - } - if (!results.length) { alert('No barcode found'); } - } catch (ex: any) { - if (ex.message.indexOf("network connection error")) { - let customMsg = "Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license."; - console.log(customMsg); - alert(customMsg); - } - throw ex; - } - e.target.value = ''; - } - - async componentWillUnmount() { - if (this.pReader) { - (await this.pReader).destroyContext(); - console.log('ImgDecode Component Unmount'); - } - } - - render() { - return ( -
    - ) - } -} -``` - -* Define the style of the element in `ImgDecode.css` - -```css -.ImgDecode { - display: flex; - justify-content: center; - align-items: center; - border: 1px solid black -} -``` - -### Create and edit the HelloWorld component - -* Create `HelloWorld.tsx` and `HelloWorld.css` under "/src/components/HelloWorld/". The `HelloWorld` component offers buttons to switch components between `VideoDecode` and `ImgDecode`; - -* Add following code to `HelloWorld.tsx`. - -```tsx -import './HelloWorld.css'; -import reactLogo from '../../logo.svg'; -import "../../dbr"; // import side effects. The license, engineResourcePath, so on. -import { BarcodeReader } from "dynamsoft-javascript-barcode"; -import React from 'react'; -import VideoDecode from '../VideoDecode/VideoDecode'; -import ImgDecode from '../ImgDecode/ImgDecode'; - -interface isState { - bShowScanner: boolean, - bShowImgDecode: boolean -} - -class HelloWorld extends React.Component { - state = { - bShowScanner: true, - bShowImgDecode: false - }; - - async componentDidMount() { - try { - await BarcodeReader.loadWasm(); - } catch (ex: any) { - if (ex.message.indexOf("network connection error")) { - let customMsg = "Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license."; - console.log(customMsg); - alert(customMsg); - } - throw ex; - } - } - - showScanner = () => { - this.setState({ - bShowScanner: true, - bShowImgDecode: false - }); - } - - showImgDecode = () => { - this.setState({ - bShowScanner: false, - bShowImgDecode: true - }); - } - - render() { - return ( -
    -

    Hello World for Reactlogo

    -
    - - -
    -
    - {this.state.bShowScanner ? () : ""} - {this.state.bShowImgDecode ? () : ""} -
    -
    - ); - } -} -export default HelloWorld; -``` - -> NOTE : -> -> * The method `loadWasm()` initializes the library in the background. - -* Define the style of the element in `HelloWorld.css` - -```css -.helloWorld { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - color: #455A64; -} - -h1 { - font-size: 1.5em; -} - -button { - font-size: 1.5rem; - margin: 1.5vh 0; - border: 1px solid black; - background-color: white; - color: black; -} - -.container { - margin: 2vmin auto; - text-align: center; - font-size: medium; - width: 80vw; -} -``` - -### Add the `HelloWorld` component to `App.tsx` - -Edit the file `App.tsx` to be like this - -```jsx -import React from 'react'; -import './App.css'; -import HelloWorld from './components/HelloWorld/HelloWorld'; - -function App() { - return ( -
    - -
    - ); -} - -export default App; -``` - -* Try running the project. - -```cmd -npm start -``` - -If you have followed all the steps correctly, you should now have a functioning page that allows you to scan barcodes from a webcam or a built-in camera. Additionally, if you want to decode a local image, you can click the `Image Decode` button and select the image you want to decode. Any barcodes that are detected will be displayed in a dialog. - -## Development server - -Runs the app in the development mode.\ -Open "http://localhost:3000" to view it in the browser. - -The page will reload if you make edits.\ -You will also see any lint errors in the console. - -## Build - -Builds the app for production to the `build` folder.\ -It correctly bundles React in production mode and optimizes the build for the best performance. - -The build is minified and the filenames include the hashes.\ -Your app is ready to be deployed! - -See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. - -## Support - -If you have any questions, feel free to contact Dynamsoft support via [email](mailto:support@dynamsoft.com) or live chat via the "Chat" button. \ No newline at end of file diff --git a/programming-old/javascript/samples-demos/helloworld-readFile.md b/programming-old/javascript/samples-demos/helloworld-readFile.md deleted file mode 100644 index 03b86a92..00000000 --- a/programming-old/javascript/samples-demos/helloworld-readFile.md +++ /dev/null @@ -1,95 +0,0 @@ ---- -layout: default-layout -title: Read An Image Sample - Dynamsoft Barcode Reader JavaScript Edition -description: Dynamsoft Barcode Reader JavaScript Edition - Read An Image -keywords: javascript, js, barcode, vanilla, image -noTitleIndex: true -breadcrumbText: Read An Image -permalink: /programming/javascript/samples-demos/helloworld-readFile.html ---- - -# JavaScript Hello World Sample - Read An Image - -In most cases, users of Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") reads barcodes from a video input. In this article, we will discuss an uncommon usage of the library: reading barcodes from existing images. - -## Official Sample - -* Read Barcodes from An Existing Image - Source Code - -## Preparation - -In this article, we'll make use of the library through the `jsDelivr` CDN. Make sure you can access this file "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.42/dist/dbr.js". - -## Create the sample page - -* Create an empty web page and name it "read-an-image.html" with the following code: - -```html - - - - - - - Dynamsoft Barcode Reader Sample - Read an Image - - - - - - - -``` - -* Add reference to the library in the page "head". - -```html - -``` - -* In the page "body", add an input for image selecting and a div for displaying the barcode results. - -```html - -
    -``` - -* Add an event listner for the file input, then add barcode reading code in the callback. - -```javascript -let pReader = null; -Dynamsoft.DBR.BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9'; -document.getElementById('input-file').addEventListener('change', async function() { - try { - let resDIV = document.getElementById('results'); - let reader = await (pReader = pReader || Dynamsoft.DBR.BarcodeReader.createInstance()); - for (let i = 0; i < this.files.length; ++i) { - // Actually there will only be one file here (no 'multiple' attribute) - let file = this.files[i]; - // Decode the file - let results = await reader.decode(file); - if (results.length === 0) { - resDIV.innerHTML = "No Barcode Found!"; - return; - } - var info = ""; - for (let result of results) { - const format = result.barcodeFormat ? result.barcodeFormatString : result.barcodeFormatString_2; - info += "

    " + format + ": " + result.barcodeText + "

    "; - } - resDIV.innerHTML = info; - } - } catch (ex) { - alert(ex.message); - } -}); -``` - -> NOTE -> -> * An instance of the library is created when an image is selected for the first time. -> * The method `decode()` takes the file as the input, reads it and returns the results. - -In your application, the input may not be a file, the method `decode()` can handle the following types of input: `Blob`, `Buffer`, `ArrayBuffer`, `Uint8Array`, `Uint8ClampedArray`, `HTMLImageElement`, `HTMLCanvasElement`, `HTMLVideoElement`, `string`. - - diff --git a/programming-old/javascript/samples-demos/helloworld-requireJS.md b/programming-old/javascript/samples-demos/helloworld-requireJS.md deleted file mode 100644 index 5b3caf67..00000000 --- a/programming-old/javascript/samples-demos/helloworld-requireJS.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -layout: default-layout -title: RequireJS Sample - Dynamsoft Barcode Reader JavaScript Edition -description: Dynamsoft Barcode Reader JavaScript Edition using RequireJS -keywords: javascript, js, barcode, vanilla, requirejs -noTitleIndex: true -breadcrumbText: RequireJS -permalink: /programming/javascript/samples-demos/helloworld-requireJS.html ---- - -# JavaScript Hello World Sample - RequireJS - -[RequireJS](https://requirejs.org/) is a JavaScript file and module loader. In this article, we will take a look at how to use the Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") with RequireJS as shown in the code: - -* Read Barcodes from Camera - RequireJS - Source Code - -## Create a simple page for barcode reading with RequireJS - -### Include RequireJS on the page - -The first step is to load "require.js" on the page: - -```html - -``` - -### Use RequireJS to load the library - -Once RequireJS is enalbed, we can use the API `requirejs` to load the library from a CDN: - -```javascript -requirejs(['https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.42/dist/dbr.js'], - function({ - BarcodeScanner - }) {}); -``` - -As shown above, the `requirejs` method loads the library and imports two key objects to be used in the context. We use `DBR` to set up the library and then use `BarcodeScanner` to read barcodes from a video input. - -```javascript -BarcodeScanner.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9'; -BarcodeScanner.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.42/dist/"; -let pScanner = null; -document.getElementById('readBarcode').onclick = async function() { - try { - let scanner = await (pScanner = pScanner || BarcodeScanner.createInstance()); - scanner.onFrameRead = results => { - console.log("Barcodes on one frame:"); - for (let result of results) { - const format = result.barcodeFormat ? result.barcodeFormatString : result.barcodeFormatString_2; - console.log(format + ": " + result.barcodeText); - } - }; - scanner.onUniqueRead = (txt, result) => { - alert(txt); - console.log("Unique Code Found: " + result); - } - await scanner.show(); - } catch (ex) { - alert(ex.message); - throw ex; - } -}; -``` diff --git a/programming-old/javascript/samples-demos/helloworld-vuejs.md b/programming-old/javascript/samples-demos/helloworld-vuejs.md deleted file mode 100644 index 13237528..00000000 --- a/programming-old/javascript/samples-demos/helloworld-vuejs.md +++ /dev/null @@ -1,505 +0,0 @@ ---- -layout: default-layout -title: Vue 2 Integration Sample - Dynamsoft Barcode Reader JavaScript Edition -description: Dynamsoft Barcode Reader JavaScript Edition - Vue 2 Integration -keywords: javascript, js, barcode, vue2 -noTitleIndex: true -breadcrumbText: Vue 2 -permalink: /programming/javascript/samples-demos/helloworld-vuejs.html ---- - -# JavaScript Hello World Sample - Vue - -[Vue](https://vuejs.org/) is a progressive framework for building user interfaces. Check out the following guide on how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") into a Vue 2 application. - -## Official Sample - -* Hello World in Vue - Source Code - -## Preparation - -Make sure you have [node](https://nodejs.org/) installed. `node 14.21.3` and `vue 2.7.7` are used in the example below. - -## Create the sample project - -### Create a Bootstrapped Raw Vue Application - -```cmd -npm create vue@2 -``` - -### **CD** to the root directory of the application and install the dependencies - -```cmd -npm install -npm install dynamsoft-javascript-barcode -``` - -## Start to implement - -### Add a file "dbr.js" under "/src/" to configure the library - -```typescript -import { BarcodeReader } from 'dynamsoft-javascript-barcode'; -BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9'; -BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.42/dist/"; -``` - -> Note: -> -> * `license` specify a license key to use the library. You can visit [https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js](https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js) to get your own trial license good for 30 days. -> * `engineResourcePath` tells the library where to get the necessary resources at runtime. - -### Create and edit the `VideoDecode` component - -* Add a file `VideoDecode.vue` under "/components/" as the `VideoDecode` component. The `VideoDecode` component uses `BarcodeScanner` class of the library to help decode barcodes via camera. - -* In `VideoDecode.vue`, add code for initializing and destroying the `BarcodeScanner` instance. - -```vue - - - - - - -``` - -> Note: -> -> * The element with class name "component-barcode-scanner" is used to build the UI for the library in this line -> -> ```typescript -> await scanner.setUIElement(this.$el); -> ``` -> -> * To release resources timely, the `BarcodeScanner` instance is destroyed with the component in the callback `beforeDestroy` . - -### Create and edit the `ImgDecode` component - -* Add a file `ImgDecode.vue` under "/components/" as the `ImgDecode` component. The `ImgDecode` component uses `BarcodeReader` class of the library to help decode barcodes in an image. - -* In `ImgDecode.vue`, add code for initializing and destroying the `BarcodeReader` instance. - -```vue - - - - - -``` - -### Add `VideoDecode` and `ImgDecode` components in `HelloWorld.vue` - -```vue - - - - - - -``` - -> NOTE : -> -> * The method `loadWasm()` initializes the library in the background. - -### Add the `HelloWorld` component to `App.vue` - -Edit the file `App.vue` to be like this - -```vue - - - - - -``` - -* Try running the project. - -```cmd -npm run dev -``` - -If you followed all the steps correctly, you will have a working page that turns one of the cameras hooked to or built in your computer or mobile device into a barcode scanner. Also, if you want to decode a local image, just click the `Image Decode` button and select the image you want to decode. Once barcodes are found, the results will show in a dialog. - -## Project setup - -```sh -npm install -``` - -### Compile and Hot-Reload for Development - -```sh -npm run dev -``` - -### Compile and Minify for Production - -```sh -npm run build -``` \ No newline at end of file diff --git a/programming-old/javascript/samples-demos/helloworld-vuejsv3.md b/programming-old/javascript/samples-demos/helloworld-vuejsv3.md deleted file mode 100644 index 376eb046..00000000 --- a/programming-old/javascript/samples-demos/helloworld-vuejsv3.md +++ /dev/null @@ -1,483 +0,0 @@ ---- -layout: default-layout -title: Vue 3 Integration Sample - Dynamsoft Barcode Reader JavaScript Edition -description: Dynamsoft Barcode Reader JavaScript Edition - Vue 3 Integration -keywords: javascript, js, barcode, vue3 -noTitleIndex: true -breadcrumbText: Vue 3 -permalink: /programming/javascript/samples-demos/helloworld-vuejsv3.html ---- - -# JavaScript Hello World Sample - Vue 3 - -[Vue 3](https://v3.vuejs.org/) is version 3 of Vue which is a progressive framework for building user interfaces. Check out the following guide on how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") into a Vue 3 application. Note that in this sample we will use `TypeScript`. - -## Official Sample - -* Hello World in Vue 3 - Source Code - -## Preparation - -Make sure you have [node](https://nodejs.org/) installed. `node 14.21.3` and `vue 3.2.47` are used in the example below. - -## Create the sample project - -### Create a Bootstrapped Raw Vue Application - -```cmd -npm create vue@3 -# When asked 'Add TypeScript?', select 'Yes'. -``` - -### **CD** to the root directory of the application and install the dependencies - -```cmd -npm install -npm install dynamsoft-javascript-barcode -``` - -## Start to implement - -### Add a file "dbr.ts" under "/src/" to configure the library - -```typescript -import { BarcodeReader } from 'dynamsoft-javascript-barcode'; -BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9'; -BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.42/dist/"; -``` - -> Note: -> -> * `license` specify a license key to use the library. You can visit [https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js](https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js) to get your own trial license good for 30 days. -> * `engineResourcePath` tells the library where to get the necessary resources at runtime. - -### Create and edit the `VideoDecode` component - -* Add a file `VideoDecode.vue` under "/components/" as the `VideoDecode` component. The `VideoDecode` component uses `BarcodeScanner` class of the library to help decode barcodes via camera. - -* In `VideoDecode.vue`, add code for initializing and destroying the `BarcodeScanner` instance. - -```vue - - - - - -``` - -> Note: -> -> * The element with class name "component-barcode-scanner" is used to build the UI for the library in this line -> -> ```typescript -> await scanner.setUIElement(elRefs.value); -> ``` -> -> * To release resources timely, the `BarcodeScanner` instance is destroyed with the component in the callback `onBeforeUnmount` . - -### Create and edit the `ImgDecode` component - -* Add a file `ImgDecode.vue` under "/components/" as the `ImgDecode` component. The `ImgDecode` component uses `BarcodeReader` class of the library to help decode barcodes in an image. - -* In `ImgDecode.vue`, add code for initializing and destroying the `BarcodeReader` instance. - -```vue - - - - - -``` - -### Add `VideoDecode` and `ImgDecode` components in `HelloWorld.vue` - -```vue - - - - - -``` - -> NOTE : -> -> * The method `loadWasm()` initializes the library in the background. - -### Add the `HelloWorld` component to `App.vue` - -Edit the file `App.vue` to be like this - -```vue - - - - - -``` - -* Try running the project. - -```cmd -npm run dev -``` - -If you have followed all the steps correctly, you should now have a functioning page that allows you to scan barcodes from a webcam or a built-in camera. Additionally, if you want to decode a local image, you can click the `Image Decode` button and select the image you want to decode. Any barcodes that are detected will be displayed in a dialog. - -## Project Setup - -```sh -npm install -``` - -### Compile and Hot-Reload for Development - -```sh -npm run dev -``` - -### Type-Check, Compile and Minify for Production - -```sh -npm run build -``` \ No newline at end of file diff --git a/programming-old/javascript/samples-demos/index-v9.6.42.md b/programming-old/javascript/samples-demos/index-v9.6.42.md deleted file mode 100644 index adcc43c5..00000000 --- a/programming-old/javascript/samples-demos/index-v9.6.42.md +++ /dev/null @@ -1,212 +0,0 @@ ---- -layout: default-layout -title: Samples and Demos Index - Dynamsoft Barcode Reader JavaScript Edition -description: Refer these samples and demos for different frameworks such as Angular, React, NuxtJS, etc, of Dynamsoft Barcode Reader JavaScript Edition. -keywords: javascript, js -breadcrumbText: Samples and Demos -noTitleIndex: true -needAutoGenerateSidebar: false -permalink: /programming/javascript/samples-demos/index-v9.6.42.html ---- - -
    - -
    -

    Demo and Samples - DBR JavaScript Edition

    -
    -
    -
    Hello World
    -
    -
    Hello World -
    -
    Hello World in - Angular (Angular logo) -
    -
    - Hello World in - React (React logo) -
    -
    - Hello World in - Vue 2 (Vue logo) -
    -
    - Hello World in - Vue 3 (Vue3 logo) -
    -
    - Hello World in - Next.js () -
    -
    - Hello World in - NuxtJS () -
    -
    - Hello World in - Electron (Electron logo) -
    -
    Hello World in PWA -
    - -
    -
    Customize Camera UI
    -
    -
    Use the Default Camera - UI
    -
    Hide - Built-in - Controllers
    -
    Use - External - Controllers
    -
    Enlarge - the - Video Stream
    -
    -
    Parameter Settings
    -
    -
    Formats and - Count
    -
    Localization - and - Binarization
    -
    Deblur Modes and Scale-up Modes
    -
    Deformation Resisting and Barcode Complementing
    -
    Define or Detect the Region of Interest
    -
    -
    Use Case
    -
    -
    Read Video and - Fill a - Form
    -
    Read a - Driver's License
    -
    - -
    Others
    -
    -
    Collect - Images for Debugging -
    -
    -
    -
    -
    Official online Demo
    -
    - -
    - diff --git a/programming-old/javascript/samples-demos/others-index.md b/programming-old/javascript/samples-demos/others-index.md deleted file mode 100644 index 9ba393fd..00000000 --- a/programming-old/javascript/samples-demos/others-index.md +++ /dev/null @@ -1,94 +0,0 @@ ---- -layout: default-layout -title: Other Samples Index - Dynamsoft Barcode Reader JavaScript Edition -description: This is the main page of Dynamsoft Barcode Reader JavaScript SDK. -keywords: javascript, js -noTitleIndex: true -breadcrumbText: JavaScript -needAutoGenerateSidebar: false -permalink: /programming/javascript/samples-demos/others-index.html ---- - -
    - -
    -

    Other Samples - DBR JavaScript Edition

    -
    -
    -
    Collect - Images for Debugging -
    -
    -
    - diff --git a/programming-old/javascript/samples-demos/parameter-settings.md b/programming-old/javascript/samples-demos/parameter-settings.md deleted file mode 100644 index ac2916d4..00000000 --- a/programming-old/javascript/samples-demos/parameter-settings.md +++ /dev/null @@ -1,162 +0,0 @@ ---- -layout: default-layout -title: Parameter Settings Samples - Dynamsoft Barcode Reader JavaScript Edition -description: Dynamsoft Barcode Reader JavaScript Edition - Parameter Settings -keywords: javascript, js, barcode, vanilla, parameter -noTitleIndex: true -breadcrumbText: Parameter Settings -permalink: /programming/javascript/samples-demos/parameter-settings.html ---- - -# JavaScript Parameter Settings Samples - -Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") is built based on Dynamsoft's algorithm. The algorithm is very flexible and has many configurable parameters. In this article, we'll take a look at how the library makes use of these parameters. - -Please note that most of the styling is common across the samples in this sample set. To improve the readability, we grouped the styling all in one file, settings-css.css. Additionally, the samples also share the same scanner initialization code. For the sake of clarity, the initialization code was also grouped in the same JS file, initScanner.js, and referenced throughout the different samples in this set. - -## Specify the Barcode Types and Number of Barcodes Per Image - -In many scenarios, an application only needs to decode one or a few types of barcodes that are predetermined. In fact, the algorithm can operate more efficiently when it is aware of the number of barcodes expected on an image. The following code snippet demonstrates how to decode two QR codes from an image. - -```javascript -const settings = await scanner.getRuntimeSettings(); -settings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE; -settings.expectedBarcodesCount = 2; -await scanner.updateRuntimeSettings(settings); -``` - -The following official sample showcases the same features. - -* Specify Barcode Types and Count - Source Code - -## Set Localization and Binarization Modes - -Localization and binarization are two essential steps in the barcode reading process. - -* Localization Modes - -Localization modes specify how the algorithm localize a barcode. At present, 8 modes are available: "Connected Blocks", "Statistics", "Lines", "Scan Directly", "Statistics Marks", "Statistics Postal Code", "Center" and "OneD Fast Scan". More information can be found [here](https://www.dynamsoft.com/barcode-reader/parameters/reference/localization-modes.html?ver=latest). A barcode reading session will attempt all of the set modes. The session will end once either the predefined number of barcodes are found or all of the set modes have been completed. The following code shows how to set multiple modes. - -```javascript -const settings = await scanner.getRuntimeSettings(); -settings.localizationModes = [2, 16, 4, 8, 32, 64, 0, 0]; -await scanner.updateRuntimeSettings(settings); -``` - -Note that each mode is represented by a number. - -Read more on [How to use different localization modes](https://www.dynamsoft.com/barcode-reader/parameters/scenario-settings/how-to-set-localization-modes.html). - -* Binarization Modes - -Binarization modes specify how the algorithm binarizes a colored or gray image. Right now, there are only two modes available: "Local Block" and "Threshold". More information can be found [here](https://www.dynamsoft.com/barcode-reader/parameters/reference/binarization-modes.html?ver=latest). - -For each mode, there are a few arguments to fine-tune it for best performance. Read more on [How to configure the binarization parameters](https://www.dynamsoft.com/barcode-reader/parameters/scenario-settings/how-to-set-binarization-modes.html?ver=latest). - -The following official sample demonstrates how to set Localization and Binarization modes. - -* Localization and Binarization - Source Code - -## Set Deblur Modes and Scale-up Modes - -* Deblur Modes - -The barcode reader often needs to handle blurry images, setting the deblur modes will help the algorithm better process them. In the library, there are 7 available modes: "Direct Binarization", "Threshold_Binarization", "Gray_Equalization", "Smoothing", "Morphing", "Deep_Analysis" and "Sharpening". More information can be found [here](https://www.dynamsoft.com/barcode-reader/parameters/reference/deblur-modes.html?ver=latest). A barcode reading session will attempt all of the set modes. The session will end once either the predefined number of barcodes are found or all of the set modes have been completed. The following code shows how to set multiple deblur modes. - -```javascript -const settings = await scanner.getRuntimeSettings(); -settings.deblurModes = [1, 2, 4, 8, 0, 0, 0, 0, 0, 0]; -await scanner.updateRuntimeSettings(settings); -``` - -* Scale-up Modes - -In many cases, the barcodes appear very small on the image and makes it difficult to read. The scale-up modes can be used to enlarge such barcodes before reading them. In the library, there are 2 available modes: "Linear_Interpolation" and "Nearest_Neighbour_Interpolation". More information can be found [here](https://www.dynamsoft.com/barcode-reader/parameters/reference/scale-up-modes.html?ver=latest). - -For each mode, there are a few arguments to fine-tune it for best performance. Read more on [How to read barcodes with small module sizes](https://www.dynamsoft.com/barcode-reader/docs/core/programming/features/read-barcodes-with-small-module-size.html). - -The following official sample demonstrates how to set Deblur modes and Scale-up modes. - -* Deblur Modes and Scale-Up Modes - Source Code - -## Deformation-Resisting Modes and Barcode-Complement Modes - -* Deformation-Resisting Modes - -As the name suggests, deformation-resisting modes deal with deformed barcocdes. Read more on [How to deal with deformed barcodes](https://www.dynamsoft.com/barcode-reader/parameters/scenario-settings/resist-deformation.html?ver=latest). - -For now, there is only one available mode: "General". - -The following code enables deformation resisting. - -```javascript -const settings = await scanner.getRuntimeSettings(); -settings.furtherModes.deformationResistingModes = [2, 0, 0, 0, 0, 0, 0, 0]; -await scanner.updateRuntimeSettings(settings); -``` - -* Barcode-Complement Modes - -QR codes and Data Matrix codes can be picked up even if they are incomplete. Read more on [How to decode incomplete barcodes](https://www.dynamsoft.com/barcode-reader/parameters/scenario-settings/how-to-set-barcode-complememt-modes.html?ver=latest). - -The parameter for this case is called [ `BarcodeComplementMode` ](https://www.dynamsoft.com/barcode-reader/parameters/reference/barcode-complement-modes.html?ver=latest) which has only one available mode at present: "General". - -The following code enables incomplete barcode reading. - -```javascript -const settings = await scanner.getRuntimeSettings(); -settings.furtherModes.deformationResistingModes = [2, 0, 0, 0, 0, 0, 0, 0]; -await scanner.updateRuntimeSettings(settings); -``` - -The following official sample showcases deformation resisting and barcode complementing. - -* Deformation-Resisting Modes and Barcode-Complement Modes - Source Code - -## Define or Detect the Region of Interest - -When reading barcodes from a video input, the barcode normally takes up only a small portion of the video frame. If the barcode always appear around the same spot, we can configure the ROI (Region of Interest) to speed up the barcode reading process. There are two ways to do this. - -* Manually define the ROI - -If the ROI is predetermined in the use case, we can manually set the limit. For example, the following only reads 25% of the central area. - -```javascript -const settings = await scanner.getRuntimeSettings(); -settings.region.regionMeasuredByPercentage = 1; -settings.region.regionLeft = 25; -settings.region.regionTop = 25; -settings.region.regionRight = 75; -settings.region.regionBottom = 75; -await scanner.updateRuntimeSettings(settings); -``` - -* Automatically detect the ROI - -To let the algorithm detect the ROI automatically, we can set the parameter [ `RegionPredetectionModes` ](https://www.dynamsoft.com/barcode-reader/parameters/reference/region-predetection-modes.html?ver=latest) which has four available modes: "General", "General_RGB_Contrast", "General_Gray_Contrast" and "General_HSV_Contrast". - -For each mode, there are a few arguments to fine-tune it for best performance. Read more on [How To Use Region Predetection](https://www.dynamsoft.com/barcode-reader/parameters/scenario-settings/how-to-use-region-predetection.html?ver=latest). - -The following official sample showcases both ways to specify ROI. - -* Define or Detect the Region of Interest - Source Code - -## Dealing with Dense Barcodes - -Some barcodes are designed to hold a lot of information which makes them very dense. To read such barcodes, we need to do two things - -1. Use a high resolution -2. Use the built-in "dense" template - -```javascript -await scanner.setResolution(3840, 2160); -await scanner.updateRuntimeSettings("dense"); -``` - -The following official sample showcases the performance of picking up dense barcodes with specific settings. - -* Dealing with Dense Barcodes - Source Code - -## Support - -If you have any questions, feel free to contact Dynamsoft support via [email](mailto:support@dynamsoft.com) or [live chat](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) via the "Let's Chat" button. \ No newline at end of file diff --git a/programming-old/javascript/samples-demos/ui-customization.md b/programming-old/javascript/samples-demos/ui-customization.md deleted file mode 100644 index f1de0897..00000000 --- a/programming-old/javascript/samples-demos/ui-customization.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -layout: default-layout -title: UI Customization Samples - Dynamsoft Barcode Reader JavaScript Edition -description: Dynamsoft Barcode Reader JavaScript Edition - UI Customization -keywords: javascript, js, barcode, vanilla, ui -noTitleIndex: true -breadcrumbText: UI Customization -permalink: /programming/javascript/samples-demos/ui-customization.html ---- - -# JavaScript UI Customization Samples - -Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") provides a built-in GUI to help developers build an interactive barcode reading interface. - -## Default GUI - -The following official sample demonstrates the default GUI built into the library. - -* Use the Default Camera UI - Source Code - -**GUI Elements** - -If you check the GUI on the demo page, you will find that it consists of the following elements - -* The video element that streams the video from a camera -* A laser beam moving vertically which indicates the working status of the library -* A dropdown box for selecting a camera -* A dropdown box for specifying the resolution for the selected camera -* A close button that closes the GUI when clicked - -There are a few other elements - -* Before the video starts streaming, there is a spinner that indicates the loading process -* When a barcode is found, the barcode is highlighted with an overlay -* If no camera is found on the device or camera access is denied on the page, the GUI will show a camera icon, which, when clicked, allows the user to select a local image or invoke the system camera interface - -## Hide Built-in Controllers - -The default UI of the BarcodeReader class includes several elements that may not match the style of your application. The following code snippet demonstrates how to remove the camera selector, resolution selector, and close button, as well as change the background color: - -```html -
    - -
    -
    -
    -
    -``` - -```javascript -await scanner.setUIElement(document.getElementById('div-ui-container')); -``` - -Official sample: - -* Hide Built-in Controllers - Source Code - -## Use External Controllers - -Based on the previous sample, you can build your own UI elements to control the barcode scanning process. - -For example, the following code adds a camera selector - -```html - -``` - -```javascript -async function updateCameras() { - let cameras = await scanner.getAllCameras(); - let cameraList = document.getElementById('cameraList'); - cameraList.options.length = 0; - for (let camera of cameras) { - let opt = new Option(camera.label, camera.deviceId); - cameraList.options.add(opt); - } -} -document.getElementById('cameraList').onchange = async function() { - try { - await scanner.setCurrentCamera(document.getElementById('cameraList').value); - } catch (ex) { - alert('Play video failed: ' + (ex.message || ex)); - } -}; -``` - -For more related customization, check out the following official sample: - -* Use External Controllers - Source Code - -## Enlarge the Video Stream - -The library is usually used on mobile devices which have small screens. When scanning barcodes with the mobile camera, the video stream will be limited in the video element and may not be clear enough. Ideally, we should use the whole screen to play the video and find barcodes. - -The GUI is pure HTML. Thus modifying the size of the element is easy. The following code expands the element to fill the entire viewport: - -```javascript -document.getElementById('UIElement').style.height = '100vh'; -document.getElementById('UIElement').style.width = '100vw'; -document.getElementById('UIElement').style.position = 'absolute'; -``` - -Check out the following example code to see how you can expand the video stream to read a barcode and then restore it to its normal size: - -* Enlarge the Video Stream - Source Code - -## Customize the Default Ui - -Check out the following example code that demonstrates how to create a custom viewer that is vastly different from the default one. You can feel the possibilities of customization: - -* Customize the Default Ui - Source Code - -To learn more about UI customization, please refer to its corresponding [section](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/?ver=latest#customize-the-ui-optional) in the user guide. - -## Support - -If you have any questions, feel free to contact Dynamsoft support via [email](mailto:support@dynamsoft.com) or [live chat](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) via the "Let's Chat" button. diff --git a/programming-old/javascript/samples-demos/use-cases.md b/programming-old/javascript/samples-demos/use-cases.md deleted file mode 100644 index 98b05a77..00000000 --- a/programming-old/javascript/samples-demos/use-cases.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -layout: default-layout -title: Use Case Samples - Dynamsoft Barcode Reader JavaScript Edition -description: Dynamsoft Barcode Reader JavaScript Edition - Use Cases -keywords: javascript, js, barcode, use-case -noTitleIndex: true -breadcrumbText: Use Cases -permalink: /programming/javascript/samples-demos/use-cases.html ---- - -# Use Case Samples -[]() -## Read Barcodes and Fill Form Fields - -It's difficult to type long text on mobile devices, but if that text is encoded in a barcode, we can use the sdk to read the barcode and automatically enter the text. - -The following code shows how to automatically invoke the sdk to read a barcode and fill in an input box. - -```html - -``` - -```javascript -let scanner = null; -Dynamsoft.DBR.BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9'; -(async function () { - document.getElementById("input-to-fill").addEventListener('click', async function () { - try { - scanner = scanner || await Dynamsoft.DBR.BarcodeScanner.createInstance(); - scanner.onUniqueRead = (txt, result) => { - this.value = result.barcodeText; - scanner.hide(); - }; - await scanner.show(); - } catch (ex) { - alert(ex.message); - throw ex; - } - }); -})(); -``` - -The following sample demonstrates how to utilize the SDK to fill out form fields. - -* Read Barcodes and Fill Form Fields - Source Code - -## Read the PDF417 Barcode on the Driver's License - -The PDF417 barcode on an AAMVA compatible driver's license contains a lot of information which is encoded following the DL/ID Card Design Standard. Together with a simple parse function, we can use the SDK to read and extract the information. - -The following official sample shows how to use the sdk to read and extract driver's license information. - -* Read the PDF417 Barcode on the Driver's License - Source Code - -Also see [Driver's License Scanner SDK for Mobile and Web](https://www.dynamsoft.com/use-cases/driver-license/). - -## Read barcodes via camera and highlight results with custom style - -When the SDK picks up a barcode in video stream, it will highlight them with built-in style automatically. But it is also possible to customize the highlight style freely using the method 'convertToClientCoordinates()'. - -The following official sample shows how to hightlight results with custom style. - -* Read barcodes via camera and highlight results with custom style - Source Code - -## Support - -If you have any questions, feel free to [contact Dynamsoft](https://www.dynamsoft.com/contact/). diff --git a/programming-old/javascript/samples-demos/usecase1-formfill.md b/programming-old/javascript/samples-demos/usecase1-formfill.md deleted file mode 100644 index 04639a45..00000000 --- a/programming-old/javascript/samples-demos/usecase1-formfill.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -layout: default-layout -title: Fill a Form - Dynamsoft Barcode Reader JavaScript Edition -description: Fill a Form Use Cases of Dynamsoft Barcode Reader JavaScript Edition -keywords: javascript, js, barcode, use-case -noTitleIndex: true -breadcrumbText: Use Cases -permalink: /programming/javascript/samples-demos/usecase1-formfill.html ---- - -# Read Barcodes and Fill Form Fields - -It's difficult to type long text on mobile devices, but if that text is encoded in a barcode, we can use the sdk to read the barcode and automatically enter the text. - -The following code shows how to automatically invoke the sdk to read a barcode and fill an input box. - -```html - -``` - -```javascript -let scanner = null; -Dynamsoft.DBR.BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9'; -(async function () { - document.getElementById("input-to-fill").addEventListener('click', async function () { - try { - scanner = scanner || await Dynamsoft.DBR.BarcodeScanner.createInstance(); - scanner.onUniqueRead = (txt, result) => { - this.value = result.barcodeText; - scanner.hide(); - }; - await scanner.show(); - } catch (ex) { - alert(ex.message); - throw ex; - } - }); -})(); -``` - -The following official sample shows how to use the sdk to fill multiple fields for a form. - -* Read Barcodes and Fill Form Fields - Source Code diff --git a/programming-old/javascript/samples-demos/usecase2-pdf417DL.md b/programming-old/javascript/samples-demos/usecase2-pdf417DL.md deleted file mode 100644 index 48d5e6de..00000000 --- a/programming-old/javascript/samples-demos/usecase2-pdf417DL.md +++ /dev/null @@ -1,19 +0,0 @@ ---- -layout: default-layout -title: Read Driver License - Dynamsoft Barcode Reader JavaScript Edition -description: Read Driver License Use Cases of Dynamsoft Barcode Reader JavaScript Edition -keywords: javascript, js, barcode, use-case -noTitleIndex: true -breadcrumbText: Use Cases -permalink: /programming/javascript/samples-demos/usecase2-pdf417DL.html ---- - -# Read the PDF417 Barcode on the Driver's License - -The PDF417 barcode on an AAMVA compatible driver's license contains a lot of information which is encoded following the DL/ID Card Design Standard. Together with a simple parse function, we can use the sdk to read and get the information to be used in our workflow. - -The following official sample shows how to use the sdk to read a driver's license and extract its information. - -* Read the PDF417 Barcode on the Driver's License - Source Code - -Also see [Driver's License Scanner SDK for Mobile and Web](https://www.dynamsoft.com/use-cases/driver-license/). diff --git a/programming-old/javascript/samples-demos/usecases-index.md b/programming-old/javascript/samples-demos/usecases-index.md deleted file mode 100644 index 4890fa16..00000000 --- a/programming-old/javascript/samples-demos/usecases-index.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -layout: default-layout -title: UseCases Samples Index - Dynamsoft Barcode Reader JavaScript Edition -description: This is the index page of Dynamsoft Barcode Reader JavaScript SDK Usecase samples. -keywords: javascript, js, use case -noTitleIndex: true -breadcrumbText: JavaScript -needAutoGenerateSidebar: false -permalink: /programming/javascript/samples-demos/usecases-index.html ---- - -
    - -
    -

    Use Case Samples - DBR JavaScript Edition

    -
    -
    -
    Read Video and - Fill a - Form
    -
    Read a - Driver's License
    -
    -
    - diff --git a/programming-old/javascript/user-guide/advanced-customizations.md b/programming-old/javascript/user-guide/advanced-customizations.md deleted file mode 100644 index 1f2ca1fd..00000000 --- a/programming-old/javascript/user-guide/advanced-customizations.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -layout: default-layout -title: Advanced Customizations - Dynamsoft Barcode Reader JavaScript Edition -description: This page shows how to customize advanced features of Dynamsoft Barcode Reader JavaScript SDK. -keywords: user guide, advanced customizations, debug, area, region, javascript, js -needAutoGenerateSidebar: true -permalink: /programming/javascript/user-guide/advanced-customizations.html ---- - -# Advanced Customizations - -## Debugging with Logs - -Include the following in your code to print internal logs in the console. - -```javascript -Dynamsoft.BarcodeReader._onLog = console.log; -``` - -## Read a specific area/region - -To speed up the scanning process, you can choose to scan only a specific area/region. - -```javascript -let settings = await scanner.getRuntimeSettings(); -/* - * The following code shrinks the decoding region by 25% on all sides - */ -settings.region.regionMeasuredByPercentage = 1; -settings.region.regionLeft = 25; -settings.region.regionTop = 25; -settings.region.regionRight = 75; -settings.region.regionBottom = 75; -await scanner.updateRuntimeSettings(settings); -``` -[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/taykq592/) - -## Show found barcodes - -Try the following code to show found barcodes in `input` elements on the page. - -```javascript - - - -let iptIndex = 0; -let scanner = null; -(async()=>{ - scanner = await Dynamsoft.BarcodeScanner.createInstance(); - await scanner.setUIElement(document.getElementById('div-video-container')); - scanner.onFrameRead = results => {console.log(results);}; - scanner.onUnduplicatedRead = (txt)=>{ - document.getElementById('ipt-' + iptIndex).value = txt; - if(3 == ++iptIndex){ - scanner.onUnduplicatedRead = undefined; - // Hide the scanner if you only need to read these three barcodes - scanner.hide(); - } - }; - await scanner.show(); -})(); -``` - -[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tz9ngm2a/) diff --git a/programming-old/javascript/user-guide/advanced-usage-v8.4.0.md b/programming-old/javascript/user-guide/advanced-usage-v8.4.0.md deleted file mode 100644 index fa9b254c..00000000 --- a/programming-old/javascript/user-guide/advanced-usage-v8.4.0.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -layout: default-layout -title: v8.4.0 Advanced Usage - Dynamsoft Barcode Reader JavaScript Edition -description: This page shows how to customize advanced features of Dynamsoft Barcode Reader JavaScript SDK in version 8.4.0. -keywords: user guide, advanced customizations, debug, area, region, javascript, js -needAutoGenerateSidebar: true -permalink: /programming/javascript/user-guide/advanced-usage-v8.4.0.html ---- - -# Advanced Usage - -## Read a specific area/region - -To speed up the scanning process, you can choose to scan only a specific area/region. - -```javascript -let settings = await scanner.getRuntimeSettings(); -/* - * The following code shrinks the decoding region by 25% on all sides - */ -settings.region.regionMeasuredByPercentage = 1; -settings.region.regionLeft = 25; -settings.region.regionTop = 25; -settings.region.regionRight = 75; -settings.region.regionBottom = 75; -await scanner.updateRuntimeSettings(settings); -``` - -[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/taykq592/) - -## Show internal logs - -Include the following in your code to print internal logs in the console. - -```javascript -Dynamsoft.DBR.BarcodeReader._onLog = console.log; -``` - -## Set mode arguments - -To precisely control a mode, you can adjust its specific parameters. - -```javascript -let settings = await scanner.getRuntimeSettings(); - -/* - * The following code sets the sensitivity of the TextureDetectionModes to 9 - */ - -settings.furtherModes.textureDetectionModes = [ - Dynamsoft.DBR.EnumTextureDetectionMode.TDM_GENERAL_WIDTH_CONCENTRATION, 0, 0, 0, 0, 0, 0, 0 -]; - -await scanner.updateRuntimeSettings(settings); -// The 2nd parameter 0 specifies the first mode of TextureDetectionModes, which is "Dynamsoft.DBR.EnumTextureDetectionMode.TDM_GENERAL_WIDTH_CONCENTRATION" in this case. -await scanner.setModeArgument("TextureDetectionModes", 0, "Sensitivity", "9"); -``` - -## Display the intermediate result images or the original canvas - -The intermediate result images are created when `intermediateResultTypes` is set in `RuntimeSettings` . Then they can be returned with the method `getIntermediateResults()` . These images can be used to show and debug the barcode reading process. - -The original canvas ( `oriCanvas` ) means the actual canvas which holds the image to be passed to the barcode reader engine for decoding. - -> *NOTE* -> -> For efficiency, the library may utilize WebGL (Web Graphics Library) for preprocessing an image before passing it to the barcode reader engine. If WebGL is used, the image captured from the camera will not be rendered on the canvas, instead, it gets processed by WebGL first and then is passed to the barcode reader engine directly. In this case, there won't be an original canvas. Therefore, if `bSaveOriCanvas` is set to `true` for a `BarcodeReader` or `BarcodeScanenr` instance, the WebGL feature will be disabled for that instance. -> -> On the other hand, if WebGL is disabled and you try to get the intermediate result specified by `EnumIntermediateResultType.IRT_ORIGINAL_IMAGE` , it will be exactly the same image as you would get with `oriCanvas` . - -The following shows how to display these images on the page - -```html -
    -
    -``` - -```javascript -(async () => { - let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); - /* The default of `_bUseWebgl` is true which means the intermediate result for - IRT_ORIGINAL_IMAGE will be one that has been preprocessed by WebGL */ - scanner._bUseWebgl = false; - document.getElementById('scannerV').appendChild(scanner.getUIElement());; - await scanner.updateRuntimeSettings('balance'); - let rs = await scanner.getRuntimeSettings(); - rs.intermediateResultTypes = 1; - await scanner.updateRuntimeSettings(rs); - scanner.onUnduplicatedRead = async (txt, result) => { - try { - let cvss = await scanner.getIntermediateCanvas(); - for (let cvs of cvss) { - document.getElementById('cvses').appendChild(cvs); - } - scanner.destroy(); - } catch (ex) { - console.error(ex); - } - }; - await scanner.show(); -})(); -``` diff --git a/programming-old/javascript/user-guide/advanced-usage-v8.8.7.md b/programming-old/javascript/user-guide/advanced-usage-v8.8.7.md deleted file mode 100644 index 58986437..00000000 --- a/programming-old/javascript/user-guide/advanced-usage-v8.8.7.md +++ /dev/null @@ -1,122 +0,0 @@ ---- -layout: default-layout -title: v8.8.7 Advanced Usage - Dynamsoft Barcode Reader JavaScript Edition -description: This page shows how to customize advanced features of Dynamsoft Barcode Reader JavaScript SDK in version 8.8.7. -keywords: user guide, advanced customizations, debug, area, region, javascript, js -needAutoGenerateSidebar: true -permalink: /programming/javascript/user-guide/advanced-usage-v8.8.7.html ---- - -# Advanced Usage - -## Read a specific area/region - -To speed up the scanning process, you can choose to scan only a specific area/region. - -```javascript -let settings = await scanner.getRuntimeSettings(); -/* - * The following code shrinks the decoding region by 25% on all sides - */ -settings.region.regionMeasuredByPercentage = 1; -settings.region.regionLeft = 25; -settings.region.regionTop = 25; -settings.region.regionRight = 75; -settings.region.regionBottom = 75; -await scanner.updateRuntimeSettings(settings); -``` - -[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/taykq592/) - -## Show internal logs - -Include the following in your code to print internal logs in the console. - -```javascript -Dynamsoft.DBR.BarcodeReader._onLog = console.log; -``` - -## Set mode arguments - -To precisely control a mode, you can adjust its specific parameters. - -```javascript -let settings = await scanner.getRuntimeSettings(); - -/* - * The following code sets the sensitivity of the TextureDetectionModes to 9 - */ - -settings.furtherModes.textureDetectionModes = [ - Dynamsoft.DBR.EnumTextureDetectionMode.TDM_GENERAL_WIDTH_CONCENTRATION, 0, 0, 0, 0, 0, 0, 0 -]; - -await scanner.updateRuntimeSettings(settings); -// The 2nd parameter 0 specifies the 0th mode of TextureDetectionModes, -// which is "Dynamsoft.DBR.EnumTextureDetectionMode.TDM_GENERAL_WIDTH_CONCENTRATION" in this case. -await scanner.setModeArgument("TextureDetectionModes", 0, "Sensitivity", "9"); -``` - -## Display the original canvas or the intermediate result canvas - -The original canvases are saved when setting `ifSaveOriginalImageInACanvas` to `true`. The method `getOriginalImageInACanvas()` returns a canvas which holds the image to be passed to the barcode reader engine for decoding. - -The intermediate result canvases are created when `intermediateResultTypes` is set to a value other than `IRT_NO_RESULT` . Then these intermediate result canvases can be returned with the method `getIntermediateCanvas()` to be used for showing and debugging the barcode reading process. - -> *NOTE* -> -> For efficiency, the library may utilize WebGL (Web Graphics Library) for preprocessing an image before passing it to the barcode reader engine. If WebGL is used, the image captured from the camera will not be rendered on the canvas, instead, it gets processed by WebGL first and then is passed to the barcode reader engine directly. In this case, there won't be an original canvas. -> -> Therefore, if `ifSaveOriginalImageInACanvas` is set to `true` for a `BarcodeScanenr` instance, the WebGL feature will be disabled for that instance. -> -> You can manually disable the WebGL feature by setting `_bUseWebgl` as `false`. If WebGL is disabled, when you try to get the intermediate result canvas (with `getIntermediateCanvas()`) specified by `EnumIntermediateResultType.IRT_ORIGINAL_IMAGE` , the canvas will be exactly the same image as you would get with `getOriginalImageInACanvas()` . - -The following shows how to display these images on the page - -```html -
    -
    -``` - -```javascript -// original canvas -(async () => { - let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); - document.getElementById('scannerV').appendChild(scanner.getUIElement()); - scanner.ifSaveOriginalImageInACanvas = true; - scanner.onUnduplicatedRead = async (txt, result) => { - try { - let cvs = scanner.getOriginalImageInACanvas(); - document.getElementById('cvses').appendChild(cvs); - scanner.destroyContext(); - } catch (ex) { - console.error(ex); - } - }; - await scanner.show(); -})(); -``` - -```javascript -// intermediate result canvas -(async () => { - let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); - // scanner._bUseWebgl = false; - document.getElementById('scannerV').appendChild(scanner.getUIElement()); - let rs = await scanner.getRuntimeSettings(); - rs.intermediateResultTypes = Dynamsoft.DBR.EnumIntermediateResultType.IRT_ORIGINAL_IMAGE; - await scanner.updateRuntimeSettings(rs); - scanner.onUnduplicatedRead = async (txt, result) => { - try { - let cvss = await scanner.getIntermediateCanvas(); - for (let cvs of cvss) { - document.getElementById('cvses').appendChild(cvs); - } - scanner.destroyContext(); - } catch (ex) { - console.error(ex); - } - }; - await scanner.show(); -})(); -``` diff --git a/programming-old/javascript/user-guide/advanced-usage.md b/programming-old/javascript/user-guide/advanced-usage.md deleted file mode 100644 index ba80da68..00000000 --- a/programming-old/javascript/user-guide/advanced-usage.md +++ /dev/null @@ -1,237 +0,0 @@ ---- -layout: default-layout -title: Advanced Usage - Dynamsoft Barcode Reader JavaScript Edition -description: This page shows how to use advanced features of Dynamsoft Barcode Reader JavaScript SDK. -keywords: user guide, advanced customizations, debug, area, region, javascript, js -needAutoGenerateSidebar: true -permalink: /programming/javascript/user-guide/advanced-usage.html ---- - -# Advanced Usage - -- [Advanced Usage](#advanced-usage) - - [Read a specific area/region](#read-a-specific-arearegion) - - [Always draw a square as the scan region](#always-draw-a-square-as-the-scan-region) - - [Account for newline characters in the barcode result](#account-for-newline-characters-in-the-barcode-result) - - [Show internal logs](#show-internal-logs) - - [Cut down power usage](#cut-down-power-usage) - - [Remove highlighting of unverified linear barcodes](#remove-highlighting-of-unverified-linear-barcodes) - - [Set mode arguments](#set-mode-arguments) - - [Display images in different stages of the reading process](#display-images-in-different-stages-of-the-reading-process) - - [Hosting the library](#hosting-the-library) - - [Step One: Deploy the dist folder](#step-one-deploy-the-dist-folder) - - [Step Two: Configure the Server](#step-two-configure-the-server) - - [Step Three: Include the library from the server](#step-three-include-the-library-from-the-server) - -## Read a specific area/region - -To speed up the scanning process, you can choose to scan only a specific area/region. - -```javascript -let settings = await scanner.getRuntimeSettings(); -/* - * The following code shrinks the decoding region by 25% on all sides - */ -settings.region.regionMeasuredByPercentage = 1; -settings.region.regionLeft = 25; -settings.region.regionTop = 25; -settings.region.regionRight = 75; -settings.region.regionBottom = 75; -await scanner.updateRuntimeSettings(settings); -``` - -[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/taykq592/) - -## Always draw a square as the scan region - -When reading square barcodes such as QR codes, it will help to keep the scan region also a square, the following code does the trick - -```javascript -scanner.onPlayed = async info => { - let sideLen = Math.min(info.width,info.height)*0.4; - let precentW = Math.round(sideLen/info.width*100) - let precentH = Math.round(sideLen/info.height*100); - let rs = await scanner.getRuntimeSettings(); - rs.region.regionLeft = (100 - precentW) / 2; - rs.region.regionRight = (100 + precentW) / 2; - rs.region.regionTop = (100 - precentH) / 2; - rs.region.regionBottom = (100 + precentH) / 2; - rs.region.regionMeasuredByPercentage = 1; - await scanner.updateRuntimeSettings(rs); -} -``` - -[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/srny764o/) - -## Account for newline characters in the barcode result - -When it comes to HTML, newline characters ( `\n` ) are not interpreted as they normally would. Therefore, if a barcode result contains a newline character, and you display the result in an modal dialogue box or some other text elements, then the newline character will probably be ignored. - -There are two ways in which you can resolve this: - -1. Wrap the element used to display the result in a `
    ` element.
-2. Manually replace each `\n` character in the result with `
    `
-
-## Show internal logs
-
-Include the following in your code to print internal logs in the console.
-
-```javascript
-Dynamsoft.DBR.BarcodeReader._onLog = console.log;
-```
-
-## Cut down power usage
-
-> Applicable to version 9.2.10+
-
-BarcodeScanner is designed for best performance, which means once it starts scanning, it'll keep the CPU focused on barcode reading with no pause. As a result, it quickly drains the device battery and causes the device to overheat. To cut down power usage, we can configure two things:
-
-1. Pause the barcode reading when capturing the next video frame;
-2. Explicitly pause the SDK altogether for a short period after each successful read.
-
-```js
-const scanSettings = await scanner.getScanSettings();
-scanSettings.captureAndDecodeInParallel = false; // When set to false, the SDK will pause reading when capturing the next frame. Otherwise, the SDK will capture the next frame while reading the current frame, which means it never stops.
-scanSettings.intervalTime = 1000; // Tells the SDK to pause for 1 second after reading a frame before capturing the next frame.
-await scanner.updateScanSettings(scanSettings);
-```
-
-## Remove highlighting of unverified linear barcodes
-
-> Applicable to version 9.3.0+
-
-When linear barcodes are found but not verified, they will be highlighted in the video feed, but in a lighter color. If you wish to highlight only the verified barcodes, you can use the following code:
-
-```js
-scanner.barcodeFillStyleBeforeVerification = "transparent"; // default value: "rgba(248,252,0,0.2)"
-scanner.barcodeStrokeStyleBeforeVerification = "transparent"; // default value: "transparent"
-```
-
-## Set mode arguments
-
-To precisely control a mode, you can adjust its specific parameters.
-
-```javascript
-let settings = await scanner.getRuntimeSettings();
-
-/*
- * The following code sets the sensitivity of the TextureDetectionModes to 9
- */
-
-settings.furtherModes.textureDetectionModes = [
-    Dynamsoft.DBR.EnumTextureDetectionMode.TDM_GENERAL_WIDTH_CONCENTRATION, 0, 0, 0, 0, 0, 0, 0
-];
-
-await scanner.updateRuntimeSettings(settings);
-// The 2nd parameter 0 specifies the 0th mode of TextureDetectionModes, 
-// which is "Dynamsoft.DBR.EnumTextureDetectionMode.TDM_GENERAL_WIDTH_CONCENTRATION" in this case.
-await scanner.setModeArgument("TextureDetectionModes", 0, "Sensitivity", "9");
-```
-
-## Display images in different stages of the reading process
-
-The original canvases are saved when setting `ifSaveOriginalImageInACanvas` to `true`. The method `getOriginalImageInACanvas()` returns a canvas which holds the image to be passed to the barcode reader engine for decoding. 
-
-The intermediate result canvases are created when `intermediateResultTypes` is set to a value other than `IRT_NO_RESULT` . Then these intermediate result canvases can be returned with the method `getIntermediateCanvas()` to be used for showing and debugging the barcode reading process. 
-
-> *NOTE*
->  
-> For efficiency, the SDK may utilize WebGL (Web Graphics Library) for preprocessing an image before passing it to the barcode reader engine. If WebGL is used, the image captured from the camera will not be rendered on the canvas, instead, it gets processed by WebGL first and then is passed to the barcode reader engine directly. In this case, there won't be an original canvas.
-> 
-> Therefore, if `ifSaveOriginalImageInACanvas` is set to `true` for a `BarcodeScanenr` instance, the WebGL feature will be disabled for that instance.
->
-> You can manually disable the WebGL feature by setting `_bUseWebgl` as `false`. If WebGL is disabled, when you try to get the intermediate result canvas (with `getIntermediateCanvas()`) specified by `EnumIntermediateResultType.IRT_ORIGINAL_IMAGE` , the canvas will be exactly the same image as you would get with `getOriginalImageInACanvas()` .
-
-The following shows how to display these images on the page
-
-```html
-
    
-
    
-```
-
-```javascript
-// original canvas
-(async () => {
-    let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-    document.getElementById('scannerV').appendChild(scanner.getUIElement());
-    scanner.ifSaveOriginalImageInACanvas = true;
-    scanner.onUniqueRead = async (txt, result) => {
-        try {
-            let cvs = scanner.getOriginalImageInACanvas();
-            document.getElementById('cvses').appendChild(cvs);
-            scanner.destroyContext();
-        } catch (ex) {
-            console.error(ex);
-        }
-    };
-    await scanner.show();
-})();
-```
-
-```javascript
-// intermediate result canvas
-(async () => {
-    let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-    document.getElementById('scannerV').appendChild(scanner.getUIElement());
-    let rs = await scanner.getRuntimeSettings();
-    rs.intermediateResultTypes = Dynamsoft.DBR.EnumIntermediateResultType.IRT_ORIGINAL_IMAGE;
-    await scanner.updateRuntimeSettings(rs);
-    scanner.onUniqueRead = async (txt, result) => {
-        try {
-            let cvss = await scanner.getIntermediateCanvas();
-            for (let cvs of cvss) {
-                document.getElementById('cvses').appendChild(cvs);
-            }
-            scanner.destroyContext();
-        } catch (ex) {
-            console.error(ex);
-        }
-    };
-    await scanner.show();
-})();
-```
-
-## Hosting the library
-
-### Step One: Deploy the dist folder
-
-Once you have downloaded the library, you can locate the "dist" directory and copy it to your server (usually as part of your website / web application). 
-
-Some of the files in this directory:
-
-* `dbr.js` // The main library file
-* `dbr.mjs` // For using the library as a module (`
-```
-
-Optionally, you may also need to [specify the location of the "engine" files](index.md#specify-the-location-of-the-engine-files).
diff --git a/programming-old/javascript/user-guide/basic-customizations-v7.5.0.md b/programming-old/javascript/user-guide/basic-customizations-v7.5.0.md
deleted file mode 100644
index f09e86a2..00000000
--- a/programming-old/javascript/user-guide/basic-customizations-v7.5.0.md
+++ /dev/null
@@ -1,184 +0,0 @@
----
-layout: default-layout
-title: v7.5.0 Basic Customizations - Dynamsoft Barcode Reader JavaScript Edition
-description: This page shows how to customize basic features of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, basic customizations, initialize, javascript, js
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/basic-customizations-v7.5.0.html
----
-
-# Basic Customizations
-
-## Initializing
-
-The library is based on the `WebAssembly` standard; therefore, **on first use**, it needs some time to download and compile the `wasm` files. After first use, the browser may cache the file.
-
-`Dynamsoft.BarcodeReader.loadWasm` is the API to start the initialization.
-
-```javascript
-try{
-    await Dynamsoft.BarcodeReader.loadWasm();
-}catch(ex){
-    console.error(ex);
-}
-```
-
-Other APIs like `Dynamsoft.BarcodeReader.createInstance` and `Dynamsoft.BarcodeScanner.createInstance` will also call `loadWasm` during initialization. The following demonstrates the most common usage. 
-
-```javascript
-let reader = null;
-let scanner = null;
-try{
-    reader = await Dynamsoft.BarcodeReader.createInstance();
-    scanner = await Dynamsoft.BarcodeScanner.createInstance();
-}catch(ex){
-    console.error(ex);
-}
-```
-
-   **NOTE**: Including the library with a script tag doesn't automatically initialize the library. For better performance, you may want to call loadWasm to download and compile the wasm file in advance and create a reader or scanner instance later.   
-
-Initialization consists of the following steps:
-
-**1. Download**   
-    Download the necessary resources. Usually, we deploy the resources on CDN and set a long cache duration. If your web server is faster, you should put the resources on your own server instead of using the CDN.
-
-**2. Compile**    
-    The `wasm` files are automatically compiled once downloaded. The compilation time varies among different devices & browsers. While it takes less than a second on latest phones or PCs, it may take longer on older devices.
-
-**3. Initialize**  
-    The library needs to initialize every time the page loads. The initialization means creating an `BarcodeReader` or `BarcodeScanner` instance with specified settings.
-
-
-## Configuring Scanner Settings
-
-When creating an instance of the `BarcodeScanner` object, there are several configuration options. The following code shows some of the most popular ones:
-
-```javascript
-// set which camera and what resolution to use
-await scanner.updateVideoSettings({ video: { width: 1280, height: 720, facingMode: "environment" } });
-
-// use one of three built-in RuntimeSetting templates, 'speed' is recommended for decoding from a video stream
-await scanner.updateRuntimeSettings("speed");
-
-// make changes to the template. The code snippet below demonstrates how to specify which symbologies are enabled
-let runtimeSettings = await scanner.getRuntimeSettings();
-runtimeSettings.barcodeFormatIds = Dynamsoft.EnumBarcodeFormat.BF_ONED | Dynamsoft.EnumBarcodeFormat.BF_QR_CODE;
-await scanner.updateRuntimeSettings(runtimeSettings);
-
-// set up the scanner behavior
-let scanSettings = await scanner.getScanSettings();
-// disregard duplicated results found in a specified time period
-scanSettings.duplicateForgetTime = 20000;
-// set a scan interval so the library may release the CPU from time to time
-scanSettings.intervalTime = 300;
-await scanner.updateScanSettings(scanSettings);
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/yfkcajxz/)
-
-As you can see in the code, there are three types of configurations:
-
-- `get/updateVideoSettings`: Configures the data source, i.e., the video stream. These settings include which camera to use, the resolution, etc. Learn more [here](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Syntax).
-
-- `get/updateRuntimeSettings`: Configures the decode engine. Find a full list of these settings and their corresponding descriptions [here](../api-reference/global-interfaces.md#runtimesettings). Try in [JSFiddle](https://jsfiddle.net/DynamsoftTeam/f24h8c1m/).
-
-    e.g.,
-
-    ```javascript
-    await barcodeScanner.updateRuntimeSettings("speed");
-    await barcodeScanner.updateRuntimeSettings("balance");
-    await barcodeScanner.updateRuntimeSettings("coverage");
-    let settings = await barcodeScanner.getRuntimeSettings();
-    settings.localizationModes = [
-        Dynamsoft.EnumLocalizationMode.LM_CONNECTED_BLOCKS,
-        Dynamsoft.EnumLocalizationMode.LM_SCAN_DIRECTLY,
-        Dynamsoft.EnumLocalizationMode.LM_LINES, 0, 0, 0, 0, 0];
-    settings.deblurLevel = 2;
-    await barcodeScanner.updateRuntimeSettings(settings);
-    ```
-
-- `get/updateScanSettings`: Configures the behavior of the scanner which includes `duplicateForgetTime`, `intervalTime` and `filter`, etc.
-
-## Customizing the UI
-
-The library provides a built-in UI for the `BarcodeScanner`object where the default scanner UI is defined in the file `dist/dbr.scanner.html`. There are 3 ways to customize it:
-
-1. Modify the file `dist/dbr.scanner.html` directly. This option is only possible when you deploy these files yourself instead of using the CDN.
-
-2. Copy the file `dist/dbr.scanner.html`, modify it and specify the new file as the default UI by its URL `Dynamsoft.BarcodeScanner.defaultUIElementURL = url`. Note: you must set `defaultUIElementURL` before you call `createInstance`.
-
-3. Build the UI into your own web page and call `scanner.setUIElement(HTMLElement)` to specify that element.
-
-
-The following is an example of the 3rd option above. 
-
-```html
-
-
-
-    
    
-        
-    
    
-    
-    
-    
-
-
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)
-
-The element `div-video-container` is used as the UI this div contains the video element for showing the video stream.
-
-   **NOTE**: The class name of the video element must be set to `dbrScanner-video`.
-
-   ```html
-   
-   ```
-
-### Cameras and Resolution Options
-
-Next, you can add the camera list and resolution list.
-
-   If the class names match the default ones, `dbrScanner-sel-camera` and `dbrScanner-sel-resolution`, the library will automatically populate the lists and handle the camera/resolution switching automatically.
-
-```html
-
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-```html
-
-```
-   8 default resolutions are populated automatically.
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)
-
-The following code shows how to display a custom set of resolution options.
-
-```html
-
-```
-
-   **Possible Issue**: Generally, you need to provide a resolution that the camera supports. However, in case a camera does not support the specified resolution, it usually uses the nearest supported resolution. As a result, the selected resolution may not be the actual resolution used.
-
-   **Solution**: Add an option with the class name `dbrScanner-opt-gotResolution` (as shown above) which the library will then use to show the actual resolution being used.
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)
-
diff --git a/programming-old/javascript/user-guide/basic-customizations-v7.6.0.md b/programming-old/javascript/user-guide/basic-customizations-v7.6.0.md
deleted file mode 100644
index 4aa4ce9e..00000000
--- a/programming-old/javascript/user-guide/basic-customizations-v7.6.0.md
+++ /dev/null
@@ -1,184 +0,0 @@
----
-layout: default-layout
-title: v7.6.0 Basic Customizations - Dynamsoft Barcode Reader JavaScript Edition
-description: This page shows how to customize basic features of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, basic customizations, initialize, javascript, js
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/basic-customizations-v7.6.0.html
----
-
-# Basic Customizations
-
-## Initializing
-
-The library is based on the `WebAssembly` standard; therefore, **on first use**, it needs some time to download and compile the `wasm` files. After first use, the browser may cache the file.
-
-`Dynamsoft.BarcodeReader.loadWasm` is the API to start the initialization.
-
-```javascript
-try{
-    await Dynamsoft.BarcodeReader.loadWasm();
-}catch(ex){
-    console.error(ex);
-}
-```
-
-Other APIs like `Dynamsoft.BarcodeReader.createInstance` and `Dynamsoft.BarcodeScanner.createInstance` will also call `loadWasm` during initialization. The following demonstrates the most common usage. 
-
-```javascript
-let reader = null;
-let scanner = null;
-try{
-    reader = await Dynamsoft.BarcodeReader.createInstance();
-    scanner = await Dynamsoft.BarcodeScanner.createInstance();
-}catch(ex){
-    console.error(ex);
-}
-```
-
-   **NOTE**: Including the library with a script tag doesn't automatically initialize the library. For better performance, you may want to call loadWasm to download and compile the wasm file in advance and create a reader or scanner instance later.   
-
-Initialization consists of the following steps:
-
-**1. Download**   
-    Download the necessary resources. Usually, we deploy the resources on CDN and set a long cache duration. If your web server is faster, you should put the resources on your own server instead of using the CDN.
-
-**2. Compile**    
-    The `wasm` files are automatically compiled once downloaded. The compilation time varies among different devices & browsers. While it takes less than a second on latest phones or PCs, it may take longer on older devices.
-
-**3. Initialize**  
-    The library needs to initialize every time the page loads. The initialization means creating an `BarcodeReader` or `BarcodeScanner` instance with specified settings.
-
-
-## Configuring Scanner Settings
-
-When creating an instance of the `BarcodeScanner` object, there are several configuration options. The following code shows some of the most popular ones:
-
-```javascript
-// set which camera and what resolution to use
-await scanner.updateVideoSettings({ video: { width: 1280, height: 720, facingMode: "environment" } });
-
-// use one of three built-in RuntimeSetting templates, 'speed' is recommended for decoding from a video stream
-await scanner.updateRuntimeSettings("speed");
-
-// make changes to the template. The code snippet below demonstrates how to specify which symbologies are enabled
-let runtimeSettings = await scanner.getRuntimeSettings();
-runtimeSettings.barcodeFormatIds = Dynamsoft.EnumBarcodeFormat.BF_ONED | Dynamsoft.EnumBarcodeFormat.BF_QR_CODE;
-await scanner.updateRuntimeSettings(runtimeSettings);
-
-// set up the scanner behavior
-let scanSettings = await scanner.getScanSettings();
-// disregard duplicated results found in a specified time period
-scanSettings.duplicateForgetTime = 20000;
-// set a scan interval so the library may release the CPU from time to time
-scanSettings.intervalTime = 300;
-await scanner.updateScanSettings(scanSettings);
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/yfkcajxz/)
-
-As you can see in the code, there are three types of configurations:
-
-- `get/updateVideoSettings`: Configures the data source, i.e., the video stream. These settings include which camera to use, the resolution, etc. Learn more [here](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Syntax).
-
-- `get/updateRuntimeSettings`: Configures the decode engine. Find a full list of these settings and their corresponding descriptions [here](../api-reference/global-interfaces.md#runtimesettings). Try in [JSFiddle](https://jsfiddle.net/DynamsoftTeam/f24h8c1m/).
-
-    e.g.,
-
-    ```javascript
-    await barcodeScanner.updateRuntimeSettings("speed");
-    await barcodeScanner.updateRuntimeSettings("balance");
-    await barcodeScanner.updateRuntimeSettings("coverage");
-    let settings = await barcodeScanner.getRuntimeSettings();
-    settings.localizationModes = [
-        Dynamsoft.EnumLocalizationMode.LM_CONNECTED_BLOCKS,
-        Dynamsoft.EnumLocalizationMode.LM_SCAN_DIRECTLY,
-        Dynamsoft.EnumLocalizationMode.LM_LINES, 0, 0, 0, 0, 0];
-    settings.deblurLevel = 2;
-    await barcodeScanner.updateRuntimeSettings(settings);
-    ```
-
-- `get/updateScanSettings`: Configures the behavior of the scanner which includes `duplicateForgetTime`, `intervalTime` and `filter`, etc.
-
-## Customizing the UI
-
-The library provides a built-in UI for the `BarcodeScanner`object where the default scanner UI is defined in the file `dist/dbr.scanner.html`. There are 3 ways to customize it:
-
-1. Modify the file `dist/dbr.scanner.html` directly. This option is only possible when you deploy these files yourself instead of using the CDN.
-
-2. Copy the file `dist/dbr.scanner.html`, modify it and specify the new file as the default UI by its URL `Dynamsoft.BarcodeScanner.defaultUIElementURL = url`. Note: you must set `defaultUIElementURL` before you call `createInstance`.
-
-3. Build the UI into your own web page and call `scanner.setUIElement(HTMLElement)` to specify that element.
-
-
-The following is an example of the 3rd option above. 
-
-```html
-
-
-
-    
    
-        
-    
    
-    
-    
-    
-
-
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)
-
-The element `div-video-container` is used as the UI this div contains the video element for showing the video stream.
-
-   **NOTE**: The class name of the video element must be set to `dbrScanner-video`.
-
-   ```html
-   
-   ```
-
-### Cameras and Resolution Options
-
-Next, you can add the camera list and resolution list.
-
-   If the class names match the default ones, `dbrScanner-sel-camera` and `dbrScanner-sel-resolution`, the library will automatically populate the lists and handle the camera/resolution switching automatically.
-
-```html
-
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-```html
-
-```
-   8 default resolutions are populated automatically.
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)
-
-The following code shows how to display a custom set of resolution options.
-
-```html
-
-```
-
-   **Possible Issue**: Generally, you need to provide a resolution that the camera supports. However, in case a camera does not support the specified resolution, it usually uses the nearest supported resolution. As a result, the selected resolution may not be the actual resolution used.
-
-   **Solution**: Add an option with the class name `dbrScanner-opt-gotResolution` (as shown above) which the library will then use to show the actual resolution being used.
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)
-
diff --git a/programming-old/javascript/user-guide/basic-customizations-v8.0.0.md b/programming-old/javascript/user-guide/basic-customizations-v8.0.0.md
deleted file mode 100644
index 70b7bfca..00000000
--- a/programming-old/javascript/user-guide/basic-customizations-v8.0.0.md
+++ /dev/null
@@ -1,237 +0,0 @@
----
-layout: default-layout
-title: v8.0.0 Basic Customizations - Dynamsoft Barcode Reader JavaScript Edition
-description: This page shows how to customize basic features of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, basic customizations, initialize, javascript, js
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/basic-customizations-v8.0.0.html
----
-
-# Basic Customizations
-
-## Initializing
-
-The library is based on the `WebAssembly` standard; therefore, **on first use**, it needs some time to download and compile the `wasm` files. After first use, the browser may cache the file.
-
-`Dynamsoft.DBR.BarcodeReader.loadWasm()` is the API to start the initialization.
-
-```javascript
-try{
-    await Dynamsoft.DBR.BarcodeReader.loadWasm();
-}catch(ex){
-    console.error(ex);
-}
-```
-
-Other APIs like `Dynamsoft.DBR.BarcodeReader.createInstance()` and `Dynamsoft.DBR.BarcodeScanner.createInstance()` will also call `loadWasm()` during initialization. The following demonstrates the most common usage. 
-
-```javascript
-let reader = null;
-let scanner = null;
-try{
-    reader = await Dynamsoft.DBR.BarcodeReader.createInstance();
-    scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-}catch(ex){
-    console.error(ex);
-}
-```
-
-*NOTE*
-
-Including the library with a script tag doesn't automatically initialize the library. For better performance, you may want to call `loadWasm()` to download and compile the wasm file in advance and create a reader or scanner instance later.   
-
-Initialization consists of the following steps:
-
-* Download
-
-Download the necessary resources. Usually, we deploy the resources on CDN and set a long cache duration. *If your web server is faster, you should put the resources on your own server instead of using the CDN.*
-
-* Compile    
-    
-The `wasm` files are automatically compiled once downloaded. The compilation time varies among different devices & browsers. While it takes less than a second on latest phones or PCs, it may take much longer on older devices.
-
-* Initialize
-
-The library needs to initialize every time the page loads. The initialization means creating a `BarcodeReader` or `BarcodeScanner` instance with specified settings.
-
-## Configuring Scanner Settings
-
-When creating an instance of the `BarcodeScanner` object, there are several configuration options. The following code shows some of the most popular ones:
-
-```javascript
-// set which camera and what resolution to use
-await scanner.updateVideoSettings({ video: { width: 1280, height: 720, facingMode: "environment" } });
-
-// use one of the built-in RuntimeSetting templates: "single" (decode single barcode, default mode), "speed", "balance", "coverage". "speed" is recommended for decoding from a video stream
-await scanner.updateRuntimeSettings("speed");
-
-// make changes to the template. The code snippet below demonstrates how to specify which symbologies are enabled
-let runtimeSettings = await scanner.getRuntimeSettings();
-runtimeSettings.barcodeFormatIds = Dynamsoft.EnumBarcodeFormat.BF_ONED | Dynamsoft.EnumBarcodeFormat.BF_QR_CODE;
-await scanner.updateRuntimeSettings(runtimeSettings);
-
-// set up the scanner behavior
-let scanSettings = await scanner.getScanSettings();
-// disregard duplicated results found in a specified time period
-scanSettings.duplicateForgetTime = 20000;
-// set a scan interval so the library may release the CPU from time to time
-scanSettings.intervalTime = 300;
-await scanner.updateScanSettings(scanSettings);
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/yfkcajxz/)
-
-As you can see in the code, there are three types of configurations:
-
-- `get/updateVideoSettings`: Configures the data source, i.e., the video stream. These settings include which camera to use, the resolution, etc. Learn more [here](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Syntax).
-
-- `get/updateRuntimeSettings`: Configures the decode engine. Find a full list of these settings and their corresponding descriptions [here](../api-reference/global-interfaces.md#runtimesettings). For example, the following uses the built-in "speed" settings with updated `localizationModes`.
-
-    ```javascript
-    await barcodeScanner.updateRuntimeSettings("speed");
-    //await barcodeScanner.updateRuntimeSettings("balance"); //alternative
-    //await barcodeScanner.updateRuntimeSettings("coverage"); //alternative
-    let settings = await barcodeScanner.getRuntimeSettings();
-    settings.localizationModes = [
-        Dynamsoft.EnumLocalizationMode.LM_CONNECTED_BLOCKS,
-        Dynamsoft.EnumLocalizationMode.LM_SCAN_DIRECTLY,
-        Dynamsoft.EnumLocalizationMode.LM_LINES, 0, 0, 0, 0, 0];
-    await barcodeScanner.updateRuntimeSettings(settings);
-    ```
-    Try in [JSFiddle](https://jsfiddle.net/DynamsoftTeam/f24h8c1m/).
-    
-- `get/updateScanSettings`: Configures the behavior of the scanner which includes `duplicateForgetTime`, `intervalTime` and `filter`, etc.
-
-## Customizing the UI
-
-The library provides a built-in UI for the `BarcodeScanner`object where the default scanner UI is defined in the file `dist/dbr.scanner.html`. There are a few ways to customize it:
-
-* Modify the file `dist/dbr.scanner.html` directly. 
-
-  This option is only possible when you deploy these files yourself instead of using the CDN.
-
-* Copy the file `dist/dbr.scanner.html` to your application, modify it and specify the new file as the default UI with the API `defaultUIElementURL`
-
-  ```javascript
-  Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = url;
-  ```
-  
-  *Note*
-  
-  You must set `defaultUIElementURL` before you call `createInstance`.
-
-* Build the UI element into your own web page and call `scanner.setUIElement(HTMLElement)` to specify that element.
-* Append the default UI element to an element on your page. After that, you can customize it further. The following shows how to append the default UI to a DIV and hide the close button.
-  
-  ```html
-  
    
-  ```
-  
-  ```javascript
-  document.getElementById('scannerUI').appendChild(scanner.getUIElement());
-  document.getElementsByClassName('dbrScanner-btn-close')[0].hidden = true;
-  ```
-
-The following is an example of the 3rd option above. 
-
-```html
-
-
-
-    
    
-        
-    
    
-    
-    
-    
-
-
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)
-
-*NOTE*
-
-The video element must contain the class `dbrScanner-video` so that it can be used.
-
-```html
-
-```
-
-### Cameras and Resolution Options
-
-Next, you can add the camera list and resolution list inside the UI element. In our case, the element would be `document.getElementById('div-video-container')`.
-
-If the class names match the default ones, `dbrScanner-sel-camera` and `dbrScanner-sel-resolution`, the library will automatically populate the lists and handle the camera/resolution switching automatically.
-
-```html
-
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-```html
-
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)
-
-*Note*
-
-By default, 8 hard-coded resolutions will be populated as options.
-
-The following code shows how to display a custom set of resolution options.
-
-```html
-
-```
-
-*NOTE*
-
-Generally, you need to provide a resolution that the camera supports. However, in case a camera does not support the specified resolution, it usually uses the nearest supported resolution. As a result, the selected resolution may not be the actual resolution used. In this case, add an option with the class name `dbrScanner-opt-gotResolution` (as shown above) and the library will then use it to show the actual resolution.
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)
-
-## Decode Barcodes from Existing Video Stream
-
-In v8.0, we introduced a new feature to decode barcodes from an existing video stream. To set the existing video stream, we'll use [setUIElement()](../api-reference/BarcodeScanner/methods/initialize-and-destroy.md#setuielement).
-
-```html
-
-
-
-    
    
-        
-    
    
-    
-    
-    
-
-
-```
-*NOTE*
-
-The video element must contain the class `dbrScanner-existingVideo`.
diff --git a/programming-old/javascript/user-guide/basic-customizations-v8.1.0.md b/programming-old/javascript/user-guide/basic-customizations-v8.1.0.md
deleted file mode 100644
index 536a7b0a..00000000
--- a/programming-old/javascript/user-guide/basic-customizations-v8.1.0.md
+++ /dev/null
@@ -1,237 +0,0 @@
----
-layout: default-layout
-title: v8.1.0 Basic Customizations - Dynamsoft Barcode Reader JavaScript Edition
-description: This page shows how to customize basic features of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, basic customizations, initialize, javascript, js
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/basic-customizations-v8.1.0.html
----
-
-# Basic Customizations
-
-## Initializing
-
-The library is based on the `WebAssembly` standard; therefore, **on first use**, it needs some time to download and compile the `wasm` files. After first use, the browser may cache the file.
-
-`Dynamsoft.DBR.BarcodeReader.loadWasm()` is the API to start the initialization.
-
-```javascript
-try{
-    await Dynamsoft.DBR.BarcodeReader.loadWasm();
-}catch(ex){
-    console.error(ex);
-}
-```
-
-Other APIs like `Dynamsoft.DBR.BarcodeReader.createInstance()` and `Dynamsoft.DBR.BarcodeScanner.createInstance()` will also call `loadWasm()` during initialization. The following demonstrates the most common usage. 
-
-```javascript
-let reader = null;
-let scanner = null;
-try{
-    reader = await Dynamsoft.DBR.BarcodeReader.createInstance();
-    scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-}catch(ex){
-    console.error(ex);
-}
-```
-
-*NOTE*
-
-Including the library with a script tag doesn't automatically initialize the library. For better performance, you may want to call `loadWasm()` to download and compile the wasm file in advance and create a reader or scanner instance later.   
-
-Initialization consists of the following steps:
-
-* Download
-
-Download the necessary resources. Usually, we deploy the resources on CDN and set a long cache duration. *If your web server is faster, you should put the resources on your own server instead of using the CDN.*
-
-* Compile    
-    
-The `wasm` files are automatically compiled once downloaded. The compilation time varies among different devices & browsers. While it takes less than a second on latest phones or PCs, it may take much longer on older devices.
-
-* Initialize
-
-The library needs to initialize every time the page loads. The initialization means creating a `BarcodeReader` or `BarcodeScanner` instance with specified settings.
-
-## Configuring Scanner Settings
-
-When creating an instance of the `BarcodeScanner` object, there are several configuration options. The following code shows some of the most popular ones:
-
-```javascript
-// set which camera and what resolution to use
-await scanner.updateVideoSettings({ video: { width: 1280, height: 720, facingMode: "environment" } });
-
-// use one of the built-in RuntimeSetting templates: "single" (decode single barcode, default mode), "speed", "balance", "coverage". "speed" is recommended for decoding from a video stream
-await scanner.updateRuntimeSettings("speed");
-
-// make changes to the template. The code snippet below demonstrates how to specify which symbologies are enabled
-let runtimeSettings = await scanner.getRuntimeSettings();
-runtimeSettings.barcodeFormatIds = Dynamsoft.EnumBarcodeFormat.BF_ONED | Dynamsoft.EnumBarcodeFormat.BF_QR_CODE;
-await scanner.updateRuntimeSettings(runtimeSettings);
-
-// set up the scanner behavior
-let scanSettings = await scanner.getScanSettings();
-// disregard duplicated results found in a specified time period
-scanSettings.duplicateForgetTime = 20000;
-// set a scan interval so the library may release the CPU from time to time
-scanSettings.intervalTime = 300;
-await scanner.updateScanSettings(scanSettings);
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/yfkcajxz/)
-
-As you can see in the code, there are three types of configurations:
-
-- `get/updateVideoSettings`: Configures the data source, i.e., the video stream. These settings include which camera to use, the resolution, etc. Learn more [here](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Syntax).
-
-- `get/updateRuntimeSettings`: Configures the decode engine. Find a full list of these settings and their corresponding descriptions [here](../api-reference/global-interfaces.md#runtimesettings). For example, the following uses the built-in "speed" settings with updated `localizationModes`.
-
-    ```javascript
-    await barcodeScanner.updateRuntimeSettings("speed");
-    //await barcodeScanner.updateRuntimeSettings("balance"); //alternative
-    //await barcodeScanner.updateRuntimeSettings("coverage"); //alternative
-    let settings = await barcodeScanner.getRuntimeSettings();
-    settings.localizationModes = [
-        Dynamsoft.EnumLocalizationMode.LM_CONNECTED_BLOCKS,
-        Dynamsoft.EnumLocalizationMode.LM_SCAN_DIRECTLY,
-        Dynamsoft.EnumLocalizationMode.LM_LINES, 0, 0, 0, 0, 0];
-    await barcodeScanner.updateRuntimeSettings(settings);
-    ```
-    Try in [JSFiddle](https://jsfiddle.net/DynamsoftTeam/f24h8c1m/).
-    
-- `get/updateScanSettings`: Configures the behavior of the scanner which includes `duplicateForgetTime`, `intervalTime` and `filter`, etc.
-
-## Customizing the UI
-
-The library provides a built-in UI for the `BarcodeScanner`object where the default scanner UI is defined in the file `dist/dbr.scanner.html`. There are a few ways to customize it:
-
-* Modify the file `dist/dbr.scanner.html` directly. 
-
-  This option is only possible when you deploy these files yourself instead of using the CDN.
-
-* Copy the file `dist/dbr.scanner.html` to your application, modify it and specify the new file as the default UI with the API `defaultUIElementURL`
-
-  ```javascript
-  Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = url;
-  ```
-  
-  *Note*
-  
-  You must set `defaultUIElementURL` before you call `createInstance`.
-
-* Build the UI element into your own web page and call `scanner.setUIElement(HTMLElement)` to specify that element.
-* Append the default UI element to an element on your page. After that, you can customize it further. The following shows how to append the default UI to a DIV and hide the close button.
-  
-  ```html
-  
    
-  ```
-  
-  ```javascript
-  document.getElementById('scannerUI').appendChild(scanner.getUIElement());
-  document.getElementsByClassName('dbrScanner-btn-close')[0].hidden = true;
-  ```
-
-The following is an example of the 3rd option above. 
-
-```html
-
-
-
-    
    
-        
-    
    
-    
-    
-    
-
-
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)
-
-*NOTE*
-
-The video element must contain the class `dbrScanner-video` so that it can be used.
-
-```html
-
-```
-
-### Cameras and Resolution Options
-
-Next, you can add the camera list and resolution list inside the UI element. In our case, the element would be `document.getElementById('div-video-container')`.
-
-If the class names match the default ones, `dbrScanner-sel-camera` and `dbrScanner-sel-resolution`, the library will automatically populate the lists and handle the camera/resolution switching automatically.
-
-```html
-
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-```html
-
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)
-
-*Note*
-
-By default, 8 hard-coded resolutions will be populated as options.
-
-The following code shows how to display a custom set of resolution options.
-
-```html
-
-```
-
-*NOTE*
-
-Generally, you need to provide a resolution that the camera supports. However, in case a camera does not support the specified resolution, it usually uses the nearest supported resolution. As a result, the selected resolution may not be the actual resolution used. In this case, add an option with the class name `dbrScanner-opt-gotResolution` (as shown above) and the library will then use it to show the actual resolution.
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)
-
-## Decode Barcodes from Existing Video Stream
-
-In v8.0, we introduced a new feature to decode barcodes from an existing video stream. To set the existing video stream, we'll use [setUIElement()](../api-reference/BarcodeScanner/methods/initialize-and-destroy.md#setuielement).
-
-```html
-
-
-
-    
    
-        
-    
    
-    
-    
-    
-
-
-```
-*NOTE*
-
-The video element must contain the class `dbrScanner-existingVideo`.
diff --git a/programming-old/javascript/user-guide/basic-customizations-v8.1.2.md b/programming-old/javascript/user-guide/basic-customizations-v8.1.2.md
deleted file mode 100644
index c3fad73e..00000000
--- a/programming-old/javascript/user-guide/basic-customizations-v8.1.2.md
+++ /dev/null
@@ -1,237 +0,0 @@
----
-layout: default-layout
-title: v8.1.2 Basic Customizations - Dynamsoft Barcode Reader JavaScript Edition
-description: This page shows how to customize basic features of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, basic customizations, initialize, javascript, js
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/basic-customizations-v8.1.2.html
----
-
-# Basic Customizations
-
-## Initializing
-
-The library is based on the `WebAssembly` standard; therefore, **on first use**, it needs some time to download and compile the `wasm` files. After first use, the browser may cache the file.
-
-`Dynamsoft.DBR.BarcodeReader.loadWasm()` is the API to start the initialization.
-
-```javascript
-try{
-    await Dynamsoft.DBR.BarcodeReader.loadWasm();
-}catch(ex){
-    console.error(ex);
-}
-```
-
-Other APIs like `Dynamsoft.DBR.BarcodeReader.createInstance()` and `Dynamsoft.DBR.BarcodeScanner.createInstance()` will also call `loadWasm()` during initialization. The following demonstrates the most common usage. 
-
-```javascript
-let reader = null;
-let scanner = null;
-try{
-    reader = await Dynamsoft.DBR.BarcodeReader.createInstance();
-    scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-}catch(ex){
-    console.error(ex);
-}
-```
-
-*NOTE*
-
-Including the library with a script tag doesn't automatically initialize the library. For better performance, you may want to call `loadWasm()` to download and compile the wasm file in advance and create a reader or scanner instance later.   
-
-Initialization consists of the following steps:
-
-* Download
-
-Download the necessary resources. Usually, we deploy the resources on CDN and set a long cache duration. *If your web server is faster, you should put the resources on your own server instead of using the CDN.*
-
-* Compile    
-    
-The `wasm` files are automatically compiled once downloaded. The compilation time varies among different devices & browsers. While it takes less than a second on latest phones or PCs, it may take much longer on older devices.
-
-* Initialize
-
-The library needs to initialize every time the page loads. The initialization means creating a `BarcodeReader` or `BarcodeScanner` instance with specified settings.
-
-## Configuring Scanner Settings
-
-When creating an instance of the `BarcodeScanner` object, there are several configuration options. The following code shows some of the most popular ones:
-
-```javascript
-// set which camera and what resolution to use
-await scanner.updateVideoSettings({ video: { width: 1280, height: 720, facingMode: "environment" } });
-
-// use one of the built-in RuntimeSetting templates: "single" (decode single barcode, default mode), "speed", "balance", "coverage". "speed" is recommended for decoding from a video stream
-await scanner.updateRuntimeSettings("speed");
-
-// make changes to the template. The code snippet below demonstrates how to specify which symbologies are enabled
-let runtimeSettings = await scanner.getRuntimeSettings();
-runtimeSettings.barcodeFormatIds = Dynamsoft.EnumBarcodeFormat.BF_ONED | Dynamsoft.EnumBarcodeFormat.BF_QR_CODE;
-await scanner.updateRuntimeSettings(runtimeSettings);
-
-// set up the scanner behavior
-let scanSettings = await scanner.getScanSettings();
-// disregard duplicated results found in a specified time period
-scanSettings.duplicateForgetTime = 20000;
-// set a scan interval so the library may release the CPU from time to time
-scanSettings.intervalTime = 300;
-await scanner.updateScanSettings(scanSettings);
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/yfkcajxz/)
-
-As you can see in the code, there are three types of configurations:
-
-- `get/updateVideoSettings`: Configures the data source, i.e., the video stream. These settings include which camera to use, the resolution, etc. Learn more [here](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Syntax).
-
-- `get/updateRuntimeSettings`: Configures the decode engine. Find a full list of these settings and their corresponding descriptions [here](../api-reference/global-interfaces.md#runtimesettings). For example, the following uses the built-in "speed" settings with updated `localizationModes`.
-
-    ```javascript
-    await barcodeScanner.updateRuntimeSettings("speed");
-    //await barcodeScanner.updateRuntimeSettings("balance"); //alternative
-    //await barcodeScanner.updateRuntimeSettings("coverage"); //alternative
-    let settings = await barcodeScanner.getRuntimeSettings();
-    settings.localizationModes = [
-        Dynamsoft.EnumLocalizationMode.LM_CONNECTED_BLOCKS,
-        Dynamsoft.EnumLocalizationMode.LM_SCAN_DIRECTLY,
-        Dynamsoft.EnumLocalizationMode.LM_LINES, 0, 0, 0, 0, 0];
-    await barcodeScanner.updateRuntimeSettings(settings);
-    ```
-    Try in [JSFiddle](https://jsfiddle.net/DynamsoftTeam/f24h8c1m/).
-    
-- `get/updateScanSettings`: Configures the behavior of the scanner which includes `duplicateForgetTime`, `intervalTime` and `filter`, etc.
-
-## Customizing the UI
-
-The library provides a built-in UI for the `BarcodeScanner`object where the default scanner UI is defined in the file `dist/dbr.scanner.html`. There are a few ways to customize it:
-
-* Modify the file `dist/dbr.scanner.html` directly. 
-
-  This option is only possible when you deploy these files yourself instead of using the CDN.
-
-* Copy the file `dist/dbr.scanner.html` to your application, modify it and specify the new file as the default UI with the API `defaultUIElementURL`
-
-  ```javascript
-  Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = url;
-  ```
-  
-  *Note*
-  
-  You must set `defaultUIElementURL` before you call `createInstance`.
-
-* Build the UI element into your own web page and call `scanner.setUIElement(HTMLElement)` to specify that element.
-* Append the default UI element to an element on your page. After that, you can customize it further. The following shows how to append the default UI to a DIV and hide the close button.
-  
-  ```html
-  
    
-  ```
-  
-  ```javascript
-  document.getElementById('scannerUI').appendChild(scanner.getUIElement());
-  document.getElementsByClassName('dbrScanner-btn-close')[0].hidden = true;
-  ```
-
-The following is an example of the 3rd option above. 
-
-```html
-
-
-
-    
    
-        
-    
    
-    
-    
-    
-
-
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)
-
-*NOTE*
-
-The video element must contain the class `dbrScanner-video` so that it can be used.
-
-```html
-
-```
-
-### Cameras and Resolution Options
-
-Next, you can add the camera list and resolution list inside the UI element. In our case, the element would be `document.getElementById('div-video-container')`.
-
-If the class names match the default ones, `dbrScanner-sel-camera` and `dbrScanner-sel-resolution`, the library will automatically populate the lists and handle the camera/resolution switching automatically.
-
-```html
-
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-```html
-
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)
-
-*Note*
-
-By default, 8 hard-coded resolutions will be populated as options.
-
-The following code shows how to display a custom set of resolution options.
-
-```html
-
-```
-
-*NOTE*
-
-Generally, you need to provide a resolution that the camera supports. However, in case a camera does not support the specified resolution, it usually uses the nearest supported resolution. As a result, the selected resolution may not be the actual resolution used. In this case, add an option with the class name `dbrScanner-opt-gotResolution` (as shown above) and the library will then use it to show the actual resolution.
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)
-
-## Decode Barcodes from Existing Video Stream
-
-In v8.0, we introduced a new feature to decode barcodes from an existing video stream. To set the existing video stream, we'll use [setUIElement()](../api-reference/BarcodeScanner/methods/initialize-and-destroy.md#setuielement).
-
-```html
-
-
-
-    
    
-        
-    
    
-    
-    
-    
-
-
-```
-*NOTE*
-
-The video element must contain the class `dbrScanner-existingVideo`.
diff --git a/programming-old/javascript/user-guide/basic-customizations-v8.1.3.md b/programming-old/javascript/user-guide/basic-customizations-v8.1.3.md
deleted file mode 100644
index 893fc504..00000000
--- a/programming-old/javascript/user-guide/basic-customizations-v8.1.3.md
+++ /dev/null
@@ -1,237 +0,0 @@
----
-layout: default-layout
-title: v8.1.3 Basic Customizations - Dynamsoft Barcode Reader JavaScript Edition
-description: This page shows how to customize basic features of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, basic customizations, initialize, javascript, js
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/basic-customizations-v8.1.3.html
----
-
-# Basic Customizations
-
-## Initializing
-
-The library is based on the `WebAssembly` standard; therefore, **on first use**, it needs some time to download and compile the `wasm` files. After first use, the browser may cache the file.
-
-`Dynamsoft.DBR.BarcodeReader.loadWasm()` is the API to start the initialization.
-
-```javascript
-try{
-    await Dynamsoft.DBR.BarcodeReader.loadWasm();
-}catch(ex){
-    console.error(ex);
-}
-```
-
-Other APIs like `Dynamsoft.DBR.BarcodeReader.createInstance()` and `Dynamsoft.DBR.BarcodeScanner.createInstance()` will also call `loadWasm()` during initialization. The following demonstrates the most common usage. 
-
-```javascript
-let reader = null;
-let scanner = null;
-try{
-    reader = await Dynamsoft.DBR.BarcodeReader.createInstance();
-    scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-}catch(ex){
-    console.error(ex);
-}
-```
-
-*NOTE*
-
-Including the library with a script tag doesn't automatically initialize the library. For better performance, you may want to call `loadWasm()` to download and compile the wasm file in advance and create a reader or scanner instance later.   
-
-Initialization consists of the following steps:
-
-* Download
-
-Download the necessary resources. Usually, we deploy the resources on CDN and set a long cache duration. *If your web server is faster, you should put the resources on your own server instead of using the CDN.*
-
-* Compile    
-    
-The `wasm` files are automatically compiled once downloaded. The compilation time varies among different devices & browsers. While it takes less than a second on latest phones or PCs, it may take much longer on older devices.
-
-* Initialize
-
-The library needs to initialize every time the page loads. The initialization means creating a `BarcodeReader` or `BarcodeScanner` instance with specified settings.
-
-## Configuring Scanner Settings
-
-When creating an instance of the `BarcodeScanner` object, there are several configuration options. The following code shows some of the most popular ones:
-
-```javascript
-// set which camera and what resolution to use
-await scanner.updateVideoSettings({ video: { width: 1280, height: 720, facingMode: "environment" } });
-
-// use one of the built-in RuntimeSetting templates: "single" (decode single barcode, default mode), "speed", "balance", "coverage". "speed" is recommended for decoding from a video stream
-await scanner.updateRuntimeSettings("speed");
-
-// make changes to the template. The code snippet below demonstrates how to specify which symbologies are enabled
-let runtimeSettings = await scanner.getRuntimeSettings();
-runtimeSettings.barcodeFormatIds = Dynamsoft.EnumBarcodeFormat.BF_ONED | Dynamsoft.EnumBarcodeFormat.BF_QR_CODE;
-await scanner.updateRuntimeSettings(runtimeSettings);
-
-// set up the scanner behavior
-let scanSettings = await scanner.getScanSettings();
-// disregard duplicated results found in a specified time period
-scanSettings.duplicateForgetTime = 20000;
-// set a scan interval so the library may release the CPU from time to time
-scanSettings.intervalTime = 300;
-await scanner.updateScanSettings(scanSettings);
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/yfkcajxz/)
-
-As you can see in the code, there are three types of configurations:
-
-- `get/updateVideoSettings`: Configures the data source, i.e., the video stream. These settings include which camera to use, the resolution, etc. Learn more [here](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Syntax).
-
-- `get/updateRuntimeSettings`: Configures the decode engine. Find a full list of these settings and their corresponding descriptions [here](../api-reference/global-interfaces.md#runtimesettings). For example, the following uses the built-in "speed" settings with updated `localizationModes`.
-
-    ```javascript
-    await barcodeScanner.updateRuntimeSettings("speed");
-    //await barcodeScanner.updateRuntimeSettings("balance"); //alternative
-    //await barcodeScanner.updateRuntimeSettings("coverage"); //alternative
-    let settings = await barcodeScanner.getRuntimeSettings();
-    settings.localizationModes = [
-        Dynamsoft.EnumLocalizationMode.LM_CONNECTED_BLOCKS,
-        Dynamsoft.EnumLocalizationMode.LM_SCAN_DIRECTLY,
-        Dynamsoft.EnumLocalizationMode.LM_LINES, 0, 0, 0, 0, 0];
-    await barcodeScanner.updateRuntimeSettings(settings);
-    ```
-    Try in [JSFiddle](https://jsfiddle.net/DynamsoftTeam/f24h8c1m/).
-    
-- `get/updateScanSettings`: Configures the behavior of the scanner which includes `duplicateForgetTime`, `intervalTime` and `filter`, etc.
-
-## Customizing the UI
-
-The library provides a built-in UI for the `BarcodeScanner`object where the default scanner UI is defined in the file `dist/dbr.scanner.html`. There are a few ways to customize it:
-
-* Modify the file `dist/dbr.scanner.html` directly. 
-
-  This option is only possible when you deploy these files yourself instead of using the CDN.
-
-* Copy the file `dist/dbr.scanner.html` to your application, modify it and specify the new file as the default UI with the API `defaultUIElementURL`
-
-  ```javascript
-  Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = url;
-  ```
-  
-  *Note*
-  
-  You must set `defaultUIElementURL` before you call `createInstance`.
-
-* Build the UI element into your own web page and call `scanner.setUIElement(HTMLElement)` to specify that element.
-* Append the default UI element to an element on your page. After that, you can customize it further. The following shows how to append the default UI to a DIV and hide the close button.
-  
-  ```html
-  
    
-  ```
-  
-  ```javascript
-  document.getElementById('scannerUI').appendChild(scanner.getUIElement());
-  document.getElementsByClassName('dbrScanner-btn-close')[0].hidden = true;
-  ```
-
-The following is an example of the 3rd option above. 
-
-```html
-
-
-
-    
    
-        
-    
    
-    
-    
-    
-
-
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)
-
-*NOTE*
-
-The video element must contain the class `dbrScanner-video` so that it can be used.
-
-```html
-
-```
-
-### Cameras and Resolution Options
-
-Next, you can add the camera list and resolution list inside the UI element. In our case, the element would be `document.getElementById('div-video-container')`.
-
-If the class names match the default ones, `dbrScanner-sel-camera` and `dbrScanner-sel-resolution`, the library will automatically populate the lists and handle the camera/resolution switching automatically.
-
-```html
-
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-```html
-
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)
-
-*Note*
-
-By default, 8 hard-coded resolutions will be populated as options.
-
-The following code shows how to display a custom set of resolution options.
-
-```html
-
-```
-
-*NOTE*
-
-Generally, you need to provide a resolution that the camera supports. However, in case a camera does not support the specified resolution, it usually uses the nearest supported resolution. As a result, the selected resolution may not be the actual resolution used. In this case, add an option with the class name `dbrScanner-opt-gotResolution` (as shown above) and the library will then use it to show the actual resolution.
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)
-
-## Decode Barcodes from Existing Video Stream
-
-In v8.0, we introduced a new feature to decode barcodes from an existing video stream. To set the existing video stream, we'll use [setUIElement()](../api-reference/BarcodeScanner/methods/initialize-and-destroy.md#setuielement).
-
-```html
-
-
-
-    
    
-        
-    
    
-    
-    
-    
-
-
-```
-*NOTE*
-
-The video element must contain the class `dbrScanner-existingVideo`.
diff --git a/programming-old/javascript/user-guide/basic-customizations-v8.2.0.md b/programming-old/javascript/user-guide/basic-customizations-v8.2.0.md
deleted file mode 100644
index 47a816fd..00000000
--- a/programming-old/javascript/user-guide/basic-customizations-v8.2.0.md
+++ /dev/null
@@ -1,237 +0,0 @@
----
-layout: default-layout
-title: v8.2.0 Basic Customizations - Dynamsoft Barcode Reader JavaScript Edition
-description: This page shows how to customize basic features of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, basic customizations, initialize, javascript, js
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/basic-customizations-v8.2.0.html
----
-
-# Basic Customizations
-
-## Initializing
-
-The library is based on the `WebAssembly` standard; therefore, **on first use**, it needs some time to download and compile the `wasm` files. After first use, the browser may cache the file.
-
-`Dynamsoft.DBR.BarcodeReader.loadWasm()` is the API to start the initialization.
-
-```javascript
-try{
-    await Dynamsoft.DBR.BarcodeReader.loadWasm();
-}catch(ex){
-    console.error(ex);
-}
-```
-
-Other APIs like `Dynamsoft.DBR.BarcodeReader.createInstance()` and `Dynamsoft.DBR.BarcodeScanner.createInstance()` will also call `loadWasm()` during initialization. The following demonstrates the most common usage. 
-
-```javascript
-let reader = null;
-let scanner = null;
-try{
-    reader = await Dynamsoft.DBR.BarcodeReader.createInstance();
-    scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-}catch(ex){
-    console.error(ex);
-}
-```
-
-*NOTE*
-
-Including the library with a script tag doesn't automatically initialize the library. For better performance, you may want to call `loadWasm()` to download and compile the wasm file in advance and create a reader or scanner instance later.   
-
-Initialization consists of the following steps:
-
-* Download
-
-Download the necessary resources. Usually, we deploy the resources on CDN and set a long cache duration. *If your web server is faster, you should put the resources on your own server instead of using the CDN.*
-
-* Compile    
-    
-The `wasm` files are automatically compiled once downloaded. The compilation time varies among different devices & browsers. While it takes less than a second on latest phones or PCs, it may take much longer on older devices.
-
-* Initialize
-
-The library needs to initialize every time the page loads. The initialization means creating a `BarcodeReader` or `BarcodeScanner` instance with specified settings.
-
-## Configuring Scanner Settings
-
-When creating an instance of the `BarcodeScanner` object, there are several configuration options. The following code shows some of the most popular ones:
-
-```javascript
-// set which camera and what resolution to use
-await scanner.updateVideoSettings({ video: { width: 1280, height: 720, facingMode: "environment" } });
-
-// use one of the built-in RuntimeSetting templates: "single" (decode single barcode, default mode), "speed", "balance", "coverage". "speed" is recommended for decoding from a video stream
-await scanner.updateRuntimeSettings("speed");
-
-// make changes to the template. The code snippet below demonstrates how to specify which symbologies are enabled
-let runtimeSettings = await scanner.getRuntimeSettings();
-runtimeSettings.barcodeFormatIds = Dynamsoft.EnumBarcodeFormat.BF_ONED | Dynamsoft.EnumBarcodeFormat.BF_QR_CODE;
-await scanner.updateRuntimeSettings(runtimeSettings);
-
-// set up the scanner behavior
-let scanSettings = await scanner.getScanSettings();
-// disregard duplicated results found in a specified time period
-scanSettings.duplicateForgetTime = 20000;
-// set a scan interval so the library may release the CPU from time to time
-scanSettings.intervalTime = 300;
-await scanner.updateScanSettings(scanSettings);
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/yfkcajxz/)
-
-As you can see in the code, there are three types of configurations:
-
-- `get/updateVideoSettings`: Configures the data source, i.e., the video stream. These settings include which camera to use, the resolution, etc. Learn more [here](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Syntax).
-
-- `get/updateRuntimeSettings`: Configures the decode engine. Find a full list of these settings and their corresponding descriptions [here](../api-reference/global-interfaces.md#runtimesettings). For example, the following uses the built-in "speed" settings with updated `localizationModes`.
-
-    ```javascript
-    await barcodeScanner.updateRuntimeSettings("speed");
-    //await barcodeScanner.updateRuntimeSettings("balance"); //alternative
-    //await barcodeScanner.updateRuntimeSettings("coverage"); //alternative
-    let settings = await barcodeScanner.getRuntimeSettings();
-    settings.localizationModes = [
-        Dynamsoft.EnumLocalizationMode.LM_CONNECTED_BLOCKS,
-        Dynamsoft.EnumLocalizationMode.LM_SCAN_DIRECTLY,
-        Dynamsoft.EnumLocalizationMode.LM_LINES, 0, 0, 0, 0, 0];
-    await barcodeScanner.updateRuntimeSettings(settings);
-    ```
-    Try in [JSFiddle](https://jsfiddle.net/DynamsoftTeam/f24h8c1m/).
-    
-- `get/updateScanSettings`: Configures the behavior of the scanner which includes `duplicateForgetTime`, `intervalTime` and `filter`, etc.
-
-## Customizing the UI
-
-The library provides a built-in UI for the `BarcodeScanner`object where the default scanner UI is defined in the file `dist/dbr.scanner.html`. There are a few ways to customize it:
-
-* Modify the file `dist/dbr.scanner.html` directly. 
-
-  This option is only possible when you deploy these files yourself instead of using the CDN.
-
-* Copy the file `dist/dbr.scanner.html` to your application, modify it and specify the new file as the default UI with the API `defaultUIElementURL`
-
-  ```javascript
-  Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = url;
-  ```
-  
-  *Note*
-  
-  You must set `defaultUIElementURL` before you call `createInstance`.
-
-* Build the UI element into your own web page and call `scanner.setUIElement(HTMLElement)` to specify that element.
-* Append the default UI element to an element on your page. After that, you can customize it further. The following shows how to append the default UI to a DIV and hide the close button.
-  
-  ```html
-  
    
-  ```
-  
-  ```javascript
-  document.getElementById('scannerUI').appendChild(scanner.getUIElement());
-  document.getElementsByClassName('dbrScanner-btn-close')[0].hidden = true;
-  ```
-
-The following is an example of the 3rd option above. 
-
-```html
-
-
-
-    
    
-        
-    
    
-    
-    
-    
-
-
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)
-
-*NOTE*
-
-The video element must contain the class `dbrScanner-video` so that it can be used.
-
-```html
-
-```
-
-### Cameras and Resolution Options
-
-Next, you can add the camera list and resolution list inside the UI element. In our case, the element would be `document.getElementById('div-video-container')`.
-
-If the class names match the default ones, `dbrScanner-sel-camera` and `dbrScanner-sel-resolution`, the library will automatically populate the lists and handle the camera/resolution switching automatically.
-
-```html
-
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-```html
-
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)
-
-*Note*
-
-By default, 8 hard-coded resolutions will be populated as options.
-
-The following code shows how to display a custom set of resolution options.
-
-```html
-
-```
-
-*NOTE*
-
-Generally, you need to provide a resolution that the camera supports. However, in case a camera does not support the specified resolution, it usually uses the nearest supported resolution. As a result, the selected resolution may not be the actual resolution used. In this case, add an option with the class name `dbrScanner-opt-gotResolution` (as shown above) and the library will then use it to show the actual resolution.
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)
-
-## Decode Barcodes from Existing Video Stream
-
-In v8.0, we introduced a new feature to decode barcodes from an existing video stream. To set the existing video stream, we'll use [setUIElement()](../api-reference/BarcodeScanner/methods/initialize-and-destroy.md#setuielement).
-
-```html
-
-
-
-    
    
-        
-    
    
-    
-    
-    
-
-
-```
-*NOTE*
-
-The video element must contain the class `dbrScanner-existingVideo`.
diff --git a/programming-old/javascript/user-guide/basic-customizations-v8.2.1.md b/programming-old/javascript/user-guide/basic-customizations-v8.2.1.md
deleted file mode 100644
index c292d335..00000000
--- a/programming-old/javascript/user-guide/basic-customizations-v8.2.1.md
+++ /dev/null
@@ -1,237 +0,0 @@
----
-layout: default-layout
-title: v8.2.1 Basic Customizations - Dynamsoft Barcode Reader JavaScript Edition
-description: This page shows how to customize basic features of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, basic customizations, initialize, javascript, js
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/basic-customizations-v8.2.1.html
----
-
-# Basic Customizations
-
-## Initializing
-
-The library is based on the `WebAssembly` standard; therefore, **on first use**, it needs some time to download and compile the `wasm` files. After first use, the browser may cache the file.
-
-`Dynamsoft.DBR.BarcodeReader.loadWasm()` is the API to start the initialization.
-
-```javascript
-try{
-    await Dynamsoft.DBR.BarcodeReader.loadWasm();
-}catch(ex){
-    console.error(ex);
-}
-```
-
-Other APIs like `Dynamsoft.DBR.BarcodeReader.createInstance()` and `Dynamsoft.DBR.BarcodeScanner.createInstance()` will also call `loadWasm()` during initialization. The following demonstrates the most common usage. 
-
-```javascript
-let reader = null;
-let scanner = null;
-try{
-    reader = await Dynamsoft.DBR.BarcodeReader.createInstance();
-    scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-}catch(ex){
-    console.error(ex);
-}
-```
-
-*NOTE*
-
-Including the library with a script tag doesn't automatically initialize the library. For better performance, you may want to call `loadWasm()` to download and compile the wasm file in advance and create a reader or scanner instance later.   
-
-Initialization consists of the following steps:
-
-* Download
-
-Download the necessary resources. Usually, we deploy the resources on CDN and set a long cache duration. *If your web server is faster, you should put the resources on your own server instead of using the CDN.*
-
-* Compile    
-    
-The `wasm` files are automatically compiled once downloaded. The compilation time varies among different devices & browsers. While it takes less than a second on latest phones or PCs, it may take much longer on older devices.
-
-* Initialize
-
-The library needs to initialize every time the page loads. The initialization means creating a `BarcodeReader` or `BarcodeScanner` instance with specified settings.
-
-## Configuring Scanner Settings
-
-When creating an instance of the `BarcodeScanner` object, there are several configuration options. The following code shows some of the most popular ones:
-
-```javascript
-// set which camera and what resolution to use
-await scanner.updateVideoSettings({ video: { width: 1280, height: 720, facingMode: "environment" } });
-
-// use one of the built-in RuntimeSetting templates: "single" (decode single barcode, default mode), "speed", "balance", "coverage". "speed" is recommended for decoding from a video stream
-await scanner.updateRuntimeSettings("speed");
-
-// make changes to the template. The code snippet below demonstrates how to specify which symbologies are enabled
-let runtimeSettings = await scanner.getRuntimeSettings();
-runtimeSettings.barcodeFormatIds = Dynamsoft.EnumBarcodeFormat.BF_ONED | Dynamsoft.EnumBarcodeFormat.BF_QR_CODE;
-await scanner.updateRuntimeSettings(runtimeSettings);
-
-// set up the scanner behavior
-let scanSettings = await scanner.getScanSettings();
-// disregard duplicated results found in a specified time period
-scanSettings.duplicateForgetTime = 20000;
-// set a scan interval so the library may release the CPU from time to time
-scanSettings.intervalTime = 300;
-await scanner.updateScanSettings(scanSettings);
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/yfkcajxz/)
-
-As you can see in the code, there are three types of configurations:
-
-- `get/updateVideoSettings`: Configures the data source, i.e., the video stream. These settings include which camera to use, the resolution, etc. Learn more [here](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Syntax).
-
-- `get/updateRuntimeSettings`: Configures the decode engine. Find a full list of these settings and their corresponding descriptions [here](../api-reference/global-interfaces.md#runtimesettings). For example, the following uses the built-in "speed" settings with updated `localizationModes`.
-
-    ```javascript
-    await barcodeScanner.updateRuntimeSettings("speed");
-    //await barcodeScanner.updateRuntimeSettings("balance"); //alternative
-    //await barcodeScanner.updateRuntimeSettings("coverage"); //alternative
-    let settings = await barcodeScanner.getRuntimeSettings();
-    settings.localizationModes = [
-        Dynamsoft.EnumLocalizationMode.LM_CONNECTED_BLOCKS,
-        Dynamsoft.EnumLocalizationMode.LM_SCAN_DIRECTLY,
-        Dynamsoft.EnumLocalizationMode.LM_LINES, 0, 0, 0, 0, 0];
-    await barcodeScanner.updateRuntimeSettings(settings);
-    ```
-    Try in [JSFiddle](https://jsfiddle.net/DynamsoftTeam/f24h8c1m/).
-    
-- `get/updateScanSettings`: Configures the behavior of the scanner which includes `duplicateForgetTime`, `intervalTime` and `filter`, etc.
-
-## Customizing the UI
-
-The library provides a built-in UI for the `BarcodeScanner`object where the default scanner UI is defined in the file `dist/dbr.scanner.html`. There are a few ways to customize it:
-
-* Modify the file `dist/dbr.scanner.html` directly. 
-
-  This option is only possible when you deploy these files yourself instead of using the CDN.
-
-* Copy the file `dist/dbr.scanner.html` to your application, modify it and specify the new file as the default UI with the API `defaultUIElementURL`
-
-  ```javascript
-  Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = url;
-  ```
-  
-  *Note*
-  
-  You must set `defaultUIElementURL` before you call `createInstance`.
-
-* Build the UI element into your own web page and call `scanner.setUIElement(HTMLElement)` to specify that element.
-* Append the default UI element to an element on your page. After that, you can customize it further. The following shows how to append the default UI to a DIV and hide the close button.
-  
-  ```html
-  
    
-  ```
-  
-  ```javascript
-  document.getElementById('scannerUI').appendChild(scanner.getUIElement());
-  document.getElementsByClassName('dbrScanner-btn-close')[0].hidden = true;
-  ```
-
-The following is an example of the 3rd option above. 
-
-```html
-
-
-
-    
    
-        
-    
    
-    
-    
-    
-
-
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)
-
-*NOTE*
-
-The video element must contain the class `dbrScanner-video` so that it can be used.
-
-```html
-
-```
-
-### Cameras and Resolution Options
-
-Next, you can add the camera list and resolution list inside the UI element. In our case, the element would be `document.getElementById('div-video-container')`.
-
-If the class names match the default ones, `dbrScanner-sel-camera` and `dbrScanner-sel-resolution`, the library will automatically populate the lists and handle the camera/resolution switching automatically.
-
-```html
-
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-```html
-
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)
-
-*Note*
-
-By default, 8 hard-coded resolutions will be populated as options.
-
-The following code shows how to display a custom set of resolution options.
-
-```html
-
-```
-
-*NOTE*
-
-Generally, you need to provide a resolution that the camera supports. However, in case a camera does not support the specified resolution, it usually uses the nearest supported resolution. As a result, the selected resolution may not be the actual resolution used. In this case, add an option with the class name `dbrScanner-opt-gotResolution` (as shown above) and the library will then use it to show the actual resolution.
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)
-
-## Decode Barcodes from Existing Video Stream
-
-In v8.0, we introduced a new feature to decode barcodes from an existing video stream. To set the existing video stream, we'll use [setUIElement()](../api-reference/BarcodeScanner/methods/initialize-and-destroy.md#setuielement).
-
-```html
-
-
-
-    
    
-        
-    
    
-    
-    
-    
-
-
-```
-*NOTE*
-
-The video element must contain the class `dbrScanner-existingVideo`.
diff --git a/programming-old/javascript/user-guide/basic-customizations.md b/programming-old/javascript/user-guide/basic-customizations.md
deleted file mode 100644
index 669c5e0c..00000000
--- a/programming-old/javascript/user-guide/basic-customizations.md
+++ /dev/null
@@ -1,237 +0,0 @@
----
-layout: default-layout
-title: Basic Customizations - Dynamsoft Barcode Reader JavaScript Edition
-description: This page shows how to customize basic features of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, basic customizations, initialize, javascript, js
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/basic-customizations.html
----
-
-# Basic Customizations
-
-## Initialization
-
-The library is based on the `WebAssembly` standard; therefore, **on first use**, it needs some time to download and compile the `wasm` files. After first use, the browser may cache the file.
-
-`Dynamsoft.DBR.BarcodeReader.loadWasm()` is the API to start the initialization.
-
-```javascript
-try{
-    await Dynamsoft.DBR.BarcodeReader.loadWasm();
-}catch(ex){
-    console.error(ex);
-}
-```
-
-Other APIs like `Dynamsoft.DBR.BarcodeReader.createInstance()` and `Dynamsoft.DBR.BarcodeScanner.createInstance()` will also call `loadWasm()` during initialization. The following demonstrates the most common usage. 
-
-```javascript
-let reader = null;
-let scanner = null;
-try{
-    reader = await Dynamsoft.DBR.BarcodeReader.createInstance();
-    scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-}catch(ex){
-    console.error(ex);
-}
-```
-
-*NOTE*
-
-Including the library with a script tag doesn't automatically initialize the library. For better performance, you may want to call `loadWasm()` to download and compile the wasm file in advance and create a reader or scanner instance later.   
-
-Initialization consists of the following steps:
-
-* Download
-
-Download the necessary resources. Usually, we deploy the resources on CDN and set a long cache duration. *If your web server is faster, you should put the resources on your own server instead of using the CDN.*
-
-* Compile    
-    
-The `wasm` files are automatically compiled once downloaded. The compilation time varies among different devices & browsers. While it takes less than a second on latest phones or PCs, it may take much longer on older devices.
-
-* Initialize
-
-The library needs to initialize every time the page loads. The initialization means creating a `BarcodeReader` or `BarcodeScanner` instance with specified settings.
-
-## Configuring Scanner Settings
-
-When creating an instance of the `BarcodeScanner` object, there are several configuration options. The following code shows some of the most popular ones:
-
-```javascript
-// set which camera and what resolution to use
-await scanner.updateVideoSettings({ video: { width: 1280, height: 720, facingMode: "environment" } });
-
-// use one of the built-in RuntimeSetting templates: "single" (decode single barcode, default mode), "speed", "balance", "coverage". "speed" is recommended for decoding from a video stream
-await scanner.updateRuntimeSettings("speed");
-
-// make changes to the template. The code snippet below demonstrates how to specify which symbologies are enabled
-let runtimeSettings = await scanner.getRuntimeSettings();
-runtimeSettings.barcodeFormatIds = Dynamsoft.EnumBarcodeFormat.BF_ONED | Dynamsoft.EnumBarcodeFormat.BF_QR_CODE;
-await scanner.updateRuntimeSettings(runtimeSettings);
-
-// set up the scanner behavior
-let scanSettings = await scanner.getScanSettings();
-// disregard duplicated results found in a specified time period
-scanSettings.duplicateForgetTime = 20000;
-// set a scan interval so the library may release the CPU from time to time
-scanSettings.intervalTime = 300;
-await scanner.updateScanSettings(scanSettings);
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/yfkcajxz/)
-
-As you can see in the code, there are three types of configurations:
-
-- `get/updateVideoSettings`: Configures the data source, i.e., the video stream. These settings include which camera to use, the resolution, etc. Learn more [here](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Syntax).
-
-- `get/updateRuntimeSettings`: Configures the decode engine. Find a full list of these settings and their corresponding descriptions [here](../api-reference/global-interfaces.md#runtimesettings). For example, the following uses the built-in "speed" settings with updated `localizationModes`.
-
-    ```javascript
-    await barcodeScanner.updateRuntimeSettings("speed");
-    //await barcodeScanner.updateRuntimeSettings("balance"); //alternative
-    //await barcodeScanner.updateRuntimeSettings("coverage"); //alternative
-    let settings = await barcodeScanner.getRuntimeSettings();
-    settings.localizationModes = [
-        Dynamsoft.EnumLocalizationMode.LM_CONNECTED_BLOCKS,
-        Dynamsoft.EnumLocalizationMode.LM_SCAN_DIRECTLY,
-        Dynamsoft.EnumLocalizationMode.LM_LINES, 0, 0, 0, 0, 0];
-    await barcodeScanner.updateRuntimeSettings(settings);
-    ```
-    Try in [JSFiddle](https://jsfiddle.net/DynamsoftTeam/f24h8c1m/).
-    
-- `get/updateScanSettings`: Configures the behavior of the scanner which includes `duplicateForgetTime`, `intervalTime` and `filter`, etc.
-
-## Customizing the UI
-
-The library provides a built-in UI for the `BarcodeScanner`object where the default scanner UI is defined in the file `dist/dbr.scanner.html`. There are a few ways to customize it:
-
-* Modify the file `dist/dbr.scanner.html` directly. 
-
-  This option is only possible when you deploy these files yourself instead of using the CDN.
-
-* Copy the file `dist/dbr.scanner.html` to your application, modify it and specify the new file as the default UI with the API `defaultUIElementURL`
-
-  ```javascript
-  Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = url;
-  ```
-  
-  *Note*
-  
-  You must set `defaultUIElementURL` before you call `createInstance`.
-
-* Build the UI element into your own web page and call `scanner.setUIElement(HTMLElement)` to specify that element.
-* Append the default UI element to an element on your page. After that, you can customize it further. The following shows how to append the default UI to a DIV and hide the close button.
-  
-  ```html
-  
    
-  ```
-  
-  ```javascript
-  document.getElementById('scannerUI').appendChild(scanner.getUIElement());
-  document.getElementsByClassName('dbrScanner-btn-close')[0].hidden = true;
-  ```
-
-The following is an example of the 3rd option above. 
-
-```html
-
-
-
-    
    
-        
-    
    
-    
-    
-    
-
-
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)
-
-*NOTE*
-
-The video element must contain the class `dbrScanner-video` so that it can be used.
-
-```html
-
-```
-
-### Cameras and Resolution Options
-
-Next, you can add the camera list and resolution list inside the UI element. In our case, the element would be `document.getElementById('div-video-container')`.
-
-If the class names match the default ones, `dbrScanner-sel-camera` and `dbrScanner-sel-resolution`, the library will automatically populate the lists and handle the camera/resolution switching automatically.
-
-```html
-
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-```html
-
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)
-
-*Note*
-
-By default, 8 hard-coded resolutions will be populated as options.
-
-The following code shows how to display a custom set of resolution options.
-
-```html
-
-```
-
-*NOTE*
-
-Generally, you need to provide a resolution that the camera supports. However, in case a camera does not support the specified resolution, it usually uses the nearest supported resolution. As a result, the selected resolution may not be the actual resolution used. In this case, add an option with the class name `dbrScanner-opt-gotResolution` (as shown above) and the library will then use it to show the actual resolution.
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)
-
-## Decode Barcodes from Existing Video Stream
-
-In v8.0, we introduced a new feature to decode barcodes from an existing video stream. To set the existing video stream, we'll use [setUIElement()](../api-reference/BarcodeScanner/methods/initialize-and-destroy.md#setuielement).
-s
-```html
-
-
-
-    
    
-        
-    
    
-    
-    
-    
-
-
-```
-*NOTE*
-
-The video element must contain the class `dbrScanner-existingVideo`.
diff --git a/programming-old/javascript/user-guide/default.md b/programming-old/javascript/user-guide/default.md
deleted file mode 100644
index bb4f2db9..00000000
--- a/programming-old/javascript/user-guide/default.md
+++ /dev/null
@@ -1,21 +0,0 @@
----
-layout: default-layout
-title: User Guide  - Dynamsoft Barcode Reader JavaScript Edition
-description: This is the user guide index page of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide index, javascript, js
-breadcrumbText: User Guide Index
-noTitleIndex: true
-needGenerateH3Content: true
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/default.html
----
-
-# DBR JavaScript Edition User Guide
-
-These articles will help you get the most out of Dynamsoft Barcode Reader JavaScript Edition.
-
-* If you have just started evaluating the SDK, read the [Get Started Guide](index-v9.6.42.md).
-
-* If you want to explore the many features of the SDK and make the most of it, read the articles in [Explore Features](explore-features/index.md).
-
-* If you want to check how the SDK works in popular use cases, read the articles in [Use Cases](use-cases/index.md).
\ No newline at end of file
diff --git a/programming-old/javascript/user-guide/deployment-activation-v7.5.0.md b/programming-old/javascript/user-guide/deployment-activation-v7.5.0.md
deleted file mode 100644
index d083bbe9..00000000
--- a/programming-old/javascript/user-guide/deployment-activation-v7.5.0.md
+++ /dev/null
@@ -1,76 +0,0 @@
----
-layout: default-layout
-title: v7.5.0 Deployment - Dynamsoft Barcode Reader JavaScript Edition
-description: This page shows how to deploy Dynamsoft Barcode Reader JavaScript SDK on your own server.
-keywords: user guide, deployment, javascript, js
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/deployment-activation-v7.5.0.html
----
-
-# Deployment Activation
-
-## Deployment: Self-hosted, Offline, or Intranet 
-
-The following steps guide you through how to deploy the library on your own server.
-
-### Step One: Deploy the dist folder
-
-Locate the **dist/** directory under the installation folder of the library and simply copy the entire directory to your server. The **dist/** folder should contain the following files:
-
-- `dbr.js` // For `
-```
-
-In the above sample code, simply replace `PRODUCT-KEYS` with your activated key.
diff --git a/programming-old/javascript/user-guide/deployment-activation-v7.6.0.md b/programming-old/javascript/user-guide/deployment-activation-v7.6.0.md
deleted file mode 100644
index b817f733..00000000
--- a/programming-old/javascript/user-guide/deployment-activation-v7.6.0.md
+++ /dev/null
@@ -1,76 +0,0 @@
----
-layout: default-layout
-title: v7.6.0 Deployment - Dynamsoft Barcode Reader JavaScript Edition
-description: This page shows how to deploy Dynamsoft Barcode Reader JavaScript SDK on your own server.
-keywords: user guide, deployment, javascript, js
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/deployment-activation-v7.6.0.html
----
-
-# Deployment Activation
-
-## Deployment: Self-hosted, Offline, or Intranet 
-
-The following steps guide you through how to deploy the library on your own server.
-
-### Step One: Deploy the dist folder
-
-Locate the **dist/** directory under the installation folder of the library and simply copy the entire directory to your server. The **dist/** folder should contain the following files:
-
-- `dbr.js` // For `
-```
-
-In the above sample code, simply replace `PRODUCT-KEYS` with your activated key.
diff --git a/programming-old/javascript/user-guide/deployment-activation.md b/programming-old/javascript/user-guide/deployment-activation.md
deleted file mode 100644
index f387a8dc..00000000
--- a/programming-old/javascript/user-guide/deployment-activation.md
+++ /dev/null
@@ -1,56 +0,0 @@
----
-layout: default-layout
-title: Deployment - Dynamsoft Barcode Reader JavaScript Edition
-description: This page shows how to deploy Dynamsoft Barcode Reader JavaScript SDK on your own server.
-keywords: user guide, deployment, javascript, js
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/deployment-activation.html
----
-
-# Deployment and Activation
-
-## Deployment: Self-hosted, Offline, or Intranet 
-
-The following steps guide you through how to deploy the library on your own server instead of using it via a CDN. If you just want to use it over CDN, check out [one-minute set-up]({{site.js }}user-guide/?ver=latest#step-one-write-the-code-in-one-minute).
-
-### Step One: Deploy the dist folder
-
-Locate the "dist/" directory under the installation folder of the library and copy the entire directory to your server.
-
-"dist/" folder should contain the following files and more:
-
-- `dbr.js` // For referencing the library with a `
-    
-
-
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/)
-
-
-`onFrameRead`: This event is triggered after each single frame is scanned. The `results` object contains all the barcode results that the library found on this frame. In this example, we will print the results found in every frame to the console. 
-
-`onUnduplicatedRead`: This event is triggered when a new barcode (not a duplicate) is found. `txt` holds the barcode text value while `result` is an object that holds details of the found barcode. In this example, an alert will be displayed for each unique barcode found. 
-  
-
-### Step Two: Enable camera access
-
-Open the HTML page in your browser and you should see a pop-up asking for permission to access the camera. Once camera access is granted, the video stream will start in the default UI of the **BarcodeScanner** object.  
-
-**Note**: If you don't see the pop-up, wait a few seconds for the initialization to finish.   
-
-In this step, you might run into the following issues:
-
-#### getUserMedia non-HTTPS access issue
-
-If you open the HTML file as `file:///` or `http://`, the following error may appear in the browser console:
-
-> [Deprecation] getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
-
-In Safari 12 the equivalent error is:
-
-> Trying to call getUserMedia from an insecure document.
-
-To access the camera with the API [getUserMedia](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia), HTTPS is required.
-
-**Note**: If you use Chrome or Firefox, you might not get the error because these two browsers allow camera access via file:/// and http://localhost.
-
-To make sure your web application can access the camera, please configure your web server to support HTTPS. The following links may help.
-
-- NGINX: [Configuring HTTPS servers](https://nginx.org/en/docs/http/configuring_https_servers.html)
-- IIS: [Create a Self Signed Certificate in IIS](https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/)
-- Tomcat: [Setting Up SSL on Tomcat in 5 minutes](https://dzone.com/articles/setting-ssl-tomcat-5-minutes)
-- Node.js: [npm tls](https://nodejs.org/docs/v0.4.1/api/tls.html)
-
-#### Self-signed certificate issue
-
-For testing purposes, a self-signed certificate can be used when configuring HTTPS. When accessing the site, the browser might say "the site is not secure". In this case, go to the certificate settings and set to trust this certificate.
-
-In a production environment, you will need a valid HTTPS certificate.
-
-### Step Three: Time to scan
-
-Place a barcode in front of the camera. You should see an alert pop up with the decoded barcode result and a coloured region on the video to highlight the barcode location. 
-
-## Installation
-
-yarn
-
-```
-$ yarn add dynamsoft-javascript-barcode
-```
-
-npm
-
-```
-$ npm install dynamsoft-javascript-barcode --save
-```
-
-cdn
-
-```
-
-
-
-```
-
-Also see [Dynamsoft JavaScript Barcode SDK for Node](https://github.com/dynamsoft-dbr/node-javascript-barcode).  
-
-
-## Demos and Examples
-
-- [Online demo](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html)
-- [Vue example](https://github.com/Dynamsoft/javascript-barcode/tree/master/example/web/vue)    
-- [React example](https://github.com/Dynamsoft/javascript-barcode/tree/master/example/web/react)     
-- [Angular example](https://github.com/Dynamsoft/javascript-barcode/tree/master/example/web/angular)  
-
diff --git a/programming-old/javascript/user-guide/index-v7.6.0.md b/programming-old/javascript/user-guide/index-v7.6.0.md
deleted file mode 100644
index f64518c8..00000000
--- a/programming-old/javascript/user-guide/index-v7.6.0.md
+++ /dev/null
@@ -1,143 +0,0 @@
----
-layout: default-layout
-title: v7.6.0 User Guide - Dynamsoft Barcode Reader JavaScript Edition
-description: This is the user guide of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, javascript, js
-breadcrumbText: User Guide
-needAutoGenerateSidebar: false
-permalink: /programming/javascript/user-guide/index-v7.6.0.html
----
-
-# Dynamsoft Barcode Reader JavaScript Edition - User Guide
-
-![Dynamsoft JavaScript Barcode SDK](assets/dbr-js-sdk.png)  
-
-[Dynamsoft BarcodeReader SDK for Web](https://www.dynamsoft.com/Products/barcode-recognition-javascript.aspx) is a JavaScript SDK for barcode scanning based on **WebAssembly**. It supports real-time barcode localization and decoding of various barcode types. The library is capable of scanning barcodes directly from live video streams and static images. It also supports reading multiple barcodes at once.  
-
-In this guide, you will learn step by step how to use Dynamsoft Barcode Reader JavaScript Edition in your application:
-
-- [Getting Started](#getting-started---hello-world)
-- [Installation](#installation)
-- [Basic Customizations]({{ site.js }}user-guide/basic-customizations.html)
-- [Advanced Customizations]({{ site.js }}user-guide/advanced-customizations.html)
-- [Deployment Activation]({{ site.js }}user-guide/deployment-activation.html)
-- [Features Requirements]({{ site.js }}user-guide/features-requirements.html)
-- [Upgrade]({{ site.js }}user-guide/upgrade.html)
-
-
-## Getting Started - Hello World  
-
-Let's start by using the library to build a simple web application that will decode barcodes from a live video stream.  
-
-### Basic Requirements
-
-- Internet connection  
-- Supported Browser  
-- Camera access  
-
-### Step One: Write the code in one minute  
-
-Create an HTML file with the following content. Deploy this to your web server and run the application over **HTTPS**.
-
-- You will need to replace `PRODUCT-KEYS` with a trial key for the sample code to work correctly. You can acquire a trial key [here](https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js).
-- If you don't have a ready-to-use web server but have a package manager like npm or yarn, you can set up a simple HTTP server in minutes. Check out `http-server` on npm or yarn.
-
-```html
-
-
-
-    
-    
-    
-
-
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/)
-
-
-`onFrameRead`: This event is triggered after each single frame is scanned. The `results` object contains all the barcode results that the library found on this frame. In this example, we will print the results found in every frame to the console. 
-
-`onUnduplicatedRead`: This event is triggered when a new barcode (not a duplicate) is found. `txt` holds the barcode text value while `result` is an object that holds details of the found barcode. In this example, an alert will be displayed for each unique barcode found. 
-  
-
-### Step Two: Enable camera access
-
-Open the HTML page in your browser and you should see a pop-up asking for permission to access the camera. Once camera access is granted, the video stream will start in the default UI of the **BarcodeScanner** object.  
-
-**Note**: If you don't see the pop-up, wait a few seconds for the initialization to finish.   
-
-In this step, you might run into the following issues:
-
-#### getUserMedia non-HTTPS access issue
-
-If you open the HTML file as `file:///` or `http://`, the following error may appear in the browser console:
-
-> [Deprecation] getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
-
-In Safari 12 the equivalent error is:
-
-> Trying to call getUserMedia from an insecure document.
-
-To access the camera with the API [getUserMedia](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia), HTTPS is required.
-
-**Note**: If you use Chrome or Firefox, you might not get the error because these two browsers allow camera access via file:/// and http://localhost.
-
-To make sure your web application can access the camera, please configure your web server to support HTTPS. The following links may help.
-
-- NGINX: [Configuring HTTPS servers](https://nginx.org/en/docs/http/configuring_https_servers.html)
-- IIS: [Create a Self Signed Certificate in IIS](https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/)
-- Tomcat: [Setting Up SSL on Tomcat in 5 minutes](https://dzone.com/articles/setting-ssl-tomcat-5-minutes)
-- Node.js: [npm tls](https://nodejs.org/docs/v0.4.1/api/tls.html)
-
-#### Self-signed certificate issue
-
-For testing purposes, a self-signed certificate can be used when configuring HTTPS. When accessing the site, the browser might say "the site is not secure". In this case, go to the certificate settings and set to trust this certificate.
-
-In a production environment, you will need a valid HTTPS certificate.
-
-### Step Three: Time to scan
-
-Place a barcode in front of the camera. You should see an alert pop up with the decoded barcode result and a coloured region on the video to highlight the barcode location. 
-
-## Installation
-
-yarn
-
-```
-$ yarn add dynamsoft-javascript-barcode
-```
-
-npm
-
-```
-$ npm install dynamsoft-javascript-barcode --save
-```
-
-cdn
-
-```
-
-
-
-```
-
-Also see [Dynamsoft JavaScript Barcode SDK for Node](https://github.com/dynamsoft-dbr/node-javascript-barcode).  
-
-
-## Demos and Examples
-
-- [Online demo](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html)
-- [Vue example](https://github.com/Dynamsoft/javascript-barcode/tree/master/example/web/vue)    
-- [React example](https://github.com/Dynamsoft/javascript-barcode/tree/master/example/web/react)     
-- [Angular example](https://github.com/Dynamsoft/javascript-barcode/tree/master/example/web/angular)  
-
diff --git a/programming-old/javascript/user-guide/index-v8.0.0.md b/programming-old/javascript/user-guide/index-v8.0.0.md
deleted file mode 100644
index 7eb70602..00000000
--- a/programming-old/javascript/user-guide/index-v8.0.0.md
+++ /dev/null
@@ -1,143 +0,0 @@
----
-layout: default-layout
-title: v8.0.0 User Guide - Dynamsoft Barcode Reader JavaScript Edition
-description: This is the user guide of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, javascript, js
-breadcrumbText: User Guide
-needAutoGenerateSidebar: false
-permalink: /programming/javascript/user-guide/index-v8.0.0.html
----
-
-# Dynamsoft Barcode Reader JavaScript Edition - User Guide
-
-![Dynamsoft JavaScript Barcode SDK](assets/dbr-js-sdk.png)  
-
-[Dynamsoft BarcodeReader SDK for Web](https://www.dynamsoft.com/Products/barcode-recognition-javascript.aspx) is a JavaScript SDK for barcode scanning based on **WebAssembly**. It supports real-time barcode localization and decoding of various barcode types. The library is capable of scanning barcodes directly from live video streams and static images. It also supports reading multiple barcodes at once.  
-
-In this guide, you will learn step by step how to use Dynamsoft Barcode Reader JavaScript Edition in your application:
-
-- [Getting Started](#getting-started---hello-world)
-- [Installation](#installation)
-- [Basic Customizations]({{ site.js }}user-guide/basic-customizations.html)
-- [Advanced Customizations]({{ site.js }}user-guide/advanced-customizations.html)
-- [Deployment Activation]({{ site.js }}user-guide/deployment-activation.html)
-- [Features Requirements]({{ site.js }}user-guide/features-requirements.html)
-- [Upgrade]({{ site.js }}user-guide/upgrade.html)
-
-
-## Getting Started - Hello World  
-
-Let's start by using the library to build a simple web application that will decode barcodes from a live video stream.  
-
-### Basic Requirements
-
-- Internet connection  
-- Supported Browser  
-- Camera access  
-
-### Step One: Write the code in one minute  
-
-Create an HTML file with the following content. Deploy this to your web server and run the application over **HTTPS**.
-
-- You will need to replace `PRODUCT-KEYS` with a trial key for the sample code to work correctly. You can acquire a trial key [here](https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js).
-- If you don't have a ready-to-use web server but have a package manager like npm or yarn, you can set up a simple HTTP server in minutes. Check out `http-server` on npm or yarn.
-
-```html
-
-
-
-    
-    
-    
-
-
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/)
-
-
-`onFrameRead`: This event is triggered after each single frame is scanned. The `results` object contains all the barcode results that the library found on this frame. In this example, we will print the results found in every frame to the console. 
-
-`onUnduplicatedRead`: This event is triggered when a new barcode (not a duplicate) is found. `txt` holds the barcode text value while `result` is an object that holds details of the found barcode. In this example, an alert will be displayed for each unique barcode found. 
-  
-
-### Step Two: Enable camera access
-
-Open the HTML page in your browser and you should see a pop-up asking for permission to access the camera. Once camera access is granted, the video stream will start in the default UI of the **BarcodeScanner** object.  
-
-**Note**: If you don't see the pop-up, wait a few seconds for the initialization to finish.   
-
-In this step, you might run into the following issues:
-
-#### getUserMedia non-HTTPS access issue
-
-If you open the HTML file as `file:///` or `http://`, the following error may appear in the browser console:
-
-> [Deprecation] getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
-
-In Safari 12 the equivalent error is:
-
-> Trying to call getUserMedia from an insecure document.
-
-To access the camera with the API [getUserMedia](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia), HTTPS is required.
-
-**Note**: If you use Chrome or Firefox, you might not get the error because these two browsers allow camera access via file:/// and http://localhost.
-
-To make sure your web application can access the camera, please configure your web server to support HTTPS. The following links may help.
-
-- NGINX: [Configuring HTTPS servers](https://nginx.org/en/docs/http/configuring_https_servers.html)
-- IIS: [Create a Self Signed Certificate in IIS](https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/)
-- Tomcat: [Setting Up SSL on Tomcat in 5 minutes](https://dzone.com/articles/setting-ssl-tomcat-5-minutes)
-- Node.js: [npm tls](https://nodejs.org/docs/v0.4.1/api/tls.html)
-
-#### Self-signed certificate issue
-
-For testing purposes, a self-signed certificate can be used when configuring HTTPS. When accessing the site, the browser might say "the site is not secure". In this case, go to the certificate settings and set to trust this certificate.
-
-In a production environment, you will need a valid HTTPS certificate.
-
-### Step Three: Time to scan
-
-Place a barcode in front of the camera. You should see an alert pop up with the decoded barcode result and a coloured region on the video to highlight the barcode location. 
-
-## Installation
-
-yarn
-
-```
-$ yarn add dynamsoft-javascript-barcode
-```
-
-npm
-
-```
-$ npm install dynamsoft-javascript-barcode --save
-```
-
-cdn
-
-```
-
-
-
-```
-
-Also see [Dynamsoft JavaScript Barcode SDK for Node](https://github.com/dynamsoft-dbr/node-javascript-barcode).  
-
-
-## Demos and Examples
-
-- [Online demo](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html)
-- [Vue example](https://github.com/Dynamsoft/javascript-barcode/tree/master/example/web/vue)    
-- [React example](https://github.com/Dynamsoft/javascript-barcode/tree/master/example/web/react)     
-- [Angular example](https://github.com/Dynamsoft/javascript-barcode/tree/master/example/web/angular)  
-
diff --git a/programming-old/javascript/user-guide/index-v8.1.0.md b/programming-old/javascript/user-guide/index-v8.1.0.md
deleted file mode 100644
index a1e34a32..00000000
--- a/programming-old/javascript/user-guide/index-v8.1.0.md
+++ /dev/null
@@ -1,143 +0,0 @@
----
-layout: default-layout
-title: v8.1.0 User Guide - Dynamsoft Barcode Reader JavaScript Edition
-description: This is the user guide of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, javascript, js
-breadcrumbText: User Guide
-needAutoGenerateSidebar: false
-permalink: /programming/javascript/user-guide/index-v8.1.0.html
----
-
-# Dynamsoft Barcode Reader JavaScript Edition - User Guide
-
-![Dynamsoft JavaScript Barcode SDK](assets/dbr-js-sdk.png)  
-
-[Dynamsoft BarcodeReader SDK for Web](https://www.dynamsoft.com/Products/barcode-recognition-javascript.aspx) is a JavaScript SDK for barcode scanning based on **WebAssembly**. It supports real-time barcode localization and decoding of various barcode types. The library is capable of scanning barcodes directly from live video streams and static images. It also supports reading multiple barcodes at once.  
-
-In this guide, you will learn step by step how to use Dynamsoft Barcode Reader JavaScript Edition in your application:
-
-- [Getting Started](#getting-started---hello-world)
-- [Installation](#installation)
-- [Basic Customizations]({{ site.js }}user-guide/basic-customizations.html)
-- [Advanced Customizations]({{ site.js }}user-guide/advanced-customizations.html)
-- [Deployment Activation]({{ site.js }}user-guide/deployment-activation.html)
-- [Features Requirements]({{ site.js }}user-guide/features-requirements.html)
-- [Upgrade]({{ site.js }}user-guide/upgrade.html)
-
-
-## Getting Started - Hello World  
-
-Let's start by using the library to build a simple web application that will decode barcodes from a live video stream.  
-
-### Basic Requirements
-
-- Internet connection  
-- Supported Browser  
-- Camera access  
-
-### Step One: Write the code in one minute  
-
-Create an HTML file with the following content. Deploy this to your web server and run the application over **HTTPS**.
-
-- You will need to replace `PRODUCT-KEYS` with a trial key for the sample code to work correctly. You can acquire a trial key [here](https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js).
-- If you don't have a ready-to-use web server but have a package manager like npm or yarn, you can set up a simple HTTP server in minutes. Check out `http-server` on npm or yarn.
-
-```html
-
-
-
-    
-    
-    
-
-
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/)
-
-
-`onFrameRead`: This event is triggered after each single frame is scanned. The `results` object contains all the barcode results that the library found on this frame. In this example, we will print the results found in every frame to the console. 
-
-`onUnduplicatedRead`: This event is triggered when a new barcode (not a duplicate) is found. `txt` holds the barcode text value while `result` is an object that holds details of the found barcode. In this example, an alert will be displayed for each unique barcode found. 
-  
-
-### Step Two: Enable camera access
-
-Open the HTML page in your browser and you should see a pop-up asking for permission to access the camera. Once camera access is granted, the video stream will start in the default UI of the **BarcodeScanner** object.  
-
-**Note**: If you don't see the pop-up, wait a few seconds for the initialization to finish.   
-
-In this step, you might run into the following issues:
-
-#### getUserMedia non-HTTPS access issue
-
-If you open the HTML file as `file:///` or `http://`, the following error may appear in the browser console:
-
-> [Deprecation] getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
-
-In Safari 12 the equivalent error is:
-
-> Trying to call getUserMedia from an insecure document.
-
-To access the camera with the API [getUserMedia](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia), HTTPS is required.
-
-**Note**: If you use Chrome or Firefox, you might not get the error because these two browsers allow camera access via file:/// and http://localhost.
-
-To make sure your web application can access the camera, please configure your web server to support HTTPS. The following links may help.
-
-- NGINX: [Configuring HTTPS servers](https://nginx.org/en/docs/http/configuring_https_servers.html)
-- IIS: [Create a Self Signed Certificate in IIS](https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/)
-- Tomcat: [Setting Up SSL on Tomcat in 5 minutes](https://dzone.com/articles/setting-ssl-tomcat-5-minutes)
-- Node.js: [npm tls](https://nodejs.org/docs/v0.4.1/api/tls.html)
-
-#### Self-signed certificate issue
-
-For testing purposes, a self-signed certificate can be used when configuring HTTPS. When accessing the site, the browser might say "the site is not secure". In this case, go to the certificate settings and set to trust this certificate.
-
-In a production environment, you will need a valid HTTPS certificate.
-
-### Step Three: Time to scan
-
-Place a barcode in front of the camera. You should see an alert pop up with the decoded barcode result and a coloured region on the video to highlight the barcode location. 
-
-## Installation
-
-yarn
-
-```
-$ yarn add dynamsoft-javascript-barcode
-```
-
-npm
-
-```
-$ npm install dynamsoft-javascript-barcode --save
-```
-
-cdn
-
-```
-
-
-
-```
-
-Also see [Dynamsoft JavaScript Barcode SDK for Node](https://github.com/dynamsoft-dbr/node-javascript-barcode).  
-
-
-## Demos and Examples
-
-- [Online demo](https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html)
-- [Vue example](https://github.com/Dynamsoft/javascript-barcode/tree/master/example/web/vue)    
-- [React example](https://github.com/Dynamsoft/javascript-barcode/tree/master/example/web/react)     
-- [Angular example](https://github.com/Dynamsoft/javascript-barcode/tree/master/example/web/angular)  
-
diff --git a/programming-old/javascript/user-guide/index-v8.1.2.md b/programming-old/javascript/user-guide/index-v8.1.2.md
deleted file mode 100644
index 98125771..00000000
--- a/programming-old/javascript/user-guide/index-v8.1.2.md
+++ /dev/null
@@ -1,162 +0,0 @@
----
-layout: default-layout
-title: v8.1.2 User Guide - Dynamsoft Barcode Reader JavaScript Edition
-description: This is the user guide of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, javascript, js
-breadcrumbText: User Guide
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/index-v8.1.2.html
----
-
-# Dynamsoft Barcode Reader JavaScript Edition - User Guide
-
-![Dynamsoft JavaScript Barcode SDK](assets/dbr-js-sdk.png)  
-
-[Dynamsoft BarcodeReader SDK for Web](https://www.dynamsoft.com/Products/barcode-recognition-javascript.aspx) is a JavaScript SDK for barcode scanning based on **WebAssembly**. It supports real-time barcode localization and decoding of various barcode types. The library is capable of scanning barcodes directly from live video streams as well as static images. It also supports reading multiple barcodes at once.  
-
-In this guide, you will learn step by step how to use Dynamsoft Barcode Reader JavaScript Edition in your application:
-
-- [Getting Started](#getting-started---hello-world)
-- [Installation](#installation)
-- [Basic Customizations]({{ site.js }}user-guide/basic-customizations.html)
-- [Advanced Customizations]({{ site.js }}user-guide/advanced-customizations.html)
-- [Deployment Activation]({{ site.js }}user-guide/deployment-activation.html)
-- [Features Requirements]({{ site.js }}user-guide/features-requirements.html)
-- [Upgrade]({{ site.js }}user-guide/upgrade.html)
-
-
-## Getting Started - Hello World  
-
-Let's start by using the library to build a simple web application that will decode barcodes from a live video stream.  
-
-### Basic Requirements
-
-- Internet connection  
-- [Supported Browser]({{site.js}}user-guide/features-requirements.html#system-requirements)
-- Camera access  
-
-### Step One: Write the code in one minute  
-
-Creat a text file anywhere on your local disk and name it "helloworld.html". Copy the following content in the file and save. 
-
-```html
-
-
-
-    
-    
-    
-
-
-```
-
-*About the code*
-
-- `onFrameRead`: This event is triggered after the library finishes scanning a frame from the video stream. The `results` object contains all the barcode results that the library found on this frame. In this example, we print the results to the browser console.
-
-- `onUnduplicatedRead`: This event is triggered when a new barcode (not a duplicate) is found. `txt` holds the barcode text value while `result` is an object that holds details of the barcode. In this example, an alert will be displayed for each unique barcode found. Notice that if the same barcode is found on multiple consecutive frames, this event is only triggered once.
-
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/)
-
-*Note*:
-
-- The recommendation is to deploy this page to your web server and run it over **HTTPS**. If you don't have a ready-to-use web server but have a package manager like npm or yarn, you can set up a simple HTTP server in minutes. Check out [http-server on npm](https://www.npmjs.com/package/http-server) or [yarn](https://yarnpkg.com/package/http-server). However, for simple testing purposes, it's perfectly fine to just open the file directly from your local disk.
-
-- You will need to replace `PRODUCT-KEYS` with a trial key (or your Handshake Code if you have got one) for the sample code to work correctly. You can acquire a trial key [here](https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js). Notice that the library will still read barcodes without a valid key (Code), but will return an annotated result string.
-
-- The library only scans a new frame when it has finished scanning the previous frame. Generally, frames come in faster than the library processes a frame (for 30 FPS, the interval is about 33 ms), therefore not all frames are scanned.
-
-### Step Two: Enable camera access
-
-Open the HTML page in your browser and you should see a pop-up asking for permission to access the camera. Once the access is granted, the video stream will start in the default UI of the **BarcodeScanner** object.  
-
-*Note*: 
-
-- If you don't see the pop-up, wait a few seconds for the initialization to finish.   
-
-In this step, you might run into the following issues:
-
-#### getUserMedia non-HTTPS access issue
-
-If you opened the HTML file as `file:///` or `http://`, the following error may appear in the browser console:
-
-> [Deprecation] getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
-
-In Safari 12 the equivalent error is:
-
-> Trying to call getUserMedia from an insecure document.
-
-You get this error because to access the camera with the API [getUserMedia](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia), HTTPS is required.
-
-*Note*
-
-- If you use Chrome or Firefox, you might not get the error because these two browsers allow camera access via file:/// and http://localhost.
-
-To make sure your web application can access the camera, please configure your web server to support HTTPS. The following links may help.
-
-- NGINX: [Configuring HTTPS servers](https://nginx.org/en/docs/http/configuring_https_servers.html)
-- IIS: [Create a Self Signed Certificate in IIS](https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/)
-- Tomcat: [Setting Up SSL on Tomcat in 5 minutes](https://dzone.com/articles/setting-ssl-tomcat-5-minutes)
-- Node.js: [npm tls](https://nodejs.org/docs/v0.4.1/api/tls.html)
-
-#### Self-signed certificate issue
-
-For testing purposes, a self-signed certificate can be used when configuring HTTPS. When accessing the site, the browser might say "the site is not secure". In this case, go to the certificate settings and trust this certificate.
-
-In a production environment, a valid HTTPS certificate is required.
-
-### Step Three: Time to scan
-
-Place a barcode in front of the camera. You should see an alert pop up with the decoded barcode result and a coloured region on the video to highlight the barcode location. 
-
-## Installation
-
-For evaluation purposes, we recommend that you get the official package of the library for developers. The following shows how to acquire the package.
-
-* From the website
-
-  [Download Dynamsoft Barcode Reader](https://www.dynamsoft.com/barcode-reader/downloads/)
-
-* yarn
-
-  ```
-  $ yarn add dynamsoft-javascript-barcode
-  ```
-
-* npm
-
-  ```
-  $ npm install dynamsoft-javascript-barcode --save
-  ```
-
-If you want to start building your application right away, you can also just make use of the library via CDN as shown in the previous helloworld sample code.
-
-* cdn
-
-  ```
-  
-  
-  
-  ```
-
-Dynamsoft also provides a Barcode Reader SDK built for Node, see [Dynamsoft JavaScript Barcode SDK for Node](https://github.com/dynamsoft-dbr/node-javascript-barcode).
-
-## Demos and Examples
-
-The following are the official demo of the library and examples for the most popular JavaScript Frameworks.
-
-- [Online demo](https://demo.dynamsoft.com/barcode-reader-js/)
-- [Vue example](https://github.com/Dynamsoft/javascript-barcode/tree/master/example/web/vue)    
-- [React example](https://github.com/Dynamsoft/javascript-barcode/tree/master/example/web/react)     
-- [Angular example](https://github.com/Dynamsoft/javascript-barcode/tree/master/example/web/angular)  
-
diff --git a/programming-old/javascript/user-guide/index-v8.1.3.md b/programming-old/javascript/user-guide/index-v8.1.3.md
deleted file mode 100644
index 855e900c..00000000
--- a/programming-old/javascript/user-guide/index-v8.1.3.md
+++ /dev/null
@@ -1,162 +0,0 @@
----
-layout: default-layout
-title: v8.1.3 User Guide - Dynamsoft Barcode Reader JavaScript Edition
-description: This is the user guide of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, javascript, js
-breadcrumbText: User Guide
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/index-v8.1.3.html
----
-
-# Dynamsoft Barcode Reader JavaScript Edition - User Guide
-
-![Dynamsoft JavaScript Barcode SDK](assets/dbr-js-sdk.png)  
-
-[Dynamsoft BarcodeReader SDK for Web](https://www.dynamsoft.com/Products/barcode-recognition-javascript.aspx) is a JavaScript SDK for barcode scanning based on **WebAssembly**. It supports real-time barcode localization and decoding of various barcode types. The library is capable of scanning barcodes directly from live video streams as well as static images. It also supports reading multiple barcodes at once.  
-
-In this guide, you will learn step by step how to use Dynamsoft Barcode Reader JavaScript Edition in your application:
-
-- [Getting Started](#getting-started---hello-world)
-- [Installation](#installation)
-- [Basic Customizations]({{ site.js }}user-guide/basic-customizations.html)
-- [Advanced Customizations]({{ site.js }}user-guide/advanced-customizations.html)
-- [Deployment Activation]({{ site.js }}user-guide/deployment-activation.html)
-- [Features Requirements]({{ site.js }}user-guide/features-requirements.html)
-- [Upgrade]({{ site.js }}user-guide/upgrade.html)
-
-
-## Getting Started - Hello World  
-
-Let's start by using the library to build a simple web application that will decode barcodes from a live video stream.  
-
-### Basic Requirements
-
-- Internet connection  
-- [Supported Browser]({{site.js}}user-guide/features-requirements.html#system-requirements)
-- Camera access  
-
-### Step One: Write the code in one minute  
-
-Creat a text file anywhere on your local disk and name it "helloworld.html". Copy the following content in the file and save. 
-
-```html
-
-
-
-    
-    
-    
-
-
-```
-
-*About the code*
-
-- `onFrameRead`: This event is triggered after the library finishes scanning a frame from the video stream. The `results` object contains all the barcode results that the library found on this frame. In this example, we print the results to the browser console.
-
-- `onUnduplicatedRead`: This event is triggered when a new barcode (not a duplicate) is found. `txt` holds the barcode text value while `result` is an object that holds details of the barcode. In this example, an alert will be displayed for each unique barcode found. Notice that if the same barcode is found on multiple consecutive frames, this event is only triggered once.
-
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/)
-
-*Note*:
-
-- The recommendation is to deploy this page to your web server and run it over **HTTPS**. If you don't have a ready-to-use web server but have a package manager like npm or yarn, you can set up a simple HTTP server in minutes. Check out [http-server on npm](https://www.npmjs.com/package/http-server) or [yarn](https://yarnpkg.com/package/http-server). However, for simple testing purposes, it's perfectly fine to just open the file directly from your local disk.
-
-- You will need to replace `PRODUCT-KEYS` with a trial key (or your Handshake Code if you have got one) for the sample code to work correctly. You can acquire a trial key [here](https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js). Notice that the library will still read barcodes without a valid key (Code), but will return an annotated result string.
-
-- The library only scans a new frame when it has finished scanning the previous frame. Generally, frames come in faster than the library processes a frame (for 30 FPS, the interval is about 33 ms), therefore not all frames are scanned.
-
-### Step Two: Enable camera access
-
-Open the HTML page in your browser and you should see a pop-up asking for permission to access the camera. Once the access is granted, the video stream will start in the default UI of the **BarcodeScanner** object.  
-
-*Note*: 
-
-- If you don't see the pop-up, wait a few seconds for the initialization to finish.   
-
-In this step, you might run into the following issues:
-
-#### getUserMedia non-HTTPS access issue
-
-If you opened the HTML file as `file:///` or `http://`, the following error may appear in the browser console:
-
-> [Deprecation] getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
-
-In Safari 12 the equivalent error is:
-
-> Trying to call getUserMedia from an insecure document.
-
-You get this error because to access the camera with the API [getUserMedia](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia), HTTPS is required.
-
-*Note*
-
-- If you use Chrome or Firefox, you might not get the error because these two browsers allow camera access via file:/// and http://localhost.
-
-To make sure your web application can access the camera, please configure your web server to support HTTPS. The following links may help.
-
-- NGINX: [Configuring HTTPS servers](https://nginx.org/en/docs/http/configuring_https_servers.html)
-- IIS: [Create a Self Signed Certificate in IIS](https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/)
-- Tomcat: [Setting Up SSL on Tomcat in 5 minutes](https://dzone.com/articles/setting-ssl-tomcat-5-minutes)
-- Node.js: [npm tls](https://nodejs.org/docs/v0.4.1/api/tls.html)
-
-#### Self-signed certificate issue
-
-For testing purposes, a self-signed certificate can be used when configuring HTTPS. When accessing the site, the browser might say "the site is not secure". In this case, go to the certificate settings and trust this certificate.
-
-In a production environment, a valid HTTPS certificate is required.
-
-### Step Three: Time to scan
-
-Place a barcode in front of the camera. You should see an alert pop up with the decoded barcode result and a coloured region on the video to highlight the barcode location. 
-
-## Installation
-
-For evaluation purposes, we recommend that you get the official package of the library for developers. The following shows how to acquire the package.
-
-* From the website
-
-  [Download Dynamsoft Barcode Reader](https://www.dynamsoft.com/barcode-reader/downloads/)
-
-* yarn
-
-  ```
-  $ yarn add dynamsoft-javascript-barcode
-  ```
-
-* npm
-
-  ```
-  $ npm install dynamsoft-javascript-barcode --save
-  ```
-
-If you want to start building your application right away, you can also just make use of the library via CDN as shown in the previous helloworld sample code.
-
-* cdn
-
-  ```
-  
-  
-  
-  ```
-
-Dynamsoft also provides a Barcode Reader SDK built for Node, see [Dynamsoft JavaScript Barcode SDK for Node](https://github.com/dynamsoft-dbr/node-javascript-barcode).
-
-## Demos and Examples
-
-The following are the official demo of the library and examples for the most popular JavaScript Frameworks.
-
-- [Online demo](https://demo.dynamsoft.com/barcode-reader-js/)
-- [Vue example](https://github.com/Dynamsoft/javascript-barcode/tree/master/example/web/vue)    
-- [React example](https://github.com/Dynamsoft/javascript-barcode/tree/master/example/web/react)     
-- [Angular example](https://github.com/Dynamsoft/javascript-barcode/tree/master/example/web/angular)  
-
diff --git a/programming-old/javascript/user-guide/index-v8.2.0.md b/programming-old/javascript/user-guide/index-v8.2.0.md
deleted file mode 100644
index 6e9bb4a0..00000000
--- a/programming-old/javascript/user-guide/index-v8.2.0.md
+++ /dev/null
@@ -1,162 +0,0 @@
----
-layout: default-layout
-title: v8.2.0 User Guide - Dynamsoft Barcode Reader JavaScript Edition
-description: This is the user guide of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, javascript, js
-breadcrumbText: User Guide
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/index-v8.2.0.html
----
-
-# Dynamsoft Barcode Reader JavaScript Edition - User Guide
-
-![Dynamsoft JavaScript Barcode SDK](assets/dbr-js-sdk.png)  
-
-[Dynamsoft BarcodeReader SDK for Web](https://www.dynamsoft.com/Products/barcode-recognition-javascript.aspx) is a JavaScript SDK for barcode scanning based on **WebAssembly**. It supports real-time barcode localization and decoding of various barcode types. The library is capable of scanning barcodes directly from live video streams as well as static images. It also supports reading multiple barcodes at once.  
-
-In this guide, you will learn step by step how to use Dynamsoft Barcode Reader JavaScript Edition in your application:
-
-- [Getting Started](#getting-started---hello-world)
-- [Installation](#installation)
-- [Basic Customizations]({{ site.js }}user-guide/basic-customizations.html)
-- [Advanced Customizations]({{ site.js }}user-guide/advanced-customizations.html)
-- [Deployment Activation]({{ site.js }}user-guide/deployment-activation.html)
-- [Features Requirements]({{ site.js }}user-guide/features-requirements.html)
-- [Upgrade]({{ site.js }}user-guide/upgrade.html)
-
-
-## Getting Started - Hello World  
-
-Let's start by using the library to build a simple web application that will decode barcodes from a live video stream.  
-
-### Basic Requirements
-
-- Internet connection  
-- [Supported Browser]({{site.js}}user-guide/features-requirements.html#system-requirements)
-- Camera access  
-
-### Step One: Write the code in one minute  
-
-Creat a text file anywhere on your local disk and name it "helloworld.html". Copy the following content in the file and save. 
-
-```html
-
-
-
-    
-    
-    
-
-
-```
-
-*About the code*
-
-- `onFrameRead`: This event is triggered after the library finishes scanning a frame from the video stream. The `results` object contains all the barcode results that the library found on this frame. In this example, we print the results to the browser console.
-
-- `onUnduplicatedRead`: This event is triggered when a new barcode (not a duplicate) is found. `txt` holds the barcode text value while `result` is an object that holds details of the barcode. In this example, an alert will be displayed for each unique barcode found. Notice that if the same barcode is found on multiple consecutive frames, this event is only triggered once.
-
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/)
-
-*Note*:
-
-- The recommendation is to deploy this page to your web server and run it over **HTTPS**. If you don't have a ready-to-use web server but have a package manager like npm or yarn, you can set up a simple HTTP server in minutes. Check out [http-server on npm](https://www.npmjs.com/package/http-server) or [yarn](https://yarnpkg.com/package/http-server). However, for simple testing purposes, it's perfectly fine to just open the file directly from your local disk.
-
-- You will need to replace `PRODUCT-KEYS` with a trial key (or your Handshake Code if you have got one) for the sample code to work correctly. You can acquire a trial key [here](https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js). Notice that the library will still read barcodes without a valid key (Code), but will return an annotated result string.
-
-- The library only scans a new frame when it has finished scanning the previous frame. Generally, frames come in faster than the library processes a frame (for 30 FPS, the interval is about 33 ms), therefore not all frames are scanned.
-
-### Step Two: Enable camera access
-
-Open the HTML page in your browser and you should see a pop-up asking for permission to access the camera. Once the access is granted, the video stream will start in the default UI of the **BarcodeScanner** object.  
-
-*Note*: 
-
-- If you don't see the pop-up, wait a few seconds for the initialization to finish.   
-
-In this step, you might run into the following issues:
-
-#### getUserMedia non-HTTPS access issue
-
-If you opened the HTML file as `file:///` or `http://`, the following error may appear in the browser console:
-
-> [Deprecation] getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
-
-In Safari 12 the equivalent error is:
-
-> Trying to call getUserMedia from an insecure document.
-
-You get this error because to access the camera with the API [getUserMedia](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia), HTTPS is required.
-
-*Note*
-
-- If you use Chrome or Firefox, you might not get the error because these two browsers allow camera access via file:/// and http://localhost.
-
-To make sure your web application can access the camera, please configure your web server to support HTTPS. The following links may help.
-
-- NGINX: [Configuring HTTPS servers](https://nginx.org/en/docs/http/configuring_https_servers.html)
-- IIS: [Create a Self Signed Certificate in IIS](https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/)
-- Tomcat: [Setting Up SSL on Tomcat in 5 minutes](https://dzone.com/articles/setting-ssl-tomcat-5-minutes)
-- Node.js: [npm tls](https://nodejs.org/docs/v0.4.1/api/tls.html)
-
-#### Self-signed certificate issue
-
-For testing purposes, a self-signed certificate can be used when configuring HTTPS. When accessing the site, the browser might say "the site is not secure". In this case, go to the certificate settings and trust this certificate.
-
-In a production environment, a valid HTTPS certificate is required.
-
-### Step Three: Time to scan
-
-Place a barcode in front of the camera. You should see an alert pop up with the decoded barcode result and a coloured region on the video to highlight the barcode location. 
-
-## Installation
-
-For evaluation purposes, we recommend that you get the official package of the library for developers. The following shows how to acquire the package.
-
-* From the website
-
-  [Download Dynamsoft Barcode Reader](https://www.dynamsoft.com/barcode-reader/downloads/)
-
-* yarn
-
-  ```
-  $ yarn add dynamsoft-javascript-barcode
-  ```
-
-* npm
-
-  ```
-  $ npm install dynamsoft-javascript-barcode --save
-  ```
-
-If you want to start building your application right away, you can also just make use of the library via CDN as shown in the previous helloworld sample code.
-
-* cdn
-
-  ```
-  
-  
-  
-  ```
-
-Dynamsoft also provides a Barcode Reader SDK built for Node, see [Dynamsoft JavaScript Barcode SDK for Node](https://github.com/dynamsoft-dbr/node-javascript-barcode).
-
-## Demos and Examples
-
-The following are the official demo of the library and examples for the most popular JavaScript Frameworks.
-
-- [Online demo](https://demo.dynamsoft.com/barcode-reader-js/)
-- [Vue example](https://github.com/Dynamsoft/javascript-barcode/tree/master/example/web/vue)    
-- [React example](https://github.com/Dynamsoft/javascript-barcode/tree/master/example/web/react)     
-- [Angular example](https://github.com/Dynamsoft/javascript-barcode/tree/master/example/web/angular)  
-
diff --git a/programming-old/javascript/user-guide/index-v8.2.1.md b/programming-old/javascript/user-guide/index-v8.2.1.md
deleted file mode 100644
index d645a796..00000000
--- a/programming-old/javascript/user-guide/index-v8.2.1.md
+++ /dev/null
@@ -1,162 +0,0 @@
----
-layout: default-layout
-title: v8.2.1 User Guide - Dynamsoft Barcode Reader JavaScript Edition
-description: This is the user guide of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, javascript, js
-breadcrumbText: User Guide
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/index-v8.2.1.html
----
-
-# Dynamsoft Barcode Reader JavaScript Edition - User Guide
-
-![Dynamsoft JavaScript Barcode SDK](assets/dbr-js-sdk.png)  
-
-[Dynamsoft BarcodeReader SDK for Web](https://www.dynamsoft.com/Products/barcode-recognition-javascript.aspx) is a JavaScript SDK for barcode scanning based on **WebAssembly**. It supports real-time barcode localization and decoding of various barcode types. The library is capable of scanning barcodes directly from live video streams as well as static images. It also supports reading multiple barcodes at once.  
-
-In this guide, you will learn step by step how to use Dynamsoft Barcode Reader JavaScript Edition in your application:
-
-- [Getting Started](#getting-started---hello-world)
-- [Installation](#installation)
-- [Basic Customizations]({{ site.js }}user-guide/basic-customizations.html)
-- [Advanced Customizations]({{ site.js }}user-guide/advanced-customizations.html)
-- [Deployment Activation]({{ site.js }}user-guide/deployment-activation.html)
-- [Features Requirements]({{ site.js }}user-guide/features-requirements.html)
-- [Upgrade]({{ site.js }}user-guide/upgrade.html)
-
-
-## Getting Started - Hello World  
-
-Let's start by using the library to build a simple web application that will decode barcodes from a live video stream.  
-
-### Basic Requirements
-
-- Internet connection  
-- [Supported Browser]({{site.js}}user-guide/features-requirements.html#system-requirements)
-- Camera access  
-
-### Step One: Write the code in one minute  
-
-Creat a text file anywhere on your local disk and name it "helloworld.html". Copy the following content in the file and save. 
-
-```html
-
-
-
-    
-    
-    
-
-
-```
-
-*About the code*
-
-- `onFrameRead`: This event is triggered after the library finishes scanning a frame from the video stream. The `results` object contains all the barcode results that the library found on this frame. In this example, we print the results to the browser console.
-
-- `onUnduplicatedRead`: This event is triggered when a new barcode (not a duplicate) is found. `txt` holds the barcode text value while `result` is an object that holds details of the barcode. In this example, an alert will be displayed for each unique barcode found. Notice that if the same barcode is found on multiple consecutive frames, this event is only triggered once.
-
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/)
-
-*Note*:
-
-- The recommendation is to deploy this page to your web server and run it over **HTTPS**. If you don't have a ready-to-use web server but have a package manager like npm or yarn, you can set up a simple HTTP server in minutes. Check out [http-server on npm](https://www.npmjs.com/package/http-server) or [yarn](https://yarnpkg.com/package/http-server). However, for simple testing purposes, it's perfectly fine to just open the file directly from your local disk.
-
-- You will need to replace `PRODUCT-KEYS` with a trial key (or your Handshake Code if you have got one) for the sample code to work correctly. You can acquire a trial key [here](https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js). Notice that the library will still read barcodes without a valid key (Code), but will return an annotated result string.
-
-- The library only scans a new frame when it has finished scanning the previous frame. Generally, frames come in faster than the library processes a frame (for 30 FPS, the interval is about 33 ms), therefore not all frames are scanned.
-
-### Step Two: Enable camera access
-
-Open the HTML page in your browser and you should see a pop-up asking for permission to access the camera. Once the access is granted, the video stream will start in the default UI of the **BarcodeScanner** object.  
-
-*Note*: 
-
-- If you don't see the pop-up, wait a few seconds for the initialization to finish.   
-
-In this step, you might run into the following issues:
-
-#### getUserMedia non-HTTPS access issue
-
-If you opened the HTML file as `file:///` or `http://`, the following error may appear in the browser console:
-
-> [Deprecation] getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
-
-In Safari 12 the equivalent error is:
-
-> Trying to call getUserMedia from an insecure document.
-
-You get this error because to access the camera with the API [getUserMedia](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia), HTTPS is required.
-
-*Note*
-
-- If you use Chrome or Firefox, you might not get the error because these two browsers allow camera access via file:/// and http://localhost.
-
-To make sure your web application can access the camera, please configure your web server to support HTTPS. The following links may help.
-
-- NGINX: [Configuring HTTPS servers](https://nginx.org/en/docs/http/configuring_https_servers.html)
-- IIS: [Create a Self Signed Certificate in IIS](https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/)
-- Tomcat: [Setting Up SSL on Tomcat in 5 minutes](https://dzone.com/articles/setting-ssl-tomcat-5-minutes)
-- Node.js: [npm tls](https://nodejs.org/docs/v0.4.1/api/tls.html)
-
-#### Self-signed certificate issue
-
-For testing purposes, a self-signed certificate can be used when configuring HTTPS. When accessing the site, the browser might say "the site is not secure". In this case, go to the certificate settings and trust this certificate.
-
-In a production environment, a valid HTTPS certificate is required.
-
-### Step Three: Time to scan
-
-Place a barcode in front of the camera. You should see an alert pop up with the decoded barcode result and a coloured region on the video to highlight the barcode location. 
-
-## Installation
-
-For evaluation purposes, we recommend that you get the official package of the library for developers. The following shows how to acquire the package.
-
-* From the website
-
-  [Download Dynamsoft Barcode Reader](https://www.dynamsoft.com/barcode-reader/downloads/)
-
-* yarn
-
-  ```
-  $ yarn add dynamsoft-javascript-barcode
-  ```
-
-* npm
-
-  ```
-  $ npm install dynamsoft-javascript-barcode --save
-  ```
-
-If you want to start building your application right away, you can also just make use of the library via CDN as shown in the previous helloworld sample code.
-
-* cdn
-
-  ```
-  
-  
-  
-  ```
-
-Dynamsoft also provides a Barcode Reader SDK built for Node, see [Dynamsoft JavaScript Barcode SDK for Node](https://github.com/dynamsoft-dbr/node-javascript-barcode).
-
-## Demos and Examples
-
-The following are the official demo of the library and examples for the most popular JavaScript Frameworks.
-
-- [Online demo](https://demo.dynamsoft.com/barcode-reader-js/)
-- [Vue example](https://github.com/Dynamsoft/javascript-barcode/tree/master/example/web/vue)    
-- [React example](https://github.com/Dynamsoft/javascript-barcode/tree/master/example/web/react)     
-- [Angular example](https://github.com/Dynamsoft/javascript-barcode/tree/master/example/web/angular)  
-
diff --git a/programming-old/javascript/user-guide/index-v8.2.3.md b/programming-old/javascript/user-guide/index-v8.2.3.md
deleted file mode 100644
index 7b972af3..00000000
--- a/programming-old/javascript/user-guide/index-v8.2.3.md
+++ /dev/null
@@ -1,162 +0,0 @@
----
-layout: default-layout
-title: v8.2.3 User Guide - Dynamsoft Barcode Reader JavaScript Edition
-description: This is the user guide of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, javascript, js
-breadcrumbText: User Guide
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/index-v8.2.3.html
----
-
-# Dynamsoft Barcode Reader JavaScript Edition - User Guide
-
-![Dynamsoft JavaScript Barcode SDK](assets/dbr-js-sdk.png)  
-
-[Dynamsoft BarcodeReader SDK for Web](https://www.dynamsoft.com/Products/barcode-recognition-javascript.aspx) is a JavaScript SDK for barcode scanning based on **WebAssembly**. It supports real-time barcode localization and decoding of various barcode types. The library is capable of scanning barcodes directly from live video streams as well as static images. It also supports reading multiple barcodes at once.  
-
-In this guide, you will learn step by step how to use Dynamsoft Barcode Reader JavaScript Edition in your application:
-
-- [Getting Started](#getting-started---hello-world)
-- [Installation](#installation)
-- [Basic Customizations]({{ site.js }}user-guide/basic-customizations.html)
-- [Advanced Customizations]({{ site.js }}user-guide/advanced-customizations.html)
-- [Deployment Activation]({{ site.js }}user-guide/deployment-activation.html)
-- [Features Requirements]({{ site.js }}user-guide/features-requirements.html)
-- [Upgrade]({{ site.js }}user-guide/upgrade.html)
-
-
-## Getting Started - Hello World  
-
-Let's start by using the library to build a simple web application that will decode barcodes from a live video stream.  
-
-### Basic Requirements
-
-- Internet connection  
-- [Supported Browser]({{site.js}}user-guide/features-requirements.html#system-requirements)
-- Camera access  
-
-### Step One: Write the code in one minute  
-
-Creat a text file anywhere on your local disk and name it "helloworld.html". Copy the following content in the file and save. 
-
-```html
-
-
-
-    
-    
-    
-
-
-```
-
-*About the code*
-
-- `onFrameRead`: This event is triggered after the library finishes scanning a frame from the video stream. The `results` object contains all the barcode results that the library found on this frame. In this example, we print the results to the browser console.
-
-- `onUnduplicatedRead`: This event is triggered when a new barcode (not a duplicate) is found. `txt` holds the barcode text value while `result` is an object that holds details of the barcode. In this example, an alert will be displayed for each unique barcode found. Notice that if the same barcode is found on multiple consecutive frames, this event is only triggered once.
-
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/)
-
-*Note*:
-
-- The recommendation is to deploy this page to your web server and run it over **HTTPS**. If you don't have a ready-to-use web server but have a package manager like npm or yarn, you can set up a simple HTTP server in minutes. Check out [http-server on npm](https://www.npmjs.com/package/http-server) or [yarn](https://yarnpkg.com/package/http-server). However, for simple testing purposes, it's perfectly fine to just open the file directly from your local disk.
-
-- You will need to replace `PRODUCT-KEYS` with a trial key (or your Handshake Code if you have got one) for the sample code to work correctly. You can acquire a trial key [here](https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js). Notice that the library will still read barcodes without a valid key (Code), but will return an annotated result string.
-
-- The library only scans a new frame when it has finished scanning the previous frame. Generally, frames come in faster than the library processes a frame (for 30 FPS, the interval is about 33 ms), therefore not all frames are scanned.
-
-### Step Two: Enable camera access
-
-Open the HTML page in your browser and you should see a pop-up asking for permission to access the camera. Once the access is granted, the video stream will start in the default UI of the **BarcodeScanner** object.  
-
-*Note*: 
-
-- If you don't see the pop-up, wait a few seconds for the initialization to finish.   
-
-In this step, you might run into the following issues:
-
-#### getUserMedia non-HTTPS access issue
-
-If you opened the HTML file as `file:///` or `http://`, the following error may appear in the browser console:
-
-> [Deprecation] getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
-
-In Safari 12 the equivalent error is:
-
-> Trying to call getUserMedia from an insecure document.
-
-You get this error because to access the camera with the API [getUserMedia](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia), HTTPS is required.
-
-*Note*
-
-- If you use Chrome or Firefox, you might not get the error because these two browsers allow camera access via file:/// and http://localhost.
-
-To make sure your web application can access the camera, please configure your web server to support HTTPS. The following links may help.
-
-- NGINX: [Configuring HTTPS servers](https://nginx.org/en/docs/http/configuring_https_servers.html)
-- IIS: [Create a Self Signed Certificate in IIS](https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/)
-- Tomcat: [Setting Up SSL on Tomcat in 5 minutes](https://dzone.com/articles/setting-ssl-tomcat-5-minutes)
-- Node.js: [npm tls](https://nodejs.org/docs/v0.4.1/api/tls.html)
-
-#### Self-signed certificate issue
-
-For testing purposes, a self-signed certificate can be used when configuring HTTPS. When accessing the site, the browser might say "the site is not secure". In this case, go to the certificate settings and trust this certificate.
-
-In a production environment, a valid HTTPS certificate is required.
-
-### Step Three: Time to scan
-
-Place a barcode in front of the camera. You should see an alert pop up with the decoded barcode result and a coloured region on the video to highlight the barcode location. 
-
-## Installation
-
-For evaluation purposes, we recommend that you get the official package of the library for developers. The following shows how to acquire the package.
-
-* From the website
-
-  [Download Dynamsoft Barcode Reader](https://www.dynamsoft.com/barcode-reader/downloads/)
-
-* yarn
-
-  ```
-  $ yarn add dynamsoft-javascript-barcode
-  ```
-
-* npm
-
-  ```
-  $ npm install dynamsoft-javascript-barcode --save
-  ```
-
-If you want to start building your application right away, you can also just make use of the library via CDN as shown in the previous helloworld sample code.
-
-* cdn
-
-  ```
-  
-  
-  
-  ```
-
-Dynamsoft also provides a Barcode Reader SDK built for Node, see [Dynamsoft JavaScript Barcode SDK for Node](https://github.com/dynamsoft-dbr/node-javascript-barcode).
-
-## Demos and Examples
-
-The following are the official demo of the library and examples for the most popular JavaScript Frameworks.
-
-- [Online demo](https://demo.dynamsoft.com/barcode-reader-js/)
-- [Vue example](https://github.com/Dynamsoft/javascript-barcode/tree/master/example/web/vue)    
-- [React example](https://github.com/Dynamsoft/javascript-barcode/tree/master/example/web/react)     
-- [Angular example](https://github.com/Dynamsoft/javascript-barcode/tree/master/example/web/angular)  
-
diff --git a/programming-old/javascript/user-guide/index-v8.2.5.md b/programming-old/javascript/user-guide/index-v8.2.5.md
deleted file mode 100644
index df4bfb5f..00000000
--- a/programming-old/javascript/user-guide/index-v8.2.5.md
+++ /dev/null
@@ -1,548 +0,0 @@
----
-layout: default-layout
-title: v8.2.5 User Guide - Dynamsoft Barcode Reader JavaScript Edition
-description: This is the user guide of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, javascript, js
-breadcrumbText: User Guide
-noTitleIndex: true
-needGenerateH3Content: true
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/index-v8.2.5.html
----
-
-# Dynamsoft Barcode Reader for Your Website
-
-Turn your web page into a barcode scanner with just a few lines of code.
-
-![version](https://img.shields.io/npm/v/dynamsoft-javascript-barcode.svg)
-![downloads](https://img.shields.io/npm/dm/dynamsoft-javascript-barcode.svg) 
-![jsdelivr](https://img.shields.io/jsdelivr/npm/hm/dynamsoft-javascript-barcode.svg)
-![](https://img.shields.io/snyk/vulnerabilities/npm/dynamsoft-javascript-barcode.svg)
-
-[![](https://img.shields.io/badge/Download-Offline%20SDK-orange)](https://www.dynamsoft.com/barcode-reader/downloads/?utm_source=github&product=dbr&package=js)
-
-Once integrated, your users can open your website in a browser, access their cameras and read barcodes directly from the video input.
-
-In this guide, you will learn step by step on how to integrate this library into your website.
-
-> For back-end barcode reading with Node.js, also see [Dynamsoft Barcode Reader for Node](https://github.com/Dynamsoft/javascript-barcode/blob/master/README.NODE.md).
-
-Table of Contents:
-
-* [Hello World - Simplest Implementation](#hello-world---simplest-implementation)
-* [Building your own page](#building-your-own-page)
-  - [Include the library](#include-the-library)
-  - [Configure the library](#configure-the-library)
-  - [Interact with the library](#interact-with-the-library)
-* [Requesting A Trial](#requesting-a-trial)
-* [System Requirements](#system-requirements)
-* [Hosting the Library](#hosting-the-library)
-* [Advanced Usage](#advanced-usage)
-* [How to Upgrade](#how-to-upgrade)
-* [FAQ](#faq)
-
-Example Code:
-
-* [Use the library in Angular](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/master/1.hello-world/3.read-video-angular)
-* [Use the library in React](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/master/1.hello-world/4.read-video-react)
-* [Use the library in Vue](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/master/1.hello-world/5.read-video-vue)
-
-You can also:
-
-* [Try All Online Examples](https://demo.dynamsoft.com/Samples/DBR/JS/index.html)
-* [Try the Official Demo](https://demo.dynamsoft.com/barcode-reader-js/)
-
-## Hello World - Simplest Implementation
-
-Let's start by testing the "Hello World" example of the library which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream.  
-
-* Basic Requirements
-  + Internet connection  
-  + [A supported browser](#system-requirements)
-  + Camera access  
-
-### Step One: Check the code of the example
-
-The complete code of the "Hello World" example is shown below
-
-``` html
-
-
-
-
-    
-  
-
-
-
-```
-
-> You can also find the code (with more comments) [on GitHub](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/master/1.hello-world/1.minimum-code.html).
-
-*About the code*
-
-  + `createInstance()`: This method creates a `BarcodeScanner` object. This object can read barcodes directly from a video input with the help of its interactive UI (hidden by default) and the [MediaDevices interface](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices).
-
-  + `onFrameRead`: This event is triggered every time the library finishes scanning a video frame. The `results` object contains all the barcode results that the library have found on this frame. In this example, we print the results to the browser console.
-
-  + `onUnduplicatedRead`: This event is triggered when the library finds a new barcode, which is not a duplicate among multiple frames. `txt` holds the barcode text value while `result` is an object that holds details of the barcode. In this example, an alert will be displayed for this new barcode.
-
-  + `show()`: This method brings up the built-in UI of the `BarcodeScanner` object.
-
-### Step Two: Test the example
-
-You can choose one of three ways to test the example:
-
-* [Hello World example](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.minimum-code.html) 
-* [Hello World example via JSFiddle](https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/)
-* [Download a copy](https://tst.dynamsoft.com/public/download/dbr/browser/code/helloworld.zip) of the example code and set it up locally
-
-Either way, you open the example page in a browser, allow the page to access your camera and the video will show up on the page. After that, you can point the camera at something with a barcode to read it.
-
-If the barcode is decoded, an alert will pop up with the result text. At the same time, the barcode location will be highlighted in the video feed. 
-
-  > For first use, you may need to wait a few seconds for the library to initialize.
-
-*Note*:
-
-  + The library only scans a new frame when it has finished scanning the previous frame. The interval between two consecutive frames might not be enough time for the library to process the 1st frame (for 30 FPS, the interval is about 33 ms), therefore, not all frames are scanned.
-
-  + The library requires a license to work. However, when no license is specified in the code, a [free public trial license](https://www.dynamsoft.com/license-server/docs/about/terms.html?ver=latest#public-trial-license?utm_source=guide) will automatically be used during which you can make initial evaluation of the library to decide whether or not you want to evaluate it further. If you do, you can [request a trial](#requesting-a-trial).
-
-    > Network connection is required for the free public trial license to work.
-
-If the test doesn't go as expected, you can check out the [FAQ](#faq) or [contact us](https://www.dynamsoft.com/contact/).
-
-## Building your own page
-
-### Include the library
-
-#### Use a CDN
-
-The simplest way to include the library is to use either the [jsDelivr](https://jsdelivr.com/) or [UNPKG](https://unpkg.com/) CDN. The "hello world" example above uses **jsDelivr**.
-
-* jsDelivr
-
-  ``` html
-  
-  ```
-
-* UNPKG  
-
-  ``` html
-  
-  ```
-
-#### Host the library yourself (recommended)
-
-Besides using the CDN, you can also download the library and host its files on your own website / server before including it in your application.
-
-The following shows a few ways to download the library.
-
-* From the website
-
-  [Download the JavaScript Package](https://www.dynamsoft.com/barcode-reader/downloads/)
-
-* yarn
-
-  ```cmd
-  $ yarn add dynamsoft-javascript-barcode
-  ```
-
-* npm
-
-  ``` 
-  $ npm install dynamsoft-javascript-barcode --save
-  ```
-
-Depending on how you downloaded the library and where you put it. You can typically include it like this:
-
-``` html
-
-```
-
-or
-
-``` html
-
-```
-
-Read more on [how to host the library](#hosting-the-library).
-
-### Configure the library
-
-Before using the library, you need to configure a few things.
-
-#### Specify the license
-
-  The library requires a license to work, use the APIs `organizationID` and `handshakeCode` to specify how to acquire the license.
-
-  ``` javascript
-  Dynamsoft.DBR.BarcodeScanner.organizationID = "YOUR-ORGANIZATION-ID"; // Required.
-  Dynamsoft.DBR.BarcodeScanner.handshakeCode = "A-SPECIFIC-HANDSHAKECODE"; // Optional, if not specified, the default handshake code is used.
-  Dynamsoft.DBR.BarcodeScanner.sessionPassword = "PASSWORD-TO-PROTECT-YOUR-LICENSE"; // Optional but recomended, use it to protect your license.
-  Dynamsoft.DBR.BarcodeScanner.licenseServer = ["YOUR-OWN-MAIN-LTS", "YOUR-OWN-STANDBY-LTS"]; //Optional, ignore this line if you are using Dynamsoft-hosting LTS.
-  ```
-
-  *Note*:
-
-  + Network connection is required for the license to work.
-  + If nothing is specified like the above "hello world" example, a [free public trial license](https://www.dynamsoft.com/license-server/docs/about/terms.html?ver=latest#public-trial-license?utm_source=guide) will be automatically used. 
-  + The license is actually fetched during the creation of an `BarcodeScanner` or `BarcodeReader` object.
-  + If a public network connection is not available, you can choose to host a license server in your private network.
-
-  An alternative way to specify the license is to use an alphanumeric string which does not require a network connection. The following shows how it could be used. [Contact us](https://www.dynamsoft.com/contact/) for more information.
-  
-  ```javascript
-  Dynamsoft.DBR.BarcodeReader.productKeys = "t0068NQAAACgTVU2aucyxqETXKkiomqhV7YoLrnqjLiQQRSH5DBV1UtIs4..."
-  ```
-  
-  Or
-  
-  ```html
-  
-  ```
-
-
-#### Specify the location of the "engine" files
-
-  The "engine" files refer to *.worker.js, *.wasm.js and *.wasm, etc. which are loaded by the main library at runtime. This configuration option uses the API `engineResourcePath` and is often not required as these files usually are in the same location with the main library file (dbr.js). However, in cases where the engine files are not in the same location as the main library file (for example, with frameworks like Angular or React, dbr.js is compiled into another file), this configuration will be required.
-
-  The following code uses the jsDelivr CDN, feel free to change it to your own location of these files.
-  
-  ``` javascript
-  import DBR from "dynamsoft-javascript-barcode";
-  DBR.BarcodeScanner.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.2.5/dist/";
-  export default DBR;
-  ```
-
-#### Specify which engine to use
-
-  The library comes with two engines: "compact" and "full". They may be merged into one in the future, but right now you can choose one to use.
-
-  By default, the compact engine is used. The following line changes it to the full engine.
-
-  ``` javascript
-  Dynamsoft.DBR.BarcodeScanner._bUseFullFeature = true;
-  ```
-
-  The following table compares the features between the two engines:
-
-  | Features | Compact edition | Full edition |
-  |:-:|:-:|:-:|
-  | *.wasm* size*\(gzip\) | 897 KB | 1.2 MB |
-  | 1D | ✓ | ✓ |
-  | QR | ✓ | ✓ |
-  | Micro QR | - | ✓ |
-  | PDF417 | ✓ | ✓ |
-  | Micro PDF417 | - | ✓ |
-  | DataMatrix | ✓ | ✓ |
-  | Aztec | - | ✓ |
-  | MaxiCode | - | ✓ |
-  | Patch Code | - | ✓ |
-  | GS1 Composite Code | - | ✓ |
-  | GS1 DataBar | - | ✓ |
-  | DotCode | - | ✓ |
-  | Postal Code | - | ✓ |
-  | DPM | - | ✓ |
-  | getRuntimeSettings | ✓ | ✓ |
-  | updateRuntimeSettings | ✓ | ✓ |
-  | getIntermediateResults | - | ✓ |
-  | initRuntimeSettingsWithString | - | ✓ |
-  | outputSettingsToString | - | ✓ |
-
-  * The file size is version 8.2.5. In other versions, the size may be different.
-
-### Interact with the library
-
-#### Create a `BarcodeScanner` object
-
-You can use one of two classes ( `BarcodeScanner` and `BarcodeReader` ) to interact with the library. `BarcodeReader` is a low-level class that processes images directly. `BarcodeScanner` , on the other hand, inherits from `BarcodeReader` and provides high-level APIs and a built-in UI to allow barcode scanning via cameras. We'll focus on `BarcodeScanner` in this guide.
-
-To use the library, we first create a `BarcodeScanner` object.
-
-``` javascript
-try {
-    await Dynamsoft.DBR.BarcodeScanner.createInstance();
-} catch (ex) {
-    console.error(ex);
-}
-```
-
-*Note*:
-
-* The creation of an object consists of two parallel tasks: one is to download and compile the "engine", the other is to fetch a license from the License Tracking Server (assuming an online license is used).
-
-#### Configure the `BarcodeScanner` object
-
-Let's take a look at the following code snippets first:
-
-``` javascript
-// set which camera and what resolution to use
-await scanner.updateVideoSettings({
-    video: {
-        width: 1280,
-        height: 720,
-        facingMode: "environment"
-    }
-});
-```
-
-``` javascript
-// set up the scanner behavior
-let scanSettings = await scanner.getScanSettings();
-// disregard duplicated results found in a specified time period
-scanSettings.duplicateForgetTime = 20000;
-// set a scan interval so the library may release the CPU from time to time
-scanSettings.intervalTime = 300;
-await scanner.updateScanSettings(scanSettings);
-```
-
-``` javascript
-// use one of the built-in RuntimeSetting templates: "single" (decode a single barcode, default mode), "speed", "balance", "coverage". "speed" is recommended for decoding from a video stream
-await scanner.updateRuntimeSettings("speed");
-
-// make changes to the template. The code below demonstrates how to specify which symbologies are enabled
-let runtimeSettings = await scanner.getRuntimeSettings();
-runtimeSettings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_ONED | Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
-await scanner.updateRuntimeSettings(runtimeSettings);
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/yfkcajxz/)
-
-As you can see from the above code snippets, there are three types of configurations:
-
-* `get/updateVideoSettings`: Configures the data source, i.e., the camera. These settings include which camera to use, the resolution, etc. Learn more [here](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Syntax).
-
-* `get/updateScanSettings`: Configures the behavior of the scanner which includes `duplicateForgetTime`,  `intervalTime` and `filter`, etc.
-
-* `get/updateRuntimeSettings`: Configures the decode engine. Find a full list of these settings and their corresponding descriptions [here](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/global-interfaces.html#runtimesettings). For example, the following uses the built-in "speed" settings with updated `localizationModes`.
-
-  ``` javascript
-  await barcodeScanner.updateRuntimeSettings("speed");
-  //await barcodeScanner.updateRuntimeSettings("balance"); //alternative
-  //await barcodeScanner.updateRuntimeSettings("coverage"); //alternative
-  let settings = await barcodeScanner.getRuntimeSettings();
-  settings.localizationModes = [
-      Dynamsoft.DBR.EnumLocalizationMode.LM_CONNECTED_BLOCKS,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_SCAN_DIRECTLY,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_LINES, 0, 0, 0, 0, 0
-  ];
-  await barcodeScanner.updateRuntimeSettings(settings);
-  ```
-
-  Try in [JSFiddle](https://jsfiddle.net/DynamsoftTeam/f24h8c1m/).
-
-#### Customize the UI
-
-The built-in UI of the `BarcodeScanner` object is defined in the file `dist/dbr.scanner.html` . There are a few ways to customize it:
-
-* Modify the file `dist/dbr.scanner.html` directly. 
-
-  This option is only possible when you host this file on your own web server instead of using a CDN.
-
-* Copy the file `dist/dbr.scanner.html` to your application, modify it and use the the API `defaultUIElementURL` to set it as the default UI.
-
-  ``` javascript
-  Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "THE-URL-TO-THE-FILE";
-  ```
-  
-  > You must set `defaultUIElementURL` before you call `createInstance()` .
-
-* Append the default UI element to your page, customize it before showing it.
-
-  ``` html
-  
    
-  ```
-
-  ``` javascript
-  document.getElementById('scannerUI').appendChild(scanner.getUIElement());
-  document.getElementsByClassName('dbrScanner-btn-close')[0].hidden = true; // Hide the close button
-  ```
-
-* Build the UI element into your own web page and specify it with the API `setUIElement(HTMLElement)`.
-
-  - Embed the video
-
-    ``` html
-    
    
-        
-    
    
-    
-    ```
-
-    > The video element must have the class `dbrScanner-video` .
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)
-
-  - Add the camera list and resolution list
-  
-    If the class names for these lists match the default ones, `dbrScanner-sel-camera` and `dbrScanner-sel-resolution` , the library will automatically populate the lists and handle the camera/resolution switching.
-
-    ``` html
-    
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-    ``` html
-    
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)
-
-    > By default, 8 hard-coded resolutions are populated as options. You can show only a custom set of options by hardcoding them.
-
-    ``` html
-    
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)
-
-    > Generally, you need to provide a resolution that the camera supports. However, in case a camera does not support the specified resolution, it usually uses the nearest supported resolution. As a result, the selected resolution may not be the actual resolution used. In this case, add an option with the class name `dbrScanner-opt-gotResolution` (as shown above) and the library will then use it to show the actual resolution.
-
-Interested to test it further? Read on to learn how to request a 30-day free trial.
-
-## Requesting A Trial
-
-Since v8.2.5, a free public trial license is used by default if no license is specified.
-
-> Network connection is required for the free public trial license to work.
-
-After that, if you want to evaluate the library further, you can [register for a Dynamsoft account](https://www.dynamsoft.com/api-common/Regist/Regist) (if you haven't already done so) and request a 30-day trial license via the Request a Trial License link.
-
-* If you like, you can also [contact our support team](https://www.dynamsoft.com/contact/) to get a trial extension.
-
-## System Requirements
-
-This library requires the following features which are supported by all modern mainstream browsers:
-
-* `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`  
-    
-  These four features are required for the library to work.
-
-* `MediaDevices`/`getUserMedia` 
-    
-  This API is only required for in-browser video streaming. If a browser does not support this API, the [Single Frame Mode](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/BarcodeScanner/properties.html?ver=latest#singleframemode) will be used automatically. If the API exists but doesn't work correctly,  the Single Frame Mode can be used as an alternative way to access the camera.
-
-The following table is a list of supported browsers based on the above requirements:
-
-Browser Name | Version
-:-: | :-:
-Chrome | v57+ (v59+ on Android/iOS1)
-Firefox | v52+ (v55+ on Android/iOS1)
-Edge2 | v16+
-Safari3 | v11+
-
-1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-2 On Edge, due to strict Same-origin policy, you must host the library files on the same domain as your web page. 
-
-3 Safari 11.2.2 ~ 11.2.6 are not supported.
-     
-Apart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the library. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.
-
-## Hosting the library
-
-### Step One: Deploy the dist folder
-
-Once you have downloaded the library, you can locate the "dist" directory and copy it to your server (usually as part of your website / web application). The following shows some of the files in this directory:
-
-* `dbr.js` // The main library file
-* `dbr.browser.mjs` // For using the library as a module (`
-```
-
-Optionally, you may also need to (specify the location of the "engine" files)[#specify-the-location-of-the-engine-files].
-
-
-## Advanced Usage
-
-In addition to the content mentioned above, the library has many other settings and options that you can adjust to best suit your usage. To read more, please see [advanced usage](https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/advanced-usage.html?ver=latest).
-
-## How to Upgrade
-
-If you are using an older version of the library and want to upgrade it to the latest version, please read more on [how to upgrade](https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/upgrade.html?ver=latest).
-
-## FAQ
-
-### Can I open the web page directly from the hard drive?
-
-Yes, for simple testing purposes, it's perfectly fine to open the file directly from the hard drive. However, you might encounter some issues in doing so (like unable to access the camera, etc.). The recommendation is to deploy this page to your web server and run it over **HTTPS**. If you don't have a ready-to-use web server but have a package manager like *npm* or *yarn*, you can set up a simple HTTP server in minutes. Check out [http-server on npm](https://www.npmjs.com/package/http-server) or [yarn](https://yarnpkg.com/package/http-server). 
-
-### Why can't I use my camera?
-
-If you open the web page as `file:///` or `http://`, the camera may not work and you see the following error in the browser console:
-
-> [Deprecation] getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
-
-* In Safari 12 the equivalent error is:
-
-> Trying to call getUserMedia from an insecure document.
-
-You get this error because the API [getUserMedia](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) requires HTTPS to access the camera.
-
-* If you use Chrome or Firefox, you might not get the error because these two browsers allow camera access via file:/// and http://localhost.
-
-To make sure your web application can access the camera, please configure your web server to support HTTPS. The following links may help.
-
-  - NGINX: [Configuring HTTPS servers](https://nginx.org/en/docs/http/configuring_https_servers.html)
-  - IIS: [Create a Self Signed Certificate in IIS](https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/)
-  - Tomcat: [Setting Up SSL on Tomcat in 5 minutes](https://dzone.com/articles/setting-ssl-tomcat-5-minutes)
-  - Node.js: [npm tls](https://nodejs.org/docs/v0.4.1/api/tls.html)
diff --git a/programming-old/javascript/user-guide/index-v8.4.0.md b/programming-old/javascript/user-guide/index-v8.4.0.md
deleted file mode 100644
index 8e0033a2..00000000
--- a/programming-old/javascript/user-guide/index-v8.4.0.md
+++ /dev/null
@@ -1,549 +0,0 @@
----
-layout: default-layout
-title: v8.4.0 User Guide - Dynamsoft Barcode Reader JavaScript Edition
-description: This is the user guide of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, javascript, js
-breadcrumbText: User Guide
-noTitleIndex: true
-needGenerateH3Content: true
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/index-v8.4.0.html
----
-
-# Dynamsoft Barcode Reader for Your Website
-
-Turn your web page into a barcode scanner with just a few lines of code.
-
-![version](https://img.shields.io/npm/v/dynamsoft-javascript-barcode.svg)
-![downloads](https://img.shields.io/npm/dm/dynamsoft-javascript-barcode.svg) 
-![jsdelivr](https://img.shields.io/jsdelivr/npm/hm/dynamsoft-javascript-barcode.svg)
-![](https://img.shields.io/snyk/vulnerabilities/npm/dynamsoft-javascript-barcode.svg)
-
-[![](https://img.shields.io/badge/Download-Offline%20SDK-orange)](https://www.dynamsoft.com/barcode-reader/downloads/?utm_source=github&product=dbr&package=js)
-
-Once integrated, your users can open your website in a browser, access their cameras and read barcodes directly from the video input.
-
-In this guide, you will learn step by step on how to integrate this library into your website.
-
-> For back-end barcode reading with Node.js, also see [Dynamsoft Barcode Reader for Node](https://github.com/Dynamsoft/javascript-barcode/blob/master/README.NODE.md).
-
-**Table of Contents**
-
-* [Hello World - Simplest Implementation](#hello-world---simplest-implementation)
-* [Building your own page](#building-your-own-page)
-  - [Include the library](#include-the-library)
-  - [Configure the library](#configure-the-library)
-  - [Interact with the library](#interact-with-the-library)
-* [Requesting A Trial](#requesting-a-trial)
-* [System Requirements](#system-requirements)
-* [Hosting the Library](#hosting-the-library)
-* [Advanced Usage](#advanced-usage)
-* [How to Upgrade](#how-to-upgrade)
-* [FAQ](#faq)
-
-**Example Code**
-
-* [Use the library in Angular](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/master/1.hello-world/3.read-video-angular)
-* [Use the library in React](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/master/1.hello-world/4.read-video-react)
-* [Use the library in Vue](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/master/1.hello-world/5.read-video-vue)
-
-You can also:
-
-* [Try All Online Examples](https://demo.dynamsoft.com/Samples/DBR/JS/index.html)
-* [Try the Official Demo](https://demo.dynamsoft.com/barcode-reader-js/)
-
-## Hello World - Simplest Implementation
-
-Let's start by testing the "Hello World" example of the library which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream.  
-
-* Basic Requirements
-  + Internet connection  
-  + [A supported browser](#system-requirements)
-  + Camera access  
-
-### Step One: Check the code of the example
-
-The complete code of the "Hello World" example is shown below
-
-``` html
-
-
-
-
-    
-  
-
-
-
-```
-
-> You can also find the code (with more comments) [on GitHub](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/master/1.hello-world/1.minimum-code.html).
-
-*About the code*
-
-  + `createInstance()`: This method creates a `BarcodeScanner` object. This object can read barcodes directly from a video input with the help of its interactive UI (hidden by default) and the [MediaDevices interface](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices).
-
-  + `onFrameRead`: This event is triggered every time the library finishes scanning a video frame. The `results` object contains all the barcode results that the library have found on this frame. In this example, we print the results to the browser console.
-
-  + `onUnduplicatedRead`: This event is triggered when the library finds a new barcode, which is not a duplicate among multiple frames. `txt` holds the barcode text value while `result` is an object that holds details of the barcode. In this example, an alert will be displayed for this new barcode.
-
-  + `show()`: This method brings up the built-in UI of the `BarcodeScanner` object.
-
-### Step Two: Test the example
-
-You can choose one of three ways to test the example:
-
-* [Hello World example](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.minimum-code.html) 
-* [Hello World example via JSFiddle](https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/)
-* [Download a copy](https://tst.dynamsoft.com/public/download/dbr/browser/code/helloworld.zip) of the example code and set it up locally
-
-Either way, you open the example page in a browser, allow the page to access your camera and the video will show up on the page. After that, you can point the camera at something with a barcode to read it.
-
-If the barcode is decoded, an alert will pop up with the result text. At the same time, the barcode location will be highlighted in the video feed. 
-
-  > For first use, you may need to wait a few seconds for the library to initialize.
-
-*Note*:
-
-  + The library only scans a new frame when it has finished scanning the previous frame. The interval between two consecutive frames might not be enough time for the library to process the 1st frame (for 30 FPS, the interval is about 33 ms), therefore, not all frames are scanned.
-
-  + The library requires a license to work. However, when no license is specified in the code, a [free public trial license](https://www.dynamsoft.com/license-server/docs/about/terms.html?ver=latest#public-trial-license?utm_source=guide) will automatically be used during which you can make initial evaluation of the library to decide whether or not you want to evaluate it further. If you do, you can [request a trial](#requesting-a-trial).
-
-    > Network connection is required for the free public trial license to work.
-
-If the test doesn't go as expected, you can check out the [FAQ](#faq) or [contact us](https://www.dynamsoft.com/contact/).
-
-## Building your own page
-
-### Include the library
-
-#### Use a CDN
-
-The simplest way to include the library is to use either the [jsDelivr](https://jsdelivr.com/) or [UNPKG](https://unpkg.com/) CDN. The "hello world" example above uses **jsDelivr**.
-
-* jsDelivr
-
-  ``` html
-  
-  ```
-
-* UNPKG  
-
-  ``` html
-  
-  ```
-
-#### Host the library yourself (recommended)
-
-Besides using the CDN, you can also download the library and host its files on your own website / server before including it in your application.
-
-The following shows a few ways to download the library.
-
-* From the website
-
-  [Download the JavaScript Package](https://www.dynamsoft.com/barcode-reader/downloads/)
-
-* yarn
-
-  ```cmd
-  $ yarn add dynamsoft-javascript-barcode
-  ```
-
-* npm
-
-  ``` 
-  $ npm install dynamsoft-javascript-barcode --save
-  ```
-
-Depending on how you downloaded the library and where you put it. You can typically include it like this:
-
-``` html
-
-```
-
-or
-
-``` html
-
-```
-
-Read more on [how to host the library](#hosting-the-library).
-
-### Configure the library
-
-Before using the library, you need to configure a few things.
-
-#### Specify the license
-
-  The library requires a license to work, use the APIs `organizationID` and `handshakeCode` to specify how to acquire the license.
-
-  ``` javascript
-  Dynamsoft.DBR.BarcodeScanner.organizationID = "YOUR-ORGANIZATION-ID"; // Required.
-  Dynamsoft.DBR.BarcodeScanner.handshakeCode = "A-SPECIFIC-HANDSHAKECODE"; // Optional, if not specified, the default handshake code is used.
-  Dynamsoft.DBR.BarcodeScanner.sessionPassword = "PASSWORD-TO-PROTECT-YOUR-LICENSE"; // Optional but recomended, use it to protect your license.
-  Dynamsoft.DBR.BarcodeScanner.licenseServer = ["YOUR-OWN-MAIN-LTS", "YOUR-OWN-STANDBY-LTS"]; //Optional, ignore this line if you are using Dynamsoft-hosting LTS.
-  ```
-
-  *Note*:
-
-  + Network connection is required for the license to work.
-  + If nothing is specified like the above "hello world" example, a [free public trial license](https://www.dynamsoft.com/license-server/docs/about/terms.html?ver=latest#public-trial-license?utm_source=guide) will be automatically used. 
-  + The license is actually fetched during the creation of an `BarcodeScanner` or `BarcodeReader` object.
-  + If a public network connection is not available, you can choose to host a license server in your private network.
-
-  An alternative way to specify the license is to use an alphanumeric string which does not require a network connection. The following shows how it could be used. [Contact us](https://www.dynamsoft.com/contact/) for more information.
-  
-  ```javascript
-  Dynamsoft.DBR.BarcodeReader.productKeys = "t0068NQAAACgTVU2aucyxqETXKkiomqhV7YoLrnqjLiQQRSH5DBV1UtIs4..."
-  ```
-  
-  Or
-  
-  ```html
-  
-  ```
-
-
-#### Specify the location of the "engine" files
-
-  The "engine" files refer to *.worker.js, *.wasm.js and *.wasm, etc. which are loaded by the main library at runtime. This configuration option uses the API `engineResourcePath` and is often not required as these files usually are in the same location with the main library file (dbr.js). However, in cases where the engine files are not in the same location as the main library file (for example, with frameworks like Angular or React, dbr.js is compiled into another file), this configuration will be required.
-
-  The following code uses the jsDelivr CDN, feel free to change it to your own location of these files.
-  
-  ``` javascript
-  import DBR from "dynamsoft-javascript-barcode";
-  DBR.BarcodeScanner.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.4.0/dist/";
-  export default DBR;
-  ```
-
-#### Specify which engine to use
-
-  The library comes with two engines: "compact" and "full". They may be merged into one in the future, but right now you can choose one to use.
-
-  By default, the compact engine is used. The following line changes it to the full engine.
-
-  ``` javascript
-  Dynamsoft.DBR.BarcodeScanner._bUseFullFeature = true;
-  ```
-
-  The following table compares the features between the two engines:
-
-  | Features | Compact edition | Full edition |
-  |:-:|:-:|:-:|
-  | *.wasm* size*\(gzip\) | 910 KB | 1.2 MB |
-  | 1D | ✓ | ✓ |
-  | QR | ✓ | ✓ |
-  | Micro QR | - | ✓ |
-  | PDF417 | ✓ | ✓ |
-  | Micro PDF417 | - | ✓ |
-  | DataMatrix | ✓ | ✓ |
-  | Aztec | - | ✓ |
-  | MaxiCode | - | ✓ |
-  | Patch Code | - | ✓ |
-  | GS1 Composite Code | - | ✓ |
-  | GS1 DataBar | - | ✓ |
-  | DotCode | - | ✓ |
-  | Postal Code | - | ✓ |
-  | DPM | - | ✓ |
-  | getRuntimeSettings | ✓ | ✓ |
-  | updateRuntimeSettings | ✓ | ✓ |
-  | getIntermediateResults | - | ✓ |
-  | initRuntimeSettingsWithString | - | ✓ |
-  | outputSettingsToString | - | ✓ |
-
-  * The file size is version 8.4.0. In other versions, the size may be different.
-
-### Interact with the library
-
-#### Create a `BarcodeScanner` object
-
-You can use one of two classes ( `BarcodeScanner` and `BarcodeReader` ) to interact with the library. `BarcodeReader` is a low-level class that processes images directly. `BarcodeScanner` , on the other hand, inherits from `BarcodeReader` and provides high-level APIs and a built-in UI to allow barcode scanning via cameras. We'll focus on `BarcodeScanner` in this guide.
-
-To use the library, we first create a `BarcodeScanner` object.
-
-``` javascript
-try {
-    await Dynamsoft.DBR.BarcodeScanner.createInstance();
-} catch (ex) {
-    console.error(ex);
-}
-```
-
-*Note*:
-
-* The creation of an object consists of two parallel tasks: one is to download and compile the "engine", the other is to fetch a license from the License Tracking Server (assuming an online license is used).
-
-#### Configure the `BarcodeScanner` object
-
-Let's take a look at the following code snippets first:
-
-``` javascript
-// set which camera and what resolution to use
-await scanner.updateVideoSettings({
-    video: {
-        width: 1280,
-        height: 720,
-        facingMode: "environment"
-    }
-});
-```
-
-``` javascript
-// set up the scanner behavior
-let scanSettings = await scanner.getScanSettings();
-// disregard duplicated results found in a specified time period
-scanSettings.duplicateForgetTime = 20000;
-// set a scan interval so the library may release the CPU from time to time
-scanSettings.intervalTime = 300;
-await scanner.updateScanSettings(scanSettings);
-```
-
-``` javascript
-// use one of the built-in RuntimeSetting templates: "single" (decode a single barcode, default mode), "speed", "balance", "coverage". "speed" is recommended for decoding from a video stream
-await scanner.updateRuntimeSettings("speed");
-
-// make changes to the template. The code below demonstrates how to specify which symbologies are enabled
-let runtimeSettings = await scanner.getRuntimeSettings();
-runtimeSettings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_ONED | Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
-await scanner.updateRuntimeSettings(runtimeSettings);
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/yfkcajxz/)
-
-As you can see from the above code snippets, there are three types of configurations:
-
-* `get/updateVideoSettings`: Configures the data source, i.e., the camera. These settings include which camera to use, the resolution, etc. Learn more [here](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Syntax).
-
-* `get/updateScanSettings`: Configures the behavior of the scanner which includes `duplicateForgetTime`,  `intervalTime` and `filter`, etc.
-
-* `get/updateRuntimeSettings`: Configures the decode engine. Find a full list of these settings and their corresponding descriptions [here](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/global-interfaces.html#runtimesettings). For example, the following uses the built-in "speed" settings with updated `localizationModes`.
-
-  ``` javascript
-  await barcodeScanner.updateRuntimeSettings("speed");
-  //await barcodeScanner.updateRuntimeSettings("balance"); //alternative
-  //await barcodeScanner.updateRuntimeSettings("coverage"); //alternative
-  let settings = await barcodeScanner.getRuntimeSettings();
-  settings.localizationModes = [
-      Dynamsoft.DBR.EnumLocalizationMode.LM_CONNECTED_BLOCKS,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_SCAN_DIRECTLY,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_LINES, 0, 0, 0, 0, 0
-  ];
-  await barcodeScanner.updateRuntimeSettings(settings);
-  ```
-
-  Try in [JSFiddle](https://jsfiddle.net/DynamsoftTeam/f24h8c1m/).
-
-#### Customize the UI
-
-The built-in UI of the `BarcodeScanner` object is defined in the file `dist/dbr.scanner.html` . There are a few ways to customize it:
-
-* Modify the file `dist/dbr.scanner.html` directly. 
-
-  This option is only possible when you host this file on your own web server instead of using a CDN.
-
-* Copy the file `dist/dbr.scanner.html` to your application, modify it and use the the API `defaultUIElementURL` to set it as the default UI.
-
-  ``` javascript
-  Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "THE-URL-TO-THE-FILE";
-  ```
-  
-  > You must set `defaultUIElementURL` before you call `createInstance()` .
-
-* Append the default UI element to your page, customize it before showing it.
-
-  ``` html
-  
    
-  ```
-
-  ``` javascript
-  document.getElementById('scannerUI').appendChild(scanner.getUIElement());
-  document.getElementsByClassName('dbrScanner-btn-close')[0].hidden = true; // Hide the close button
-  ```
-
-* Build the UI element into your own web page and specify it with the API `setUIElement(HTMLElement)`.
-
-  - Embed the video
-
-    ``` html
-    
    
-        
-    
    
-    
-    ```
-
-    > The video element must have the class `dbrScanner-video` .
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)
-
-  - Add the camera list and resolution list
-  
-    If the class names for these lists match the default ones, `dbrScanner-sel-camera` and `dbrScanner-sel-resolution` , the library will automatically populate the lists and handle the camera/resolution switching.
-
-    ``` html
-    
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-    ``` html
-    
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)
-
-    > By default, 8 hard-coded resolutions are populated as options. You can show only a custom set of options by hardcoding them.
-
-    ``` html
-    
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)
-
-    > Generally, you need to provide a resolution that the camera supports. However, in case a camera does not support the specified resolution, it usually uses the nearest supported resolution. As a result, the selected resolution may not be the actual resolution used. In this case, add an option with the class name `dbrScanner-opt-gotResolution` (as shown above) and the library will then use it to show the actual resolution.
-
-Interested to test it further? Read on to learn how to request a 30-day free trial.
-
-## Requesting A Trial
-
-Since v8.2.5, a free public trial license is used by default if no license is specified.
-
-> Network connection is required for the free public trial license to work.
-
-After that, if you want to evaluate the library further, you can [register for a Dynamsoft account](https://www.dynamsoft.com/api-common/Regist/Regist) (if you haven't already done so) and request a 30-day trial license via the Request a Trial License link.
-
-* If you like, you can also [contact our support team](https://www.dynamsoft.com/contact/) to get a trial extension.
-
-## System Requirements
-
-This library requires the following features which are supported by all modern mainstream browsers:
-
-* `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`  
-    
-  These four features are required for the library to work.
-
-* `MediaDevices`/`getUserMedia` 
-    
-  This API is only required for in-browser video streaming. If a browser does not support this API, the [Single Frame Mode](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/BarcodeScanner/properties.html?ver=latest#singleframemode) will be used automatically. If the API exists but doesn't work correctly,  the Single Frame Mode can be used as an alternative way to access the camera.
-
-The following table is a list of supported browsers based on the above requirements:
-
-Browser Name | Version
-:-: | :-:
-Chrome | v57+ (v59+ on Android/iOS1)
-Firefox | v52+ (v55+ on Android/iOS1)
-Edge2 | v16+
-Safari3 | v11+
-
-1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-2 On Edge, due to strict Same-origin policy, you must host the library files on the same domain as your web page. 
-
-3 Safari 11.2.2 ~ 11.2.6 are not supported.
-     
-Apart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the library. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.
-
-## Hosting the library
-
-### Step One: Deploy the dist folder
-
-Once you have downloaded the library, you can locate the "dist" directory and copy it to your server (usually as part of your website / web application). The following shows some of the files in this directory:
-
-* `dbr.js` // The main library file
-* `dbr.browser.mjs` // For using the library as a module (`
-```
-
-Optionally, you may also need to (specify the location of the "engine" files)[#specify-the-location-of-the-engine-files].
-
-
-## Advanced Usage
-
-In addition to the content mentioned above, the library has many other settings and options that you can adjust to best suit your usage. To read more, please see [advanced usage](https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/advanced-usage.html?ver=latest).
-
-## How to Upgrade
-
-If you are using an older version of the library and want to upgrade it to the latest version, please read more on [how to upgrade](https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/upgrade.html?ver=latest).
-
-## FAQ
-
-### Can I open the web page directly from the hard drive?
-
-Yes, for simple testing purposes, it's perfectly fine to open the file directly from the hard drive. However, you might encounter some issues in doing so (like unable to access the camera, etc.). The recommendation is to deploy this page to your web server and run it over **HTTPS**. If you don't have a ready-to-use web server but have a package manager like *npm* or *yarn*, you can set up a simple HTTP server in minutes. Check out [http-server on npm](https://www.npmjs.com/package/http-server) or [yarn](https://yarnpkg.com/package/http-server). 
-
-### Why can't I use my camera?
-
-If you open the web page as `file:///` or `http://`, the camera may not work and you see the following error in the browser console:
-
-> [Deprecation] getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
-
-* In Safari 12 the equivalent error is:
-
-> Trying to call getUserMedia from an insecure document.
-
-You get this error because the API [getUserMedia](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) requires HTTPS to access the camera.
-
-* If you use Chrome or Firefox, you might not get the error because these two browsers allow camera access via file:/// and http://localhost.
-
-To make sure your web application can access the camera, please configure your web server to support HTTPS. The following links may help.
-
-  - NGINX: [Configuring HTTPS servers](https://nginx.org/en/docs/http/configuring_https_servers.html)
-  - IIS: [Create a Self Signed Certificate in IIS](https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/)
-  - Tomcat: [Setting Up SSL on Tomcat in 5 minutes](https://dzone.com/articles/setting-ssl-tomcat-5-minutes)
-  - Node.js: [npm tls](https://nodejs.org/docs/v0.4.1/api/tls.html)
diff --git a/programming-old/javascript/user-guide/index-v8.6.0.md b/programming-old/javascript/user-guide/index-v8.6.0.md
deleted file mode 100644
index 1d7d018e..00000000
--- a/programming-old/javascript/user-guide/index-v8.6.0.md
+++ /dev/null
@@ -1,508 +0,0 @@
----
-layout: default-layout
-title: v8.6.0 User Guide - Dynamsoft Barcode Reader JavaScript Edition
-description: This is the user guide of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, javascript, js
-breadcrumbText: User Guide
-noTitleIndex: true
-needGenerateH3Content: true
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/index-v8.6.0.html
----
-
-# Dynamsoft Barcode Reader for Your Website
-
-Turn your web page into a barcode scanner with just a few lines of code.
-
-![version](https://img.shields.io/npm/v/dynamsoft-javascript-barcode.svg)
-![downloads](https://img.shields.io/npm/dm/dynamsoft-javascript-barcode.svg) 
-![jsdelivr](https://img.shields.io/jsdelivr/npm/hm/dynamsoft-javascript-barcode.svg)
-![](https://img.shields.io/snyk/vulnerabilities/npm/dynamsoft-javascript-barcode.svg)
-
-[![](https://img.shields.io/badge/Download-Offline%20SDK-orange)](https://www.dynamsoft.com/barcode-reader/downloads/?utm_source=github&product=dbr&package=js)
-
-Once integrated, your users can open your website in a browser, access their cameras and read barcodes directly from the video input.
-
-In this guide, you will learn step by step on how to integrate this library into your website.
-
-> For back-end barcode reading with Node.js, see [Dynamsoft Barcode Reader for Node](https://github.com/Dynamsoft/javascript-barcode/blob/master/README.NODE.md).
-
-**Table of Contents**
-
-* [Hello World - Simplest Implementation](#hello-world---simplest-implementation)
-* [Building your own page](#building-your-own-page)
-  - [Include the library](#include-the-library)
-  - [Configure the library](#configure-the-library)
-  - [Interact with the library](#interact-with-the-library)
-* [Requesting A Trial](#requesting-a-trial)
-* [System Requirements](#system-requirements)
-* [Hosting the Library](#hosting-the-library)
-* [Advanced Usage](#advanced-usage)
-* [How to Upgrade](#how-to-upgrade)
-* [FAQ](#faq)
-
-**Popular Examples**
-
-* [Use the library in Angular](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-angular.html?ver=latest&utm_source=github)
-* [Use the library in React](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-reactjs.html?ver=latest&utm_source=github)
-* [Use the library in Vue](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-vuejs.html?ver=latest&utm_source=github)
-
-You can also:
-
-* [Try All Online Examples](https://demo.dynamsoft.com/Samples/DBR/JS/index.html)
-* [Try the Official Demo](https://demo.dynamsoft.com/barcode-reader-js?utm_source=github)
-
-## Hello World - Simplest Implementation
-
-Let's start by testing the "Hello World" example of the library which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream.  
-
-* Basic Requirements
-  + Internet connection  
-  + [A supported browser](#system-requirements)
-  + Camera access  
-
-### Step One: Check the code of the example
-
-The complete code of the "Hello World" example is shown below
-
-``` html
-
-
-
-
-  
-  
-
-
-
-```
-
-> You can also find the code (with more comments) [on GitHub](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/master/1.hello-world/1.minimum-code.html).
-
-*About the code*
-
-  + `createInstance()`: This method creates a `BarcodeScanner` object. This object can read barcodes directly from a video input with the help of its interactive UI (hidden by default) and the [MediaDevices interface](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices).
-
-  + `onFrameRead`: This event is triggered every time the library finishes scanning a video frame. The `results` object contains all the barcode results that the library have found on this frame. In this example, we print the results to the browser console.
-
-  + `onUnduplicatedRead`: This event is triggered when the library finds a new barcode, which is not a duplicate among multiple frames. `txt` holds the barcode text value while `result` is an object that holds details of the barcode. In this example, an alert will be displayed for this new barcode.
-
-  + `show()`: This method brings up the built-in UI of the `BarcodeScanner` object.
-
-### Step Two: Test the example
-
-You can choose one of three ways to test the example:
-
-* [Hello World example - online](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.minimum-code.html) 
-* [Hello World example via JSFiddle](https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/)
-* [Download a copy](https://tst.dynamsoft.com/public/download/dbr/browser/code/helloworld.zip) of the example code and set it up locally
-
-Either way, you open the example page in a browser, allow the page to access your camera and the video will show up on the page. After that, you can point the camera at something with a barcode to read it.
-
-If the barcode is decoded, an alert will pop up with the result text. At the same time, the barcode location will be highlighted in the video feed. 
-
-  > For first use, you may need to wait a few seconds for the library to initialize.
-
-*Note*:
-
-  + The library only scans a new frame when it has finished scanning the previous frame. The interval between two consecutive frames might not be enough time for the library to process the 1st frame (for 30 FPS, the interval is about 33 ms), therefore, not all frames are scanned.
-
-  + The library requires a license to work. However, when no license is specified in the code, a [free public trial license](https://www.dynamsoft.com/license-server/docs/about/terms.html?ver=latest#public-trial-license?utm_source=guide) will automatically be used during which you can make initial evaluation of the library to decide whether or not you want to evaluate it further. If you do, you can [request a private trial license](#requesting-a-trial).
-
-    > Network connection is required for the free public trial license to work.
-
-If the test doesn't go as expected, you can check out the [FAQ](#faq) or [contact us](https://www.dynamsoft.com/contact/?utm_source=github).
-
-## Building your own page
-
-### Include the library
-
-#### Use a CDN
-
-The simplest way to include the library is to use either the [jsDelivr](https://jsdelivr.com/) or [UNPKG](https://unpkg.com/) CDN. The "hello world" example above uses **jsDelivr**.
-
-* jsDelivr
-
-  ``` html
-  
-  ```
-
-* UNPKG  
-
-  ``` html
-  
-  ```
-
-#### Host the library yourself (recommended)
-
-Besides using the CDN, you can also download the library and host its files on your own website / server before including it in your application.
-
-The following shows a few ways to download the library.
-
-* From the website
-
-  [Download the JavaScript Package](https://www.dynamsoft.com/barcode-reader/downloads/?utm_source=github)
-
-* yarn
-
-  ```cmd
-  $ yarn add dynamsoft-javascript-barcode
-  ```
-
-* npm
-
-  ``` 
-  $ npm install dynamsoft-javascript-barcode --save
-  ```
-
-Depending on how you downloaded the library and where you put it. You can typically include it like this:
-
-``` html
-
-```
-
-or
-
-``` html
-
-```
-
-Read more on [how to host the library](#hosting-the-library).
-
-### Configure the library
-
-Before using the library, you need to configure a few things.
-
-#### Specify the license
-
-The library requires a license to work, use the APIs `organizationID` and `handshakeCode` to specify how to acquire the license.
-
-``` javascript
-Dynamsoft.DBR.BarcodeScanner.organizationID = "YOUR-ORGANIZATION-ID"; // Required.
-Dynamsoft.DBR.BarcodeScanner.handshakeCode = "A-SPECIFIC-HANDSHAKECODE"; // Optional, if not specified, the default handshake code is used.
-Dynamsoft.DBR.BarcodeScanner.sessionPassword = "PASSWORD-TO-PROTECT-YOUR-LICENSE"; // Optional but recomended, use it to protect your license.
-Dynamsoft.DBR.BarcodeScanner.licenseServer = ["YOUR-OWN-MAIN-DLS", "YOUR-OWN-STANDBY-DLS"]; //Optional, ignore this line if you are using Dynamsoft-hosting DLS.
-  ```
-
-*Note*:
-
-+ Network connection is required for the license to work.
-+ If nothing is specified like the above "hello world" example, a [free public trial license](https://www.dynamsoft.com/license-server/docs/about/terms.html?ver=latest#public-trial-license?utm_source=guide) will be automatically used. 
-+ The license is actually fetched during the creation of a `BarcodeScanner` or `BarcodeReader` instance.
-+ If a public network connection is not available, you can choose to host a license server in your private network.
-
-An alternative way to specify the license is to use an alphanumeric string which does not require a network connection. The following shows how it could be used. [Contact us](https://www.dynamsoft.com/contact/?utm_source=github) for more information.
-
-```javascript
-Dynamsoft.DBR.BarcodeReader.productKeys = "t0068NQAAACgTVU2aucyxqETXKkiomqhV7YoLrnqjLiQQRSH5DBV1UtIs4..."
-```
-  
-Or
-
-```html
-
-```
-
-#### Specify the location of the "engine" files
-
-The "engine" files refer to *.worker.js, *.wasm.js and *.wasm, etc. which are loaded by the main library at runtime. This configuration option uses the API `engineResourcePath` and is often not required as these files usually are in the same location with the main library file (dbr.js). However, in cases where the engine files are not in the same location as the main library file (for example, with frameworks like Angular or React, dbr.js is compiled into another file), this configuration will be required.
-
-The following code uses the jsDelivr CDN, feel free to change it to your own location of these files.
-  
-``` javascript
-import DBR from "dynamsoft-javascript-barcode";
-DBR.BarcodeScanner.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.6.0/dist/";
-export default DBR;
-```
-
-### Interact with the library
-
-#### Create a `BarcodeScanner` object
-
-You can use one of two classes ( `BarcodeScanner` and `BarcodeReader` ) to interact with the library. `BarcodeReader` is a low-level class that processes images directly. `BarcodeScanner` , on the other hand, inherits from `BarcodeReader` and provides high-level APIs and a built-in GUI to allow continuous barcode scanning on video frames. We'll focus on `BarcodeScanner` in this guide.
-
-To use the library, we first create a `BarcodeScanner` object.
-
-``` javascript
-try {
-  await Dynamsoft.DBR.BarcodeScanner.createInstance();
-} catch (ex) {
-  console.error(ex);
-}
-```
-
-*Note*:
-
-* The creation of an object consists of two parallel tasks: one is to download and compile the "engine", the other is to fetch a license from Dynamsoft License Server (assuming an online license is used).
-
-#### Configure the `BarcodeScanner` object
-
-Let's take a look at the following code snippets first:
-
-``` javascript
-// set which camera and what resolution to use
-var allCameras = await scanner.getAllCameras();
-await scanner.setCurrentCamera(allCameras[0].deviceId);
-await scanner.setResolution(1280, 720);
-```
-
-``` javascript
-// set up the scanner behavior
-let scanSettings = await scanner.getScanSettings();
-// disregard duplicated results found in a specified time period (in milliseconds)
-scanSettings.duplicateForgetTime = 5000;
-// set a scan interval in milliseconds so the library may release the CPU from time to time
-scanSettings.intervalTime = 300;
-await scanner.updateScanSettings(scanSettings);
-```
-
-``` javascript
-// use one of the built-in RuntimeSetting templates: "single" (decode a single barcode, the default mode), "speed", "balance" and "coverage".
-await scanner.updateRuntimeSettings("speed");
-
-// make changes to the template. The code below demonstrates how to specify enabled symbologies
-let runtimeSettings = await scanner.getRuntimeSettings();
-runtimeSettings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_ONED | Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
-await scanner.updateRuntimeSettings(runtimeSettings);
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/yfkcajxz/)
-
-As you can see from the above code snippets, there are three types of configurations:
-
-* `get/updateVideoSettings`: Configures the data source, i.e., the camera. These settings include which camera to use, the resolution, etc. Learn more [here](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Syntax).
-
-* `get/updateScanSettings`: Configures the behavior of the scanner which includes `duplicateForgetTime`,  `intervalTime` and `filter`, etc.
-
-* `get/updateRuntimeSettings`: Configures the decode engine. Find a full list of these settings and their corresponding descriptions [here](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/global-interfaces.html#runtimesettings?utm_source=github). For example, the following uses the built-in "speed" settings with updated `localizationModes`.
-
-  ``` javascript
-  await barcodeScanner.updateRuntimeSettings("speed");
-  //await barcodeScanner.updateRuntimeSettings("balance"); //alternative
-  //await barcodeScanner.updateRuntimeSettings("coverage"); //alternative
-  let settings = await barcodeScanner.getRuntimeSettings();
-  settings.localizationModes = [
-      Dynamsoft.DBR.EnumLocalizationMode.LM_CONNECTED_BLOCKS,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_SCAN_DIRECTLY,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_LINES, 0, 0, 0, 0, 0
-  ];
-  await barcodeScanner.updateRuntimeSettings(settings);
-  ```
-
-  Try in [JSFiddle](https://jsfiddle.net/DynamsoftTeam/f24h8c1m/).
-
-  See also [settings samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/parameter-settings.html?ver=latest&utm_source=github).
-
-#### Customize the UI
-
-The built-in UI of the `BarcodeScanner` object is defined in the file `dist/dbr.scanner.html` . There are a few ways to customize it:
-
-* Modify the file `dist/dbr.scanner.html` directly. 
-
-  This option is only possible when you host this file on your own web server instead of using a CDN.
-
-* Copy the file `dist/dbr.scanner.html` to your application, modify it and use the the API `defaultUIElementURL` to set it as the default UI.
-
-  ``` javascript
-  Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "THE-URL-TO-THE-FILE";
-  ```
-  
-  > You must set `defaultUIElementURL` before you call `createInstance()` .
-
-* Append the default UI element to your page, customize it before showing it.
-
-  ``` html
-  
    
-  ```
-
-  ``` javascript
-  document.getElementById('scannerUI').appendChild(scanner.getUIElement());
-  document.getElementsByClassName('dbrScanner-btn-close')[0].hidden = true; // Hide the close button
-  ```
-
-* Build the UI element into your own web page and specify it with the API `setUIElement(HTMLElement)`.
-
-  - Embed the video
-
-    ``` html
-    
    
-      
-    
    
-    
-    ```
-
-    > The video element must have the class `dbrScanner-video` .
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)
-
-  - Add the camera list and resolution list
-  
-    If the class names for these lists match the default ones, `dbrScanner-sel-camera` and `dbrScanner-sel-resolution` , the library will automatically populate the lists and handle the camera/resolution switching.
-
-    ``` html
-    
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-    ``` html
-    
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)
-
-    > By default, 8 hard-coded resolutions are populated as options. You can show only a custom set of options by hardcoding them.
-
-    ``` html
-    
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)
-
-    > Generally, you need to provide a resolution that the camera supports. However, in case a camera does not support the specified resolution, it usually uses the nearest supported resolution. As a result, the selected resolution may not be the actual resolution used. In this case, add an option with the class name `dbrScanner-opt-gotResolution` (as shown above) and the library will then use it to show the actual resolution.
-
-See also [UI customization samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/ui-customization.html?ver=latest&utm_source=github).
-
-Interested to test it further? Read on to learn how to request a 30-day free trial.
-
-## Requesting A Trial
-
-Since v8.2.5, a free public trial license is used by default if no license is specified.
-
-> Network connection is required for the free public trial license to work.
-
-After that, if you want to evaluate the library further, you can [register for a Dynamsoft account](https://www.dynamsoft.com/api-common/Regist/Regist) (if you haven't already done so) and request a 30-day trial license via the Request a Trial License link.
-
-* If you like, you can also [contact our support team](https://www.dynamsoft.com/contact/?utm_source=github) to get a trial license.
-
-## System Requirements
-
-This library requires the following features which are supported by all modern mainstream browsers:
-
-* `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`  
-    
-  The above four features are required for the library to work.
-
-* `MediaDevices`/`getUserMedia` 
-    
-  This API is only required for in-browser video streaming. If a browser does not support this API, the [Single Frame Mode](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/BarcodeScanner/properties.html?ver=latest&utm_source=github#singleframemode) will be used automatically. If the API exists but doesn't work correctly,  the Single Frame Mode can be used as an alternative way to access the camera.
-
-The following table is a list of supported browsers based on the above requirements:
-
-  Browser Name | Version
-  :-: | :-:
-  Chrome | v57+ (v59+ on Android/iOS1)
-  Firefox | v52+ (v55+ on Android/iOS1)
-  Edge2 | v16+
-  Safari3 | v11+
-
-  1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  2 On Edge, due to strict Same-origin policy, you must host the library files on the same domain as your web page. 
-
-  3 Safari 11.2.2 ~ 11.2.6 are not supported.
-     
-Apart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the library. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.
-
-## Hosting the library
-
-### Step One: Deploy the dist folder
-
-Once you have downloaded the library, you can locate the "dist" directory and copy it to your server (usually as part of your website / web application). The following shows some of the files in this directory:
-
-* `dbr.js` // The main library file
-* `dbr.browser.mjs` // For using the library as a module (`
-```
-
-Optionally, you may also need to (specify the location of the "engine" files)[#specify-the-location-of-the-engine-files].
-
-## Advanced Usage
-
-In addition to the content mentioned above, the library has many other settings and options that you can adjust to best suit your usage. To read more, please see [advanced usage](https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/advanced-usage.html?ver=latest&utm_source=github).
-
-## How to Upgrade
-
-If you are using an older version of the library and want to upgrade it to the latest version, please read more on [how to upgrade](https://www.dynamsoft.com/barcode-reader/programming/javascript/upgrade-guide/?ver=latest&utm_source=github).
-
-## FAQ
-
-### Can I open the web page directly from the hard drive?
-
-Yes, for simple testing purposes, it's perfectly fine to open the file directly from the hard drive. However, you might encounter some issues in doing so (like unable to access the camera, etc.). The recommendation is to deploy this page to your web server and run it over **HTTPS**. If you don't have a ready-to-use web server but have a package manager like *npm* or *yarn*, you can set up a simple HTTP server in minutes. Check out [http-server on npm](https://www.npmjs.com/package/http-server) or [yarn](https://yarnpkg.com/package/http-server). 
-
-### Why can't I use my camera?
-
-If you open the web page as `file:///` or `http://`, the camera may not work and you see the following error in the browser console:
-
-> [Deprecation] getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
-
-* In Safari 12 the equivalent error is:
-
-> Trying to call getUserMedia from an insecure document.
-
-You get this error because the API [getUserMedia](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) requires HTTPS to access the camera.
-
-* If you use Chrome or Firefox, you might not get the error because these two browsers allow camera access via file:/// and http://localhost.
-
-To make sure your web application can access the camera, please configure your web server to support HTTPS. The following links may help.
-
-  - NGINX: [Configuring HTTPS servers](https://nginx.org/en/docs/http/configuring_https_servers.html)
-  - IIS: [Create a Self Signed Certificate in IIS](https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/)
-  - Tomcat: [Setting Up SSL on Tomcat in 5 minutes](https://dzone.com/articles/setting-ssl-tomcat-5-minutes)
-  - Node.js: [npm tls](https://nodejs.org/docs/v0.4.1/api/tls.html)
diff --git a/programming-old/javascript/user-guide/index-v8.6.3.md b/programming-old/javascript/user-guide/index-v8.6.3.md
deleted file mode 100644
index ff787d6e..00000000
--- a/programming-old/javascript/user-guide/index-v8.6.3.md
+++ /dev/null
@@ -1,508 +0,0 @@
----
-layout: default-layout
-title: v8.6.3 User Guide - Dynamsoft Barcode Reader JavaScript Edition
-description: This is the user guide of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, javascript, js
-breadcrumbText: User Guide
-noTitleIndex: true
-needGenerateH3Content: true
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/index-v8.6.3.html
----
-
-# Dynamsoft Barcode Reader for Your Website
-
-Turn your web page into a barcode scanner with just a few lines of code.
-
-![version](https://img.shields.io/npm/v/dynamsoft-javascript-barcode.svg)
-![downloads](https://img.shields.io/npm/dm/dynamsoft-javascript-barcode.svg) 
-![jsdelivr](https://img.shields.io/jsdelivr/npm/hm/dynamsoft-javascript-barcode.svg)
-![](https://img.shields.io/snyk/vulnerabilities/npm/dynamsoft-javascript-barcode.svg)
-
-[![](https://img.shields.io/badge/Download-Offline%20SDK-orange)](https://www.dynamsoft.com/barcode-reader/downloads/?utm_source=github&product=dbr&package=js)
-
-Once integrated, your users can open your website in a browser, access their cameras and read barcodes directly from the video input.
-
-In this guide, you will learn step by step on how to integrate this library into your website.
-
-> For back-end barcode reading with Node.js, see [Dynamsoft Barcode Reader for Node](https://github.com/Dynamsoft/javascript-barcode/blob/main/README.NODE.md).
-
-**Table of Contents**
-
-* [Hello World - Simplest Implementation](#hello-world---simplest-implementation)
-* [Building your own page](#building-your-own-page)
-  - [Include the library](#include-the-library)
-  - [Configure the library](#configure-the-library)
-  - [Interact with the library](#interact-with-the-library)
-* [Requesting A Trial](#requesting-a-trial)
-* [System Requirements](#system-requirements)
-* [Hosting the Library](#hosting-the-library)
-* [Advanced Usage](#advanced-usage)
-* [How to Upgrade](#how-to-upgrade)
-* [FAQ](#faq)
-
-**Popular Examples**
-
-* [Use the library in Angular](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-angular.html?ver=latest&utm_source=github)
-* [Use the library in React](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-reactjs.html?ver=latest&utm_source=github)
-* [Use the library in Vue](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-vuejs.html?ver=latest&utm_source=github)
-
-You can also:
-
-* [Try All Online Examples](https://demo.dynamsoft.com/Samples/DBR/JS/index.html)
-* [Try the Official Demo](https://demo.dynamsoft.com/barcode-reader-js?utm_source=github)
-
-## Hello World - Simplest Implementation
-
-Let's start by testing the "Hello World" example of the library which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream.  
-
-* Basic Requirements
-  + Internet connection  
-  + [A supported browser](#system-requirements)
-  + Camera access  
-
-### Step One: Check the code of the example
-
-The complete code of the "Hello World" example is shown below
-
-``` html
-
-
-
-
-  
-  
-
-
-
-```
-
-> You can also find the code (with more comments) [on GitHub](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/master/1.hello-world/1.minimum-code.html).
-
-*About the code*
-
-  + `createInstance()`: This method creates a `BarcodeScanner` object. This object can read barcodes directly from a video input with the help of its interactive UI (hidden by default) and the [MediaDevices interface](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices).
-
-  + `onFrameRead`: This event is triggered every time the library finishes scanning a video frame. The `results` object contains all the barcode results that the library have found on this frame. In this example, we print the results to the browser console.
-
-  + `onUnduplicatedRead`: This event is triggered when the library finds a new barcode, which is not a duplicate among multiple frames. `txt` holds the barcode text value while `result` is an object that holds details of the barcode. In this example, an alert will be displayed for this new barcode.
-
-  + `show()`: This method brings up the built-in UI of the `BarcodeScanner` object.
-
-### Step Two: Test the example
-
-You can choose one of three ways to test the example:
-
-* [Hello World example - online](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.minimum-code.html) 
-* [Hello World example via JSFiddle](https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/)
-* [Download a copy](https://tst.dynamsoft.com/public/download/dbr/browser/code/helloworld.zip) of the example code and set it up locally
-
-Either way, you open the example page in a browser, allow the page to access your camera and the video will show up on the page. After that, you can point the camera at something with a barcode to read it.
-
-If the barcode is decoded, an alert will pop up with the result text. At the same time, the barcode location will be highlighted in the video feed. 
-
-  > For first use, you may need to wait a few seconds for the library to initialize.
-
-*Note*:
-
-  + The library only scans a new frame when it has finished scanning the previous frame. The interval between two consecutive frames might not be enough time for the library to process the 1st frame (for 30 FPS, the interval is about 33 ms), therefore, not all frames are scanned.
-
-  + The library requires a license to work. However, when no license is specified in the code, a [free public trial license](https://www.dynamsoft.com/license-server/docs/about/terms.html?ver=latest#public-trial-license?utm_source=guide) will automatically be used during which you can make initial evaluation of the library to decide whether or not you want to evaluate it further. If you do, you can [request a private trial license](#requesting-a-trial).
-
-    > Network connection is required for the free public trial license to work.
-
-If the test doesn't go as expected, you can check out the [FAQ](#faq) or [contact us](https://www.dynamsoft.com/contact/?utm_source=github).
-
-## Building your own page
-
-### Include the library
-
-#### Use a CDN
-
-The simplest way to include the library is to use either the [jsDelivr](https://jsdelivr.com/) or [UNPKG](https://unpkg.com/) CDN. The "hello world" example above uses **jsDelivr**.
-
-* jsDelivr
-
-  ``` html
-  
-  ```
-
-* UNPKG  
-
-  ``` html
-  
-  ```
-
-#### Host the library yourself (recommended)
-
-Besides using the CDN, you can also download the library and host its files on your own website / server before including it in your application.
-
-The following shows a few ways to download the library.
-
-* From the website
-
-  [Download the JavaScript Package](https://www.dynamsoft.com/barcode-reader/downloads/?utm_source=github)
-
-* yarn
-
-  ```cmd
-  $ yarn add dynamsoft-javascript-barcode
-  ```
-
-* npm
-
-  ``` 
-  $ npm install dynamsoft-javascript-barcode --save
-  ```
-
-Depending on how you downloaded the library and where you put it. You can typically include it like this:
-
-``` html
-
-```
-
-or
-
-``` html
-
-```
-
-Read more on [how to host the library](#hosting-the-library).
-
-### Configure the library
-
-Before using the library, you need to configure a few things.
-
-#### Specify the license
-
-The library requires a license to work, use the APIs `organizationID` and `handshakeCode` to specify how to acquire the license.
-
-``` javascript
-Dynamsoft.DBR.BarcodeScanner.organizationID = "YOUR-ORGANIZATION-ID"; // Required.
-Dynamsoft.DBR.BarcodeScanner.handshakeCode = "A-SPECIFIC-HANDSHAKECODE"; // Optional, if not specified, the default handshake code is used.
-Dynamsoft.DBR.BarcodeScanner.sessionPassword = "PASSWORD-TO-PROTECT-YOUR-LICENSE"; // Optional but recomended, use it to protect your license.
-Dynamsoft.DBR.BarcodeScanner.licenseServer = ["YOUR-OWN-MAIN-DLS", "YOUR-OWN-STANDBY-DLS"]; //Optional, ignore this line if you are using Dynamsoft-hosting DLS.
-  ```
-
-*Note*:
-
-+ Network connection is required for the license to work.
-+ If nothing is specified like the above "hello world" example, a [free public trial license](https://www.dynamsoft.com/license-server/docs/about/terms.html?ver=latest#public-trial-license?utm_source=guide) will be automatically used. 
-+ The license is actually fetched during the creation of a `BarcodeScanner` or `BarcodeReader` instance.
-+ If a public network connection is not available, you can choose to host a license server in your private network.
-
-An alternative way to specify the license is to use an alphanumeric string which does not require a network connection. The following shows how it could be used. [Contact us](https://www.dynamsoft.com/contact/?utm_source=github) for more information.
-
-```javascript
-Dynamsoft.DBR.BarcodeReader.productKeys = "t0068NQAAACgTVU2aucyxqETXKkiomqhV7YoLrnqjLiQQRSH5DBV1UtIs4..."
-```
-  
-Or
-
-```html
-
-```
-
-#### Specify the location of the "engine" files
-
-The "engine" files refer to *.worker.js, *.wasm.js and *.wasm, etc. which are loaded by the main library at runtime. This configuration option uses the API `engineResourcePath` and is often not required as these files usually are in the same location with the main library file (dbr.js). However, in cases where the engine files are not in the same location as the main library file (for example, with frameworks like Angular or React, dbr.js is compiled into another file), this configuration will be required.
-
-The following code uses the jsDelivr CDN, feel free to change it to your own location of these files.
-  
-``` javascript
-import DBR from "dynamsoft-javascript-barcode";
-DBR.BarcodeScanner.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.6.3/dist/";
-export default DBR;
-```
-
-### Interact with the library
-
-#### Create a `BarcodeScanner` object
-
-You can use one of two classes ( `BarcodeScanner` and `BarcodeReader` ) to interact with the library. `BarcodeReader` is a low-level class that processes images directly. `BarcodeScanner` , on the other hand, inherits from `BarcodeReader` and provides high-level APIs and a built-in GUI to allow continuous barcode scanning on video frames. We'll focus on `BarcodeScanner` in this guide.
-
-To use the library, we first create a `BarcodeScanner` object.
-
-``` javascript
-try {
-  await Dynamsoft.DBR.BarcodeScanner.createInstance();
-} catch (ex) {
-  console.error(ex);
-}
-```
-
-*Note*:
-
-* The creation of an object consists of two parallel tasks: one is to download and compile the "engine", the other is to fetch a license from Dynamsoft License Server (assuming an online license is used).
-
-#### Configure the `BarcodeScanner` object
-
-Let's take a look at the following code snippets first:
-
-``` javascript
-// set which camera and what resolution to use
-var allCameras = await scanner.getAllCameras();
-await scanner.setCurrentCamera(allCameras[0].deviceId);
-await scanner.setResolution(1280, 720);
-```
-
-``` javascript
-// set up the scanner behavior
-let scanSettings = await scanner.getScanSettings();
-// disregard duplicated results found in a specified time period (in milliseconds)
-scanSettings.duplicateForgetTime = 5000;
-// set a scan interval in milliseconds so the library may release the CPU from time to time
-scanSettings.intervalTime = 300;
-await scanner.updateScanSettings(scanSettings);
-```
-
-``` javascript
-// use one of the built-in RuntimeSetting templates: "single" (decode a single barcode, the default mode), "speed", "balance" and "coverage".
-await scanner.updateRuntimeSettings("speed");
-
-// make changes to the template. The code below demonstrates how to specify enabled symbologies
-let runtimeSettings = await scanner.getRuntimeSettings();
-runtimeSettings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_ONED | Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
-await scanner.updateRuntimeSettings(runtimeSettings);
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/yfkcajxz/)
-
-As you can see from the above code snippets, there are three types of configurations:
-
-* `get/updateVideoSettings`: Configures the data source, i.e., the camera. These settings include which camera to use, the resolution, etc. Learn more [here](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Syntax).
-
-* `get/updateScanSettings`: Configures the behavior of the scanner which includes `duplicateForgetTime`,  `intervalTime` and `filter`, etc.
-
-* `get/updateRuntimeSettings`: Configures the decode engine. Find a full list of these settings and their corresponding descriptions [here](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/global-interfaces.html#runtimesettings?utm_source=github). For example, the following uses the built-in "speed" settings with updated `localizationModes`.
-
-  ``` javascript
-  await barcodeScanner.updateRuntimeSettings("speed");
-  //await barcodeScanner.updateRuntimeSettings("balance"); //alternative
-  //await barcodeScanner.updateRuntimeSettings("coverage"); //alternative
-  let settings = await barcodeScanner.getRuntimeSettings();
-  settings.localizationModes = [
-      Dynamsoft.DBR.EnumLocalizationMode.LM_CONNECTED_BLOCKS,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_SCAN_DIRECTLY,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_LINES, 0, 0, 0, 0, 0
-  ];
-  await barcodeScanner.updateRuntimeSettings(settings);
-  ```
-
-  Try in [JSFiddle](https://jsfiddle.net/DynamsoftTeam/f24h8c1m/).
-
-  See also [settings samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/parameter-settings.html?ver=latest&utm_source=github).
-
-#### Customize the UI
-
-The built-in UI of the `BarcodeScanner` object is defined in the file `dist/dbr.scanner.html` . There are a few ways to customize it:
-
-* Modify the file `dist/dbr.scanner.html` directly. 
-
-  This option is only possible when you host this file on your own web server instead of using a CDN.
-
-* Copy the file `dist/dbr.scanner.html` to your application, modify it and use the the API `defaultUIElementURL` to set it as the default UI.
-
-  ``` javascript
-  Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "THE-URL-TO-THE-FILE";
-  ```
-  
-  > You must set `defaultUIElementURL` before you call `createInstance()` .
-
-* Append the default UI element to your page, customize it before showing it.
-
-  ``` html
-  
    
-  ```
-
-  ``` javascript
-  document.getElementById('scannerUI').appendChild(scanner.getUIElement());
-  document.getElementsByClassName('dbrScanner-btn-close')[0].hidden = true; // Hide the close button
-  ```
-
-* Build the UI element into your own web page and specify it with the API `setUIElement(HTMLElement)`.
-
-  - Embed the video
-
-    ``` html
-    
    
-      
-    
    
-    
-    ```
-
-    > The video element must have the class `dbrScanner-video` .
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)
-
-  - Add the camera list and resolution list
-  
-    If the class names for these lists match the default ones, `dbrScanner-sel-camera` and `dbrScanner-sel-resolution` , the library will automatically populate the lists and handle the camera/resolution switching.
-
-    ``` html
-    
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-    ``` html
-    
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)
-
-    > By default, 8 hard-coded resolutions are populated as options. You can show only a custom set of options by hardcoding them.
-
-    ``` html
-    
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)
-
-    > Generally, you need to provide a resolution that the camera supports. However, in case a camera does not support the specified resolution, it usually uses the nearest supported resolution. As a result, the selected resolution may not be the actual resolution used. In this case, add an option with the class name `dbrScanner-opt-gotResolution` (as shown above) and the library will then use it to show the actual resolution.
-
-See also [UI customization samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/ui-customization.html?ver=latest&utm_source=github).
-
-Interested to test it further? Read on to learn how to request a 30-day free trial.
-
-## Requesting A Trial
-
-Since v8.2.5, a free public trial license is used by default if no license is specified.
-
-> Network connection is required for the free public trial license to work.
-
-After that, if you want to evaluate the library further, you can [register for a Dynamsoft account](https://www.dynamsoft.com/api-common/Regist/Regist) (if you haven't already done so) and request a 30-day trial license via the Request a Trial License link.
-
-* If you like, you can also [contact our support team](https://www.dynamsoft.com/contact/?utm_source=github) to get a trial license.
-
-## System Requirements
-
-This library requires the following features which are supported by all modern mainstream browsers:
-
-* `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`  
-    
-  The above four features are required for the library to work.
-
-* `MediaDevices`/`getUserMedia` 
-    
-  This API is only required for in-browser video streaming. If a browser does not support this API, the [Single Frame Mode](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/BarcodeScanner/properties.html?ver=latest&utm_source=github#singleframemode) will be used automatically. If the API exists but doesn't work correctly,  the Single Frame Mode can be used as an alternative way to access the camera.
-
-The following table is a list of supported browsers based on the above requirements:
-
-  Browser Name | Version
-  :-: | :-:
-  Chrome | v57+ (v59+ on Android/iOS1)
-  Firefox | v52+ (v55+ on Android/iOS1)
-  Edge2 | v16+
-  Safari3 | v11+
-
-  1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  2 On Edge, due to strict Same-origin policy, you must host the library files on the same domain as your web page. 
-
-  3 Safari 11.2.2 ~ 11.2.6 are not supported.
-     
-Apart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the library. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.
-
-## Hosting the library
-
-### Step One: Deploy the dist folder
-
-Once you have downloaded the library, you can locate the "dist" directory and copy it to your server (usually as part of your website / web application). The following shows some of the files in this directory:
-
-* `dbr.js` // The main library file
-* `dbr.browser.mjs` // For using the library as a module (`
-```
-
-Optionally, you may also need to [specify the location of the "engine" files](#specify-the-location-of-the-engine-files).
-
-## Advanced Usage
-
-In addition to the content mentioned above, the library has many other settings and options that you can adjust to best suit your usage. To read more, please see [advanced usage](https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/advanced-usage.html?ver=latest&utm_source=github).
-
-## How to Upgrade
-
-If you are using an older version of the library and want to upgrade it to the latest version, please read more on [how to upgrade](https://www.dynamsoft.com/barcode-reader/programming/javascript/upgrade-guide/?ver=latest&utm_source=github).
-
-## FAQ
-
-### Can I open the web page directly from the hard drive?
-
-Yes, for simple testing purposes, it's perfectly fine to open the file directly from the hard drive. However, you might encounter some issues in doing so (like unable to access the camera, etc.). The recommendation is to deploy this page to your web server and run it over **HTTPS**. If you don't have a ready-to-use web server but have a package manager like *npm* or *yarn*, you can set up a simple HTTP server in minutes. Check out [http-server on npm](https://www.npmjs.com/package/http-server) or [yarn](https://yarnpkg.com/package/http-server). 
-
-### Why can't I use my camera?
-
-If you open the web page as `file:///` or `http://`, the camera may not work and you see the following error in the browser console:
-
-> [Deprecation] getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
-
-* In Safari 12 the equivalent error is:
-
-> Trying to call getUserMedia from an insecure document.
-
-You get this error because the API [getUserMedia](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) requires HTTPS to access the camera.
-
-* If you use Chrome or Firefox, you might not get the error because these two browsers allow camera access via file:/// and http://localhost.
-
-To make sure your web application can access the camera, please configure your web server to support HTTPS. The following links may help.
-
-  - NGINX: [Configuring HTTPS servers](https://nginx.org/en/docs/http/configuring_https_servers.html)
-  - IIS: [Create a Self Signed Certificate in IIS](https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/)
-  - Tomcat: [Setting Up SSL on Tomcat in 5 minutes](https://dzone.com/articles/setting-ssl-tomcat-5-minutes)
-  - Node.js: [npm tls](https://nodejs.org/docs/v0.4.1/api/tls.html)
diff --git a/programming-old/javascript/user-guide/index-v8.8.0.md b/programming-old/javascript/user-guide/index-v8.8.0.md
deleted file mode 100644
index 4750dc81..00000000
--- a/programming-old/javascript/user-guide/index-v8.8.0.md
+++ /dev/null
@@ -1,508 +0,0 @@
----
-layout: default-layout
-title: v8.8.0 User Guide - Dynamsoft Barcode Reader JavaScript Edition
-description: This is the user guide of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, javascript, js
-breadcrumbText: User Guide
-noTitleIndex: true
-needGenerateH3Content: true
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/index-v8.8.0.html
----
-
-# Dynamsoft Barcode Reader for Your Website
-
-Turn your web page into a barcode scanner with just a few lines of code.
-
-![version](https://img.shields.io/npm/v/dynamsoft-javascript-barcode.svg)
-![downloads](https://img.shields.io/npm/dm/dynamsoft-javascript-barcode.svg) 
-![jsdelivr](https://img.shields.io/jsdelivr/npm/hm/dynamsoft-javascript-barcode.svg)
-![](https://img.shields.io/snyk/vulnerabilities/npm/dynamsoft-javascript-barcode.svg)
-
-[![](https://img.shields.io/badge/Download-Offline%20SDK-orange)](https://www.dynamsoft.com/barcode-reader/downloads/?utm_source=github&product=dbr&package=js)
-
-Once integrated, your users can open your website in a browser, access their cameras and read barcodes directly from the video input.
-
-In this guide, you will learn step by step on how to integrate this library into your website.
-
-> For back-end barcode reading with Node.js, see [Dynamsoft Barcode Reader for Node](https://github.com/Dynamsoft/javascript-barcode/blob/main/README.NODE.md).
-
-**Table of Contents**
-
-* [Hello World - Simplest Implementation](#hello-world---simplest-implementation)
-* [Building your own page](#building-your-own-page)
-  - [Include the library](#include-the-library)
-  - [Configure the library](#configure-the-library)
-  - [Interact with the library](#interact-with-the-library)
-* [Requesting A Trial](#requesting-a-trial)
-* [System Requirements](#system-requirements)
-* [Hosting the Library](#hosting-the-library)
-* [Advanced Usage](#advanced-usage)
-* [How to Upgrade](#how-to-upgrade)
-* [FAQ](#faq)
-
-**Popular Examples**
-
-* [Use the library in Angular](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-angular.html?ver=latest&utm_source=github)
-* [Use the library in React](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-reactjs.html?ver=latest&utm_source=github)
-* [Use the library in Vue](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-vuejs.html?ver=latest&utm_source=github)
-
-You can also:
-
-* [Try All Online Examples](https://demo.dynamsoft.com/Samples/DBR/JS/index.html)
-* [Try the Official Demo](https://demo.dynamsoft.com/barcode-reader-js?utm_source=github)
-
-## Hello World - Simplest Implementation
-
-Let's start by testing the "Hello World" example of the library which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream.  
-
-* Basic Requirements
-  + Internet connection  
-  + [A supported browser](#system-requirements)
-  + Camera access  
-
-### Step One: Check the code of the example
-
-The complete code of the "Hello World" example is shown below
-
-``` html
-
-
-
-
-  
-  
-
-
-
-```
-
-> You can also find the code (with more comments) [on GitHub](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/master/1.hello-world/1.minimum-code.html).
-
-*About the code*
-
-  + `createInstance()`: This method creates a `BarcodeScanner` object. This object can read barcodes directly from a video input with the help of its interactive UI (hidden by default) and the [MediaDevices interface](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices).
-
-  + `onFrameRead`: This event is triggered every time the library finishes scanning a video frame. The `results` object contains all the barcode results that the library have found on this frame. In this example, we print the results to the browser console.
-
-  + `onUnduplicatedRead`: This event is triggered when the library finds a new barcode, which is not a duplicate among multiple frames. `txt` holds the barcode text value while `result` is an object that holds details of the barcode. In this example, an alert will be displayed for this new barcode.
-
-  + `show()`: This method brings up the built-in UI of the `BarcodeScanner` object.
-
-### Step Two: Test the example
-
-You can choose one of three ways to test the example:
-
-* [Hello World example - online](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.minimum-code.html) 
-* [Hello World example via JSFiddle](https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/)
-* [Download a copy](https://tst.dynamsoft.com/public/download/dbr/browser/code/helloworld.zip) of the example code and set it up locally
-
-Either way, you open the example page in a browser, allow the page to access your camera and the video will show up on the page. After that, you can point the camera at something with a barcode to read it.
-
-If the barcode is decoded, an alert will pop up with the result text. At the same time, the barcode location will be highlighted in the video feed. 
-
-  > For first use, you may need to wait a few seconds for the library to initialize.
-
-*Note*:
-
-  + The library only scans a new frame when it has finished scanning the previous frame. The interval between two consecutive frames might not be enough time for the library to process the 1st frame (for 30 FPS, the interval is about 33 ms), therefore, not all frames are scanned.
-
-  + The library requires a license to work. However, when no license is specified in the code, a [free public trial license](https://www.dynamsoft.com/license-server/docs/about/terms.html?ver=latest#public-trial-license?utm_source=guide) will automatically be used during which you can make initial evaluation of the library to decide whether or not you want to evaluate it further. If you do, you can [request a private trial license](#requesting-a-trial).
-
-    > Network connection is required for the free public trial license to work.
-
-If the test doesn't go as expected, you can check out the [FAQ](#faq) or [contact us](https://www.dynamsoft.com/contact/?utm_source=github).
-
-## Building your own page
-
-### Include the library
-
-#### Use a CDN
-
-The simplest way to include the library is to use either the [jsDelivr](https://jsdelivr.com/) or [UNPKG](https://unpkg.com/) CDN. The "hello world" example above uses **jsDelivr**.
-
-* jsDelivr
-
-  ``` html
-  
-  ```
-
-* UNPKG  
-
-  ``` html
-  
-  ```
-
-#### Host the library yourself (recommended)
-
-Besides using the CDN, you can also download the library and host its files on your own website / server before including it in your application.
-
-The following shows a few ways to download the library.
-
-* From the website
-
-  [Download the JavaScript Package](https://www.dynamsoft.com/barcode-reader/downloads/?utm_source=github)
-
-* yarn
-
-  ```cmd
-  $ yarn add dynamsoft-javascript-barcode
-  ```
-
-* npm
-
-  ``` 
-  $ npm install dynamsoft-javascript-barcode --save
-  ```
-
-Depending on how you downloaded the library and where you put it. You can typically include it like this:
-
-``` html
-
-```
-
-or
-
-``` html
-
-```
-
-Read more on [how to host the library](#hosting-the-library).
-
-### Configure the library
-
-Before using the library, you need to configure a few things.
-
-#### Specify the license
-
-The library requires a license to work, use the APIs `organizationID` and `handshakeCode` to specify how to acquire the license.
-
-``` javascript
-Dynamsoft.DBR.BarcodeScanner.organizationID = "YOUR-ORGANIZATION-ID"; // Required.
-Dynamsoft.DBR.BarcodeScanner.handshakeCode = "A-SPECIFIC-HANDSHAKECODE"; // Optional, if not specified, the default handshake code is used.
-Dynamsoft.DBR.BarcodeScanner.sessionPassword = "PASSWORD-TO-PROTECT-YOUR-LICENSE"; // Optional but recomended, use it to protect your license.
-Dynamsoft.DBR.BarcodeScanner.licenseServer = ["YOUR-OWN-MAIN-DLS", "YOUR-OWN-STANDBY-DLS"]; //Optional, ignore this line if you are using Dynamsoft-hosting DLS.
-  ```
-
-*Note*:
-
-+ Network connection is required for the license to work.
-+ If nothing is specified like the above "hello world" example, a [free public trial license](https://www.dynamsoft.com/license-server/docs/about/terms.html?ver=latest#public-trial-license?utm_source=guide) will be automatically used. 
-+ The license is actually fetched during the creation of a `BarcodeScanner` or `BarcodeReader` instance.
-+ If a public network connection is not available, you can choose to host a license server in your private network.
-
-An alternative way to specify the license is to use an alphanumeric string which does not require a network connection. The following shows how it could be used. [Contact us](https://www.dynamsoft.com/contact/?utm_source=github) for more information.
-
-```javascript
-Dynamsoft.DBR.BarcodeReader.productKeys = "t0068NQAAACgTVU2aucyxqETXKkiomqhV7YoLrnqjLiQQRSH5DBV1UtIs4..."
-```
-  
-Or
-
-```html
-
-```
-
-#### Specify the location of the "engine" files
-
-The "engine" files refer to *.worker.js, *.wasm.js and *.wasm, etc. which are loaded by the main library at runtime. This configuration option uses the API `engineResourcePath` and is often not required as these files usually are in the same location with the main library file (dbr.js). However, in cases where the engine files are not in the same location as the main library file (for example, with frameworks like Angular or React, dbr.js is compiled into another file), this configuration will be required.
-
-The following code uses the jsDelivr CDN, feel free to change it to your own location of these files.
-  
-``` javascript
-import DBR from "dynamsoft-javascript-barcode";
-DBR.BarcodeScanner.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.0/dist/";
-export default DBR;
-```
-
-### Interact with the library
-
-#### Create a `BarcodeScanner` object
-
-You can use one of two classes ( `BarcodeScanner` and `BarcodeReader` ) to interact with the library. `BarcodeReader` is a low-level class that processes images directly. `BarcodeScanner` , on the other hand, inherits from `BarcodeReader` and provides high-level APIs and a built-in GUI to allow continuous barcode scanning on video frames. We'll focus on `BarcodeScanner` in this guide.
-
-To use the library, we first create a `BarcodeScanner` object.
-
-``` javascript
-try {
-  await Dynamsoft.DBR.BarcodeScanner.createInstance();
-} catch (ex) {
-  console.error(ex);
-}
-```
-
-*Note*:
-
-* The creation of an object consists of two parallel tasks: one is to download and compile the "engine", the other is to fetch a license from Dynamsoft License Server (assuming an online license is used).
-
-#### Configure the `BarcodeScanner` object
-
-Let's take a look at the following code snippets first:
-
-``` javascript
-// set which camera and what resolution to use
-var allCameras = await scanner.getAllCameras();
-await scanner.setCurrentCamera(allCameras[0].deviceId);
-await scanner.setResolution(1280, 720);
-```
-
-``` javascript
-// set up the scanner behavior
-let scanSettings = await scanner.getScanSettings();
-// disregard duplicated results found in a specified time period (in milliseconds)
-scanSettings.duplicateForgetTime = 5000;
-// set a scan interval in milliseconds so the library may release the CPU from time to time
-scanSettings.intervalTime = 300;
-await scanner.updateScanSettings(scanSettings);
-```
-
-``` javascript
-// use one of the built-in RuntimeSetting templates: "single" (decode a single barcode, the default mode), "speed", "balance" and "coverage".
-await scanner.updateRuntimeSettings("speed");
-
-// make changes to the template. The code below demonstrates how to specify enabled symbologies
-let runtimeSettings = await scanner.getRuntimeSettings();
-runtimeSettings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_ONED | Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
-await scanner.updateRuntimeSettings(runtimeSettings);
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/yfkcajxz/)
-
-As you can see from the above code snippets, there are three types of configurations:
-
-* `get/updateVideoSettings`: Configures the data source, i.e., the camera. These settings include which camera to use, the resolution, etc. Learn more [here](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Syntax).
-
-* `get/updateScanSettings`: Configures the behavior of the scanner which includes `duplicateForgetTime`,  `intervalTime` and `filter`, etc.
-
-* `get/updateRuntimeSettings`: Configures the decode engine. Find a full list of these settings and their corresponding descriptions [here](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/global-interfaces.html#runtimesettings?utm_source=github). For example, the following uses the built-in "speed" settings with updated `localizationModes`.
-
-  ``` javascript
-  await barcodeScanner.updateRuntimeSettings("speed");
-  //await barcodeScanner.updateRuntimeSettings("balance"); //alternative
-  //await barcodeScanner.updateRuntimeSettings("coverage"); //alternative
-  let settings = await barcodeScanner.getRuntimeSettings();
-  settings.localizationModes = [
-      Dynamsoft.DBR.EnumLocalizationMode.LM_CONNECTED_BLOCKS,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_SCAN_DIRECTLY,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_LINES, 0, 0, 0, 0, 0
-  ];
-  await barcodeScanner.updateRuntimeSettings(settings);
-  ```
-
-  Try in [JSFiddle](https://jsfiddle.net/DynamsoftTeam/f24h8c1m/).
-
-  See also [settings samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/parameter-settings.html?ver=latest&utm_source=github).
-
-#### Customize the UI
-
-The built-in UI of the `BarcodeScanner` object is defined in the file `dist/dbr.scanner.html` . There are a few ways to customize it:
-
-* Modify the file `dist/dbr.scanner.html` directly. 
-
-  This option is only possible when you host this file on your own web server instead of using a CDN.
-
-* Copy the file `dist/dbr.scanner.html` to your application, modify it and use the the API `defaultUIElementURL` to set it as the default UI.
-
-  ``` javascript
-  Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "THE-URL-TO-THE-FILE";
-  ```
-  
-  > You must set `defaultUIElementURL` before you call `createInstance()` .
-
-* Append the default UI element to your page, customize it before showing it.
-
-  ``` html
-  
    
-  ```
-
-  ``` javascript
-  document.getElementById('scannerUI').appendChild(scanner.getUIElement());
-  document.getElementsByClassName('dbrScanner-btn-close')[0].hidden = true; // Hide the close button
-  ```
-
-* Build the UI element into your own web page and specify it with the API `setUIElement(HTMLElement)`.
-
-  - Embed the video
-
-    ``` html
-    
    
-      
-    
    
-    
-    ```
-
-    > The video element must have the class `dbrScanner-video` .
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)
-
-  - Add the camera list and resolution list
-  
-    If the class names for these lists match the default ones, `dbrScanner-sel-camera` and `dbrScanner-sel-resolution` , the library will automatically populate the lists and handle the camera/resolution switching.
-
-    ``` html
-    
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-    ``` html
-    
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)
-
-    > By default, 8 hard-coded resolutions are populated as options. You can show only a custom set of options by hardcoding them.
-
-    ``` html
-    
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)
-
-    > Generally, you need to provide a resolution that the camera supports. However, in case a camera does not support the specified resolution, it usually uses the nearest supported resolution. As a result, the selected resolution may not be the actual resolution used. In this case, add an option with the class name `dbrScanner-opt-gotResolution` (as shown above) and the library will then use it to show the actual resolution.
-
-See also [UI customization samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/ui-customization.html?ver=latest&utm_source=github).
-
-Interested to test it further? Read on to learn how to request a 30-day free trial.
-
-## Requesting A Trial
-
-Since v8.2.5, a free public trial license is used by default if no license is specified.
-
-> Network connection is required for the free public trial license to work.
-
-After that, if you want to evaluate the library further, you can [register for a Dynamsoft account](https://www.dynamsoft.com/api-common/Regist/Regist) (if you haven't already done so) and request a 30-day trial license via the Request a Trial License link.
-
-* If you like, you can also [contact our support team](https://www.dynamsoft.com/contact/?utm_source=github) to get a trial license.
-
-## System Requirements
-
-This library requires the following features which are supported by all modern mainstream browsers:
-
-* `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`  
-    
-  The above four features are required for the library to work.
-
-* `MediaDevices`/`getUserMedia` 
-    
-  This API is only required for in-browser video streaming. If a browser does not support this API, the [Single Frame Mode](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/BarcodeScanner/properties.html?ver=latest&utm_source=github#singleframemode) will be used automatically. If the API exists but doesn't work correctly,  the Single Frame Mode can be used as an alternative way to access the camera.
-
-The following table is a list of supported browsers based on the above requirements:
-
-  Browser Name | Version
-  :-: | :-:
-  Chrome | v57+ (v59+ on Android/iOS1)
-  Firefox | v52+ (v55+ on Android/iOS1)
-  Edge2 | v16+
-  Safari3 | v11+
-
-  1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  2 On Edge, due to strict Same-origin policy, you must host the library files on the same domain as your web page. 
-
-  3 Safari 11.2.2 ~ 11.2.6 are not supported.
-     
-Apart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the library. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.
-
-## Hosting the library
-
-### Step One: Deploy the dist folder
-
-Once you have downloaded the library, you can locate the "dist" directory and copy it to your server (usually as part of your website / web application). The following shows some of the files in this directory:
-
-* `dbr.js` // The main library file
-* `dbr.browser.mjs` // For using the library as a module (`
-```
-
-Optionally, you may also need to [specify the location of the "engine" files](#specify-the-location-of-the-engine-files).
-
-## Advanced Usage
-
-In addition to the content mentioned above, the library has many other settings and options that you can adjust to best suit your usage. To read more, please see [advanced usage](https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/advanced-usage.html?ver=latest&utm_source=github).
-
-## How to Upgrade
-
-If you are using an older version of the library and want to upgrade it to the latest version, please read more on [how to upgrade](https://www.dynamsoft.com/barcode-reader/programming/javascript/upgrade-guide/?ver=latest&utm_source=github).
-
-## FAQ
-
-### Can I open the web page directly from the hard drive?
-
-Yes, for simple testing purposes, it's perfectly fine to open the file directly from the hard drive. However, you might encounter some issues in doing so (like unable to access the camera, etc.). The recommendation is to deploy this page to your web server and run it over **HTTPS**. If you don't have a ready-to-use web server but have a package manager like *npm* or *yarn*, you can set up a simple HTTP server in minutes. Check out [http-server on npm](https://www.npmjs.com/package/http-server) or [yarn](https://yarnpkg.com/package/http-server). 
-
-### Why can't I use my camera?
-
-If you open the web page as `file:///` or `http://`, the camera may not work and you see the following error in the browser console:
-
-> [Deprecation] getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
-
-* In Safari 12 the equivalent error is:
-
-> Trying to call getUserMedia from an insecure document.
-
-You get this error because the API [getUserMedia](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) requires HTTPS to access the camera.
-
-* If you use Chrome or Firefox, you might not get the error because these two browsers allow camera access via file:/// and http://localhost.
-
-To make sure your web application can access the camera, please configure your web server to support HTTPS. The following links may help.
-
-  - NGINX: [Configuring HTTPS servers](https://nginx.org/en/docs/http/configuring_https_servers.html)
-  - IIS: [Create a Self Signed Certificate in IIS](https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/)
-  - Tomcat: [Setting Up SSL on Tomcat in 5 minutes](https://dzone.com/articles/setting-ssl-tomcat-5-minutes)
-  - Node.js: [npm tls](https://nodejs.org/docs/v0.4.1/api/tls.html)
diff --git a/programming-old/javascript/user-guide/index-v8.8.3.md b/programming-old/javascript/user-guide/index-v8.8.3.md
deleted file mode 100644
index 48515fd3..00000000
--- a/programming-old/javascript/user-guide/index-v8.8.3.md
+++ /dev/null
@@ -1,527 +0,0 @@
----
-layout: default-layout
-title: v8.8.3 User Guide - Dynamsoft Barcode Reader JavaScript Edition
-description: This is the user guide of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, javascript, js
-breadcrumbText: User Guide
-noTitleIndex: true
-needGenerateH3Content: true
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/index-v8.8.3.html
----
-
-# Dynamsoft Barcode Reader for Your Website
-
-Turn your web page into a barcode scanner with just a few lines of code.
-
-![version](https://img.shields.io/npm/v/dynamsoft-javascript-barcode.svg)
-![downloads](https://img.shields.io/npm/dm/dynamsoft-javascript-barcode.svg) 
-![jsdelivr](https://img.shields.io/jsdelivr/npm/hm/dynamsoft-javascript-barcode.svg)
-![](https://img.shields.io/snyk/vulnerabilities/npm/dynamsoft-javascript-barcode.svg)
-
-[![](https://img.shields.io/badge/Download-Offline%20SDK-orange)](https://www.dynamsoft.com/barcode-reader/downloads/?utm_source=guide&product=dbr&package=js)
-
-Once integrated, your users can open your website in a browser, access their cameras and read barcodes directly from the video input.
-
-In this guide, you will learn step by step on how to integrate this library into your website.
-
-[TEST THE LIBRARY](https://www.dynamsoft.com/barcode-reader/downloads/?utm_source=guide&product=dbr&package=js)
-
-> For back-end barcode reading with Node.js, see [Dynamsoft Barcode Reader for Node](https://github.com/Dynamsoft/javascript-barcode/blob/main/README.NODE.md).
-
-**Table of Contents**
-
-* [Hello World - Simplest Implementation](#hello-world---simplest-implementation)
-* [Building your own page](#building-your-own-page)
-  - [Include the library](#include-the-library)
-  - [Configure the library](#configure-the-library)
-  - [Interact with the library](#interact-with-the-library)
-* [Requesting A Trial](#requesting-a-trial)
-* [System Requirements](#system-requirements)
-* [Hosting the Library](#hosting-the-library)
-* [Advanced Usage](#advanced-usage)
-* [How to Upgrade](#how-to-upgrade)
-* [FAQ](#faq)
-
-**Popular Examples**
-
-* [Basic Implementation](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-mincode.html?ver=latest&utm_source=guide)
-* [Use the library in Angular](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-angular.html?ver=latest&utm_source=guide)
-* [Use the library in React](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-reactjs.html?ver=latest&utm_source=guide)
-* [Use the library in Vue](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-vuejs.html?ver=latest&utm_source=guide)
-* [Use the library in a PWA APP](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-pwa.html?ver=latest&utm_source=guide)
-
-You can also:
-
-* [Try All Online Examples](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?utm_source=guide)
-* [Try the Official Demo](https://demo.dynamsoft.com/barcode-reader-js/?utm_source=guide)
-
-## Hello World - Simplest Implementation
-
-Let's start by testing the "Hello World" example of the library which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream.  
-
-* Basic Requirements
-  + Internet connection
-  + [A supported browser](#system-requirements)
-  + Camera access
-
-### Step One: Check the code of the example
-
-The complete code of the "Hello World" example is shown below
-
-``` html
-
-
-
-
-  
-  
-
-
-
-```
-
-> You can also find the code (with more comments) [on GitHub](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/master/1.hello-world/1.minimum-code.html?utm_source=guide).
-
-*About the code*
-
-  + `createInstance()`: This method creates a `BarcodeScanner` object. This object can read barcodes directly from a video input with the help of its interactive UI (hidden by default) and the [MediaDevices interface](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices).
-
-  + `onFrameRead`: This event is triggered every time the library finishes scanning a video frame. The `results` object contains all the barcode results that the library have found on this frame. In this example, we print the results to the browser console.
-
-  + `onUnduplicatedRead`: This event is triggered when the library finds a new barcode, which is not a duplicate among multiple frames. `txt` holds the barcode text value while `result` is an object that holds details of the barcode. In this example, an alert will be displayed for this new barcode.
-
-  + `show()`: This method brings up the built-in UI of the `BarcodeScanner` object and starts scanning.
-
-### Step Two: Test the example
-
-You can choose one of three ways to test the example:
-
-* [Hello World example - online](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.minimum-code.html?utm_source=guide) 
-* [Hello World example via JSFiddle](https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/)
-* [Download a copy](https://tst.dynamsoft.com/public/download/dbr/browser/code/helloworld.zip) of the example code and set it up locally
-
-Either way, you open the example page in a browser, allow the page to access your camera and the video will show up on the page. After that, you can point the camera at something with a barcode to read it.
-
-If the barcode is decoded, an alert will pop up with the result text. At the same time, the barcode location will be highlighted in the video feed. 
-
-  > For first use, you may need to wait a few seconds for the library to initialize.
-
-*Note*:
-
-  + The library only scans a new frame when it has finished scanning the previous frame. The interval between two consecutive frames might not be enough time for the library to process the 1st frame (for 30 FPS, the interval is about 33 ms), therefore, not all frames are scanned.
-
-  + The library requires a license to work. However, when no license is specified in the code, a [free public trial license](https://www.dynamsoft.com/license-server/docs/about/terms.html?ver=latest#public-trial-license?utm_source=guide) will automatically be used during which you can make initial evaluation of the library to decide whether or not you want to evaluate it further. If you do, you can [request a private trial license](#requesting-a-trial).
-
-    > Network connection is required for the free public trial license to work.
-
-If the test doesn't go as expected, you can check out the [FAQ](#faq) or [contact us](https://www.dynamsoft.com/contact/?utm_source=guide).
-
-## Building your own page
-
-### Include the library
-
-#### Use a CDN
-
-The simplest way to include the library is to use either the [jsDelivr](https://jsdelivr.com/) or [UNPKG](https://unpkg.com/) CDN. The "hello world" example above uses **jsDelivr**.
-
-* jsDelivr
-
-  ``` html
-  
-  ```
-
-* UNPKG  
-
-  ``` html
-  
-  ```
-
-#### Host the library yourself
-
-Besides using the CDN, you can also download the library and host its files on your own website / server before including it in your application.
-
-The following shows a few ways to download the library.
-
-* From the website
-
-  [Download the JavaScript Package](https://www.dynamsoft.com/barcode-reader/downloads/?utm_source=guide)
-
-* yarn
-
-  ```cmd
-  $ yarn add dynamsoft-javascript-barcode
-  ```
-
-* npm
-
-  ``` 
-  $ npm install dynamsoft-javascript-barcode --save
-  ```
-
-Depending on how you downloaded the library and where you put it. You can typically include it like this:
-
-``` html
-
-```
-
-or
-
-``` html
-
-```
-
-Read more on [how to host the library](#hosting-the-library).
-
-### Configure the library
-
-Before using the library, you need to configure a few things.
-
-#### Specify the license
-
-The library requires a license to work, use the APIs `organizationID` and / or `handshakeCode` to specify how to acquire the license.
-
-``` javascript
-Dynamsoft.DBR.BarcodeScanner.organizationID = "YOUR-ORGANIZATION-ID"; // Required.
-Dynamsoft.DBR.BarcodeScanner.handshakeCode = "A-SPECIFIC-HANDSHAKECODE"; // Optional, if not specified, the default handshake code is used.
-Dynamsoft.DBR.BarcodeScanner.sessionPassword = "PASSWORD-TO-PROTECT-YOUR-LICENSE"; // Optional but recomended, use it to protect your license.
-Dynamsoft.DBR.BarcodeScanner.licenseServer = ["YOUR-OWN-MAIN-DLS", "YOUR-OWN-STANDBY-DLS"]; //Optional, ignore this line if you are using Dynamsoft-hosting DLS.
-```
-
-*Note*:
-
-+ Network connection is required for the license to work.
-+ If nothing is specified like the above "hello world" example, a [free public trial license](https://www.dynamsoft.com/license-server/docs/about/terms.html?ver=latest#public-trial-license?utm_source=guide) will be automatically used. 
-+ The license is actually fetched during the creation of a `BarcodeScanner` or `BarcodeReader` instance.
-+ If a public network connection is not available, you can choose to host a license server in your private network. [Contact us](https://www.dynamsoft.com/contact/?utm_source=guide) for more information.
-
-An alternative way to specify the license is to use an alphanumeric string which does not require a network connection. The following shows how it could be used. [Contact us](https://www.dynamsoft.com/contact/?utm_source=guide) for more information.
-
-```javascript
-Dynamsoft.DBR.BarcodeReader.productKeys = "t0068NQAAACgTVU2aucyxqETXKkiomqhV7YoLrnqjLiQQRSH5DBV1UtIs4..."
-```
-  
-Or
-
-```html
-
-```
-
-#### Specify the location of the "engine" files
-
-The "engine" files refer to *.worker.js, *.wasm.js and *.wasm, etc. which are loaded by the main library at runtime. This configuration option uses the API `engineResourcePath` and is often not required as these files usually are in the same location with the main library file (dbr.js). However, in cases where the engine files are not in the same location as the main library file (for example, with frameworks like Angular or React, dbr.js is compiled into another file), this configuration will be required.
-
-The following code uses the jsDelivr CDN, feel free to change it to your own location of these files.
-  
-``` javascript
-Dynamsoft.DBR.BarcodeScanner.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.3/dist/";
-```
-
-### Interact with the library
-
-#### Create a `BarcodeScanner` object
-
-You can use one of two classes ( `BarcodeScanner` and `BarcodeReader` ) to interact with the library. `BarcodeReader` is a low-level class that processes images directly. `BarcodeScanner` , on the other hand, inherits from `BarcodeReader` and provides high-level APIs and a built-in GUI to allow continuous barcode scanning on video frames. We'll focus on `BarcodeScanner` in this guide.
-
-To use the library, we first create a `BarcodeScanner` object.
-
-``` javascript
-let scanner = null;
-try {
-  scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-} catch (ex) {
-  console.error(ex);
-}
-```
-
-When creating a `BarcodeScanner` object within a function which may be called more than once, it's best to use a "helper" variable to avoid double creation such as `pScanner` in the following code
-
-``` javascript
-let scanner = null, pScanner = null;
-function createBarcodeScanner(){
-  try {
-    scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance());
-  } catch (ex) {
-    console.error(ex);
-  }
-}
-```
-
-*Note*:
-
-* The creation of an object consists of two parallel tasks: one is to download and compile the "engine", the other is to fetch a license from Dynamsoft License Server (assuming an online license is used).
-
-#### Configure the `BarcodeScanner` object
-
-Let's take a look at the following code snippets first:
-
-``` javascript
-// set which camera and what resolution to use
-var allCameras = await scanner.getAllCameras();
-await scanner.setCurrentCamera(allCameras[0].deviceId);
-await scanner.setResolution(1280, 720);
-```
-
-``` javascript
-// set up the scanner behavior
-let scanSettings = await scanner.getScanSettings();
-// disregard duplicated results found in a specified time period (in milliseconds)
-scanSettings.duplicateForgetTime = 5000;
-// set a scan interval in milliseconds so the library may release the CPU from time to time
-scanSettings.intervalTime = 300;
-await scanner.updateScanSettings(scanSettings);
-```
-
-``` javascript
-// use one of the built-in RuntimeSetting templates: "single" (decode a single barcode, the default mode), "speed", "balance" and "coverage"
-await scanner.updateRuntimeSettings("speed");
-
-// make changes to the template. The code below demonstrates how to specify enabled symbologies
-let runtimeSettings = await scanner.getRuntimeSettings();
-runtimeSettings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_ONED | Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
-await scanner.updateRuntimeSettings(runtimeSettings);
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/yfkcajxz/)
-
-As you can see from the above code snippets, there are three types of configurations:
-
-* `get/updateVideoSettings`: Configures the data source, i.e., the camera. These settings include which camera to use, the resolution, etc. Learn more [here](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Syntax).
-
-* `get/updateScanSettings`: Configures the behavior of the scanner which includes `duplicateForgetTime`,  `intervalTime` and `filter`, etc.
-
-* `get/updateRuntimeSettings`: Configures the decode engine. Find a full list of these settings and their corresponding descriptions [here](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/global-interfaces.html?utm_source=guide#runtimesettings). For example, the following uses the built-in "speed" settings with updated `localizationModes`.
-
-  ``` javascript
-  await barcodeScanner.updateRuntimeSettings("speed");
-  //await barcodeScanner.updateRuntimeSettings("balance"); //alternative
-  //await barcodeScanner.updateRuntimeSettings("coverage"); //alternative
-  let settings = await barcodeScanner.getRuntimeSettings();
-  settings.localizationModes = [
-      Dynamsoft.DBR.EnumLocalizationMode.LM_CONNECTED_BLOCKS,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_SCAN_DIRECTLY,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_LINES, 0, 0, 0, 0, 0
-  ];
-  await barcodeScanner.updateRuntimeSettings(settings);
-  ```
-
-  Try in [JSFiddle](https://jsfiddle.net/DynamsoftTeam/f24h8c1m/).
-
-  See also [settings samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/parameter-settings.html?ver=latest&utm_source=guide).
-
-#### Customize the UI
-
-The built-in UI of the `BarcodeScanner` object is defined in the file `dist/dbr.scanner.html` . There are a few ways to customize it:
-
-* Modify the file `dist/dbr.scanner.html` directly. 
-
-  This option is only possible when you host this file on your own web server instead of using a CDN.
-
-* Copy the file `dist/dbr.scanner.html` to your application, modify it and use the the API `defaultUIElementURL` to set it as the default UI.
-
-  ``` javascript
-  Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "THE-URL-TO-THE-FILE";
-  ```
-  
-  > You must set `defaultUIElementURL` before you call `createInstance()` .
-
-* Append the default UI element to your page, customize it before showing it.
-
-  ``` html
-  
    
-  ```
-
-  ``` javascript
-  document.getElementById('scannerUI').appendChild(scanner.getUIElement());
-  document.getElementsByClassName('dbrScanner-btn-close')[0].hidden = true; // Hide the close button
-  ```
-
-* Build the UI element into your own web page and specify it with the API `setUIElement(HTMLElement)`.
-
-  - Embed the video
-
-    ``` html
-    
    
-      
-    
    
-    
-    ```
-
-    > The video element must have the class `dbrScanner-video` .
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)
-
-  - Add the camera list and resolution list
-  
-    If the class names for these lists match the default ones, `dbrScanner-sel-camera` and `dbrScanner-sel-resolution` , the library will automatically populate the lists and handle the camera/resolution switching.
-
-    ``` html
-    
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-    ``` html
-    
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)
-
-    > By default, 8 hard-coded resolutions are populated as options. You can show only a custom set of options by hardcoding them.
-
-    ``` html
-    
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)
-
-    > Generally, you need to provide a resolution that the camera supports. However, in case a camera does not support the specified resolution, it usually uses the nearest supported resolution. As a result, the selected resolution may not be the actual resolution used. In this case, add an option with the class name `dbrScanner-opt-gotResolution` (as shown above) and the library will then use it to show the actual resolution.
-
-See also [UI customization samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/ui-customization.html?ver=latest&utm_source=guide).
-
-Interested to test it further? Read on to learn how to request a 30-day free trial.
-
-## Requesting a Trial
-
-You can request a 30-day free trial license via the Request a Trial License link. Or you can [contact our support team](https://www.dynamsoft.com/contact/?utm_source=github) to get a free trial license.
-
-Since v8.2.5, a free public trial license is used by default if no license is specified.
-
-## System Requirements
-
-This library requires the following features which are supported by all modern mainstream browsers:
-
-* `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`, `import`
-    
-  The above four features are required for the library to work.
-
-* `MediaDevices`/`getUserMedia` 
-    
-  This API is only required for in-browser video streaming. If a browser does not support this API, the [Single Frame Mode](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/BarcodeScanner.html?ver=latest&utm_source=guide#singleframemode) will be used automatically. If the API exists but doesn't work correctly,  the Single Frame Mode can be used as an alternative way to access the camera.
-
-The following table is a list of supported browsers based on the above requirements:
-
-  Browser Name | Version
-  :-: | :-:
-  Chrome | v57+ (v59+ on Android/iOS1)
-  Firefox | v52+ (v55+ on Android/iOS1)
-  Edge2 | v16+
-  Safari3 | v11+
-
-  1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  2 On Edge, due to strict Same-origin policy, you must host the library files on the same domain as your web page. 
-  
-  3 Safari 11.2.2 ~ 11.2.6 are not supported.
-     
-Apart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the library. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.
-
-## Hosting the library
-
-### Step One: Deploy the dist folder
-
-Once you have downloaded the library, you can locate the "dist" directory and copy it to your server (usually as part of your website / web application). The following shows some of the files in this directory:
-
-* `dbr.js` // The main library file
-* `dbr.mjs` // For using the library as a module (`
-```
-
-Optionally, you may also need to [specify the location of the "engine" files](#specify-the-location-of-the-engine-files).
-
-## Advanced Usage
-
-In addition to the content mentioned above, the library has many other settings and options that you can adjust to best suit your usage. To read more, please see [advanced usage](https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/advanced-usage.html?ver=latest&utm_source=guide).
-
-## How to Upgrade
-
-If you are using an older version of the library and want to upgrade it to the latest version, please read more on [how to upgrade](https://www.dynamsoft.com/barcode-reader/programming/javascript/upgrade-guide/?ver=latest&utm_source=guide).
-
-## FAQ
-
-### Can I open the web page directly from the hard drive?
-
-Yes, for simple testing purposes, it's perfectly fine to open the file directly from the hard drive. However, you might encounter some issues in doing so (like unable to access the camera, etc.). The recommendation is to deploy this page to your web server and run it over **HTTPS**. If you don't have a ready-to-use web server but have a package manager like *npm* or *yarn*, you can set up a simple HTTP server in minutes. Check out [http-server on npm](https://www.npmjs.com/package/http-server) or [yarn](https://yarnpkg.com/package/http-server). 
-
-### Why can't I use my camera?
-
-If you open the web page as `file:///` or `http://`, the camera may not work and you see the following error in the browser console:
-
-> [Deprecation] getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
-
-* In Safari 12 the equivalent error is:
-
-> Trying to call getUserMedia from an insecure document.
-
-You get this error because the API [getUserMedia](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) requires HTTPS to access the camera.
-
-* If you use Chrome or Firefox, you might not get the error because these two browsers allow camera access via file:/// and http://localhost.
-
-To make sure your web application can access the camera, please configure your web server to support HTTPS. The following links may help.
-
-  - NGINX: [Configuring HTTPS servers](https://nginx.org/en/docs/http/configuring_https_servers.html)
-  - IIS: [Create a Self Signed Certificate in IIS](https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/)
-  - Tomcat: [Setting Up SSL on Tomcat in 5 minutes](https://dzone.com/articles/setting-ssl-tomcat-5-minutes)
-  - Node.js: [npm tls](https://nodejs.org/docs/v0.4.1/api/tls.html)
-
-### Accounting for newline characters in the barcode result
-When it comes to HTML, newline characters (`\n`) are not interpreted as they normally would. Therefore, if a barcode result contains a newline character, and you display the result in an alert box or some other text element, then the newline character will most probably be ignored.
-
-There are two ways in which you can resolve this:
-1. Wrap the element used to display the result in a `
    ` element.
-2. Manually replace each `\n` character in the result with `
    `
diff --git a/programming-old/javascript/user-guide/index-v8.8.5.md b/programming-old/javascript/user-guide/index-v8.8.5.md
deleted file mode 100644
index 74db661c..00000000
--- a/programming-old/javascript/user-guide/index-v8.8.5.md
+++ /dev/null
@@ -1,527 +0,0 @@
----
-layout: default-layout
-title: v8.8.5 User Guide - Dynamsoft Barcode Reader JavaScript Edition
-description: This is the user guide of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, javascript, js
-breadcrumbText: User Guide
-noTitleIndex: true
-needGenerateH3Content: true
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/index-v8.8.5.html
----
-
-# Dynamsoft Barcode Reader for Your Website
-
-Turn your web page into a barcode scanner with just a few lines of code.
-
-![version](https://img.shields.io/npm/v/dynamsoft-javascript-barcode.svg)
-![downloads](https://img.shields.io/npm/dm/dynamsoft-javascript-barcode.svg) 
-![jsdelivr](https://img.shields.io/jsdelivr/npm/hm/dynamsoft-javascript-barcode.svg)
-![](https://img.shields.io/snyk/vulnerabilities/npm/dynamsoft-javascript-barcode.svg)
-
-[![](https://img.shields.io/badge/Download-Offline%20SDK-orange)](https://www.dynamsoft.com/barcode-reader/downloads/?utm_source=guide&product=dbr&package=js)
-
-Once integrated, your users can open your website in a browser, access their cameras and read barcodes directly from the video input.
-
-In this guide, you will learn step by step on how to integrate this library into your website.
-
-[TEST THE LIBRARY](https://www.dynamsoft.com/barcode-reader/downloads/?utm_source=guide&product=dbr&package=js)
-
-> For back-end barcode reading with Node.js, see [Dynamsoft Barcode Reader for Node](https://github.com/Dynamsoft/javascript-barcode/blob/main/README.NODE.md).
-
-**Table of Contents**
-
-* [Hello World - Simplest Implementation](#hello-world---simplest-implementation)
-* [Building your own page](#building-your-own-page)
-  - [Include the library](#include-the-library)
-  - [Configure the library](#configure-the-library)
-  - [Interact with the library](#interact-with-the-library)
-* [Requesting A Trial](#requesting-a-trial)
-* [System Requirements](#system-requirements)
-* [Hosting the Library](#hosting-the-library)
-* [Advanced Usage](#advanced-usage)
-* [How to Upgrade](#how-to-upgrade)
-* [FAQ](#faq)
-
-**Popular Examples**
-
-* [Basic Implementation](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-mincode.html?ver=latest&utm_source=guide)
-* [Use the library in Angular](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-angular.html?ver=latest&utm_source=guide)
-* [Use the library in React](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-reactjs.html?ver=latest&utm_source=guide)
-* [Use the library in Vue](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-vuejs.html?ver=latest&utm_source=guide)
-* [Use the library in a PWA APP](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-pwa.html?ver=latest&utm_source=guide)
-
-You can also:
-
-* [Try All Online Examples](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?utm_source=guide)
-* [Try the Official Demo](https://demo.dynamsoft.com/barcode-reader-js/?utm_source=guide)
-
-## Hello World - Simplest Implementation
-
-Let's start by testing the "Hello World" example of the library which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream.  
-
-* Basic Requirements
-  + Internet connection
-  + [A supported browser](#system-requirements)
-  + Camera access
-
-### Step One: Check the code of the example
-
-The complete code of the "Hello World" example is shown below
-
-``` html
-
-
-
-
-  
-  
-
-
-
-```
-
-> You can also find the code (with more comments) [on GitHub](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/master/1.hello-world/1.minimum-code.html?utm_source=guide).
-
-*About the code*
-
-  + `createInstance()`: This method creates a `BarcodeScanner` object. This object can read barcodes directly from a video input with the help of its interactive UI (hidden by default) and the [MediaDevices interface](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices).
-
-  + `onFrameRead`: This event is triggered every time the library finishes scanning a video frame. The `results` object contains all the barcode results that the library have found on this frame. In this example, we print the results to the browser console.
-
-  + `onUnduplicatedRead`: This event is triggered when the library finds a new barcode, which is not a duplicate among multiple frames. `txt` holds the barcode text value while `result` is an object that holds details of the barcode. In this example, an alert will be displayed for this new barcode.
-
-  + `show()`: This method brings up the built-in UI of the `BarcodeScanner` object and starts scanning.
-
-### Step Two: Test the example
-
-You can choose one of three ways to test the example:
-
-* [Hello World example - online](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.minimum-code.html?utm_source=guide) 
-* [Hello World example via JSFiddle](https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/)
-* [Download a copy](https://tst.dynamsoft.com/public/download/dbr/browser/code/helloworld.zip) of the example code and set it up locally
-
-Either way, you open the example page in a browser, allow the page to access your camera and the video will show up on the page. After that, you can point the camera at something with a barcode to read it.
-
-If the barcode is decoded, an alert will pop up with the result text. At the same time, the barcode location will be highlighted in the video feed. 
-
-  > For first use, you may need to wait a few seconds for the library to initialize.
-
-*Note*:
-
-  + The library only scans a new frame when it has finished scanning the previous frame. The interval between two consecutive frames might not be enough time for the library to process the 1st frame (for 30 FPS, the interval is about 33 ms), therefore, not all frames are scanned.
-
-  + The library requires a license to work. However, when no license is specified in the code, a [free public trial license](https://www.dynamsoft.com/license-server/docs/about/terms.html?ver=latest#public-trial-license?utm_source=guide) will automatically be used during which you can make initial evaluation of the library to decide whether or not you want to evaluate it further. If you do, you can [request a private trial license](#requesting-a-trial).
-
-    > Network connection is required for the free public trial license to work.
-
-If the test doesn't go as expected, you can check out the [FAQ](#faq) or [contact us](https://www.dynamsoft.com/contact/?utm_source=guide).
-
-## Building your own page
-
-### Include the library
-
-#### Use a CDN
-
-The simplest way to include the library is to use either the [jsDelivr](https://jsdelivr.com/) or [UNPKG](https://unpkg.com/) CDN. The "hello world" example above uses **jsDelivr**.
-
-* jsDelivr
-
-  ``` html
-  
-  ```
-
-* UNPKG  
-
-  ``` html
-  
-  ```
-
-#### Host the library yourself
-
-Besides using the CDN, you can also download the library and host its files on your own website / server before including it in your application.
-
-The following shows a few ways to download the library.
-
-* From the website
-
-  [Download the JavaScript Package](https://www.dynamsoft.com/barcode-reader/downloads/?utm_source=guide)
-
-* yarn
-
-  ```cmd
-  $ yarn add dynamsoft-javascript-barcode
-  ```
-
-* npm
-
-  ``` 
-  $ npm install dynamsoft-javascript-barcode --save
-  ```
-
-Depending on how you downloaded the library and where you put it. You can typically include it like this:
-
-``` html
-
-```
-
-or
-
-``` html
-
-```
-
-Read more on [how to host the library](#hosting-the-library).
-
-### Configure the library
-
-Before using the library, you need to configure a few things.
-
-#### Specify the license
-
-The library requires a license to work, use the APIs `organizationID` and / or `handshakeCode` to specify how to acquire the license.
-
-``` javascript
-Dynamsoft.DBR.BarcodeScanner.organizationID = "YOUR-ORGANIZATION-ID"; // Required.
-Dynamsoft.DBR.BarcodeScanner.handshakeCode = "A-SPECIFIC-HANDSHAKECODE"; // Optional, if not specified, the default handshake code is used.
-Dynamsoft.DBR.BarcodeScanner.sessionPassword = "PASSWORD-TO-PROTECT-YOUR-LICENSE"; // Optional but recomended, use it to protect your license.
-Dynamsoft.DBR.BarcodeScanner.licenseServer = ["YOUR-OWN-MAIN-DLS", "YOUR-OWN-STANDBY-DLS"]; //Optional, ignore this line if you are using Dynamsoft-hosting DLS.
-```
-
-*Note*:
-
-+ Network connection is required for the license to work.
-+ If nothing is specified like the above "hello world" example, a [free public trial license](https://www.dynamsoft.com/license-server/docs/about/terms.html?ver=latest#public-trial-license?utm_source=guide) will be automatically used. 
-+ The license is actually fetched during the creation of a `BarcodeScanner` or `BarcodeReader` instance.
-+ If a public network connection is not available, you can choose to host a license server in your private network. [Contact us](https://www.dynamsoft.com/contact/?utm_source=guide) for more information.
-
-An alternative way to specify the license is to use an alphanumeric string which does not require a network connection. The following shows how it could be used. [Contact us](https://www.dynamsoft.com/contact/?utm_source=guide) for more information.
-
-```javascript
-Dynamsoft.DBR.BarcodeReader.productKeys = "t0068NQAAACgTVU2aucyxqETXKkiomqhV7YoLrnqjLiQQRSH5DBV1UtIs4..."
-```
-  
-Or
-
-```html
-
-```
-
-#### Specify the location of the "engine" files
-
-The "engine" files refer to *.worker.js, *.wasm.js and *.wasm, etc. which are loaded by the main library at runtime. This configuration option uses the API `engineResourcePath` and is often not required as these files usually are in the same location with the main library file (dbr.js). However, in cases where the engine files are not in the same location as the main library file (for example, with frameworks like Angular or React, dbr.js is compiled into another file), this configuration will be required.
-
-The following code uses the jsDelivr CDN, feel free to change it to your own location of these files.
-  
-``` javascript
-Dynamsoft.DBR.BarcodeScanner.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.5/dist/";
-```
-
-### Interact with the library
-
-#### Create a `BarcodeScanner` object
-
-You can use one of two classes ( `BarcodeScanner` and `BarcodeReader` ) to interact with the library. `BarcodeReader` is a low-level class that processes images directly. `BarcodeScanner` , on the other hand, inherits from `BarcodeReader` and provides high-level APIs and a built-in GUI to allow continuous barcode scanning on video frames. We'll focus on `BarcodeScanner` in this guide.
-
-To use the library, we first create a `BarcodeScanner` object.
-
-``` javascript
-let scanner = null;
-try {
-  scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-} catch (ex) {
-  console.error(ex);
-}
-```
-
-When creating a `BarcodeScanner` object within a function which may be called more than once, it's best to use a "helper" variable to avoid double creation such as `pScanner` in the following code
-
-``` javascript
-let scanner = null, pScanner = null;
-function createBarcodeScanner(){
-  try {
-    scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance());
-  } catch (ex) {
-    console.error(ex);
-  }
-}
-```
-
-*Note*:
-
-* The creation of an object consists of two parallel tasks: one is to download and compile the "engine", the other is to fetch a license from Dynamsoft License Server (assuming an online license is used).
-
-#### Configure the `BarcodeScanner` object
-
-Let's take a look at the following code snippets first:
-
-``` javascript
-// set which camera and what resolution to use
-var allCameras = await scanner.getAllCameras();
-await scanner.setCurrentCamera(allCameras[0].deviceId);
-await scanner.setResolution(1280, 720);
-```
-
-``` javascript
-// set up the scanner behavior
-let scanSettings = await scanner.getScanSettings();
-// disregard duplicated results found in a specified time period (in milliseconds)
-scanSettings.duplicateForgetTime = 5000;
-// set a scan interval in milliseconds so the library may release the CPU from time to time
-scanSettings.intervalTime = 300;
-await scanner.updateScanSettings(scanSettings);
-```
-
-``` javascript
-// use one of the built-in RuntimeSetting templates: "single" (decode a single barcode, the default mode), "speed", "balance" and "coverage"
-await scanner.updateRuntimeSettings("speed");
-
-// make changes to the template. The code below demonstrates how to specify enabled symbologies
-let runtimeSettings = await scanner.getRuntimeSettings();
-runtimeSettings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_ONED | Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
-await scanner.updateRuntimeSettings(runtimeSettings);
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/yfkcajxz/)
-
-As you can see from the above code snippets, there are three types of configurations:
-
-* `get/updateVideoSettings`: Configures the data source, i.e., the camera. These settings include which camera to use, the resolution, etc. Learn more [here](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Syntax).
-
-* `get/updateScanSettings`: Configures the behavior of the scanner which includes `duplicateForgetTime`,  `intervalTime` and `filter`, etc.
-
-* `get/updateRuntimeSettings`: Configures the decode engine. Find a full list of these settings and their corresponding descriptions [here](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/global-interfaces.html?utm_source=guide#runtimesettings). For example, the following uses the built-in "speed" settings with updated `localizationModes`.
-
-  ``` javascript
-  await barcodeScanner.updateRuntimeSettings("speed");
-  //await barcodeScanner.updateRuntimeSettings("balance"); //alternative
-  //await barcodeScanner.updateRuntimeSettings("coverage"); //alternative
-  let settings = await barcodeScanner.getRuntimeSettings();
-  settings.localizationModes = [
-      Dynamsoft.DBR.EnumLocalizationMode.LM_CONNECTED_BLOCKS,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_SCAN_DIRECTLY,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_LINES, 0, 0, 0, 0, 0
-  ];
-  await barcodeScanner.updateRuntimeSettings(settings);
-  ```
-
-  Try in [JSFiddle](https://jsfiddle.net/DynamsoftTeam/f24h8c1m/).
-
-  See also [settings samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/parameter-settings.html?ver=latest&utm_source=guide).
-
-#### Customize the UI
-
-The built-in UI of the `BarcodeScanner` object is defined in the file `dist/dbr.scanner.html` . There are a few ways to customize it:
-
-* Modify the file `dist/dbr.scanner.html` directly. 
-
-  This option is only possible when you host this file on your own web server instead of using a CDN.
-
-* Copy the file `dist/dbr.scanner.html` to your application, modify it and use the the API `defaultUIElementURL` to set it as the default UI.
-
-  ``` javascript
-  Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "THE-URL-TO-THE-FILE";
-  ```
-  
-  > You must set `defaultUIElementURL` before you call `createInstance()` .
-
-* Append the default UI element to your page, customize it before showing it.
-
-  ``` html
-  
    
-  ```
-
-  ``` javascript
-  document.getElementById('scannerUI').appendChild(scanner.getUIElement());
-  document.getElementsByClassName('dbrScanner-btn-close')[0].hidden = true; // Hide the close button
-  ```
-
-* Build the UI element into your own web page and specify it with the API `setUIElement(HTMLElement)`.
-
-  - Embed the video
-
-    ``` html
-    
    
-      
-    
    
-    
-    ```
-
-    > The video element must have the class `dbrScanner-video` .
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)
-
-  - Add the camera list and resolution list
-  
-    If the class names for these lists match the default ones, `dbrScanner-sel-camera` and `dbrScanner-sel-resolution` , the library will automatically populate the lists and handle the camera/resolution switching.
-
-    ``` html
-    
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-    ``` html
-    
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)
-
-    > By default, 8 hard-coded resolutions are populated as options. You can show only a custom set of options by hardcoding them.
-
-    ``` html
-    
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)
-
-    > Generally, you need to provide a resolution that the camera supports. However, in case a camera does not support the specified resolution, it usually uses the nearest supported resolution. As a result, the selected resolution may not be the actual resolution used. In this case, add an option with the class name `dbrScanner-opt-gotResolution` (as shown above) and the library will then use it to show the actual resolution.
-
-See also [UI customization samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/ui-customization.html?ver=latest&utm_source=guide).
-
-Interested to test it further? Read on to learn how to request a 30-day free trial.
-
-## Requesting a Trial
-
-You can request a 30-day free trial license via the Request a Trial License link. Or you can [contact our support team](https://www.dynamsoft.com/contact/?utm_source=github) to get a free trial license.
-
-Since v8.2.5, a free public trial license is used by default if no license is specified.
-
-## System Requirements
-
-This library requires the following features which are supported by all modern mainstream browsers:
-
-* `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`, `import`
-    
-  The above four features are required for the library to work.
-
-* `MediaDevices`/`getUserMedia` 
-    
-  This API is only required for in-browser video streaming. If a browser does not support this API, the [Single Frame Mode](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/BarcodeScanner.html?ver=latest&utm_source=guide#singleframemode) will be used automatically. If the API exists but doesn't work correctly,  the Single Frame Mode can be used as an alternative way to access the camera.
-
-The following table is a list of supported browsers based on the above requirements:
-
-  Browser Name | Version
-  :-: | :-:
-  Chrome | v57+ (v59+ on Android/iOS1)
-  Firefox | v52+ (v55+ on Android/iOS1)
-  Edge2 | v16+
-  Safari3 | v11+
-
-  1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  2 On Edge, due to strict Same-origin policy, you must host the library files on the same domain as your web page. 
-  
-  3 Safari 11.2.2 ~ 11.2.6 are not supported.
-     
-Apart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the library. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.
-
-## Hosting the library
-
-### Step One: Deploy the dist folder
-
-Once you have downloaded the library, you can locate the "dist" directory and copy it to your server (usually as part of your website / web application). The following shows some of the files in this directory:
-
-* `dbr.js` // The main library file
-* `dbr.mjs` // For using the library as a module (`
-```
-
-Optionally, you may also need to [specify the location of the "engine" files](#specify-the-location-of-the-engine-files).
-
-## Advanced Usage
-
-In addition to the content mentioned above, the library has many other settings and options that you can adjust to best suit your usage. To read more, please see [advanced usage](https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/advanced-usage.html?ver=latest&utm_source=guide).
-
-## How to Upgrade
-
-If you are using an older version of the library and want to upgrade it to the latest version, please read more on [how to upgrade](https://www.dynamsoft.com/barcode-reader/programming/javascript/upgrade-guide/?ver=latest&utm_source=guide).
-
-## FAQ
-
-### Can I open the web page directly from the hard drive?
-
-Yes, for simple testing purposes, it's perfectly fine to open the file directly from the hard drive. However, you might encounter some issues in doing so (like unable to access the camera, etc.). The recommendation is to deploy this page to your web server and run it over **HTTPS**. If you don't have a ready-to-use web server but have a package manager like *npm* or *yarn*, you can set up a simple HTTP server in minutes. Check out [http-server on npm](https://www.npmjs.com/package/http-server) or [yarn](https://yarnpkg.com/package/http-server). 
-
-### Why can't I use my camera?
-
-If you open the web page as `file:///` or `http://`, the camera may not work and you see the following error in the browser console:
-
-> [Deprecation] getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
-
-* In Safari 12 the equivalent error is:
-
-> Trying to call getUserMedia from an insecure document.
-
-You get this error because the API [getUserMedia](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) requires HTTPS to access the camera.
-
-* If you use Chrome or Firefox, you might not get the error because these two browsers allow camera access via file:/// and http://localhost.
-
-To make sure your web application can access the camera, please configure your web server to support HTTPS. The following links may help.
-
-  - NGINX: [Configuring HTTPS servers](https://nginx.org/en/docs/http/configuring_https_servers.html)
-  - IIS: [Create a Self Signed Certificate in IIS](https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/)
-  - Tomcat: [Setting Up SSL on Tomcat in 5 minutes](https://dzone.com/articles/setting-ssl-tomcat-5-minutes)
-  - Node.js: [npm tls](https://nodejs.org/docs/v0.4.1/api/tls.html)
-
-### Accounting for newline characters in the barcode result
-When it comes to HTML, newline characters (`\n`) are not interpreted as they normally would. Therefore, if a barcode result contains a newline character, and you display the result in an alert box or some other text element, then the newline character will most probably be ignored.
-
-There are two ways in which you can resolve this:
-1. Wrap the element used to display the result in a `
    ` element.
-2. Manually replace each `\n` character in the result with `
    `
diff --git a/programming-old/javascript/user-guide/index-v8.8.7.md b/programming-old/javascript/user-guide/index-v8.8.7.md
deleted file mode 100644
index 27b3c833..00000000
--- a/programming-old/javascript/user-guide/index-v8.8.7.md
+++ /dev/null
@@ -1,554 +0,0 @@
----
-layout: default-layout
-title: v8.8.7 User Guide - Dynamsoft Barcode Reader JavaScript Edition
-description: This is the user guide of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, javascript, js
-breadcrumbText: User Guide
-noTitleIndex: true
-needGenerateH3Content: true
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/index-v8.8.7.html
----
-
-
-
-# Dynamsoft Barcode Reader for Your Website
-
-Turn your web page into a barcode scanner with just a few lines of code.
-
-![version](https://img.shields.io/npm/v/dynamsoft-javascript-barcode.svg)
-![downloads](https://img.shields.io/npm/dm/dynamsoft-javascript-barcode.svg)
-![jsdelivr](https://img.shields.io/jsdelivr/npm/hm/dynamsoft-javascript-barcode.svg)
-![](https://img.shields.io/snyk/vulnerabilities/npm/dynamsoft-javascript-barcode.svg)
-
-[![](https://img.shields.io/badge/Download-Offline%20SDK-orange)](https://www.dynamsoft.com/barcode-reader/downloads/?utm_source=guide&product=dbr&package=js)
-
-Once integrated, your users can open your website in a browser, access their cameras and read barcodes directly from the video input.
-
-In this guide, you will learn step by step on how to integrate this library into your website.
-
-[GET THE LIBRARY](https://www.dynamsoft.com/barcode-reader/downloads/?utm_source=guide&product=dbr&package=js)
-
-> For back-end barcode reading with Node.js, see [Dynamsoft Barcode Reader for Node](https://www.npmjs.com/package/dynamsoft-node-barcode).
-
-**Table of Contents**
-
-* [Hello World - Simplest Implementation](#hello-world---simplest-implementation)
-* [Building your own page](#building-your-own-page)
-  + [Include the library](#include-the-library)
-  + [Configure the library](#configure-the-library)
-  + [Interact with the library](#interact-with-the-library)
-* [Requesting A Trial](#requesting-a-trial)
-* [System Requirements](#system-requirements)
-* [Hosting the Library (optional)](#hosting-the-library-optional)
-* [Advanced Usage](#advanced-usage)
-* [How to Upgrade](#how-to-upgrade)
-* [FAQ](#faq)
-
-**Popular Examples**
-
-* Basic Implementation - [Guide](#hello-world---simplest-implementation) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/master/1.hello-world/1.minimum-code.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.minimum-code.html?utm_source=guide)
-* Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-angular.html?ver=8.8.7&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/master/1.hello-world/3.read-video-angular) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/3.read-video-angular/dist/hello-world/?utm_source=guide)
-* React App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-reactjs.html?ver=8.8.7&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/master/1.hello-world/4.read-video-react) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/4.read-video-react/build/?utm_source=guide)
-* Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=8.8.7&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/master/1.hello-world/6.read-video-vue3) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/6.read-video-vue3/dist/?utm_source=guide)
-* PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-pwa.html?ver=8.8.7&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/master/1.hello-world/10.read-video-pwa) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/10.read-video-pwa/helloworld-pwa.html?utm_source=guide)
-
-You can also:
-
-* Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo)
-* Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples)
-
-
    
-
-## Hello World - Simplest Implementation
-
-Let's start with the "Hello World" example of the library which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream.  
-
-* Basic Requirements
-  + Internet connection
-  + [A supported browser](#system-requirements)
-  + Camera access
-
-### Step One: Check the code of the example
-
-The complete code of the "Hello World" example is shown below
-
-```html
-
-
-
-
-    
-  
-
-
-
-```
-
-
    
-  
-    Code in Github
-  
-   
-  
-    Run via JSFiddle
-  
-   
-  
-    Run in Dynamsoft
-  
-   
-  
-    Download from Dynamsoft
-  
-
    
-
------
-
-*About the code*
-
-  + `createInstance()`: This method creates a `BarcodeScanner` object. This object can read barcodes directly from a video input with the help of its interactive UI (hidden by default) and the MediaDevices interface.
-
-  + `onFrameRead`: This event is triggered every time the library finishes scanning a video frame. The `results` object contains all the barcode results that the library have found on this frame. In this example, we print the results to the browser console.
-
-  + `onUnduplicatedRead`: This event is triggered when the library finds a new barcode, which is not a duplicate among multiple frames. `txt` holds the barcode text value while `result` is an object that holds details of the barcode. In this example, an alert will be displayed for this new barcode.
-
-  + `show()`: This method brings up the built-in UI of the `BarcodeScanner` object and starts scanning.
-
-### Step Two: Test the example
-
-Open the example page in a browser, allow the page to access your camera and the video will show up on the page. After that, you can point the camera at a barcode to read it.
-
-When a barcode is decoded, you will see the result text pop up and the barcode location will be highlighted in the video feed. 
-
-  > For first use, you may need to wait a few seconds for the library to initialize.
-
-*Note*:
-
-  + The library requires a license to work. However, when no license is specified in the code, a [free 1-day public trial license](https://www.dynamsoft.com/license-server/docs/about/terms.html?ver=latest#public-trial-license?utm_source=guide) will automatically be used during which you can make initial evaluation of the library to decide whether or not you want to evaluate it further. If you do, you can [request a 30-day private trial license](#requesting-a-trial).
-    > Network connection is required for the free public trial license to work.
-
-If the test doesn't go as expected, you can check out the [FAQ](#faq) or [contact us](https://www.dynamsoft.com/contact/?utm_source=guide).
-
-
    
-
-## Building your own page
-
-### Include the library
-
-#### Use a CDN
-
-The simplest way to include the library is to use either the [jsDelivr](https://jsdelivr.com/) or [UNPKG](https://unpkg.com/) CDN. The "hello world" example above uses **jsDelivr**.
-
-* jsDelivr
-
-  ```html
-  
-  ```
-
-* UNPKG  
-
-  ```html
-  
-  ```
-
-#### Host the library yourself
-
-Besides using the CDN, you can also download the library and host its files on your own website / server before including it in your application.
-
-A few ways to download the library:
-
-* From the website
-
-  [Download the JavaScript Package](https://www.dynamsoft.com/barcode-reader/downloads/?utm_source=guide)
-
-* yarn
-
-  ```cmd
-  $ yarn add dynamsoft-javascript-barcode
-  ```
-
-* npm
-
-  ```
-  $ npm install dynamsoft-javascript-barcode --save
-  ```
-
-Depending on how you downloaded the library and where you put it, you can typically include it like this:
-
-```html
-
-```
-
-or
-
-```html
-
-```
-
-Read more on [how to host the library](#hosting-the-library-optional).
-
-### Configure the library
-
-Before using the library, you need to configure a few things.
-
-#### Specify the license
-
-The library requires a license to work, use the API `license` to specify it.
-
-```javascript
-Dynamsoft.DBR.BarcodeReader.license =
-  "YOUR-ORGANIZATION-ID or YOUR-HANDSHAKECODE or AN-OFFLINE-LICENSE or ANY-OTHER-TYPE-OF-SUPPORTED-LICENSE-STRING";
-```
-  
-Or
-
-```html
-
-```
-
-*Note*:
-
-* When specified by YOUR-ORGANIZATION-ID or YOUR-HANDSHAKECODE, the license is an online license and a network connection to Dynamsoft License Server is required for it to work.
-* In most cases, online licenses are offered. If you want to use an offline license, you can [contact us](https://www.dynamsoft.com/contact/?utm_source=guide).
-* If nothing is specified like the above "hello world" example, a [free 1-day public trial license](https://www.dynamsoft.com/license-server/docs/about/terms.html?ver=latest#public-trial-license?utm_source=guide) will be automatically used. This license requires a network connection.
-  
-
-#### Specify the location of the "engine" files
-
-If the engine files (*.worker.js, *.wasm.js and *.wasm, etc.) are not in the same location with the main library file (dbr.js), you can use the API `engineResourcePath` to specify the engine path, for example:
-
-```javascript
-//The following code uses the jsDelivr CDN, feel free to change it to your own location of these files
-Dynamsoft.DBR.BarcodeScanner.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.7/dist/";
-```
-
-This configuration is usually required with frameworks like Angular or React where dbr.js is compiled into another file.
-
-### Interact with the library
-
-#### Create a `BarcodeScanner` object
-
-You can use one of two classes ( `BarcodeScanner` and `BarcodeReader` ) to interact with the library. `BarcodeReader` is a low-level class that processes images directly. `BarcodeScanner`, on the other hand, inherits from `BarcodeReader` and provides high-level APIs and a built-in GUI to allow continuous barcode scanning on video frames. We'll focus on `BarcodeScanner` in this guide.
-
-To use the library, we first create a `BarcodeScanner` object.
-
-```javascript
-let scanner = null;
-try {
-    scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-} catch (ex) {
-    console.error(ex);
-}
-```
-
-Tip: When creating a `BarcodeScanner` object within a function which may be called more than once, it's best to use a "helper" variable to avoid double creation such as `pScanner` in the following code
-
-```javascript
-let pScanner = null;
-document.getElementById('btn-scan').addEventListener('click', async () => {
-    try {
-        const scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance());
-    } catch (ex) {
-        console.error(ex);
-    }
-});
-```
-
-#### Configure the `BarcodeScanner` object
-
-Let's take a look at the following code snippets first:
-
-```javascript
-// set which camera and what resolution to use
-let allCameras = await scanner.getAllCameras();
-await scanner.setCurrentCamera(allCameras[0].deviceId);
-await scanner.setResolution(1280, 720);
-```
-
-```javascript
-// set up the scanner behavior
-let scanSettings = await scanner.getScanSettings();
-// disregard duplicated results found in a specified time period (in milliseconds)
-scanSettings.duplicateForgetTime = 5000;
-// set a scan interval in milliseconds so the library may release the CPU from time to time
-scanSettings.intervalTime = 100;
-await scanner.updateScanSettings(scanSettings);
-```
-
-```javascript
-// use one of the built-in RuntimeSetting templates: "single" (decode a single barcode, the default mode), "speed", "balance" and "coverage"
-await scanner.updateRuntimeSettings("speed");
-
-// make changes to the template. The code below demonstrates how to specify enabled symbologies
-let runtimeSettings = await scanner.getRuntimeSettings();
-runtimeSettings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_ONED | Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
-await scanner.updateRuntimeSettings(runtimeSettings);
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/yfkcajxz/)
-
-As you can see from the above code snippets, there are three types of configurations:
-
-* `get/updateVideoSettings`: Configures the data source, i.e., the camera. These settings include which camera to use, the resolution, etc. Learn more here.
-
-* `get/updateScanSettings`: Configures the behavior of the scanner which includes `duplicateForgetTime`,  `intervalTime` and `filter`, etc.
-
-* `get/updateRuntimeSettings`: Configures the decode engine with either a built-in template or a comprehensive `RuntimeSettings` object. For example, the following uses the built-in "speed" settings with updated `localizationModes`.
-
-> Find the full list of these settings here. 
-
-  ```javascript
-  await barcodeScanner.updateRuntimeSettings("speed");
-  //await barcodeScanner.updateRuntimeSettings("balance"); //alternative
-  //await barcodeScanner.updateRuntimeSettings("coverage"); //alternative
-  let settings = await barcodeScanner.getRuntimeSettings();
-  settings.localizationModes = [
-      Dynamsoft.DBR.EnumLocalizationMode.LM_CONNECTED_BLOCKS,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_SCAN_DIRECTLY,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_LINES, 0, 0, 0, 0, 0
-  ];
-  await barcodeScanner.updateRuntimeSettings(settings);
-  ```
-
-  Try in [JSFiddle](https://jsfiddle.net/DynamsoftTeam/f24h8c1m/).
-
-  See also [settings samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/parameter-settings.html?ver=8.8.7&utm_source=guide).
-
-#### Customize the UI
-
-The built-in UI of the `BarcodeScanner` object is defined in the file `dist/dbr.scanner.html` . There are a few ways to customize it:
-
-* Modify the file `dist/dbr.scanner.html` directly. 
-
-  This option is only possible when you host this file on your own web server instead of using a CDN.
-
-* Copy the file `dist/dbr.scanner.html` to your application, modify it and use the the API `defaultUIElementURL` to set it as the default UI.
-
-  ```javascript
-  Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "THE-URL-TO-THE-FILE";
-  ```
-
-  
-  > You must set `defaultUIElementURL` before you call `createInstance()` .
-
-* Append the default UI element to your page, customize it before showing it.
-
-  ```html
-  
    
-  ```
-
-  ```javascript
-  document.getElementById('div-video-container').appendChild(scanner.getUIElement());
-  document.getElementsByClassName('dce-btn-close')[0].hidden = true; // Hide the close button
-  ```
-
-* Build the UI element into your own web page and specify it with the API `setUIElement(HTMLElement)`.
-
-  + Embed the video
-
-    ```html
-    
    
-        
-    
    
-    
-    ```
-
-    > The video element must have the class `dce-video` .
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)
-
-  + Add the camera list and resolution list
-  
-
-    If the class names for these lists match the default ones, `dce-sel-camera` and `dce-sel-resolution` , the library will automatically populate the lists and handle the camera/resolution switching.
-
-    ```html
-    
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-    ```html
-    
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)
-
-    > By default, 8 hard-coded resolutions are populated as options. You can show only a custom set of options by hardcoding them.
-
-    ```html
-    
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)
-
-    > Generally, you need to provide a resolution that the camera supports. However, in case a camera does not support the specified resolution, it usually uses the nearest supported resolution. As a result, the selected resolution may not be the actual resolution used. In this case, add an option with the class name `dce-opt-gotResolution` (as shown above) and the library will then use it to show the actual resolution.
-
-See also [UI customization samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/ui-customization.html?ver=8.8.7&utm_source=guide).
-
-
    
-
-## Requesting a Trial
-
-You can request a 30-day free private trial license via the Request a Trial License link. Or you can [contact our support team](https://www.dynamsoft.com/contact/?utm_source=github) to get a free trial license.
-
-Since v8.2.5, a free public trial license is used by default if no license is specified.
-
-
    
-
-## System Requirements
-
-This library requires the following features which are supported by all modern mainstream browsers:
-
-* `WebAssembly`,  `Blob`,  `URL`/`createObjectURL`,  `Web Workers`
-    
-
-  The above four features are required for the library to work.
-
-* `MediaDevices`/`getUserMedia`
-
-  This API is only required for in-browser video streaming. If a browser does not support this API, the [Single Frame Mode](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/BarcodeScanner.html?ver=8.8.7&utm_source=guide#singleframemode) will be used automatically. If the API exists but doesn't work correctly, the Single Frame Mode can be used as an alternative way to access the camera.
-
-The following table is a list of supported browsers based on the above requirements:
-
-  Browser Name | Version
-  :-: | :-:
-  Chrome | v57+ (v59+ on Android/iOS1)
-  Firefox | v52+ (v55+ on Android/iOS1)
-  Edge2 | v16+
-  Safari3 | v11+
-
-  1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  2 On Edge, due to strict Same-origin policy, you must host the library files on the same domain as your web page. 
-  
-  3 Safari 11.2.2 ~ 11.2.6 are not supported.
-
-Apart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the library. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.
-
-
    
-
-## Hosting the library (optional)
-
-### Step One: Deploy the dist folder
-
-Once you have downloaded the library, you can locate the "dist" directory and copy it to your server (usually as part of your website / web application). 
-
-Some of the files in this directory:
-
-* `dbr.js` // The main library file
-* `dbr.mjs` // For using the library as a module (`
-```
-
-Optionally, you may also need to [specify the location of the "engine" files](#specify-the-location-of-the-engine-files).
-
-
    
-
-## Advanced Usage
-
-In addition to the above basic settings, the library has many more settings and options that you can adjust to best suit your usage. To read more, please see [advanced usage](https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/advanced-usage.html?ver=8.8.7&utm_source=guide).
-
-
    
-
-## How to Upgrade
-
-If you want to upgrade the library from an old version to a newer one, please see [how to upgrade](https://www.dynamsoft.com/barcode-reader/programming/javascript/upgrade-guide/?ver=8.8.7&utm_source=guide).
-
-
    
-
-## FAQ
-
-### Can I open the web page directly from the hard drive?
-
-Yes, for simple testing purposes, it's perfectly fine to open the file directly from the hard drive. However, you might encounter some issues in doing so (like unable to access the camera, etc.). The recommendation is to deploy this page to your web server and run it over **HTTPS**. If you don't have a ready-to-use web server but have a package manager like *npm* or *yarn*, you can set up a simple HTTP server in minutes. Check out [http-server on npm](https://www.npmjs.com/package/http-server). 
-
-### Why can't I use my camera?
-
-If you open the web page as `file:///` or `http://` , the camera may not work and you see the following error in the browser console:
-
-> [Deprecation] getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
-
-* In Safari 12 the equivalent error is:
-
-> Trying to call getUserMedia from an insecure document.
-
-You get this error because the API getUserMedia requires HTTPS to access the camera.
-
-* If you use Chrome or Firefox, you might not get the error because these two browsers allow camera access via file:/// and http://localhost.
-
-To make sure your web application can access the camera, please configure your web server to support HTTPS. The following links may help.
-
-  + NGINX: Configuring HTTPS servers
-  + IIS: Create a Self Signed Certificate in IIS
-  + Tomcat: Setting Up SSL on Tomcat in 5 minutes
-  + Node.js: npm tls
-
-### Accounting for newline characters in the barcode result
-
-When it comes to HTML, newline characters ( `\n` ) are not interpreted as they normally would. Therefore, if a barcode result contains a newline character, and you display the result in an modal dialogue box or some other text elements, then the newline character will probably be ignored.
-
-There are two ways in which you can resolve this:
-1. Wrap the element used to display the result in a `
    ` element.
-2. Manually replace each `\n` character in the result with `
    `
diff --git a/programming-old/javascript/user-guide/index-v9.0.0.md b/programming-old/javascript/user-guide/index-v9.0.0.md
deleted file mode 100644
index 4b0f9b07..00000000
--- a/programming-old/javascript/user-guide/index-v9.0.0.md
+++ /dev/null
@@ -1,478 +0,0 @@
----
-layout: default-layout
-title: v9.0.0 User Guide - Dynamsoft Barcode Reader JavaScript Edition
-description: This is the user guide of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, javascript, js
-breadcrumbText: User Guide
-noTitleIndex: true
-needGenerateH3Content: true
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/index-v9.0.0.html
----
-
-
-
-# Barcode Reader for Your Website
-
-[Dynamsoft Barcode Reader JavaScript Edition](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) is equipped with industry-leading algorithms for exceptional speed, accuracy and read rates in barcode reading. With its well-designed API, you can turn your web page into a barcode scanner with just a few lines of code.
-
-![version](https://img.shields.io/npm/v/dynamsoft-javascript-barcode.svg)
-![downloads](https://img.shields.io/npm/dm/dynamsoft-javascript-barcode.svg)
-![jsdelivr](https://img.shields.io/jsdelivr/npm/hm/dynamsoft-javascript-barcode.svg)
-![vulnerabilities](https://img.shields.io/snyk/vulnerabilities/npm/dynamsoft-javascript-barcode.svg)
-
-Once integrated, your users can open your website in a browser, access their cameras and read barcodes directly from the video input.
-
-In this guide, you will learn step by step on how to integrate this library into your website.
-
-Table of Contents
-
-* [Hello World - Simplest Implementation](#hello-world---simplest-implementation)
-* [Building your own page](#building-your-own-page)
-  * [Include the library](#include-the-library)
-  * [Configure the library](#configure-the-library)
-  * [Interact with the library](#interact-with-the-library)
-* [API Documentation](#api-documentation)
-* [System Requirements](#system-requirements)
-* [Advanced Usage](#advanced-usage)
-* [How to Upgrade](#how-to-upgrade)
-* [FAQ](#faq)
-
-**Popular Examples**
-
-* Hello World - [Guide](#hello-world---simplest-implementation) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/master/1.hello-world/1.hello-world.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?utm_source=guide)
-* Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-angular.html?ver=9.0.0&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/master/1.hello-world/3.read-video-angular) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/3.read-video-angular/dist/hello-world/?utm_source=guide)
-* React App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.0.0&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/master/1.hello-world/4.read-video-react) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/4.read-video-react/build/?utm_source=guide)
-* Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.0.0&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/master/1.hello-world/6.read-video-vue3) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/6.read-video-vue3/dist/?utm_source=guide)
-* PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.0.0&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/master/1.hello-world/10.read-video-pwa) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/10.read-video-pwa/helloworld-pwa.html?utm_source=guide)
-
-You can also:
-
-* Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo)
-* Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples)
-
-## Hello World - Simplest Implementation
-
-Let's start with the "Hello World" example of the library which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream.  
-
-* Basic Requirements
-  * Internet connection
-  * [A supported browser](#system-requirements)
-  * Camera access
-
-### Step One: Check the code of the example
-
-The complete code of the "Hello World" example is shown below
-
-```html
-
-
-
-
-    
-  
-
-
-
-```
-
-
    
-  
-    Code in Github
-  
-   
-  
-    Run via JSFiddle
-  
-   
-  
-    Run in Dynamsoft
-  
-   
-  
-    Download from Dynamsoft
-  
-
    
-
------
-
-#### About the code
-
-* `license`: This property specifies a license key. Read more on [Specify the license](#specify-the-license).
-
-* `createInstance()`: This method creates a `BarcodeScanner` object. This object can read barcodes directly from a video input with the help of its interactive UI (hidden by default) and the MediaDevices interface.
-
-* `onFrameRead`: This event is triggered every time the library finishes scanning a video frame. The `results` object contains all the barcode results that the library have found on this frame. In this example, we print the results to the browser console.
-
-* `onUniqueRead`: This event is triggered when the library finds a new barcode, which is not a duplicate among multiple frames. `txt` holds the barcode text value while `result` is an object that holds details of the barcode. In this example, an alert will be displayed for this new barcode.
-
-* `show()`: This method brings up the built-in UI of the `BarcodeScanner` object and starts scanning.
-
-### Step Two: Test the example
-
-Open the example page in a browser, allow the page to access your camera and the video will show up on the page. After that, you can point the camera at a barcode to read it.
-
-When a barcode is decoded, you will see the result text pop up and the barcode location will be highlighted in the video feed.
-
-*Note*:
-
-* Although the page should work properly when opened directly as a file ("file:///"), it's recommended that you deploy it to a web server before accessing it. Also, some browsers require a secure connection (HTTPS) to access the cameras, so deploying the page to a HTTPS website is the best choice.
-* For first use, you may need to wait a few seconds for the library to initialize.
-* The license "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" used in this sample is an online license and requires network connection to work.
-
-If the test doesn't go as expected, you can check out the [FAQ](#faq) or [contact us](https://www.dynamsoft.com/contact/?utm_source=guide).
-
-## Building your own page
-
-### Include the library
-
-#### Use a CDN
-
-The simplest way to include the library is to use either the [jsDelivr](https://jsdelivr.com/) or [UNPKG](https://unpkg.com/) CDN. The "hello world" example above uses **jsDelivr**.
-
-* jsDelivr
-
-  ```html
-  
-  ```
-
-* UNPKG  
-
-  ```html
-  
-  ```
-
-#### Host the library yourself
-
-Besides using the CDN, you can also download the library and host its files on your own website / server before including it in your application.
-
-To download the library:
-
-* yarn
-
-  ```cmd
-  yarn add dynamsoft-javascript-barcode
-  ```
-
-* npm
-
-  ```cmd
-  npm install dynamsoft-javascript-barcode --save
-  ```
-
-Depending on how you downloaded the library and where you put it, you can typically include it like this:
-
-```html
-
-```
-
-or
-
-```html
-
-```
-
-Read more on [how to host the library](advanced-usage.md#hosting-the-library).
-
-### Configure the library
-
-Before using the library, you need to configure a few things.
-
-#### Specify the license
-
-The library requires a license to work, use the API `license` to specify a license key.
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-```
-
-To test the library, you can request a 30-day trial license via the Request a Trial License link.
-
-> If you registered for a Dynamsoft account and downloaded the library from the official site, Dynamsoft will generate a 30-day trial license for you and put the license key in all the downloaded samples.
-
-#### Specify the location of the "engine" files
-
-If the engine files (\*.worker.js, \*.wasm.js and \*.wasm, etc.) are not in the same location with the main library file (dbr.js), you can use the API `engineResourcePath` to specify the engine path, for example:
-
-```javascript
-//The following code uses the jsDelivr CDN, feel free to change it to your own location of these files
-Dynamsoft.DBR.BarcodeScanner.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.0.0/dist/";
-```
-
-This configuration is usually required with frameworks like Angular or React where dbr.js is compiled into another file.
-
-### Interact with the library
-
-#### Create a `BarcodeScanner` object
-
-You can use one of two classes ( `BarcodeScanner` and `BarcodeReader` ) to interact with the library. `BarcodeReader` is a low-level class that processes images directly. `BarcodeScanner`, on the other hand, inherits from `BarcodeReader` and provides high-level APIs and a built-in GUI to allow continuous barcode scanning on video frames. We'll focus on `BarcodeScanner` in this guide.
-
-To use the library, we first create a `BarcodeScanner` object.
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-let scanner = null;
-try {
-    scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-} catch (ex) {
-    console.error(ex);
-}
-```
-
-Tip: When creating a `BarcodeScanner` object within a function which may be called more than once, it's best to use a "helper" variable to avoid double creation such as `pScanner` in the following code
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-let pScanner = null;
-document.getElementById('btn-scan').addEventListener('click', async () => {
-    try {
-        const scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance());
-    } catch (ex) {
-        console.error(ex);
-    }
-});
-```
-
-#### Configure the `BarcodeScanner` object
-
-Let's take a look at the following code snippets:
-
-```javascript
-// set which camera and what resolution to use
-let allCameras = await scanner.getAllCameras();
-await scanner.setCurrentCamera(allCameras[0].deviceId);
-await scanner.setResolution(1280, 720);
-```
-
-```javascript
-// set up the scanner behavior
-let scanSettings = await scanner.getScanSettings();
-// disregard duplicated results found in a specified time period (in milliseconds)
-scanSettings.duplicateForgetTime = 5000;
-// set a scan interval in milliseconds so the library may release the CPU from time to time
-// setting this value larger is also a simple way to save battery power and reduce device heating.
-scanSettings.intervalTime = 100;
-await scanner.updateScanSettings(scanSettings);
-```
-
-```javascript
-// use one of the built-in RuntimeSetting templates: "single" (decode a single barcode, the default mode), "speed", "balance" and "coverage"
-await scanner.updateRuntimeSettings("speed");
-
-// make changes to the template. The code below demonstrates how to specify enabled symbologies
-let runtimeSettings = await scanner.getRuntimeSettings();
-runtimeSettings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_ONED | Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
-await scanner.updateRuntimeSettings(runtimeSettings);
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/yfkcajxz/)
-
-As you can see from the above code snippets, there are three types of configurations:
-
-* `get/updateVideoSettings`: Configures the data source, i.e., the camera. These settings include which camera to use, the resolution, etc. Learn more here.
-
-* `get/updateScanSettings`: Configures the behavior of the scanner which includes `duplicateForgetTime` and `intervalTime`, etc.
-
-* `get/updateRuntimeSettings`: Configures the decode engine with either a built-in template or a comprehensive `RuntimeSettings` object. For example, the following uses the built-in "speed" settings with updated `localizationModes`.
-
-> Find the full list of the runtime settings here.
-
-  ```javascript
-  await barcodeScanner.updateRuntimeSettings("speed");
-  //await barcodeScanner.updateRuntimeSettings("balance"); //alternative
-  //await barcodeScanner.updateRuntimeSettings("coverage"); //alternative
-  let settings = await barcodeScanner.getRuntimeSettings();
-  settings.localizationModes = [
-      Dynamsoft.DBR.EnumLocalizationMode.LM_CONNECTED_BLOCKS,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_SCAN_DIRECTLY,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_LINES, 0, 0, 0, 0, 0
-  ];
-  await barcodeScanner.updateRuntimeSettings(settings);
-  ```
-
-  Try in [JSFiddle](https://jsfiddle.net/DynamsoftTeam/f24h8c1m/).
-
-  See also [settings samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/parameter-settings.html?ver=9.0.0&utm_source=guide).
-
-#### Customize the UI
-
-The built-in UI of the `BarcodeScanner` object is defined in the file `dist/dbr.ui.html` . There are a few ways to customize it:
-
-* Modify the file `dist/dbr.ui.html` directly.
-
-  This option is only possible when you host this file on your own web server instead of using a CDN.
-
-* Copy the file `dist/dbr.ui.html` to your application, modify it and use the the API `defaultUIElementURL` to set it as the default UI.
-
-  ```javascript
-  Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "THE-URL-TO-THE-FILE";
-  ```
-  
-  > You must set `defaultUIElementURL` before you call `createInstance()` .
-
-* Append the default UI element to your page, customize it before showing it.
-
-  ```html
-  
    
-  ```
-
-  ```javascript
-  document.getElementById('div-ui-container').appendChild(scanner.getUIElement());
-  document.getElementsByClassName('dce-btn-close')[0].hidden = true; // Hide the close button
-  ```
-
-* Build the UI element into your own web page and specify it with the API `setUIElement(HTMLElement)`.
-
-  * Embed the video
-
-    ```html
-    
    
-        
    
-    
    
-    
-    ```
-
-    > The video element will be created and appended to the DIV element with the class `dce-video-container`, make sure the class name is the same. Besides, the CSS property `position` of the DIV element must be either `relative`, `absolute`, `fixed`, or `sticky`.
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)
-
-  * Add the camera list and resolution list
-
-    If the class names for these lists match the default ones, `dce-sel-camera` and `dce-sel-resolution` , the library will automatically populate the lists and handle the camera/resolution switching.
-
-    ```html
-    
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-    ```html
-    
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)
-
-    > By default, 8 hard-coded resolutions are populated as options. You can show only a custom set of options by hardcoding them.
-
-    ```html
-    
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)
-
-    > Generally, you need to provide a resolution that the camera supports. However, in case a camera does not support the specified resolution, it usually uses the nearest supported resolution. As a result, the selected resolution may not be the actual resolution used. In this case, add an option with the class name `dce-opt-gotResolution` (as shown above) and the library will then use it to show the actual resolution.
-
-See also [UI customization samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/ui-customization.html?ver=9.0.0&utm_source=guide).
-
-## API Documentation
-
-You can check out the detailed documentation about the APIs of the library at
-[https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=9.0.0](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=9.0.0).
-
-## System Requirements
-
-This library requires the following features which are supported by all modern mainstream browsers:
-
-* `WebAssembly`,  `Blob`,  `URL`/`createObjectURL`,  `Web Workers`
-
-  The above four features are required for the library to work.
-
-* `MediaDevices`/`getUserMedia`
-
-  This API is only required for in-browser video streaming. If a browser does not support this API, the [Single Frame Mode](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/BarcodeScanner.html?ver=9.0.0&utm_source=guide#singleframemode) will be used automatically. If the API exists but doesn't work correctly, the Single Frame Mode can be used as an alternative way to access the camera.
-
-* `getSettings`
-
-  This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.
-
-The following table is a list of supported browsers based on the above requirements:
-
-  Browser Name | Version
-  :-: | :-:
-  Chrome | v59+1
-  Firefox | v52+ (v55+ on Android/iOS1)
-  Edge2 | v16+
-  Safari3 | v11+
-
-  1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  2 On Edge, due to strict Same-origin policy, you must host the library files on the same domain as your web page.
-  
-  3 Safari 11.2.2 ~ 11.2.6 are not supported.
-
-Apart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the library. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.
-
-## Advanced Usage
-
-In addition to the above basic settings, the library has many more settings and options that you can adjust to best suit your usage. To read more, please see [advanced usage](https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/advanced-usage.html?ver=9.0.0&utm_source=guide).
-
-## How to Upgrade
-
-If you want to upgrade the library from an old version to a newer one, please see [how to upgrade](https://www.dynamsoft.com/barcode-reader/programming/javascript/upgrade-guide/?ver=9.0.0&utm_source=guide).
-
-## FAQ
-
-### Can I open the web page directly from the hard drive?
-
-Yes, for simple testing purposes, it's perfectly fine to open the file directly from the hard drive. However, you might encounter some issues in doing so (like unable to access the camera, etc.). The recommendation is to deploy this page to your web server and run it over **HTTPS**. If you don't have a ready-to-use web server but have a package manager like *npm* or *yarn*, you can set up a simple HTTP server in minutes. Check out [http-server on npm](https://www.npmjs.com/package/http-server).
-
-### Why can't I use my camera?
-
-If you open the web page as `file:///` or `http://` , the camera may not work and you see the following error in the browser console:
-
-> [Deprecation] getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See `https://goo.gl/rStTGz` for more details.
-
-In Safari 12 the equivalent error is:
-
-> Trying to call getUserMedia from an insecure document.
-
-You get this error because the API getUserMedia requires HTTPS to access the camera.
-
-To make sure your web application can access the camera, please configure your web server to support HTTPS. The following links may help.
-
-1. NGINX: Configuring HTTPS servers
-2. IIS: Create a Self Signed Certificate in IIS
-3. Tomcat: Setting Up SSL on Tomcat in 5 minutes
-4. Node.js: npm tls
-
-> If you use Chrome or Firefox, you might not get the error because these two browsers allow camera access via `file:///` and `http://localhost`. However, our recommendation is that you deploy the web page to a web server that supports HTTPS.
-
-### Accounting for newline characters in the barcode result
-
-When it comes to HTML, newline characters ( `\n` ) are not interpreted as they normally would. Therefore, if a barcode result contains a newline character, and you display the result in an modal dialogue box or some other text elements, then the newline character will probably be ignored.
-
-There are two ways in which you can resolve this:
-
-1. Wrap the element used to display the result in a `
    ` element.
-2. Manually replace each `\n` character in the result with `
    `
diff --git a/programming-old/javascript/user-guide/index-v9.0.1.md b/programming-old/javascript/user-guide/index-v9.0.1.md
deleted file mode 100644
index c9ce1886..00000000
--- a/programming-old/javascript/user-guide/index-v9.0.1.md
+++ /dev/null
@@ -1,469 +0,0 @@
----
-layout: default-layout
-title: v9.0.1 User Guide - Dynamsoft Barcode Reader JavaScript Edition
-description: This is the user guide of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, javascript, js
-breadcrumbText: User Guide
-noTitleIndex: true
-needGenerateH3Content: true
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/index-v9.0.1.html
----
-
-
-
-# Barcode Reader for Your Website
-
-[Dynamsoft Barcode Reader JavaScript Edition](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) is equipped with industry-leading algorithms for exceptional speed, accuracy and read rates in barcode reading. With its well-designed API, you can turn your web page into a barcode scanner with just a few lines of code.
-
-![version](https://img.shields.io/npm/v/dynamsoft-javascript-barcode.svg)
-![downloads](https://img.shields.io/npm/dm/dynamsoft-javascript-barcode.svg)
-![jsdelivr](https://img.shields.io/jsdelivr/npm/hm/dynamsoft-javascript-barcode.svg)
-![vulnerabilities](https://img.shields.io/snyk/vulnerabilities/npm/dynamsoft-javascript-barcode.svg)
-
-Once integrated, your users can open your website in a browser, access their cameras and read barcodes directly from the video input.
-
-In this guide, you will learn step by step on how to integrate this library into your website.
-
-Table of Contents
-
-- [Barcode Reader for Your Website](#barcode-reader-for-your-website)
-  - [Hello World - Simplest Implementation](#hello-world---simplest-implementation)
-    - [Step One: Check the code of the example](#step-one-check-the-code-of-the-example)
-      - [About the code](#about-the-code)
-    - [Step Two: Test the example](#step-two-test-the-example)
-  - [Building your own page](#building-your-own-page)
-    - [Include the library](#include-the-library)
-      - [Use a CDN](#use-a-cdn)
-      - [Host the library yourself](#host-the-library-yourself)
-    - [Configure the library](#configure-the-library)
-      - [Specify the license](#specify-the-license)
-      - [Specify the location of the "engine" files](#specify-the-location-of-the-engine-files)
-    - [Interact with the library](#interact-with-the-library)
-      - [Create a `BarcodeScanner` object](#create-a-barcodescanner-object)
-      - [Customize the `BarcodeScanner` Settings (optional)](#customize-the-barcodescanner-settings-optional)
-    - [Customize the UI (optional)](#customize-the-ui-optional)
-  - [API Documentation](#api-documentation)
-  - [System Requirements](#system-requirements)
-  - [Advanced Usage](#advanced-usage)
-  - [How to Upgrade](#how-to-upgrade)
-
-**Popular Examples**
-
-* Hello World - [Guide](#hello-world---simplest-implementation) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.0.1/1.hello-world/1.hello-world.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.0.1&utm_source=guide)
-* Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-angular.html?ver=9.0.1&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.0.1/1.hello-world/3.read-video-angular) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/3.read-video-angular/dist/hello-world/?ver=9.0.1&utm_source=guide)
-* React App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.0.1&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.0.1/1.hello-world/4.read-video-react) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/4.read-video-react/build/?ver=9.0.1&utm_source=guide)
-* Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.0.1&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.0.1/1.hello-world/6.read-video-vue3) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/6.read-video-vue3/dist/?ver=9.0.1&utm_source=guide)
-* PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.0.1&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.0.1/1.hello-world/10.read-video-pwa) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/10.read-video-pwa/helloworld-pwa.html?ver=9.0.1&utm_source=guide)
-* Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/use-cases.html?ver=latest#read-the-pdf417-barcode-on-the-drivers-license?ver=9.0.1&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.0.1/4.use-case/2.read-a-drivers-license.html) \| [Run](https://demo.dynamsoft.com/samples/dbr/js/4.use-case/2.read-a-drivers-license.html?ver=9.0.1&utm_source=guide)
-* Fill A Form - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/use-cases.html?ver=latest#read-barcodes-and-fill-form-fields?ver=9.0.1&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.0.1/4.use-case/1.fill-a-form-with-barcode-reading.html) \| [Run](https://demo.dynamsoft.com/samples/dbr/js/4.use-case/1.fill-a-form-with-barcode-reading.html?ver=9.0.1&utm_source=guide)
-
-You can also:
-
-* Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.0.1&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)
-* Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.0.1&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.0.1/)
-
-## Hello World - Simplest Implementation
-
-Let's start with the "Hello World" example of the library which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream.  
-
-* Basic Requirements
-  * Internet connection
-  * [A supported browser](#system-requirements)
-  * Camera access
-
-### Step One: Check the code of the example
-
-The complete code of the "Hello World" example is shown below
-
-```html
-
-
-
-
-    
-    
-
-
-
-```
-
-
    
-  
-    Code in Github
-  
-   
-  
-    Run via JSFiddle
-  
-   
-  
-    Run in Dynamsoft
-  
-
    
-
------
-
-#### About the code
-
-* `license`: This property specifies a license key. Note that the license "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" used in this example is an online license and requires network connection to work. Read more on [Specify the license](#specify-the-license).
-
-* `createInstance()`: This method creates a `BarcodeScanner` object. This object can read barcodes directly from a video input with the help of its interactive UI (hidden by default) and the MediaDevices interface.
-
-* `onFrameRead`: This event is triggered every time the library finishes scanning a video frame. The `results` object contains all the barcode results that the library have found on this frame. In this example, we print the results to the browser console.
-
-* `onUniqueRead`: This event is triggered when the library finds a new barcode, which is not a duplicate among multiple frames. `txt` holds the barcode text value while `result` is an object that holds details of the barcode. In this example, an alert will be displayed for this new barcode.
-
-* `show()`: This method brings up the built-in UI of the `BarcodeScanner` object and starts scanning.
-
-### Step Two: Test the example
-
-To test the example, you can open the copy deployed to Dynamsoft Server here. You will be asked to allow access to your camera, after which the video will be displayed on the page. After that, you can point the camera at a barcode to read it.
-
-When a barcode is decoded, you will see the result text pop up and the barcode location will be highlighted in the video feed.
-
-Alternatively, you can make a local test simply by taking the code in step 1, pasting it in a file with the name "hello-world.html" and open it in a browser.
-
-*Note*:
-
-If you open the web page as `file:///` or `http://` , the camera may not work correctly because the API getUserMedia usually requires HTTPS to access the camera.
-
-To make sure your web application can access the camera, please configure your web server to support HTTPS. The following links may help.
-
-1. NGINX: Configuring HTTPS servers
-2. IIS: Create a Self Signed Certificate in IIS
-3. Tomcat: Setting Up SSL on Tomcat in 5 minutes
-4. Node.js: npm tls
-
-If the test doesn't go as expected, you can [contact us](https://www.dynamsoft.com/contact/?ver=9.0.1&utm_source=guide).
-
-## Building your own page
-
-### Include the library
-
-#### Use a CDN
-
-The simplest way to include the library is to use either the [jsDelivr](https://jsdelivr.com/) or [UNPKG](https://unpkg.com/) CDN. The "hello world" example above uses **jsDelivr**.
-
-* jsDelivr
-
-  ```html
-  
-  ```
-
-* UNPKG  
-
-  ```html
-  
-  ```
-
-#### Host the library yourself
-
-Besides using the CDN, you can also download the library and host its files on your own website / server before including it in your application.
-
-Options to download the library:
-
-* From the website
-
-  Download the JavaScript Package
-
-* yarn
-
-  ```cmd
-  yarn add dynamsoft-javascript-barcode
-  ```
-
-* npm
-
-  ```cmd
-  npm install dynamsoft-javascript-barcode --save
-  ```
-
-Depending on how you downloaded the library and where you put it, you can typically include it like this:
-
-```html
-
-```
-
-or
-
-```html
-
-```
-
-Read more on [how to host the library](https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/advanced-usage.html?ver=9.0.1&utm_source=guide&product=dbr&package=js#hosting-the-library).
-
-### Configure the library
-
-Before using the library, you need to configure a few things.
-
-#### Specify the license
-
-The library requires a license to work, use the API `license` to specify a license key.
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-```
-
-To test the library, you can request a 30-day trial license via the Request a Trial License link.
-
-> If you registered a Dynamsoft account and downloaded the library from the official website, Dynamsoft will generate a 30-day trial license for you and put the license key into all the samples that come with the library.
-
-#### Specify the location of the "engine" files
-
-This is usually only required with frameworks like Angular or React, etc. where dbr.js is compiled into another file.
-
-The purpose is to tell the library where to find the engine files (\*.worker.js, \*.wasm.js and \*.wasm, etc.). The API is called `engineResourcePath`:
-
-```javascript
-//The following code uses the jsDelivr CDN, feel free to change it to your own location of these files
-Dynamsoft.DBR.BarcodeScanner.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.0.1/dist/";
-```
-
-### Interact with the library
-
-#### Create a `BarcodeScanner` object
-
-You can use one of two classes ( `BarcodeScanner` and `BarcodeReader` ) to interact with the library. `BarcodeReader` is a low-level class that processes images directly. `BarcodeScanner` , on the other hand, inherits from `BarcodeReader` and provides high-level APIs and a built-in GUI to allow continuous barcode scanning on video frames. We'll focus on `BarcodeScanner` in this guide.
-
-To use the library, we first create a `BarcodeScanner` object.
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-let scanner = null;
-try {
-    scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-} catch (ex) {
-    console.error(ex);
-}
-```
-
-Tip: When creating a `BarcodeScanner` object within a function which may be called more than once, it's best to use a "helper" variable to avoid double creation such as `pScanner` in the following code
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-let pScanner = null;
-document.getElementById('btn-scan').addEventListener('click', async () => {
-    try {
-        const scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance());
-    } catch (ex) {
-        console.error(ex);
-    }
-});
-```
-
-#### Customize the `BarcodeScanner` Settings (optional)
-
-Let's take a look at the following code snippets:
-
-```javascript
-// Sets which camera and what resolution to use
-let allCameras = await scanner.getAllCameras();
-await scanner.setCurrentCamera(allCameras[0].deviceId);
-await scanner.setResolution(1280, 720);
-```
-
-```javascript
-// Sets up the scanner behavior
-let scanSettings = await scanner.getScanSettings();
-// Disregards duplicated results found in a specified time period (in milliseconds)
-scanSettings.duplicateForgetTime = 5000;
-// Sets a scan interval in milliseconds so the library may release the CPU from time to time
-// (setting this value larger is a simple way to save battery power and reduce device heating).
-scanSettings.intervalTime = 100;
-await scanner.updateScanSettings(scanSettings);
-```
-
-```javascript
-// Uses one of the built-in RuntimeSetting templates: "single" (decode a single barcode, the default mode), "speed", "balance" and "coverage"
-await scanner.updateRuntimeSettings("speed");
-
-// Makes changes to the template. The code below demonstrates how to specify enabled symbologies
-let runtimeSettings = await scanner.getRuntimeSettings();
-runtimeSettings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_ONED | Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
-await scanner.updateRuntimeSettings(runtimeSettings);
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/yfkcajxz/)
-
-As you can see from the above code snippets, there are three types of configurations:
-
-* Customize the data source: This configuration includes which camera to use, the preferred resolution, etc. Learn more here.
-
-* `get/updateScanSettings`: Configures the behavior of the scanner which includes `duplicateForgetTime` and `intervalTime`, etc.
-
-* `get/updateRuntimeSettings`: Configures the decode engine with either a built-in template or a comprehensive `RuntimeSettings` object. For example, the following uses the built-in "speed" settings with updated `localizationModes`.
-
-> Find the full list of the runtime settings here.
-
-  ```javascript
-  await barcodeScanner.updateRuntimeSettings("speed");
-  //await barcodeScanner.updateRuntimeSettings("balance"); //alternative
-  //await barcodeScanner.updateRuntimeSettings("coverage"); //alternative
-  let settings = await barcodeScanner.getRuntimeSettings();
-  settings.localizationModes = [
-      Dynamsoft.DBR.EnumLocalizationMode.LM_CONNECTED_BLOCKS,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_SCAN_DIRECTLY,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_LINES, 0, 0, 0, 0, 0
-  ];
-  await barcodeScanner.updateRuntimeSettings(settings);
-  ```
-
-  Try in [JSFiddle](https://jsfiddle.net/DynamsoftTeam/f24h8c1m/).
-
-  See also [settings samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/parameter-settings.html?ver=9.0.1&utm_source=guide).
-
-### Customize the UI (optional)
-
-The built-in UI of the `BarcodeScanner` object is defined in the file `dist/dbr.ui.html` . There are a few ways to customize it:
-
-* Modify the file `dist/dbr.ui.html` directly.
-
-  This option is only possible when you host this file on your own web server instead of using a CDN.
-
-* Copy the file `dist/dbr.ui.html` to your application, modify it and use the the API `defaultUIElementURL` to set it as the default UI.
-
-  ```javascript
-  Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "THE-URL-TO-THE-FILE";
-  ```
-  
-  > You must set `defaultUIElementURL` before you call `createInstance()` .
-
-* Append the default UI element to your page, customize it before showing it.
-
-  ```html
-  
    
-  ```
-
-  ```javascript
-  document.getElementById('div-ui-container').appendChild(scanner.getUIElement());
-  document.getElementsByClassName('dce-btn-close')[0].hidden = true; // Hide the close button
-  ```
-
-* Build the UI element into your own web page and specify it with the API `setUIElement(HTMLElement)`.
-
-  * Embed the video
-
-    ```html
-    
    
-        
    
-    
    
-    
-    ```
-
-    > The video element will be created and appended to the DIV element with the class `dce-video-container` , make sure the class name is the same. Besides, the CSS property `position` of the DIV element must be either `relative` , `absolute` , `fixed` , or `sticky` .
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)
-
-  * Add the camera list and resolution list
-
-    If the class names for these lists match the default ones, `dce-sel-camera` and `dce-sel-resolution` , the library will automatically populate the lists and handle the camera/resolution switching.
-
-    ```html
-    
    
-        
    
-        
    
-    
    
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-    ```html
-    
    
-        
-        
-        
    
-        
    
-    
    
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)
-
-    > By default, 8 hard-coded resolutions are populated as options. You can show only a custom set of options by hardcoding them.
-
-    ```html
-    
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)
-
-    > Generally, you need to provide a resolution that the camera supports. However, in case a camera does not support the specified resolution, it usually uses the nearest supported resolution. As a result, the selected resolution may not be the actual resolution used. In this case, add an option with the class name `dce-opt-gotResolution` (as shown above) and the library will then use it to show the actual resolution.
-
-See also [UI customization samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/ui-customization.html?ver=9.0.1&utm_source=guide).
-
-## API Documentation
-
-You can check out the detailed documentation about the APIs of the library at
-[https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=9.0.1](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=9.0.1).
-
-## System Requirements
-
-This library requires the following features which are supported by all modern mainstream browsers:
-
-* `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`
-
-  The above four features are required for the library to work.
-
-* `MediaDevices`/`getUserMedia`
-
-  This API is only required for in-browser video streaming. If a browser does not support this API, the [Single Frame Mode](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/BarcodeScanner.html?ver=9.0.1&utm_source=guide#singleframemode) will be used automatically. If the API exists but doesn't work correctly, the Single Frame Mode can be used as an alternative way to access the camera.
-
-* `getSettings`
-
-  This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.
-
-The following table is a list of supported browsers based on the above requirements:
-
-  Browser Name | Version
-  :-: | :-:
-  Chrome | v59+1
-  Firefox | v52+ (v55+ on Android/iOS1)
-  Edge2 | v16+
-  Safari3 | v11+
-
-  1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  2 On Edge, due to strict Same-origin policy, you must host the library files on the same domain as your web page.
-  
-  3 Safari 11.2.2 ~ 11.2.6 are not supported.
-
-Apart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the library. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.
-
-## Advanced Usage
-
-In addition to the above basic settings, the library has many more settings and options that you can adjust to best suit your usage. To read more, please see [advanced usage](https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/advanced-usage.html?ver=9.0.1&utm_source=guide).
-
-## How to Upgrade
-
-If you want to upgrade the library from an old version to a newer one, please see [how to upgrade](https://www.dynamsoft.com/barcode-reader/programming/javascript/upgrade-guide/?ver=9.0.1&utm_source=guide).
diff --git a/programming-old/javascript/user-guide/index-v9.0.2.md b/programming-old/javascript/user-guide/index-v9.0.2.md
deleted file mode 100644
index 545ffd28..00000000
--- a/programming-old/javascript/user-guide/index-v9.0.2.md
+++ /dev/null
@@ -1,486 +0,0 @@
----
-layout: default-layout
-title: v9.0.2 User Guide - Dynamsoft Barcode Reader JavaScript Edition
-description: This is the user guide of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, javascript, js
-breadcrumbText: User Guide
-noTitleIndex: true
-needGenerateH3Content: true
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/index-v9.0.2.html
----
-
-
-
-# Barcode Reader for Your Website - User Guide
-
-[Dynamsoft Barcode Reader JavaScript Edition](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) (DBR-JS) is equipped with industry-leading algorithms for exceptional speed, accuracy and read rates in barcode reading. Using its well-designed API, you can turn your web page into a barcode scanner with just a few lines of code.
-
-![version](https://img.shields.io/npm/v/dynamsoft-javascript-barcode.svg)
-![downloads](https://img.shields.io/npm/dm/dynamsoft-javascript-barcode.svg)
-![jsdelivr](https://img.shields.io/jsdelivr/npm/hm/dynamsoft-javascript-barcode.svg)
-![vulnerabilities](https://img.shields.io/snyk/vulnerabilities/npm/dynamsoft-javascript-barcode.svg)
-
-Once the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.
-
-In this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.
-
-Table of Contents
-
-- [Barcode Reader for Your Website - User Guide](#barcode-reader-for-your-website---user-guide)
-  - [Hello World - Simplest Implementation](#hello-world---simplest-implementation)
-    - [Understand the code](#understand-the-code)
-      - [About the code](#about-the-code)
-    - [Run the example](#run-the-example)
-  - [Building your own page](#building-your-own-page)
-    - [Include the SDK](#include-the-sdk)
-      - [Use a CDN](#use-a-cdn)
-      - [Host the SDK yourself](#host-the-sdk-yourself)
-    - [Configure the SDK](#configure-the-sdk)
-      - [Specify the license](#specify-the-license)
-      - [Specify the location of the "engine" files](#specify-the-location-of-the-engine-files)
-    - [Interact with the SDK](#interact-with-the-sdk)
-      - [Create a `BarcodeScanner` object](#create-a-barcodescanner-object)
-      - [Customize the `BarcodeScanner` Settings (optional)](#customize-the-barcodescanner-settings-optional)
-    - [Customize the UI (optional)](#customize-the-ui-optional)
-  - [API Documentation](#api-documentation)
-  - [System Requirements](#system-requirements)
-  - [How to Upgrade](#how-to-upgrade)
-  - [Next Steps](#next-steps)
-
-**Popular Examples**
-
-* Hello World - [Guide](#hello-world---simplest-implementation) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.0.2/1.hello-world/1.hello-world.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.0.2&utm_source=guide)
-* Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-angular.html?ver=9.0.2&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.0.2/1.hello-world/3.read-video-angular) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/3.read-video-angular/dist/hello-world/?ver=9.0.2&utm_source=guide)
-* React App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.0.2&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.0.2/1.hello-world/4.read-video-react) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/4.read-video-react/build/?ver=9.0.2&utm_source=guide)
-* Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.0.2&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.0.2/1.hello-world/6.read-video-vue3) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/6.read-video-vue3/dist/?ver=9.0.2&utm_source=guide)
-* PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.0.2&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.0.2/1.hello-world/10.read-video-pwa) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/10.read-video-pwa/helloworld-pwa.html?ver=9.0.2&utm_source=guide)
-* Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/use-cases.html?ver=latest#read-the-pdf417-barcode-on-the-drivers-license?ver=9.0.2&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.0.2/4.use-case/2.read-a-drivers-license.html) \| [Run](https://demo.dynamsoft.com/samples/dbr/js/4.use-case/2.read-a-drivers-license.html?ver=9.0.2&utm_source=guide)
-* Fill A Form - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/use-cases.html?ver=latest#read-barcodes-and-fill-form-fields?ver=9.0.2&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.0.2/4.use-case/1.fill-a-form-with-barcode-reading.html) \| [Run](https://demo.dynamsoft.com/samples/dbr/js/4.use-case/1.fill-a-form-with-barcode-reading.html?ver=9.0.2&utm_source=guide)
-
-You can also:
-
-* Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.0.2&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)
-* Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.0.2&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.0.2/)
-
-## Hello World - Simplest Implementation
-
-Let's start with the "Hello World" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream.  
-
-* Basic Requirements
-  * Internet connection
-  * [A supported browser](#system-requirements)
-  * Camera access
-
-### Understand the code
-
-The complete code of the "Hello World" example is shown below
-
-```html
-
-
-
-
-    
-    
-
-
-
-```
-
-
    
-  
-    Code in Github
-  
-   
-  
-    Run via JSFiddle
-  
-   
-  
-    Run in Dynamsoft
-  
-
    
-
------
-
-#### About the code
-
-* `license`: This property specifies a license key. Note that the license "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" used in this example is an online license and requires network connection to work. Read more on [Specify the license](#specify-the-license).
-
-* `createInstance()`: This method creates a `BarcodeScanner` object. This object can read barcodes directly from a video input with the help of its interactive UI (hidden by default) and the MediaDevices interface.
-
-* `onFrameRead`: This event is triggered every time the SDK finishes scanning a video frame. The `results` object contains all the barcode results that the SDK have found on this frame. In this example, we print the results to the browser console.
-
-* `onUniqueRead`: This event is triggered when the SDK finds a new barcode, which is not a duplicate among multiple frames. `txt` holds the barcode text value while `result` is an object that holds details of the barcode. In this example, an alert will be displayed for this new barcode.
-
-* `show()`: This method brings up the built-in UI of the `BarcodeScanner` object and starts scanning.
-
-### Run the example
-
-You can run the example deployed to the Dynamsoft Demo Server or test it with JSFiddle code editor. You will be asked to allow access to your camera, after which the video will be displayed on the page. After that, you can point the camera at a barcode to read it.
-
-When a barcode is decoded, you will see the result text pop up and the barcode location will be highlighted in the video feed.
-
-Alternatively, you can make a local test simply by taking the code in step 1, pasting it in a file with the name "hello-world.html" and open it in a browser.
-
-*Note*:
-
-If you open the web page as `file:///` or `http://` , the camera may not work correctly because the API getUserMedia usually requires HTTPS to access the camera.
-
-To make sure your web application can access the camera, please configure your web server to support HTTPS. The following links may help.
-
-1. NGINX: Configuring HTTPS servers
-2. IIS: Create a Self Signed Certificate in IIS
-3. Tomcat: Setting Up SSL on Tomcat in 5 minutes
-4. Node.js: npm tls
-
-If the test doesn't go as expected, you can [contact us](https://www.dynamsoft.com/contact/?ver=9.0.2&utm_source=guide).
-
-## Building your own page
-
-### Include the SDK
-
-#### Use a CDN
-
-The simplest way to include the SDK is to use either the [jsDelivr](https://jsdelivr.com/) or [UNPKG](https://unpkg.com/) CDN. The "hello world" example above uses **jsDelivr**.
-
-* jsDelivr
-
-  ```html
-  
-  ```
-
-* UNPKG  
-
-  ```html
-  
-  ```
-
-#### Host the SDK yourself
-
-Besides using the CDN, you can also download the SDK and host its files on your own website / server before including it in your application.
-
-Options to download the SDK:
-
-* From the website
-
-  Download the JavaScript Package
-
-* yarn
-
-  ```cmd
-  yarn add dynamsoft-javascript-barcode
-  ```
-
-* npm
-
-  ```cmd
-  npm install dynamsoft-javascript-barcode --save
-  ```
-
-Depending on how you downloaded the SDK and how you intend to use it, you can typically include it like this:
-
-```html
-
-```
-
-or
-
-```html
-
-```
-
-or
-
-```typescript
-import { BarcodeScanner } from 'dynamsoft-javascript-barcode';
-```
-
-### Configure the SDK
-
-Before using the SDK, you need to configure a few things.
-
-#### Specify the license
-
-The SDK requires a license to work, use the API `license` to specify a license key.
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-```
-
-To test the SDK, you can request a 30-day trial license via the Request a Trial License link.
-
-> If you registered a Dynamsoft account and downloaded the SDK from the official website, Dynamsoft will automatically generate a 30-day trial license for you and put the license key into all the samples that come with the SDK.
-
-#### Specify the location of the "engine" files
-
-This is usually only required with frameworks like Angular or React, etc. where dbr.js is compiled into another file.
-
-The purpose is to tell the SDK where to find the engine files (\*.worker.js, \*.wasm.js and \*.wasm, etc.). The API is called `engineResourcePath`:
-
-```javascript
-//The following code uses the jsDelivr CDN, feel free to change it to your own location of these files
-Dynamsoft.DBR.BarcodeScanner.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.0.2/dist/";
-```
-
-### Interact with the SDK
-
-#### Create a `BarcodeScanner` object
-
-You can use one of two classes ( `BarcodeScanner` and `BarcodeReader` ) to interact with the SDK. `BarcodeReader` is a low-level class that processes images directly. `BarcodeScanner` , on the other hand, inherits from `BarcodeReader` and provides high-level APIs and a built-in GUI to allow continuous barcode scanning on video frames. We'll focus on `BarcodeScanner` in this guide.
-
-To use the SDK, we first create a `BarcodeScanner` object.
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-let scanner = null;
-try {
-    scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-} catch (ex) {
-    console.error(ex);
-}
-```
-
-Tip: When creating a `BarcodeScanner` object within a function which may be called more than once, it's best to use a "helper" variable to avoid double creation such as `pScanner` in the following code
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-let pScanner = null;
-document.getElementById('btn-scan').addEventListener('click', async () => {
-    try {
-        const scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance());
-    } catch (ex) {
-        console.error(ex);
-    }
-});
-```
-
-#### Customize the `BarcodeScanner` Settings (optional)
-
-Let's take a look at the following code snippets:
-
-```javascript
-// Sets which camera and what resolution to use
-let allCameras = await scanner.getAllCameras();
-await scanner.setCurrentCamera(allCameras[0].deviceId);
-await scanner.setResolution(1280, 720);
-```
-
-```javascript
-// Sets up the scanner behavior
-let scanSettings = await scanner.getScanSettings();
-// Disregards duplicated results found in a specified time period (in milliseconds)
-scanSettings.duplicateForgetTime = 5000;
-// Sets a scan interval in milliseconds so the SDK may release the CPU from time to time
-// (setting this value larger is a simple way to save battery power and reduce device heating).
-scanSettings.intervalTime = 100;
-await scanner.updateScanSettings(scanSettings);
-```
-
-```javascript
-// Uses one of the built-in RuntimeSetting templates: "single" (decode a single barcode, the default mode), "speed", "balance" and "coverage"
-await scanner.updateRuntimeSettings("speed");
-
-// Makes changes to the template. The code below demonstrates how to specify enabled symbologies
-let runtimeSettings = await scanner.getRuntimeSettings();
-runtimeSettings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_ONED | Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
-await scanner.updateRuntimeSettings(runtimeSettings);
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/yfkcajxz/)
-
-As you can see from the above code snippets, there are three types of configurations:
-
-* Customize the data source: This configuration includes which camera to use, the preferred resolution, etc. Learn more here.
-
-* `get/updateScanSettings`: Configures the behavior of the scanner which includes `duplicateForgetTime` and `intervalTime`, etc.
-
-* `get/updateRuntimeSettings`: Configures the decode engine with either a built-in template or a comprehensive `RuntimeSettings` object. For example, the following uses the built-in "speed" settings with updated `localizationModes`.
-
-  ```javascript
-  await barcodeScanner.updateRuntimeSettings("speed");
-  //await barcodeScanner.updateRuntimeSettings("balance"); //alternative
-  //await barcodeScanner.updateRuntimeSettings("coverage"); //alternative
-  let settings = await barcodeScanner.getRuntimeSettings();
-  settings.localizationModes = [
-      Dynamsoft.DBR.EnumLocalizationMode.LM_CONNECTED_BLOCKS,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_SCAN_DIRECTLY,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_LINES, 0, 0, 0, 0, 0
-  ];
-  await barcodeScanner.updateRuntimeSettings(settings);
-  ```
-
-  Try in [JSFiddle](https://jsfiddle.net/DynamsoftTeam/f24h8c1m/).
-
-  See also [settings samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/parameter-settings.html?ver=9.0.2&utm_source=guide).
-
-> Find the full list of the runtime settings here.
-
-### Customize the UI (optional)
-
-The built-in UI of the `BarcodeScanner` object is defined in the file `dist/dbr.ui.html` . There are a few ways to customize it:
-
-* Modify the file `dist/dbr.ui.html` directly.
-
-  This option is only possible when you host this file on your own web server instead of using a CDN.
-
-* Copy the file `dist/dbr.ui.html` to your application, modify it and use the the API `defaultUIElementURL` to set it as the default UI.
-
-  ```javascript
-  Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "THE-URL-TO-THE-FILE";
-  ```
-  
-  > You must set `defaultUIElementURL` before you call `createInstance()` .
-
-* Append the default UI element to your page, customize it before showing it.
-
-  ```html
-  
    
-  ```
-
-  ```javascript
-  document.getElementById('div-ui-container').appendChild(scanner.getUIElement());
-  document.getElementsByClassName('dce-btn-close')[0].hidden = true; // Hide the close button
-  ```
-
-* Build the UI element from scratch and connect it to the SDK with the API `setUIElement(HTMLElement)`.
-
-  * Embed the video
-
-    ```html
-    
    
-        
    
-    
    
-    
-    ```
-
-    > The video element will be created and appended to the DIV element with the class `dce-video-container` , make sure the class name is the same. Besides, the CSS property `position` of the DIV element must be either `relative` , `absolute` , `fixed` , or `sticky` .
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)
-
-  * Add the camera list and resolution list
-
-    If the class names for these lists match the default ones, `dce-sel-camera` and `dce-sel-resolution` , the SDK will automatically populate the lists and handle the camera/resolution switching.
-
-    ```html
-    
    
-        
    
-        
    
-    
    
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-    ```html
-    
    
-        
-        
-        
    
-        
    
-    
    
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)
-
-    > By default, 8 hard-coded resolutions are populated as options. You can show only a custom set of options by hardcoding them.
-
-    ```html
-    
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)
-
-    > Generally, you need to provide a resolution that the camera supports. However, in case a camera does not support the specified resolution, it usually uses the nearest supported resolution. As a result, the selected resolution may not be the actual resolution used. In this case, add an option with the class name `dce-opt-gotResolution` (as shown above) and the SDK will then use it to show the actual resolution.
-
-    See also [UI customization samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/ui-customization.html?ver=9.0.2&utm_source=guide).
-
-## API Documentation
-
-You can check out the detailed documentation about the APIs of the SDK at
-[https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=9.0.2](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=9.0.2).
-
-## System Requirements
-
-DBR requires the following features to work:
-
-* Secure context (HTTPS deployment)
-
-  When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons
-  
-  * Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.
-  > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.
-  
-  * Dynamsoft License requires a secure context to work.
-
-* `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`
-
-  The above four features are required for the SDK to work.
-
-* `MediaDevices`/`getUserMedia`
-
-  This API is only required for in-browser video streaming. If a browser does not support this API, the [Single Frame Mode](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/BarcodeScanner.html?ver=9.0.2&utm_source=guide#singleframemode) will be used automatically. If the API exists but doesn't work correctly, the Single Frame Mode can be used as an alternative way to access the camera.
-
-* `getSettings`
-
-  This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.
-
-The following table is a list of supported browsers based on the above requirements:
-
-  Browser Name | Version
-  :-: | :-:
-  Chrome | v59+1
-  Firefox | v52+ (v55+ on Android/iOS1)
-  Edge2 | v16+
-  Safari3 | v11+
-
-  1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.
-  
-  3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.
-
-Apart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.
-
-## How to Upgrade
-
-If you want to upgrade the SDK from an old version to a newer one, please see [how to upgrade](https://www.dynamsoft.com/barcode-reader/programming/javascript/upgrade-guide/?ver=9.0.2&utm_source=guide).
-
-## Next Steps
-
-Now that you have got the SDK integrated, you can choose to move forward in the following directions
-
-1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)
-2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)
-3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)
diff --git a/programming-old/javascript/user-guide/index-v9.2.12.md b/programming-old/javascript/user-guide/index-v9.2.12.md
deleted file mode 100644
index ba5e63f6..00000000
--- a/programming-old/javascript/user-guide/index-v9.2.12.md
+++ /dev/null
@@ -1,492 +0,0 @@
----
-layout: default-layout
-title: v9.2.12 User Guide - Dynamsoft Barcode Reader JavaScript Edition
-description: This is the user guide of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, javascript, js
-breadcrumbText: User Guide
-noTitleIndex: true
-needGenerateH3Content: true
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/index-v9.2.12.html
----
-
-
-
-# Barcode Reader for Your Website - User Guide
-
-[Dynamsoft Barcode Reader JavaScript Edition](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) (DBR-JS) is equipped with industry-leading algorithms for exceptional speed, accuracy and read rates in barcode reading. Using its well-designed API, you can turn your web page into a barcode scanner with just a few lines of code.
-
-![version](https://img.shields.io/npm/v/dynamsoft-javascript-barcode.svg)
-![downloads](https://img.shields.io/npm/dm/dynamsoft-javascript-barcode.svg)
-![jsdelivr](https://img.shields.io/jsdelivr/npm/hm/dynamsoft-javascript-barcode.svg)
-![vulnerabilities](https://img.shields.io/snyk/vulnerabilities/npm/dynamsoft-javascript-barcode.svg)
-
-Once the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.
-
-In this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.
-
-Table of Contents
-
-- [Barcode Reader for Your Website - User Guide](#barcode-reader-for-your-website---user-guide)
-  - [Hello World - Simplest Implementation](#hello-world---simplest-implementation)
-    - [Understand the code](#understand-the-code)
-      - [About the code](#about-the-code)
-    - [Run the example](#run-the-example)
-  - [Building your own page](#building-your-own-page)
-    - [Include the SDK](#include-the-sdk)
-      - [Use a CDN](#use-a-cdn)
-      - [Host the SDK yourself](#host-the-sdk-yourself)
-    - [Configure the SDK](#configure-the-sdk)
-      - [Specify the license](#specify-the-license)
-      - [Specify the location of the "engine" files](#specify-the-location-of-the-engine-files)
-    - [Interact with the SDK](#interact-with-the-sdk)
-      - [Create a `BarcodeScanner` object](#create-a-barcodescanner-object)
-      - [Customize the `BarcodeScanner` Settings (optional)](#customize-the-barcodescanner-settings-optional)
-    - [Customize the UI (optional)](#customize-the-ui-optional)
-  - [API Documentation](#api-documentation)
-  - [System Requirements](#system-requirements)
-  - [How to Upgrade](#how-to-upgrade)
-  - [Release Notes](#release-notes)
-  - [Next Steps](#next-steps)
-
-**Popular Examples**
-
-- Hello World - [Guide](#hello-world---simplest-implementation) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.12/1.hello-world/1.hello-world.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.2.12&utm_source=guide)
-- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-angular.html?ver=9.2.12&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.12/1.hello-world/3.read-video-angular) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/3.read-video-angular/dist/hello-world/?ver=9.2.12&utm_source=guide)
-- React App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.2.12&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.12/1.hello-world/4.read-video-react) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/4.read-video-react/build/?ver=9.2.12&utm_source=guide)
-- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.2.12&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.12/1.hello-world/6.read-video-vue3) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/6.read-video-vue3/dist/?ver=9.2.12&utm_source=guide)
-- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.2.12&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.12/1.hello-world/10.read-video-pwa) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/10.read-video-pwa/helloworld-pwa.html?ver=9.2.12&utm_source=guide)
-- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/use-cases.html?ver=latest#read-the-pdf417-barcode-on-the-drivers-license?ver=9.2.12&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.12/4.use-case/2.read-a-drivers-license.html) \| [Run](https://demo.dynamsoft.com/samples/dbr/js/4.use-case/2.read-a-drivers-license.html?ver=9.2.12&utm_source=guide)
-- Fill A Form - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/use-cases.html?ver=latest#read-barcodes-and-fill-form-fields?ver=9.2.12&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.12/4.use-case/1.fill-a-form-with-barcode-reading.html) \| [Run](https://demo.dynamsoft.com/samples/dbr/js/4.use-case/1.fill-a-form-with-barcode-reading.html?ver=9.2.12&utm_source=guide)
-
-You can also:
-
-- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.2.12&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)
-- Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.2.12&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.2.12/)
-
-## Hello World - Simplest Implementation
-
-Let's start with the "Hello World" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream.  
-
-- Basic Requirements
-  - Internet connection
-  - [A supported browser](#system-requirements)
-  - Camera access
-
-### Understand the code
-
-The complete code of the "Hello World" example is shown below
-
-```html
-
-
-
-
-    
-    
-
-
-
-```
-
-
    
-  
-    Code in Github
-  
-   
-  
-    Run via JSFiddle
-  
-   
-  
-    Run in Dynamsoft
-  
-
    
-
------
-
-#### About the code
-
-- `license`: This property specifies a license key. Note that the license "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" used in this example is an online license and requires network connection to work. Read more on [Specify the license](#specify-the-license).
-
-- `createInstance()`: This method creates a `BarcodeScanner` object. This object can read barcodes directly from a video input with the help of its interactive UI (hidden by default) and the MediaDevices interface.
-
-- `onFrameRead`: This event is triggered every time the SDK finishes scanning a video frame. The `results` object contains all the barcode results that the SDK have found on this frame. In this example, we print the results to the browser console.
-
-- `onUniqueRead`: This event is triggered when the SDK finds a new barcode, which is not a duplicate among multiple frames. `txt` holds the barcode text value while `result` is an object that holds details of the barcode. In this example, an alert will be displayed for this new barcode.
-
-- `show()`: This method brings up the built-in UI of the `BarcodeScanner` object and starts scanning.
-
-### Run the example
-
-You can run the example deployed to the Dynamsoft Demo Server or test it with JSFiddle code editor. You will be asked to allow access to your camera, after which the video will be displayed on the page. After that, you can point the camera at a barcode to read it.
-
-When a barcode is decoded, you will see the result text pop up and the barcode location will be highlighted in the video feed.
-
-Alternatively, you can make a local test simply by taking the code in step 1, pasting it in a file with the name "hello-world.html" and open it in a browser.
-
-*Note*:
-
-If you open the web page as `file:///` or `http://` , the camera may not work correctly because the API getUserMedia usually requires HTTPS to access the camera.
-
-To make sure your web application can access the camera, please configure your web server to support HTTPS. The following links may help.
-
-1. NGINX: Configuring HTTPS servers
-2. IIS: Create a Self Signed Certificate in IIS
-3. Tomcat: Setting Up SSL on Tomcat in 5 minutes
-4. Node.js: npm tls
-
-If the test doesn't go as expected, you can [contact us](https://www.dynamsoft.com/contact/?ver=9.2.12&utm_source=guide).
-
-## Building your own page
-
-### Include the SDK
-
-#### Use a CDN
-
-The simplest way to include the SDK is to use either the [jsDelivr](https://jsdelivr.com/) or [UNPKG](https://unpkg.com/) CDN. The "hello world" example above uses **jsDelivr**.
-
-- jsDelivr
-
-  ```html
-  
-  ```
-
-- UNPKG  
-
-  ```html
-  
-  ```
-
-#### Host the SDK yourself
-
-Besides using the CDN, you can also download the SDK and host its files on your own website / server before including it in your application.
-
-Options to download the SDK:
-
-- From the website
-
-  Download the JavaScript Package
-
-- yarn
-
-  ```cmd
-  yarn add dynamsoft-javascript-barcode
-  ```
-
-- npm
-
-  ```cmd
-  npm install dynamsoft-javascript-barcode --save
-  ```
-
-Depending on how you downloaded the SDK and how you intend to use it, you can typically include it like this:
-
-```html
-
-```
-
-or
-
-```html
-
-```
-
-or
-
-```typescript
-import { BarcodeScanner } from 'dynamsoft-javascript-barcode';
-```
-
-### Configure the SDK
-
-Before using the SDK, you need to configure a few things.
-
-#### Specify the license
-
-The SDK requires a license to work, use the API `license` to specify a license key.
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-```
-
-To test the SDK, you can request a 30-day trial license via the Request a Trial License link.
-
-> If you registered a Dynamsoft account and downloaded the SDK from the official website, Dynamsoft will automatically generate a 30-day trial license for you and put the license key into all the samples that come with the SDK.
-
-#### Specify the location of the "engine" files
-
-This is usually only required with frameworks like Angular or React, etc. where dbr.js is compiled into another file.
-
-The purpose is to tell the SDK where to find the engine files (\*.worker.js, \*.wasm.js and \*.wasm, etc.). The API is called `engineResourcePath`:
-
-```javascript
-//The following code uses the jsDelivr CDN, feel free to change it to your own location of these files
-Dynamsoft.DBR.BarcodeScanner.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.2.12/dist/";
-```
-
-### Interact with the SDK
-
-#### Create a `BarcodeScanner` object
-
-You can use one of two classes ( `BarcodeScanner` and `BarcodeReader` ) to interact with the SDK. `BarcodeReader` is a low-level class that processes images directly. `BarcodeScanner` , on the other hand, inherits from `BarcodeReader` and provides high-level APIs and a built-in GUI to allow continuous barcode scanning on video frames. We'll focus on `BarcodeScanner` in this guide.
-
-To use the SDK, we first create a `BarcodeScanner` object.
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-let scanner = null;
-try {
-    scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-} catch (ex) {
-    console.error(ex);
-}
-```
-
-Tip: When creating a `BarcodeScanner` object within a function which may be called more than once, it's best to use a "helper" variable to avoid double creation such as `pScanner` in the following code
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-let pScanner = null;
-document.getElementById('btn-scan').addEventListener('click', async () => {
-    try {
-        const scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance());
-    } catch (ex) {
-        console.error(ex);
-    }
-});
-```
-
-#### Customize the `BarcodeScanner` Settings (optional)
-
-Let's take a look at the following code snippets:
-
-```javascript
-// Sets which camera and what resolution to use
-let allCameras = await scanner.getAllCameras();
-await scanner.setCurrentCamera(allCameras[0].deviceId);
-await scanner.setResolution(1280, 720);
-```
-
-```javascript
-// Sets up the scanner behavior
-let scanSettings = await scanner.getScanSettings();
-// Disregards duplicated results found in a specified time period (in milliseconds).
-scanSettings.duplicateForgetTime = 5000; // The default is 3000
-// Sets a scan interval in milliseconds so the SDK may release the CPU from time to time.
-// (setting this value larger is a simple way to save battery power and reduce device heating).
-scanSettings.intervalTime = 100; // The default is 0.
-// Sets captureAndDecodeInParallel to false, which tells the SDK not to acquire the next frame while decoding the first.
-// This is another way to save battery power and is recommended on low-end phones. However, it does slow down the decoding speed.
-scanSettings.captureAndDecodeInParallel = false; // The default is true.
-await scanner.updateScanSettings(scanSettings);
-```
-
-```javascript
-// Uses one of the built-in RuntimeSetting templates: "single" (decode a single barcode, the default mode), "speed", "balance", "coverage", "dense" and "distance"
-await scanner.updateRuntimeSettings("speed");
-
-// Makes changes to the template. The code below demonstrates how to specify enabled symbologies
-let runtimeSettings = await scanner.getRuntimeSettings();
-runtimeSettings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_ONED | Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
-await scanner.updateRuntimeSettings(runtimeSettings);
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/yfkcajxz/)
-
-As you can see from the above code snippets, there are three types of configurations:
-
-- Customize the data source: This configuration includes which camera to use, the preferred resolution, etc. Learn more here.
-
-- `get/updateScanSettings`: Configures the behavior of the scanner which includes `duplicateForgetTime` and `intervalTime`, etc.
-
-- `get/updateRuntimeSettings`: Configures the decode engine with either a built-in template or a comprehensive `RuntimeSettings` object. For example, the following uses the built-in "speed" settings with updated `localizationModes`.
-
-  ```javascript
-  await barcodeScanner.updateRuntimeSettings("speed");
-  //await barcodeScanner.updateRuntimeSettings("balance"); //alternative
-  //await barcodeScanner.updateRuntimeSettings("coverage"); //alternative
-  let settings = await barcodeScanner.getRuntimeSettings();
-  settings.localizationModes = [
-      Dynamsoft.DBR.EnumLocalizationMode.LM_CONNECTED_BLOCKS,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_SCAN_DIRECTLY,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_LINES, 0, 0, 0, 0, 0
-  ];
-  await barcodeScanner.updateRuntimeSettings(settings);
-  ```
-
-  Try in [JSFiddle](https://jsfiddle.net/DynamsoftTeam/f24h8c1m/).
-
-  See also [settings samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/parameter-settings.html?ver=9.2.12&utm_source=guide).
-
-> Find the full list of the runtime settings here.
-
-### Customize the UI (optional)
-
-The built-in UI of the `BarcodeScanner` object is defined in the file `dist/dbr.ui.html` . There are a few ways to customize it:
-
-- Modify the file `dist/dbr.ui.html` directly.
-
-  This option is only possible when you host this file on your own web server instead of using a CDN.
-
-- Copy the file `dist/dbr.ui.html` to your application, modify it and use the the API `defaultUIElementURL` to set it as the default UI.
-
-  ```javascript
-  // This line only takes effect when it is put before the method `createInstance()` is called.
-  Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "THE-URL-TO-THE-FILE";
-  ```
-
-- Append the default UI element to your page, customize it before showing it.
-
-  ```html
-  
    
-  ```
-
-  ```javascript
-  document.getElementById('div-ui-container').appendChild(scanner.getUIElement());
-  document.getElementsByClassName('dce-btn-close')[0].hidden = true; // Hide the close button
-  ```
-
-- Build the UI element from scratch and connect it to the SDK with the API `setUIElement(HTMLElement)`.
-
-  - Embed the video
-
-    ```html
-    
    
-        
    
-    
    
-    
-    ```
-
-    > The video element will be created and appended to the DIV element with the class `dce-video-container` , make sure the class name is the same. Besides, the CSS property `position` of the DIV element must be either `relative` , `absolute` , `fixed` , or `sticky` .
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)
-
-  - Add the camera list and resolution list
-
-    If the class names for these lists match the default ones, `dce-sel-camera` and `dce-sel-resolution` , the SDK will automatically populate the lists and handle the camera/resolution switching.
-
-    ```html
-    
    
-        
    
-        
    
-    
    
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-    ```html
-    
    
-        
-        
-        
    
-        
    
-    
    
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)
-
-    > By default, only 3 hard-coded resolutions (3840 x 2160, 1920 x 1080, 1280 x 720), are populated as options. You can show a customized set of options by hardcoding them.
-
-    ```html
-    
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)
-
-    > Generally, you need to provide a resolution that the camera supports. However, in case a camera does not support the specified resolution, it usually uses the cloest supported resolution. As a result, the selected resolution may not be the actual resolution. In this case, add an option with the class name `dce-opt-gotResolution` (as shown above) and the SDK will then use it to show the **actual resolution**.
-
-    See also [UI customization samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/ui-customization.html?ver=9.2.12&utm_source=guide).
-
-## API Documentation
-
-You can check out the detailed documentation about the APIs of the SDK at
-[https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=9.2.12](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=9.2.12).
-
-## System Requirements
-
-DBR requires the following features to work:
-
-- Secure context (HTTPS deployment)
-
-  When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons
-  
-  - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.
-  > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.
-  
-  - Dynamsoft License requires a secure context to work.
-
-- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`
-
-  The above four features are required for the SDK to work.
-
-- `MediaDevices`/`getUserMedia`
-
-  This API is only required for in-browser video streaming. If a browser does not support this API, the [Single Frame Mode](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/BarcodeScanner.html?ver=9.2.12&utm_source=guide#singleframemode) will be used automatically. If the API exists but doesn't work correctly, the Single Frame Mode can be used as an alternative way to access the camera.
-
-- `getSettings`
-
-  This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.
-
-The following table is a list of supported browsers based on the above requirements:
-
-  Browser Name | Version
-  :-: | :-:
-  Chrome | v59+1
-  Firefox | v52+ (v55+ on Android/iOS1)
-  Edge2 | v16+
-  Safari3 | v11+
-
-  1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.
-  
-  3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.
-
-Apart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.
-
-## How to Upgrade
-
-If you want to upgrade the SDK from an old version to a newer one, please see [how to upgrade](https://www.dynamsoft.com/barcode-reader/programming/javascript/upgrade-guide/?ver=9.2.12&utm_source=guide).
-
-## Release Notes
-
-Learn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).
-
-## Next Steps
-
-Now that you have got the SDK integrated, you can choose to move forward in the following directions
-
-1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)
-2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)
-3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)
diff --git a/programming-old/javascript/user-guide/index-v9.2.13.md b/programming-old/javascript/user-guide/index-v9.2.13.md
deleted file mode 100644
index fc074aab..00000000
--- a/programming-old/javascript/user-guide/index-v9.2.13.md
+++ /dev/null
@@ -1,492 +0,0 @@
----
-layout: default-layout
-title: v9.2.13 User Guide - Dynamsoft Barcode Reader JavaScript Edition
-description: This is the user guide of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, javascript, js
-breadcrumbText: User Guide
-noTitleIndex: true
-needGenerateH3Content: true
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/index-v9.2.13.html
----
-
-
-
-# Barcode Reader for Your Website - User Guide
-
-[Dynamsoft Barcode Reader JavaScript Edition](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) (DBR-JS) is equipped with industry-leading algorithms for exceptional speed, accuracy and read rates in barcode reading. Using its well-designed API, you can turn your web page into a barcode scanner with just a few lines of code.
-
-![version](https://img.shields.io/npm/v/dynamsoft-javascript-barcode.svg)
-![downloads](https://img.shields.io/npm/dm/dynamsoft-javascript-barcode.svg)
-![jsdelivr](https://img.shields.io/jsdelivr/npm/hm/dynamsoft-javascript-barcode.svg)
-![vulnerabilities](https://img.shields.io/snyk/vulnerabilities/npm/dynamsoft-javascript-barcode.svg)
-
-Once the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.
-
-In this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.
-
-Table of Contents
-
-- [Barcode Reader for Your Website - User Guide](#barcode-reader-for-your-website---user-guide)
-  - [Hello World - Simplest Implementation](#hello-world---simplest-implementation)
-    - [Understand the code](#understand-the-code)
-      - [About the code](#about-the-code)
-    - [Run the example](#run-the-example)
-  - [Building your own page](#building-your-own-page)
-    - [Include the SDK](#include-the-sdk)
-      - [Use a CDN](#use-a-cdn)
-      - [Host the SDK yourself](#host-the-sdk-yourself)
-    - [Configure the SDK](#configure-the-sdk)
-      - [Specify the license](#specify-the-license)
-      - [Specify the location of the "engine" files](#specify-the-location-of-the-engine-files)
-    - [Interact with the SDK](#interact-with-the-sdk)
-      - [Create a `BarcodeScanner` object](#create-a-barcodescanner-object)
-      - [Customize the `BarcodeScanner` Settings (optional)](#customize-the-barcodescanner-settings-optional)
-    - [Customize the UI (optional)](#customize-the-ui-optional)
-  - [API Documentation](#api-documentation)
-  - [System Requirements](#system-requirements)
-  - [How to Upgrade](#how-to-upgrade)
-  - [Release Notes](#release-notes)
-  - [Next Steps](#next-steps)
-
-**Popular Examples**
-
-- Hello World - [Guide](#hello-world---simplest-implementation) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.13/1.hello-world/1.hello-world.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.2.13&utm_source=guide)
-- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-angular.html?ver=9.2.13&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.13/1.hello-world/3.read-video-angular) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/3.read-video-angular/dist/hello-world/?ver=9.2.13&utm_source=guide)
-- React App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.2.13&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.13/1.hello-world/4.read-video-react) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/4.read-video-react/build/?ver=9.2.13&utm_source=guide)
-- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.2.13&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.13/1.hello-world/6.read-video-vue3) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/6.read-video-vue3/dist/?ver=9.2.13&utm_source=guide)
-- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.2.13&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.13/1.hello-world/10.read-video-pwa) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/10.read-video-pwa/helloworld-pwa.html?ver=9.2.13&utm_source=guide)
-- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.2.13&utm_source=guide&&lang=js) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.13/4.use-case/2.read-a-drivers-license.html) \| [Run](https://demo.dynamsoft.com/samples/dbr/js/4.use-case/2.read-a-drivers-license.html?ver=9.2.13&utm_source=guide)
-- Fill A Form - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-barcodes-as-input.html?lang=js&&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.13/4.use-case/1.fill-a-form-with-barcode-reading.html) \| [Run](https://demo.dynamsoft.com/samples/dbr/js/4.use-case/1.fill-a-form-with-barcode-reading.html?ver=9.2.13&utm_source=guide)
-
-You can also:
-
-- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.2.13&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)
-- Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.2.13&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.2.13/)
-
-## Hello World - Simplest Implementation
-
-Let's start with the "Hello World" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream.  
-
-- Basic Requirements
-  - Internet connection
-  - [A supported browser](#system-requirements)
-  - Camera access
-
-### Understand the code
-
-The complete code of the "Hello World" example is shown below
-
-```html
-
-
-
-
-    
-    
-
-
-
-```
-
-
    
-  
-    Code in Github
-  
-   
-  
-    Run via JSFiddle
-  
-   
-  
-    Run in Dynamsoft
-  
-
    
-
------
-
-#### About the code
-
-- `license`: This property specifies a license key. Note that the license "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" used in this example is an online license and requires network connection to work. Read more on [Specify the license](#specify-the-license).
-
-- `createInstance()`: This method creates a `BarcodeScanner` object. This object can read barcodes directly from a video input with the help of its interactive UI (hidden by default) and the MediaDevices interface.
-
-- `onFrameRead`: This event is triggered every time the SDK finishes scanning a video frame. The `results` object contains all the barcode results that the SDK have found on this frame. In this example, we print the results to the browser console.
-
-- `onUniqueRead`: This event is triggered when the SDK finds a new barcode, which is not a duplicate among multiple frames. `txt` holds the barcode text value while `result` is an object that holds details of the barcode. In this example, an alert will be displayed for this new barcode.
-
-- `show()`: This method brings up the built-in UI of the `BarcodeScanner` object and starts scanning.
-
-### Run the example
-
-You can run the example deployed to the Dynamsoft Demo Server or test it with JSFiddle code editor. You will be asked to allow access to your camera, after which the video will be displayed on the page. After that, you can point the camera at a barcode to read it.
-
-When a barcode is decoded, you will see the result text pop up and the barcode location will be highlighted in the video feed.
-
-Alternatively, you can make a local test simply by taking the code in step 1, pasting it in a file with the name "hello-world.html" and open it in a browser.
-
-*Note*:
-
-If you open the web page as `file:///` or `http://` , the camera may not work correctly because the API getUserMedia usually requires HTTPS to access the camera.
-
-To make sure your web application can access the camera, please configure your web server to support HTTPS. The following links may help.
-
-1. NGINX: Configuring HTTPS servers
-2. IIS: Create a Self Signed Certificate in IIS
-3. Tomcat: Setting Up SSL on Tomcat in 5 minutes
-4. Node.js: npm tls
-
-If the test doesn't go as expected, you can [contact us](https://www.dynamsoft.com/contact/?ver=9.2.13&utm_source=guide).
-
-## Building your own page
-
-### Include the SDK
-
-#### Use a CDN
-
-The simplest way to include the SDK is to use either the [jsDelivr](https://jsdelivr.com/) or [UNPKG](https://unpkg.com/) CDN. The "hello world" example above uses **jsDelivr**.
-
-- jsDelivr
-
-  ```html
-  
-  ```
-
-- UNPKG  
-
-  ```html
-  
-  ```
-
-#### Host the SDK yourself
-
-Besides using the CDN, you can also download the SDK and host its files on your own website / server before including it in your application.
-
-Options to download the SDK:
-
-- From the website
-
-  Download the JavaScript Package
-
-- yarn
-
-  ```cmd
-  yarn add dynamsoft-javascript-barcode
-  ```
-
-- npm
-
-  ```cmd
-  npm install dynamsoft-javascript-barcode --save
-  ```
-
-Depending on how you downloaded the SDK and how you intend to use it, you can typically include it like this:
-
-```html
-
-```
-
-or
-
-```html
-
-```
-
-or
-
-```typescript
-import { BarcodeScanner } from 'dynamsoft-javascript-barcode';
-```
-
-### Configure the SDK
-
-Before using the SDK, you need to configure a few things.
-
-#### Specify the license
-
-The SDK requires a license to work, use the API `license` to specify a license key.
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-```
-
-To test the SDK, you can request a 30-day trial license via the Request a Trial License link.
-
-> If you registered a Dynamsoft account and downloaded the SDK from the official website, Dynamsoft will automatically generate a 30-day trial license for you and put the license key into all the samples that come with the SDK.
-
-#### Specify the location of the "engine" files
-
-This is usually only required with frameworks like Angular or React, etc. where dbr.js is compiled into another file.
-
-The purpose is to tell the SDK where to find the engine files (\*.worker.js, \*.wasm.js and \*.wasm, etc.). The API is called `engineResourcePath`:
-
-```javascript
-//The following code uses the jsDelivr CDN, feel free to change it to your own location of these files
-Dynamsoft.DBR.BarcodeScanner.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.2.13/dist/";
-```
-
-### Interact with the SDK
-
-#### Create a `BarcodeScanner` object
-
-You can use one of two classes ( `BarcodeScanner` and `BarcodeReader` ) to interact with the SDK. `BarcodeReader` is a low-level class that processes images directly. `BarcodeScanner` , on the other hand, inherits from `BarcodeReader` and provides high-level APIs and a built-in GUI to allow continuous barcode scanning on video frames. We'll focus on `BarcodeScanner` in this guide.
-
-To use the SDK, we first create a `BarcodeScanner` object.
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-let scanner = null;
-try {
-    scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-} catch (ex) {
-    console.error(ex);
-}
-```
-
-Tip: When creating a `BarcodeScanner` object within a function which may be called more than once, it's best to use a "helper" variable to avoid double creation such as `pScanner` in the following code
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-let pScanner = null;
-document.getElementById('btn-scan').addEventListener('click', async () => {
-    try {
-        const scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance());
-    } catch (ex) {
-        console.error(ex);
-    }
-});
-```
-
-#### Customize the `BarcodeScanner` Settings (optional)
-
-Let's take a look at the following code snippets:
-
-```javascript
-// Sets which camera and what resolution to use
-let allCameras = await scanner.getAllCameras();
-await scanner.setCurrentCamera(allCameras[0].deviceId);
-await scanner.setResolution(1280, 720);
-```
-
-```javascript
-// Sets up the scanner behavior
-let scanSettings = await scanner.getScanSettings();
-// Disregards duplicated results found in a specified time period (in milliseconds).
-scanSettings.duplicateForgetTime = 5000; // The default is 3000
-// Sets a scan interval in milliseconds so the SDK may release the CPU from time to time.
-// (setting this value larger is a simple way to save battery power and reduce device heating).
-scanSettings.intervalTime = 100; // The default is 0.
-// Sets captureAndDecodeInParallel to false, which tells the SDK not to acquire the next frame while decoding the first.
-// This is another way to save battery power and is recommended on low-end phones. However, it does slow down the decoding speed.
-scanSettings.captureAndDecodeInParallel = false; // The default is true.
-await scanner.updateScanSettings(scanSettings);
-```
-
-```javascript
-// Uses one of the built-in RuntimeSetting templates: "single" (decode a single barcode, the default mode), "speed", "balance", "coverage", "dense" and "distance"
-await scanner.updateRuntimeSettings("speed");
-
-// Makes changes to the template. The code below demonstrates how to specify enabled symbologies
-let runtimeSettings = await scanner.getRuntimeSettings();
-runtimeSettings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_ONED | Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
-await scanner.updateRuntimeSettings(runtimeSettings);
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/yfkcajxz/)
-
-As you can see from the above code snippets, there are three types of configurations:
-
-- Customize the data source: This configuration includes which camera to use, the preferred resolution, etc. Learn more here.
-
-- `get/updateScanSettings`: Configures the behavior of the scanner which includes `duplicateForgetTime` and `intervalTime`, etc.
-
-- `get/updateRuntimeSettings`: Configures the decode engine with either a built-in template or a comprehensive `RuntimeSettings` object. For example, the following uses the built-in "speed" settings with updated `localizationModes`.
-
-  ```javascript
-  await barcodeScanner.updateRuntimeSettings("speed");
-  //await barcodeScanner.updateRuntimeSettings("balance"); //alternative
-  //await barcodeScanner.updateRuntimeSettings("coverage"); //alternative
-  let settings = await barcodeScanner.getRuntimeSettings();
-  settings.localizationModes = [
-      Dynamsoft.DBR.EnumLocalizationMode.LM_CONNECTED_BLOCKS,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_SCAN_DIRECTLY,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_LINES, 0, 0, 0, 0, 0
-  ];
-  await barcodeScanner.updateRuntimeSettings(settings);
-  ```
-
-  Try in [JSFiddle](https://jsfiddle.net/DynamsoftTeam/f24h8c1m/).
-
-  See also [settings samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/parameter-settings.html?ver=9.2.13&utm_source=guide).
-
-> Find the full list of the runtime settings here.
-
-### Customize the UI (optional)
-
-The built-in UI of the `BarcodeScanner` object is defined in the file `dist/dbr.ui.html` . There are a few ways to customize it:
-
-- Modify the file `dist/dbr.ui.html` directly.
-
-  This option is only possible when you host this file on your own web server instead of using a CDN.
-
-- Copy the file `dist/dbr.ui.html` to your application, modify it and use the the API `defaultUIElementURL` to set it as the default UI.
-
-  ```javascript
-  // This line only takes effect when it is put before the method `createInstance()` is called.
-  Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "THE-URL-TO-THE-FILE";
-  ```
-
-- Append the default UI element to your page, customize it before showing it.
-
-  ```html
-  
    
-  ```
-
-  ```javascript
-  document.getElementById('div-ui-container').appendChild(scanner.getUIElement());
-  document.getElementsByClassName('dce-btn-close')[0].hidden = true; // Hide the close button
-  ```
-
-- Build the UI element from scratch and connect it to the SDK with the API `setUIElement(HTMLElement)`.
-
-  - Embed the video
-
-    ```html
-    
    
-        
    
-    
    
-    
-    ```
-
-    > The video element will be created and appended to the DIV element with the class `dce-video-container` , make sure the class name is the same. Besides, the CSS property `position` of the DIV element must be either `relative` , `absolute` , `fixed` , or `sticky` .
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)
-
-  - Add the camera list and resolution list
-
-    If the class names for these lists match the default ones, `dce-sel-camera` and `dce-sel-resolution` , the SDK will automatically populate the lists and handle the camera/resolution switching.
-
-    ```html
-    
    
-        
    
-        
    
-    
    
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-    ```html
-    
    
-        
-        
-        
    
-        
    
-    
    
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)
-
-    > By default, only 3 hard-coded resolutions (3840 x 2160, 1920 x 1080, 1280 x 720), are populated as options. You can show a customized set of options by hardcoding them.
-
-    ```html
-    
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)
-
-    > Generally, you need to provide a resolution that the camera supports. However, in case a camera does not support the specified resolution, it usually uses the cloest supported resolution. As a result, the selected resolution may not be the actual resolution. In this case, add an option with the class name `dce-opt-gotResolution` (as shown above) and the SDK will then use it to show the **actual resolution**.
-
-    See also [UI customization samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/ui-customization.html?ver=9.2.13&utm_source=guide).
-
-## API Documentation
-
-You can check out the detailed documentation about the APIs of the SDK at
-[https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=9.2.13](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=9.2.13).
-
-## System Requirements
-
-DBR requires the following features to work:
-
-- Secure context (HTTPS deployment)
-
-  When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons
-  
-  - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.
-  > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.
-  
-  - Dynamsoft License requires a secure context to work.
-
-- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`
-
-  The above four features are required for the SDK to work.
-
-- `MediaDevices`/`getUserMedia`
-
-  This API is only required for in-browser video streaming. If a browser does not support this API, the [Single Frame Mode](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/BarcodeScanner.html?ver=9.2.13&utm_source=guide#singleframemode) will be used automatically. If the API exists but doesn't work correctly, the Single Frame Mode can be used as an alternative way to access the camera.
-
-- `getSettings`
-
-  This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.
-
-The following table is a list of supported browsers based on the above requirements:
-
-  Browser Name | Version
-  :-: | :-:
-  Chrome | v59+1
-  Firefox | v52+ (v55+ on Android/iOS1)
-  Edge2 | v16+
-  Safari3 | v11+
-
-  1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.
-  
-  3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.
-
-Apart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.
-
-## How to Upgrade
-
-If you want to upgrade the SDK from an old version to a newer one, please see [how to upgrade](https://www.dynamsoft.com/barcode-reader/programming/javascript/upgrade-guide/?ver=9.2.13&utm_source=guide).
-
-## Release Notes
-
-Learn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).
-
-## Next Steps
-
-Now that you have got the SDK integrated, you can choose to move forward in the following directions
-
-1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)
-2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)
-3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)
diff --git a/programming-old/javascript/user-guide/index-v9.3.1.md b/programming-old/javascript/user-guide/index-v9.3.1.md
deleted file mode 100644
index 998fe063..00000000
--- a/programming-old/javascript/user-guide/index-v9.3.1.md
+++ /dev/null
@@ -1,508 +0,0 @@
----
-layout: default-layout
-title: v9.3.1 User Guide - Dynamsoft Barcode Reader JavaScript Edition
-description: This is the user guide of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, javascript, js
-breadcrumbText: User Guide
-noTitleIndex: true
-needGenerateH3Content: true
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/index-v9.3.1.html
----
-
-
-
-# Barcode Reader for Your Website - User Guide
-
-[Dynamsoft Barcode Reader JavaScript Edition](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) (DBR-JS) is equipped with industry-leading algorithms for exceptional speed, accuracy and read rates in barcode reading. Using its well-designed API, you can turn your web page into a barcode scanner with just a few lines of code.
-
-![version](https://img.shields.io/npm/v/dynamsoft-javascript-barcode.svg)
-![downloads](https://img.shields.io/npm/dm/dynamsoft-javascript-barcode.svg)
-![jsdelivr](https://img.shields.io/jsdelivr/npm/hm/dynamsoft-javascript-barcode.svg)
-![vulnerabilities](https://img.shields.io/snyk/vulnerabilities/npm/dynamsoft-javascript-barcode.svg)
-
-Once the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.
-
-In this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.
-
-Table of Contents
-
-- [Barcode Reader for Your Website - User Guide](#barcode-reader-for-your-website---user-guide)
-  - [Hello World - Simplest Implementation](#hello-world---simplest-implementation)
-    - [Understand the code](#understand-the-code)
-      - [About the code](#about-the-code)
-    - [Run the example](#run-the-example)
-  - [Building your own page](#building-your-own-page)
-    - [Include the SDK](#include-the-sdk)
-      - [Use a public CDN](#use-a-public-cdn)
-      - [Host the SDK yourself](#host-the-sdk-yourself)
-    - [Configure the SDK](#configure-the-sdk)
-      - [Specify the license](#specify-the-license)
-      - [Specify the location of the "engine" files](#specify-the-location-of-the-engine-files)
-    - [Interact with the SDK](#interact-with-the-sdk)
-      - [Create a `BarcodeScanner` object](#create-a-barcodescanner-object)
-      - [Customize the `BarcodeScanner` Settings (optional)](#customize-the-barcodescanner-settings-optional)
-    - [Customize the UI (optional)](#customize-the-ui-optional)
-  - [API Documentation](#api-documentation)
-  - [System Requirements](#system-requirements)
-  - [How to Upgrade](#how-to-upgrade)
-  - [Release Notes](#release-notes)
-  - [Next Steps](#next-steps)
-
-**Popular Examples**
-
-- Hello World - [Guide](#hello-world---simplest-implementation) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.3.1/1.hello-world/1.hello-world.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.3.1&utm_source=guide)
-- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-angular.html?ver=9.3.1&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.3.1/1.hello-world/3.read-video-angular) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/3.read-video-angular/dist/hello-world/?ver=9.3.1&utm_source=guide)
-- React App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.3.1&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.3.1/1.hello-world/4.read-video-react) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/4.read-video-react/build/?ver=9.3.1&utm_source=guide)
-- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.3.1&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.3.1/1.hello-world/6.read-video-vue3) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/6.read-video-vue3/dist/?ver=9.3.1&utm_source=guide)
-- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.3.1&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.3.1/1.hello-world/10.read-video-pwa) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/10.read-video-pwa/helloworld-pwa.html?ver=9.3.1&utm_source=guide)
-- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.3.1&utm_source=guide&&lang=js) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.3.1/4.use-case/2.read-a-drivers-license.html) \| [Run](https://demo.dynamsoft.com/samples/dbr/js/4.use-case/2.read-a-drivers-license.html?ver=9.3.1&utm_source=guide)
-- Fill A Form - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-barcodes-as-input.html?lang=js&&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.3.1/4.use-case/1.fill-a-form-with-barcode-reading.html) \| [Run](https://demo.dynamsoft.com/samples/dbr/js/4.use-case/1.fill-a-form-with-barcode-reading.html?ver=9.3.1&utm_source=guide)
-
-You can also:
-
-- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.3.1&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)
-- Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.3.1&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.3.1/)
-
-## Hello World - Simplest Implementation
-
-Let's start with the "Hello World" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream.  
-
-- Basic Requirements
-  - Internet connection
-  - [A supported browser](#system-requirements)
-  - Camera access
-
-### Understand the code
-
-The complete code of the "Hello World" example is shown below
-
-```html
-
-
-
-
-    
-    
-
-
-
-```
-
-
    
-  
-    Code in Github
-  
-   
-  
-    Run via JSFiddle
-  
-   
-  
-    Run in Dynamsoft
-  
-
    
-
------
-
-#### About the code
-
-- The DBR-JS SDK is included in the code via the **jsDelivr** CDN.
-
-> In some rare cases, you might not be able to access the CDN. If this happens, you can use (https://download2.dynamsoft.com/dbr/dynamsoft-barcode-reader-js/dynamsoft-barcode-reader-js-9.3.1/dist/dbr.js)[https://download2.dynamsoft.com/dbr/dynamsoft-barcode-reader-js/dynamsoft-barcode-reader-js-9.3.1/dist/dbr.js] for the test. However, please remember this link is temporary and DO NOT use it in your production application. Instead, you can try [hosting the SDK yourself](#host-the-sdk-yourself).
-
-- `license`: This property specifies a license key. Note that the license "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" used in this example is an online license and requires network connection to work. Read more on [Specify the license](#specify-the-license).
-
-- `createInstance()`: This method creates a `BarcodeScanner` object. This object can read barcodes directly from a video input with the help of its interactive UI (hidden by default) and the MediaDevices interface.
-
-- `onFrameRead`: This event is triggered every time the SDK finishes scanning a video frame. The `results` object contains all the barcode results that the SDK have found on this frame. In this example, we print the results to the browser console.
-
-- `onUniqueRead`: This event is triggered when the SDK finds a new barcode, which is not a duplicate among multiple frames. `txt` holds the barcode text value while `result` is an object that holds details of the barcode. In this example, an alert will be displayed for this new barcode.
-
-- `show()`: This method brings up the built-in UI of the `BarcodeScanner` object and starts scanning.
-
-### Run the example
-
-You can run the example deployed to the Dynamsoft Demo Server or test it with JSFiddle code editor. You will be asked to allow access to your camera, after which the video will be displayed on the page. After that, you can point the camera at a barcode to read it.
-
-When a barcode is decoded, you will see the result text pop up and the barcode location will be highlighted in the video feed.
-
-Alternatively, you can make a local test simply by taking the code in step 1, pasting it in a file with the name "hello-world.html" and open it in a browser.
-
-*Note*:
-
-If you open the web page as `file:///` or `http://` , the camera may not work correctly because the API getUserMedia usually requires HTTPS to access the camera.
-
-To make sure your web application can access the camera, please configure your web server to support HTTPS. The following links may help.
-
-1. NGINX: Configuring HTTPS servers
-2. IIS: Create a Self Signed Certificate in IIS
-3. Tomcat: Setting Up SSL on Tomcat in 5 minutes
-4. Node.js: npm tls
-
-If the test doesn't go as expected, you can [contact us](https://www.dynamsoft.com/contact/?ver=9.3.1&utm_source=guide).
-
-
-
-## Building your own page
-
-### Include the SDK
-
-#### Use a public CDN
-
-The simplest way to include the SDK is to use either the [jsDelivr](https://jsdelivr.com/) or [UNPKG](https://unpkg.com/) CDN. The "hello world" example above uses **jsDelivr**.
-
-- jsDelivr
-
-  ```html
-  
-  ```
-
-- UNPKG  
-
-  ```html
-  
-  ```
-
-#### Host the SDK yourself
-
-Besides using the public CDN, you can also download the SDK and host its files on your own server or a commercial CDN before including it in your application.
-
-Options to download the SDK:
-
-- From the website
-
-  Download the JavaScript Package
-
-- yarn
-
-  ```cmd
-  yarn add dynamsoft-javascript-barcode
-  ```
-
-- npm
-
-  ```cmd
-  npm install dynamsoft-javascript-barcode --save
-  ```
-
-Depending on how you downloaded the SDK and how you intend to use it, you can typically include it like this:
-
-```html
-
-```
-
-or
-
-```html
-
-```
-
-or
-
-```typescript
-import { BarcodeScanner } from 'dynamsoft-javascript-barcode';
-```
-
-**NOTE**
-
-To work properly, the SDK requires a few engine files, which are relatively large and may take quite a few seconds to download. We recommend that you set a longer cache time to maximize the performance of your web application.
-
-```cmd
-Cache-Control: max-age=31536000
-```
-
-Reference: [Cache-Control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control).
-
-### Configure the SDK
-
-Before using the SDK, you need to configure a few things.
-
-#### Specify the license
-
-The SDK requires a license to work, use the API `license` to specify a license key.
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-```
-
-To test the SDK, you can request a 30-day trial license via the Request a Trial License link.
-
-> If you registered a Dynamsoft account and downloaded the SDK from the official website, Dynamsoft will automatically generate a 30-day trial license for you and put the license key into all the samples that come with the SDK.
-
-#### Specify the location of the "engine" files
-
-This is usually only required with frameworks like Angular or React, etc. where dbr.js is compiled into another file.
-
-The purpose is to tell the SDK where to find the engine files (\*.worker.js, \*.wasm.js and \*.wasm, etc.). The API is called `engineResourcePath`:
-
-```javascript
-//The following code uses the jsDelivr CDN, feel free to change it to your own location of these files
-Dynamsoft.DBR.BarcodeScanner.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.3.1/dist/";
-```
-
-### Interact with the SDK
-
-#### Create a `BarcodeScanner` object
-
-You can use one of two classes ( `BarcodeScanner` and `BarcodeReader` ) to interact with the SDK. `BarcodeReader` is a low-level class that processes images directly. `BarcodeScanner` , on the other hand, inherits from `BarcodeReader` and provides high-level APIs and a built-in GUI to allow continuous barcode scanning on video frames. We'll focus on `BarcodeScanner` in this guide.
-
-To use the SDK, we first create a `BarcodeScanner` object.
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-let scanner = null;
-try {
-    scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-} catch (ex) {
-    console.error(ex);
-}
-```
-
-Tip: When creating a `BarcodeScanner` object within a function which may be called more than once, it's best to use a "helper" variable to avoid double creation such as `pScanner` in the following code
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-let pScanner = null;
-document.getElementById('btn-scan').addEventListener('click', async () => {
-    try {
-        const scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance());
-    } catch (ex) {
-        console.error(ex);
-    }
-});
-```
-
-#### Customize the `BarcodeScanner` Settings (optional)
-
-Let's take a look at the following code snippets:
-
-```javascript
-// Sets which camera and what resolution to use
-let allCameras = await scanner.getAllCameras();
-await scanner.setCurrentCamera(allCameras[0].deviceId);
-await scanner.setResolution(1280, 720);
-```
-
-```javascript
-// Sets up the scanner behavior
-let scanSettings = await scanner.getScanSettings();
-// Disregards duplicated results found in a specified time period (in milliseconds).
-scanSettings.duplicateForgetTime = 5000; // The default is 3000
-// Sets a scan interval in milliseconds so the SDK may release the CPU from time to time.
-// (setting this value larger is a simple way to save battery power and reduce device heating).
-scanSettings.intervalTime = 100; // The default is 0.
-// Sets captureAndDecodeInParallel to false, which tells the SDK not to acquire the next frame while decoding the first.
-// This is another way to save battery power and is recommended on low-end phones. However, it does slow down the decoding speed.
-scanSettings.captureAndDecodeInParallel = false; // The default is true.
-await scanner.updateScanSettings(scanSettings);
-```
-
-```javascript
-// Uses one of the built-in RuntimeSetting templates: "single" (decode a single barcode, the default mode), "speed", "balance", "coverage", "dense" and "distance"
-await scanner.updateRuntimeSettings("speed");
-
-// Makes changes to the template. The code below demonstrates how to specify enabled symbologies
-let runtimeSettings = await scanner.getRuntimeSettings();
-runtimeSettings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_ONED | Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
-await scanner.updateRuntimeSettings(runtimeSettings);
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/yfkcajxz/)
-
-As you can see from the above code snippets, there are three types of configurations:
-
-- Customize the data source: This configuration includes which camera to use, the preferred resolution, etc. Learn more here.
-
-- `get/updateScanSettings`: Configures the behavior of the scanner which includes `duplicateForgetTime` and `intervalTime`, etc.
-
-- `get/updateRuntimeSettings`: Configures the decode engine with either a built-in template or a comprehensive `RuntimeSettings` object. For example, the following uses the built-in "speed" settings with updated `localizationModes`.
-
-  ```javascript
-  await barcodeScanner.updateRuntimeSettings("speed");
-  //await barcodeScanner.updateRuntimeSettings("balance"); //alternative
-  //await barcodeScanner.updateRuntimeSettings("coverage"); //alternative
-  let settings = await barcodeScanner.getRuntimeSettings();
-  settings.localizationModes = [
-      Dynamsoft.DBR.EnumLocalizationMode.LM_CONNECTED_BLOCKS,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_SCAN_DIRECTLY,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_LINES, 0, 0, 0, 0, 0
-  ];
-  await barcodeScanner.updateRuntimeSettings(settings);
-  ```
-
-  Try in [JSFiddle](https://jsfiddle.net/DynamsoftTeam/f24h8c1m/).
-
-  See also [settings samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/parameter-settings.html?ver=9.3.1&utm_source=guide).
-
-> Find the full list of the runtime settings here.
-
-### Customize the UI (optional)
-
-The built-in UI of the `BarcodeScanner` object is defined in the file `dist/dbr.ui.html` . There are a few ways to customize it:
-
-- Modify the file `dist/dbr.ui.html` directly.
-
-  This option is only possible when you host this file on your own web server instead of using a CDN.
-
-- Copy the file `dist/dbr.ui.html` to your application, modify it and use the the API `defaultUIElementURL` to set it as the default UI.
-
-  ```javascript
-  // This line only takes effect when it is put before the method `createInstance()` is called.
-  Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "THE-URL-TO-THE-FILE";
-  ```
-
-- Append the default UI element to your page, customize it before showing it.
-
-  ```html
-  
    
-  ```
-
-  ```javascript
-  document.getElementById('div-ui-container').appendChild(scanner.getUIElement());
-  document.getElementsByClassName('dce-btn-close')[0].hidden = true; // Hide the close button
-  ```
-
-- Build the UI element from scratch and connect it to the SDK with the API `setUIElement(HTMLElement)`.
-
-  - Embed the video
-
-    ```html
-    
    
-        
    
-    
    
-    
-    ```
-
-    > The video element will be created and appended to the DIV element with the class `dce-video-container` , make sure the class name is the same. Besides, the CSS property `position` of the DIV element must be either `relative` , `absolute` , `fixed` , or `sticky` .
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)
-
-  - Add the camera list and resolution list
-
-    If the class names for these lists match the default ones, `dce-sel-camera` and `dce-sel-resolution` , the SDK will automatically populate the lists and handle the camera/resolution switching.
-
-    ```html
-    
    
-        
    
-        
    
-    
    
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-    ```html
-    
    
-        
-        
-        
    
-        
    
-    
    
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)
-
-    > By default, only 3 hard-coded resolutions (3840 x 2160, 1920 x 1080, 1280 x 720), are populated as options. You can show a customized set of options by hardcoding them.
-
-    ```html
-    
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)
-
-    > Generally, you need to provide a resolution that the camera supports. However, in case a camera does not support the specified resolution, it usually uses the cloest supported resolution. As a result, the selected resolution may not be the actual resolution. In this case, add an option with the class name `dce-opt-gotResolution` (as shown above) and the SDK will then use it to show the **actual resolution**.
-
-    See also [UI customization samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/ui-customization.html?ver=9.3.1&utm_source=guide).
-
-## API Documentation
-
-You can check out the detailed documentation about the APIs of the SDK at
-[https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=9.3.1](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=9.3.1).
-
-## System Requirements
-
-DBR requires the following features to work:
-
-- Secure context (HTTPS deployment)
-
-  When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons
-  
-  - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.
-  > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.
-  
-  - Dynamsoft License requires a secure context to work.
-
-- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`
-
-  The above four features are required for the SDK to work.
-
-- `MediaDevices`/`getUserMedia`
-
-  This API is only required for in-browser video streaming. If a browser does not support this API, the [Single Frame Mode](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/BarcodeScanner.html?ver=9.3.1&utm_source=guide#singleframemode) will be used automatically. If the API exists but doesn't work correctly, the Single Frame Mode can be used as an alternative way to access the camera.
-
-- `getSettings`
-
-  This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.
-
-The following table is a list of supported browsers based on the above requirements:
-
-  Browser Name | Version
-  :-: | :-:
-  Chrome | v59+1
-  Firefox | v52+ (v55+ on Android/iOS1)
-  Edge2 | v16+
-  Safari3 | v11+
-
-  1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.
-  
-  3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.
-
-Apart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.
-
-## How to Upgrade
-
-If you want to upgrade the SDK from an old version to a newer one, please see [how to upgrade](https://www.dynamsoft.com/barcode-reader/programming/javascript/upgrade-guide/?ver=9.3.1&utm_source=guide).
-
-## Release Notes
-
-Learn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).
-
-## Next Steps
-
-Now that you have got the SDK integrated, you can choose to move forward in the following directions
-
-1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)
-2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)
-3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)
diff --git a/programming-old/javascript/user-guide/index-v9.6.1.md b/programming-old/javascript/user-guide/index-v9.6.1.md
deleted file mode 100644
index 31a1bfa1..00000000
--- a/programming-old/javascript/user-guide/index-v9.6.1.md
+++ /dev/null
@@ -1,517 +0,0 @@
----
-layout: default-layout
-title: v9.6.1 User Guide - Dynamsoft Barcode Reader JavaScript Edition
-description: This is the user guide of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, javascript, js
-breadcrumbText: User Guide
-noTitleIndex: true
-needGenerateH3Content: true
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/index-v9.6.1.html
----
-
-
-
-# Barcode Reader for Your Website - User Guide
-
-[Dynamsoft Barcode Reader JavaScript Edition](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) (DBR-JS) is equipped with industry-leading algorithms for exceptional speed, accuracy and read rates in barcode reading. Using its well-designed API, you can turn your web page into a barcode scanner with just a few lines of code.
-
-![version](https://img.shields.io/npm/v/dynamsoft-javascript-barcode.svg)
-![downloads](https://img.shields.io/npm/dm/dynamsoft-javascript-barcode.svg)
-![jsdelivr](https://img.shields.io/jsdelivr/npm/hm/dynamsoft-javascript-barcode.svg)
-![vulnerabilities](https://img.shields.io/snyk/vulnerabilities/npm/dynamsoft-javascript-barcode.svg)
-
-Once the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.
-
-In this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.
-
-Table of Contents
-
-- [Barcode Reader for Your Website - User Guide](#barcode-reader-for-your-website---user-guide)
-  - [Hello World - Simplest Implementation](#hello-world---simplest-implementation)
-    - [Understand the code](#understand-the-code)
-      - [About the code](#about-the-code)
-    - [Run the example](#run-the-example)
-  - [Building your own page](#building-your-own-page)
-    - [Include the SDK](#include-the-sdk)
-      - [Use a public CDN](#use-a-public-cdn)
-      - [Host the SDK yourself](#host-the-sdk-yourself)
-    - [Configure the SDK](#configure-the-sdk)
-      - [Specify the license](#specify-the-license)
-      - [Specify the location of the "engine" files](#specify-the-location-of-the-engine-files)
-    - [Interact with the SDK](#interact-with-the-sdk)
-      - [Create a `BarcodeScanner` object](#create-a-barcodescanner-object)
-      - [Customize the `BarcodeScanner` Settings (optional)](#customize-the-barcodescanner-settings-optional)
-    - [Customize the UI (optional)](#customize-the-ui-optional)
-      - [Modify the file `dist/dbr.ui.html` directly](#modify-the-file-distdbruihtml-directly)
-      - [Copy the file `dist/dbr.ui.html` to your application, modify it and use the the API `defaultUIElementURL` to set it as the default UI](#copy-the-file-distdbruihtml-to-your-application-modify-it-and-use-the-the-api-defaultuielementurl-to-set-it-as-the-default-ui)
-      - [Append the default UI element to your page, customize it before showing it](#append-the-default-ui-element-to-your-page-customize-it-before-showing-it)
-      - [Build the UI element from scratch and connect it to the SDK with the API setUIElement(HTMLElement)](#build-the-ui-element-from-scratch-and-connect-it-to-the-sdk-with-the-api-setuielementhtmlelement)
-  - [API Documentation](#api-documentation)
-  - [System Requirements](#system-requirements)
-  - [How to Upgrade](#how-to-upgrade)
-  - [Release Notes](#release-notes)
-  - [Next Steps](#next-steps)
-
-**Popular Examples**
-
-- Hello World - [Guide](#hello-world---simplest-implementation) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.1/1.hello-world/1.hello-world.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.6.1&utm_source=guide)
-- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.1&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.1/1.hello-world/3.read-video-angular) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/3.read-video-angular/dist/hello-world/?ver=9.6.1&utm_source=guide)
-- React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.1&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.1/1.hello-world/4.read-video-react) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/4.read-video-react/build/?ver=9.6.1&utm_source=guide)
-- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.1&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.1/1.hello-world/6.read-video-vue3) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/6.read-video-vue3/dist/?ver=9.6.1&utm_source=guide)
-- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.1&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.1/1.hello-world/10.read-video-pwa) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/10.read-video-pwa/helloworld-pwa.html?ver=9.6.1&utm_source=guide)
-- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.6.1&utm_source=guide&&lang=js) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.1/4.use-case/2.read-a-drivers-license.html) \| [Run](https://demo.dynamsoft.com/samples/dbr/js/4.use-case/2.read-a-drivers-license.html?ver=9.6.1&utm_source=guide)
-- Fill A Form - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-barcodes-as-input.html?lang=js&&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.1/4.use-case/1.fill-a-form-with-barcode-reading.html) \| [Run](https://demo.dynamsoft.com/samples/dbr/js/4.use-case/1.fill-a-form-with-barcode-reading.html?ver=9.6.1&utm_source=guide)
-
-You can also:
-
-- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.1&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)
-- Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.6.1&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.1/)
-
-## Hello World - Simplest Implementation
-
-Let's start with the "Hello World" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream.  
-
-- Basic Requirements
-  - Internet connection
-  - [A supported browser](#system-requirements)
-  - Camera access
-
-### Understand the code
-
-The complete code of the "Hello World" example is shown below
-
-```html
-
-
-
-
-    
-    
-
-
-
-```
-
-
    
-  
-    Code in Github
-  
-   
-  
-    Run via JSFiddle
-  
-   
-  
-    Run in Dynamsoft
-  
-
    
-
------
-
-#### About the code
-
-- The DBR-JS SDK is included in the code via the **jsDelivr** CDN.
-
-> In some rare cases, you might not be able to access the CDN. If this happens, you can use [https://download2.dynamsoft.com/dbr/dynamsoft-barcode-reader-js/dynamsoft-barcode-reader-js-9.6.1/dist/dbr.js](https://download2.dynamsoft.com/dbr/dynamsoft-barcode-reader-js/dynamsoft-barcode-reader-js-9.6.1/dist/dbr.js) for the test. However, please DO NOT use it in your production application because it is temporary. Instead, you can try [hosting the SDK yourself](#host-the-sdk-yourself).
-
-- `license`: This property specifies a license key. Note that the license "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" used in this example is an online license and requires network connection to work. Read more on [Specify the license](#specify-the-license).
-
-- `createInstance()`: This method creates a `BarcodeScanner` object. This object can read barcodes directly from a video input with the help of its interactive UI (hidden by default) and the MediaDevices interface.
-
-- `onFrameRead`: This event is triggered every time the SDK finishes scanning a video frame. The `results` object contains all the barcode results that the SDK have found on this frame. In this example, we print the results to the browser console.
-
-- `onUniqueRead`: This event is triggered when the SDK finds a new barcode, which is not a duplicate among multiple frames. `txt` holds the barcode text value while `result` is an object that holds details of the barcode. In this example, an alert will be displayed for this new barcode.
-
-- `show()`: This method brings up the built-in UI of the `BarcodeScanner` object and starts scanning.
-
-### Run the example
-
-You can run the example deployed to the Dynamsoft Demo Server or test it with JSFiddle code editor. You will be asked to allow access to your camera, after which the video will be displayed on the page. After that, you can point the camera at a barcode to read it.
-
-When a barcode is decoded, you will see the result text pop up and the barcode location will be highlighted in the video feed.
-
-Alternatively, you can make a local test simply by taking the code in step 1, pasting it in a file with the name "hello-world.html" and open it in a browser.
-
-*Note*:
-
-If you open the web page as `file:///` or `http://` , the camera may not work correctly because the API getUserMedia usually requires HTTPS to access the camera.
-
-To make sure your web application can access the camera, please configure your web server to support HTTPS. The following links may help.
-
-1. NGINX: Configuring HTTPS servers
-2. IIS: Create a Self Signed Certificate in IIS
-3. Tomcat: Setting Up SSL on Tomcat in 5 minutes
-4. Node.js: npm tls
-
-If the test doesn't go as expected, you can [contact us](https://www.dynamsoft.com/contact/?ver=9.6.1&utm_source=guide).
-
-
-
-## Building your own page
-
-### Include the SDK
-
-#### Use a public CDN
-
-The simplest way to include the SDK is to use either the [jsDelivr](https://jsdelivr.com/) or [UNPKG](https://unpkg.com/) CDN. The "hello world" example above uses **jsDelivr**.
-
-- jsDelivr
-
-  ```html
-  
-  ```
-
-- UNPKG  
-
-  ```html
-  
-  ```
-
-#### Host the SDK yourself
-
-Besides using the public CDN, you can also download the SDK and host its files on your own server or a commercial CDN before including it in your application.
-
-Options to download the SDK:
-
-- From the website
-
-  Download the JavaScript Package
-
-- yarn
-
-  ```cmd
-  yarn add dynamsoft-javascript-barcode
-  ```
-
-- npm
-
-  ```cmd
-  npm install dynamsoft-javascript-barcode --save
-  ```
-
-Depending on how you downloaded the SDK and how you intend to use it, you can typically include it like this:
-
-```html
-
-```
-
-or
-
-```html
-
-```
-
-or
-
-```typescript
-import { BarcodeScanner } from 'dynamsoft-javascript-barcode';
-```
-
-**NOTE**
-
-* Some older web application servers do not set `.wasm` mimetype as `application/wasm`. Upgrade your web application servers, or define the mimetype yourselves:
-  * [Apache](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Apache_Configuration_htaccess#media_types_and_character_encodings)
-  * [IIS](https://docs.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/mimemap)
-  * [Nginx](https://www.nginx.com/resources/wiki/start/topics/examples/full/#mime-types)
-
-* To work properly, the SDK requires a few engine files, which are relatively large and may take quite a few seconds to download. We recommend that you set a longer cache time for these engine files, to maximize the performance of your web application.
-
-  ```cmd
-  Cache-Control: max-age=31536000
-  ```
-
-  Reference: [Cache-Control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control).
-
-### Configure the SDK
-
-Before using the SDK, you need to configure a few things.
-
-#### Specify the license
-
-The SDK requires a license to work, use the API `license` to specify a license key.
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-```
-
-To test the SDK, you can request a 30-day trial license via the Request a Trial License link.
-
-> If you register a Dynamsoft account and download the SDK from the official website, Dynamsoft will automatically generate a 30-day trial license for you, and put the license key into all the samples attached to the SDK.
-
-#### Specify the location of the "engine" files
-
-This is usually only required with frameworks like Angular or React, etc. where dbr.js is compiled into another file.
-
-The purpose is to tell the SDK where to find the engine files (\*.worker.js, \*.wasm.js and \*.wasm, etc.). The API is called `engineResourcePath`:
-
-```javascript
-//The following code uses the jsDelivr CDN, feel free to change it to your own location of these files
-Dynamsoft.DBR.BarcodeScanner.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.1/dist/";
-```
-
-### Interact with the SDK
-
-#### Create a `BarcodeScanner` object
-
-You can use one of two classes ( `BarcodeScanner` and `BarcodeReader` ) to interact with the SDK. `BarcodeReader` is a low-level class that processes images directly. `BarcodeScanner` , on the other hand, inherits from `BarcodeReader` and provides high-level APIs and a built-in GUI to allow continuous barcode scanning on video frames. We'll focus on `BarcodeScanner` in this guide.
-
-To use the SDK, we first create a `BarcodeScanner` object.
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-let scanner = null;
-try {
-    scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-} catch (ex) {
-    console.error(ex);
-}
-```
-
-Tip: When creating a `BarcodeScanner` object within a function which may be called more than once, it's best to use a "helper" variable to avoid double creation such as `pScanner` in the following code
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-let pScanner = null;
-document.getElementById('btn-scan').addEventListener('click', async () => {
-    try {
-        const scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance());
-    } catch (ex) {
-        console.error(ex);
-    }
-});
-```
-
-#### Customize the `BarcodeScanner` Settings (optional)
-
-Let's take a look at the following code snippets:
-
-```javascript
-// Sets which camera and what resolution to use
-let allCameras = await scanner.getAllCameras();
-await scanner.setCurrentCamera(allCameras[0].deviceId);
-await scanner.setResolution(1280, 720);
-```
-
-```javascript
-// Sets up the scanner behavior
-let scanSettings = await scanner.getScanSettings();
-// Disregards duplicated results found in a specified time period (in milliseconds).
-scanSettings.duplicateForgetTime = 5000; // The default is 3000
-// Sets a scan interval in milliseconds so the SDK may release the CPU from time to time.
-// (setting this value larger is a simple way to save battery power and reduce device heating).
-scanSettings.intervalTime = 100; // The default is 0.
-// Sets captureAndDecodeInParallel to false, which tells the SDK not to acquire the next frame while decoding the first.
-// This is another way to save battery power and is recommended on low-end phones. However, it does slow down the decoding speed.
-scanSettings.captureAndDecodeInParallel = false; // The default is true.
-await scanner.updateScanSettings(scanSettings);
-```
-
-```javascript
-// Uses one of the built-in RuntimeSetting templates: "single" (decode a single barcode, the default mode), "speed", "balance", "coverage", "dense" and "distance"
-await scanner.updateRuntimeSettings("speed");
-
-// Makes changes to the template. The code below demonstrates how to specify enabled symbologies
-let runtimeSettings = await scanner.getRuntimeSettings();
-runtimeSettings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_ONED | Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
-await scanner.updateRuntimeSettings(runtimeSettings);
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/yfkcajxz/)
-
-As you can see from the above code snippets, there are three types of configurations:
-
-- Customize the data source: This configuration includes which camera to use, the preferred resolution, etc. Learn more here.
-
-- `get/updateScanSettings`: Configures the behavior of the scanner which includes `duplicateForgetTime` and `intervalTime`, etc.
-
-- `get/updateRuntimeSettings`: Configures the decode engine with either a built-in template or a comprehensive `RuntimeSettings` object. For example, the following uses the built-in "speed" settings with updated `localizationModes`.
-
-  ```javascript
-  await barcodeScanner.updateRuntimeSettings("speed");
-  //await barcodeScanner.updateRuntimeSettings("balance"); //alternative
-  //await barcodeScanner.updateRuntimeSettings("coverage"); //alternative
-  let settings = await barcodeScanner.getRuntimeSettings();
-  settings.localizationModes = [
-      Dynamsoft.DBR.EnumLocalizationMode.LM_CONNECTED_BLOCKS,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_SCAN_DIRECTLY,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_LINES, 0, 0, 0, 0, 0
-  ];
-  await barcodeScanner.updateRuntimeSettings(settings);
-  ```
-
-  Try in [JSFiddle](https://jsfiddle.net/DynamsoftTeam/f24h8c1m/).
-
-  See also [settings samples](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/parameter-settings.html?ver=9.6.1&utm_source=guide).
-
-> Find the full list of the runtime settings here.
-
-### Customize the UI (optional)
-
-The built-in UI of the `BarcodeScanner` object is defined in the file `dist/dbr.ui.html` . There are a few ways to customize it:
-
-#### Modify the file `dist/dbr.ui.html` directly
-
-  This option is only possible when you [Host the SDK yourself](#host-the-sdk-yourself) instead of using a public CDN.
-
-#### Copy the file `dist/dbr.ui.html` to your application, modify it and use the the API `defaultUIElementURL` to set it as the default UI
-
-  ```javascript
-  // This line only takes effect before the method `createInstance()` is called.
-  Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "THE-URL-TO-THE-FILE";
-  ```
-
-#### Append the default UI element to your page, customize it before showing it
-
-  ```html
-  
    
-  ```
-
-  ```javascript
-  document.getElementById('div-ui-container').appendChild(scanner.getUIElement());
-  document.getElementsByClassName('dce-btn-close')[0].hidden = true; // Hide the close button
-  ```
-
-#### Build the UI element from scratch and connect it to the SDK with the API setUIElement(HTMLElement)
-
-1. **Embed the video**
-  
-  ```html
-  
    
-      
    
-  
    
-  
-  ```
-
-  > The video element will be created and appended to the DIV element with the class `dce-video-container` , make sure the class name is the same. Besides, the CSS property `position` of the DIV element must be either `relative` , `absolute` , `fixed` , or `sticky` .
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)
-
-2. **[Optional] Add the camera list and resolution list**
-
-  If the class names of the created select elements match the default class names, i.e. `dce-sel-camera` and `dce-sel-resolution` respectively, the SDK will automatically populate the lists and handle the camera/resolution switching.
-
-  ```html
-    
    
-        
    
-        
    
-    
    
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-  ```html
-  
    
-      
-      
-      
    
-      
    
-  
    
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)
-
-  > By default, only 3 hard-coded resolutions (1920 x 1080, 1280 x 720，640 x 480) are populated as options. You can show a customized set of options by hardcoding them.
-
-  ```html
-  
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)
-
-  > Generally, you need to provide a resolution that the camera supports. However, in case a camera does not support the specified resolution, it usually uses the cloest supported resolution. As a result, the selected resolution may not be the actual resolution. In this case, add an option with the class name `dce-opt-gotResolution` (as shown above) and the SDK will automatically use it to show the **actual resolution**.
-
-  See the section of the Explore Features guide on [UI customization]({{site.features}}customize-the-ui.html?lang=js) to learn more.
-
-## API Documentation
-
-You can check out the detailed documentation about the APIs of the SDK at
-[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.1](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.1).
-
-## System Requirements
-
-DBR requires the following features to work:
-
-- Secure context (HTTPS deployment)
-
-  When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons
-  
-  - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.
-  > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.
-  
-  - Dynamsoft License requires a secure context to work.
-
-- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`
-
-  The above four features are required for the SDK to work.
-
-- `MediaDevices`/`getUserMedia`
-
-  This API is only required for in-browser video streaming. If a browser does not support this API, the [Single Frame Mode](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/BarcodeScanner.html?ver=9.6.1&utm_source=guide#singleframemode) will be used automatically. If the API exists but doesn't work correctly, the Single Frame Mode can be used as an alternative way to access the camera.
-
-- `getSettings`
-
-  This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.
-
-The following table is a list of supported browsers based on the above requirements:
-
-  Browser Name | Version
-  :-: | :-:
-  Chrome | v59+1
-  Firefox | v52+ (v55+ on Android/iOS1)
-  Edge2 | v16+
-  Safari3 | v11+
-
-  1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.
-  
-  3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.
-
-Apart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.
-
-## How to Upgrade
-
-If you want to upgrade the SDK from an old version to a newer one, please see [how to upgrade](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/upgrade-guide/?ver=9.6.1&utm_source=guide).
-
-## Release Notes
-
-Learn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).
-
-## Next Steps
-
-Now that you have got the SDK integrated, you can choose to move forward in the following directions
-
-1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)
-2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)
-3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)
diff --git a/programming-old/javascript/user-guide/index-v9.6.10.md b/programming-old/javascript/user-guide/index-v9.6.10.md
deleted file mode 100644
index 0486a552..00000000
--- a/programming-old/javascript/user-guide/index-v9.6.10.md
+++ /dev/null
@@ -1,513 +0,0 @@
----
-layout: default-layout
-title: v9.6.10 User Guide - Dynamsoft Barcode Reader JavaScript Edition
-description: This is the user guide of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, javascript, js
-breadcrumbText: User Guide
-noTitleIndex: true
-needGenerateH3Content: true
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/index-v9.6.10.html
-schema: schemas/dynamsoft-facilitates-mit-research-schema.json
----
-
-
-
-# Barcode Reader for Your Website - User Guide
-
-[Dynamsoft Barcode Reader JavaScript Edition](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) (DBR-JS) is equipped with industry-leading algorithms for exceptional speed, accuracy and read rates in barcode reading. Using its well-designed API, you can turn your web page into a barcode scanner with just a few lines of code.
-
-![version](https://img.shields.io/npm/v/dynamsoft-javascript-barcode.svg)
-![downloads](https://img.shields.io/npm/dm/dynamsoft-javascript-barcode.svg)
-![jsdelivr](https://img.shields.io/jsdelivr/npm/hm/dynamsoft-javascript-barcode.svg)
-![vulnerabilities](https://img.shields.io/snyk/vulnerabilities/npm/dynamsoft-javascript-barcode.svg)
-
-Once the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.
-
-
-
-In this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.
-
-Table of Contents
-
-- [Hello World - Simplest Implementation](#hello-world---simplest-implementation)
-  - [Understand the code](#understand-the-code)
-  - [Run the example](#run-the-example)
-- [Building your own page](#building-your-own-page)
-  - [Include the SDK](#include-the-sdk)
-  - [Configure the SDK](#configure-the-sdk)
-  - [Interact with the SDK](#interact-with-the-sdk)
-  - [Customize the UI (optional)](#customize-the-ui-optional)
-- [API Documentation](#api-documentation)
-- [System Requirements](#system-requirements)
-- [How to Upgrade](#how-to-upgrade)
-- [Release Notes](#release-notes)
-- [Next Steps](#next-steps)
-
-**Popular Examples**
-
-- Hello World - [Guide](#hello-world---simplest-implementation) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.10/1.hello-world/1.hello-world.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.6.10&utm_source=guide)
-- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.10&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.10/1.hello-world/3.read-video-angular) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/3.read-video-angular/dist/hello-world/?ver=9.6.10&utm_source=guide)
-- React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.10&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.10/1.hello-world/4.read-video-react) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/4.read-video-react/build/?ver=9.6.10&utm_source=guide)
-- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.10&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.10/1.hello-world/6.read-video-vue3) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/6.read-video-vue3/dist/?ver=9.6.10&utm_source=guide)
-- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.10&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.10/1.hello-world/10.read-video-pwa) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/10.read-video-pwa/helloworld-pwa.html?ver=9.6.10&utm_source=guide)
-- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.6.10&utm_source=guide&&lang=js) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.10/4.use-case/2.read-a-drivers-license.html) \| [Run](https://demo.dynamsoft.com/samples/dbr/js/4.use-case/2.read-a-drivers-license.html?ver=9.6.10&utm_source=guide)
-- Fill A Form - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-barcodes-as-input.html?lang=js&&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.10/4.use-case/1.fill-a-form-with-barcode-reading.html) \| [Run](https://demo.dynamsoft.com/samples/dbr/js/4.use-case/1.fill-a-form-with-barcode-reading.html?ver=9.6.10&utm_source=guide)
-- Debug Camera and Collect Video Frame - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/debug.html?lang=js&&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.10/5.others/debug)
-
-You can also:
-
-- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.10&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)
-- Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.6.10&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.10/)
-
-## Hello World - Simplest Implementation
-
-Let's start with the "Hello World" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream.  
-
-- Basic Requirements
-  - Internet connection
-  - [A supported browser](#system-requirements)
-  - Camera access
-
-### Understand the code
-
-The complete code of the "Hello World" example is shown below
-
-```html
-
-
-
-
-    
-    
-
-
-
-```
-
-
    
-  
-    Code in Github
-  
-   
-  
-    Run via JSFiddle
-  
-   
-  
-    Run in Dynamsoft
-  
-
    
-
------
-
-#### About the code
-
-- The DBR-JS SDK is included in the code via the **jsDelivr** CDN.
-
-> In some rare cases, you might not be able to access the CDN. If this happens, you can use [https://download2.dynamsoft.com/dbr/dynamsoft-barcode-reader-js/dynamsoft-barcode-reader-js-9.6.10/dist/dbr.js](https://download2.dynamsoft.com/dbr/dynamsoft-barcode-reader-js/dynamsoft-barcode-reader-js-9.6.10/dist/dbr.js) for the test. However, please DO NOT use CDN of `download2.dynamsoft.com` in your production application because it is temporary. Instead, you can try [hosting the SDK yourself](#host-the-sdk-yourself).
-
-- `license`: This property specifies a license key. Note that the license "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" used in this example is an online license and requires network connection to work. Read more on [Specify the license](#specify-the-license).
-
-- `createInstance()`: This method creates a `BarcodeScanner` object. This object can read barcodes directly from a video input with the help of its interactive UI (hidden by default) and the MediaDevices interface.
-
-- `onFrameRead`: This event is triggered every time the SDK finishes scanning a video frame. The `results` object contains all the barcode results that the SDK have found on this frame. In this example, we print the results to the browser console.
-
-- `onUniqueRead`: This event is triggered when the SDK finds a new barcode, which is not a duplicate among multiple frames. `txt` holds the barcode text value while `result` is an object that holds details of the barcode. In this example, an alert will be displayed for this new barcode.
-
-- `show()`: This method brings up the built-in UI of the `BarcodeScanner` object and starts scanning.
-
-### Run the example
-
-You can run the example deployed to the Dynamsoft Demo Server or test it with JSFiddle code editor. You will be asked to allow access to your camera, after which the video will be displayed on the page. After that, you can point the camera at a barcode to read it.
-
-When a barcode is decoded, you will see the result text pop up and the barcode location will be highlighted in the video feed.
-
-Alternatively, you can make a local test simply by taking the code in step 1, pasting it in a file with the name "hello-world.html" and open it in a browser.
-
-*Note*:
-
-If you open the web page as `file:///` or `http://` , the camera may not work correctly because the API getUserMedia usually requires HTTPS to access the camera.
-
-To make sure your web application can access the camera, please configure your web server to support HTTPS. The following links may help.
-
-1. NGINX: Configuring HTTPS servers
-2. IIS: Create a Self Signed Certificate in IIS
-3. Tomcat: Setting Up SSL on Tomcat in 5 minutes
-4. Node.js: npm tls
-
-If the test doesn't go as expected, you can [contact us](https://www.dynamsoft.com/contact/?ver=9.6.10&utm_source=guide).
-
-**Pinned Message:**
-
-- [Temporary solution for iPhone 14 Pro Max rear camera not focusing](https://github.com/Dynamsoft/barcode-reader-javascript-samples/issues/99#issuecomment-1407584605)
-
-## Building your own page
-
-### Include the SDK
-
-#### Use a public CDN
-
-The simplest way to include the SDK is to use either the [jsDelivr](https://jsdelivr.com/) or [UNPKG](https://unpkg.com/) CDN. The "hello world" example above uses **jsDelivr**.
-
-- jsDelivr
-
-  ```html
-  
-  ```
-
-- UNPKG  
-
-  ```html
-  
-  ```
-
-#### Host the SDK yourself
-
-Besides using the public CDN, you can also download the SDK and host its files on your own server or a commercial CDN before including it in your application.
-
-Options to download the SDK:
-
-- From the website
-
-  Download the JavaScript Package
-
-- yarn
-
-  ```cmd
-  yarn add dynamsoft-javascript-barcode
-  ```
-
-- npm
-
-  ```cmd
-  npm install dynamsoft-javascript-barcode --save
-  ```
-
-Depending on how you downloaded the SDK and how you intend to use it, you can typically include it like this:
-
-```html
-
-```
-
-or
-
-```html
-
-```
-
-or
-
-```typescript
-import { BarcodeScanner } from 'dynamsoft-javascript-barcode';
-```
-
-**NOTE**
-
-* Some older web application servers do not set `.wasm` mimetype as `application/wasm`. Upgrade your web application servers, or define the mimetype yourselves:
-  * [Apache](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Apache_Configuration_htaccess#media_types_and_character_encodings)
-  * [IIS](https://docs.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/mimemap)
-  * [Nginx](https://www.nginx.com/resources/wiki/start/topics/examples/full/#mime-types)
-
-* To work properly, the SDK requires a few engine files, which are relatively large and may take quite a few seconds to download. We recommend that you set a longer cache time for these engine files, to maximize the performance of your web application.
-
-  ```cmd
-  Cache-Control: max-age=31536000
-  ```
-
-  Reference: [Cache-Control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control).
-
-### Configure the SDK
-
-Before using the SDK, you need to configure a few things.
-
-#### Specify the license
-
-The SDK requires a license to work, use the API `license` to specify a license key.
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-```
-
-To test the SDK, you can request a 30-day trial license via the Request a Trial License link.
-
-> If you register a Dynamsoft account and download the SDK from the official website, Dynamsoft will automatically generate a 30-day trial license for you, and put the license key into all the samples attached to the SDK.
-
-#### Specify the location of the "engine" files
-
-This is usually only required with frameworks like Angular or React, etc. where dbr.js is compiled into another file.
-
-The purpose is to tell the SDK where to find the engine files (\*.worker.js, \*.wasm.js and \*.wasm, etc.). The API is called `engineResourcePath`:
-
-```javascript
-//The following code uses the jsDelivr CDN, feel free to change it to your own location of these files
-Dynamsoft.DBR.BarcodeScanner.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.10/dist/";
-```
-
-### Interact with the SDK
-
-#### Create a `BarcodeScanner` object
-
-You can use one of two classes ( `BarcodeScanner` and `BarcodeReader` ) to interact with the SDK. `BarcodeReader` is a low-level class that processes images directly. `BarcodeScanner` , on the other hand, inherits from `BarcodeReader` and provides high-level APIs and a built-in GUI to allow continuous barcode scanning on video frames. We'll focus on `BarcodeScanner` in this guide.
-
-To use the SDK, we first create a `BarcodeScanner` object.
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-let scanner = null;
-try {
-    scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-} catch (ex) {
-    console.error(ex);
-}
-```
-
-Tip: When creating a `BarcodeScanner` object within a function which may be called more than once, it's best to use a "helper" variable to avoid double creation such as `pScanner` in the following code
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-let pScanner = null;
-document.getElementById('btn-scan').addEventListener('click', async () => {
-    try {
-        const scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance());
-    } catch (ex) {
-        console.error(ex);
-    }
-});
-```
-
-#### Customize the `BarcodeScanner` Settings (optional)
-
-Let's take a look at the following code snippets:
-
-```javascript
-// Sets which camera and what resolution to use
-let allCameras = await scanner.getAllCameras();
-await scanner.setCurrentCamera(allCameras[0].deviceId);
-await scanner.setResolution(1280, 720);
-```
-
-```javascript
-// Sets up the scanner behavior
-let scanSettings = await scanner.getScanSettings();
-// Disregards duplicated results found in a specified time period (in milliseconds).
-scanSettings.duplicateForgetTime = 5000; // The default is 3000
-// Sets a scan interval in milliseconds so the SDK may release the CPU from time to time.
-// (setting this value larger is a simple way to save battery power and reduce device heating).
-scanSettings.intervalTime = 100; // The default is 0.
-// Sets captureAndDecodeInParallel to false, which tells the SDK not to acquire the next frame while decoding the first.
-// This is another way to save battery power and is recommended on low-end phones. However, it does slow down the decoding speed.
-scanSettings.captureAndDecodeInParallel = false; // The default is true.
-await scanner.updateScanSettings(scanSettings);
-```
-
-```javascript
-// Uses one of the built-in RuntimeSetting templates: "single" (decode a single barcode, the default mode), "speed", "balance", "coverage", "dense" and "distance"
-await scanner.updateRuntimeSettings("speed");
-
-// Makes changes to the template. The code below demonstrates how to specify enabled symbologies
-let runtimeSettings = await scanner.getRuntimeSettings();
-runtimeSettings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_ONED | Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
-await scanner.updateRuntimeSettings(runtimeSettings);
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/yfkcajxz/)
-
-As you can see from the above code snippets, there are three types of configurations:
-
-- Customize the data source: This configuration includes which camera to use, the preferred resolution, etc. Learn more here.
-
-- `get/updateScanSettings`: Configures the behavior of the scanner which includes `duplicateForgetTime` and `intervalTime`, etc.
-
-- `get/updateRuntimeSettings`: Configures the decode engine with either a built-in template or a comprehensive `RuntimeSettings` object. For example, the following uses the built-in "speed" settings with updated `localizationModes`.
-
-  ```javascript
-  await barcodeScanner.updateRuntimeSettings("speed");
-  //await barcodeScanner.updateRuntimeSettings("balance"); //alternative
-  //await barcodeScanner.updateRuntimeSettings("coverage"); //alternative
-  let settings = await barcodeScanner.getRuntimeSettings();
-  settings.localizationModes = [
-      Dynamsoft.DBR.EnumLocalizationMode.LM_CONNECTED_BLOCKS,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_SCAN_DIRECTLY,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_LINES, 0, 0, 0, 0, 0
-  ];
-  await barcodeScanner.updateRuntimeSettings(settings);
-  ```
-
-  Try in [JSFiddle](https://jsfiddle.net/DynamsoftTeam/f24h8c1m/).
-
-  See also [settings samples](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/parameter-settings.html?ver=9.6.10&utm_source=guide).
-
-> Find the full list of the runtime settings here.
-
-### Customize the UI (optional)
-
-The built-in UI of the `BarcodeScanner` object is defined in the file `dist/dbr.ui.html` . There are a few ways to customize it:
-
-#### Modify the file `dist/dbr.ui.html` directly
-
-  This option is only possible when you [Host the SDK yourself](#host-the-sdk-yourself) instead of using a public CDN.
-
-#### Copy the file `dist/dbr.ui.html` to your application, modify it and use the the API `defaultUIElementURL` to set it as the default UI
-
-  ```javascript
-  // This line only takes effect before the method `createInstance()` is called.
-  Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "THE-URL-TO-THE-FILE";
-  ```
-
-#### Append the default UI element to your page, customize it before showing it
-
-  ```html
-  
    
-  ```
-
-  ```javascript
-  document.getElementById('div-ui-container').appendChild(scanner.getUIElement());
-  document.getElementsByClassName('dce-btn-close')[0].hidden = true; // Hide the close button
-  ```
-
-#### Build the UI element from scratch and connect it to the SDK with the API `setUIElement(HTMLElement)`
-
-1. **Embed the video**
-  
-  ```html
-  
    
-      
    
-  
    
-  
-  ```
-
-  > The video element will be created and appended to the DIV element with the class `dce-video-container` , make sure the class name is the same. Besides, the CSS property `position` of the DIV element must be either `relative` , `absolute` , `fixed` , or `sticky` .
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)
-
-2. **[Optional] Add the camera list and resolution list**
-
-  If the class names of the created select elements match the default class names, i.e. `dce-sel-camera` and `dce-sel-resolution` respectively, the SDK will automatically populate the lists and handle the camera/resolution switching.
-
-  ```html
-    
    
-        
    
-        
    
-    
    
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-  ```html
-  
    
-      
-      
-      
    
-      
    
-  
    
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)
-
-  > By default, only 3 hard-coded resolutions (1920 x 1080, 1280 x 720，640 x 480) are populated as options. You can show a customized set of options by hardcoding them.
-
-  ```html
-  
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)
-
-  > Generally, you need to provide a resolution that the camera supports. However, in case a camera does not support the specified resolution, it usually uses the cloest supported resolution. As a result, the selected resolution may not be the actual resolution. In this case, add an option with the class name `dce-opt-gotResolution` (as shown above) and the SDK will automatically use it to show the **actual resolution**.
-
-  See the section of the Explore Features guide on [UI customization]({{site.features}}customize-the-ui.html?lang=js) to learn more.
-
-## API Documentation
-
-You can check out the detailed documentation about the APIs of the SDK at
-[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.10](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.10).
-
-## System Requirements
-
-DBR requires the following features to work:
-
-- Secure context (HTTPS deployment)
-
-  When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons
-  
-  - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.
-  > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.
-  
-  - Dynamsoft License requires a secure context to work.
-
-- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`
-
-  The above four features are required for the SDK to work.
-
-- `MediaDevices`/`getUserMedia`
-
-  This API is only required for in-browser video streaming. If a browser does not support this API, the [Single Frame Mode](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/BarcodeScanner.html?ver=9.6.10&utm_source=guide#singleframemode) will be used automatically. If the API exists but doesn't work correctly, the Single Frame Mode can be used as an alternative way to access the camera.
-
-- `getSettings`
-
-  This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.
-
-The following table is a list of supported browsers based on the above requirements:
-
-  Browser Name | Version
-  :-: | :-:
-  Chrome | v59+1
-  Firefox | v52+ (v55+ on Android/iOS1)
-  Edge2 | v16+
-  Safari3 | v11+
-
-  1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.
-  
-  3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.
-
-Apart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.
-
-## How to Upgrade
-
-If you want to upgrade the SDK from an old version to a newer one, please see [how to upgrade](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/upgrade-guide/?ver=9.6.10&utm_source=guide).
-
-## Release Notes
-
-Learn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).
-
-## Next Steps
-
-Now that you have got the SDK integrated, you can choose to move forward in the following directions
-
-1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)
-2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)
-3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)
diff --git a/programming-old/javascript/user-guide/index-v9.6.11.md b/programming-old/javascript/user-guide/index-v9.6.11.md
deleted file mode 100644
index cb12c8be..00000000
--- a/programming-old/javascript/user-guide/index-v9.6.11.md
+++ /dev/null
@@ -1,513 +0,0 @@
----
-layout: default-layout
-title: v9.6.11 User Guide - Dynamsoft Barcode Reader JavaScript Edition
-description: This is the user guide of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, javascript, js
-breadcrumbText: User Guide
-noTitleIndex: true
-needGenerateH3Content: true
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/index-v9.6.11.html
-schema: schemas/dynamsoft-facilitates-mit-research-schema.json
----
-
-
-
-# Barcode Reader for Your Website - User Guide
-
-[Dynamsoft Barcode Reader JavaScript Edition](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) (DBR-JS) is equipped with industry-leading algorithms for exceptional speed, accuracy and read rates in barcode reading. Using its well-designed API, you can turn your web page into a barcode scanner with just a few lines of code.
-
-![version](https://img.shields.io/npm/v/dynamsoft-javascript-barcode.svg)
-![downloads](https://img.shields.io/npm/dm/dynamsoft-javascript-barcode.svg)
-![jsdelivr](https://img.shields.io/jsdelivr/npm/hm/dynamsoft-javascript-barcode.svg)
-![vulnerabilities](https://img.shields.io/snyk/vulnerabilities/npm/dynamsoft-javascript-barcode.svg)
-
-Once the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.
-
-
-
-In this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.
-
-Table of Contents
-
-- [Hello World - Simplest Implementation](#hello-world---simplest-implementation)
-  - [Understand the code](#understand-the-code)
-  - [Run the example](#run-the-example)
-- [Building your own page](#building-your-own-page)
-  - [Include the SDK](#include-the-sdk)
-  - [Configure the SDK](#configure-the-sdk)
-  - [Interact with the SDK](#interact-with-the-sdk)
-  - [Customize the UI (optional)](#customize-the-ui-optional)
-- [API Documentation](#api-documentation)
-- [System Requirements](#system-requirements)
-- [How to Upgrade](#how-to-upgrade)
-- [Release Notes](#release-notes)
-- [Next Steps](#next-steps)
-
-**Popular Examples**
-
-- Hello World - [Guide](#hello-world---simplest-implementation) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.11/1.hello-world/1.hello-world.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.6.11&utm_source=guide)
-- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.11&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.11/1.hello-world/3.read-video-angular) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/3.read-video-angular/dist/hello-world/?ver=9.6.11&utm_source=guide)
-- React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.11&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.11/1.hello-world/4.read-video-react) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/4.read-video-react/build/?ver=9.6.11&utm_source=guide)
-- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.11&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.11/1.hello-world/6.read-video-vue3) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/6.read-video-vue3/dist/?ver=9.6.11&utm_source=guide)
-- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.11&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.11/1.hello-world/10.read-video-pwa) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/10.read-video-pwa/helloworld-pwa.html?ver=9.6.11&utm_source=guide)
-- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.6.11&utm_source=guide&&lang=js) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.11/4.use-case/2.read-a-drivers-license.html) \| [Run](https://demo.dynamsoft.com/samples/dbr/js/4.use-case/2.read-a-drivers-license.html?ver=9.6.11&utm_source=guide)
-- Fill A Form - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-barcodes-as-input.html?lang=js&&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.11/4.use-case/1.fill-a-form-with-barcode-reading.html) \| [Run](https://demo.dynamsoft.com/samples/dbr/js/4.use-case/1.fill-a-form-with-barcode-reading.html?ver=9.6.11&utm_source=guide)
-- Debug Camera and Collect Video Frame - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/debug.html?lang=js&&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.11/5.others/debug)
-
-You can also:
-
-- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.11&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)
-- Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.6.11&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.11/)
-
-## Hello World - Simplest Implementation
-
-Let's start with the "Hello World" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream.  
-
-- Basic Requirements
-  - Internet connection
-  - [A supported browser](#system-requirements)
-  - Camera access
-
-### Understand the code
-
-The complete code of the "Hello World" example is shown below
-
-```html
-
-
-
-
-    
-    
-
-
-
-```
-
-
    
-  
-    Code in Github
-  
-   
-  
-    Run via JSFiddle
-  
-   
-  
-    Run in Dynamsoft
-  
-
    
-
------
-
-#### About the code
-
-- The DBR-JS SDK is included in the code via the **jsDelivr** CDN.
-
-> In some rare cases, you might not be able to access the CDN. If this happens, you can use [https://download2.dynamsoft.com/dbr/dynamsoft-barcode-reader-js/dynamsoft-barcode-reader-js-9.6.11/dist/dbr.js](https://download2.dynamsoft.com/dbr/dynamsoft-barcode-reader-js/dynamsoft-barcode-reader-js-9.6.11/dist/dbr.js) for the test. However, please DO NOT use CDN of `download2.dynamsoft.com` in your production application because it is temporary. Instead, you can try [hosting the SDK yourself](#host-the-sdk-yourself).
-
-- `license`: This property specifies a license key. Note that the license "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" used in this example is an online license and requires network connection to work. Read more on [Specify the license](#specify-the-license).
-
-- `createInstance()`: This method creates a `BarcodeScanner` object. This object can read barcodes directly from a video input with the help of its interactive UI (hidden by default) and the MediaDevices interface.
-
-- `onFrameRead`: This event is triggered every time the SDK finishes scanning a video frame. The `results` object contains all the barcode results that the SDK have found on this frame. In this example, we print the results to the browser console.
-
-- `onUniqueRead`: This event is triggered when the SDK finds a new barcode, which is not a duplicate among multiple frames. `txt` holds the barcode text value while `result` is an object that holds details of the barcode. In this example, an alert will be displayed for this new barcode.
-
-- `show()`: This method brings up the built-in UI of the `BarcodeScanner` object and starts scanning.
-
-### Run the example
-
-You can run the example deployed to the Dynamsoft Demo Server or test it with JSFiddle code editor. You will be asked to allow access to your camera, after which the video will be displayed on the page. After that, you can point the camera at a barcode to read it.
-
-When a barcode is decoded, you will see the result text pop up and the barcode location will be highlighted in the video feed.
-
-Alternatively, you can make a local test simply by taking the code in step 1, pasting it in a file with the name "hello-world.html" and open it in a browser.
-
-*Note*:
-
-If you open the web page as `file:///` or `http://` , the camera may not work correctly because the API getUserMedia usually requires HTTPS to access the camera.
-
-To make sure your web application can access the camera, please configure your web server to support HTTPS. The following links may help.
-
-1. NGINX: Configuring HTTPS servers
-2. IIS: Create a Self Signed Certificate in IIS
-3. Tomcat: Setting Up SSL on Tomcat in 5 minutes
-4. Node.js: npm tls
-
-If the test doesn't go as expected, you can [contact us](https://www.dynamsoft.com/contact/?ver=9.6.11&utm_source=guide).
-
-**Pinned Message:**
-
-- [Temporary solution for iPhone 14 Pro Max rear camera not focusing](https://github.com/Dynamsoft/barcode-reader-javascript-samples/issues/99#issuecomment-1407584605)
-
-## Building your own page
-
-### Include the SDK
-
-#### Use a public CDN
-
-The simplest way to include the SDK is to use either the [jsDelivr](https://jsdelivr.com/) or [UNPKG](https://unpkg.com/) CDN. The "hello world" example above uses **jsDelivr**.
-
-- jsDelivr
-
-  ```html
-  
-  ```
-
-- UNPKG  
-
-  ```html
-  
-  ```
-
-#### Host the SDK yourself
-
-Besides using the public CDN, you can also download the SDK and host its files on your own server or a commercial CDN before including it in your application.
-
-Options to download the SDK:
-
-- From the website
-
-  Download the JavaScript Package
-
-- yarn
-
-  ```cmd
-  yarn add dynamsoft-javascript-barcode
-  ```
-
-- npm
-
-  ```cmd
-  npm install dynamsoft-javascript-barcode --save
-  ```
-
-Depending on how you downloaded the SDK and how you intend to use it, you can typically include it like this:
-
-```html
-
-```
-
-or
-
-```html
-
-```
-
-or
-
-```typescript
-import { BarcodeScanner } from 'dynamsoft-javascript-barcode';
-```
-
-**NOTE**
-
-* Some older web application servers do not set `.wasm` mimetype as `application/wasm`. Upgrade your web application servers, or define the mimetype yourselves:
-  * [Apache](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Apache_Configuration_htaccess#media_types_and_character_encodings)
-  * [IIS](https://docs.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/mimemap)
-  * [Nginx](https://www.nginx.com/resources/wiki/start/topics/examples/full/#mime-types)
-
-* To work properly, the SDK requires a few engine files, which are relatively large and may take quite a few seconds to download. We recommend that you set a longer cache time for these engine files, to maximize the performance of your web application.
-
-  ```cmd
-  Cache-Control: max-age=31536000
-  ```
-
-  Reference: [Cache-Control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control).
-
-### Configure the SDK
-
-Before using the SDK, you need to configure a few things.
-
-#### Specify the license
-
-The SDK requires a license to work, use the API `license` to specify a license key.
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-```
-
-To test the SDK, you can request a 30-day trial license via the Request a Trial License link.
-
-> If you register a Dynamsoft account and download the SDK from the official website, Dynamsoft will automatically generate a 30-day trial license for you, and put the license key into all the samples attached to the SDK.
-
-#### Specify the location of the "engine" files
-
-This is usually only required with frameworks like Angular or React, etc. where dbr.js is compiled into another file.
-
-The purpose is to tell the SDK where to find the engine files (\*.worker.js, \*.wasm.js and \*.wasm, etc.). The API is called `engineResourcePath`:
-
-```javascript
-//The following code uses the jsDelivr CDN, feel free to change it to your own location of these files
-Dynamsoft.DBR.BarcodeScanner.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.11/dist/";
-```
-
-### Interact with the SDK
-
-#### Create a `BarcodeScanner` object
-
-You can use one of two classes ( `BarcodeScanner` and `BarcodeReader` ) to interact with the SDK. `BarcodeReader` is a low-level class that processes images directly. `BarcodeScanner` , on the other hand, inherits from `BarcodeReader` and provides high-level APIs and a built-in GUI to allow continuous barcode scanning on video frames. We'll focus on `BarcodeScanner` in this guide.
-
-To use the SDK, we first create a `BarcodeScanner` object.
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-let scanner = null;
-try {
-    scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-} catch (ex) {
-    console.error(ex);
-}
-```
-
-Tip: When creating a `BarcodeScanner` object within a function which may be called more than once, it's best to use a "helper" variable to avoid double creation such as `pScanner` in the following code
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-let pScanner = null;
-document.getElementById('btn-scan').addEventListener('click', async () => {
-    try {
-        const scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance());
-    } catch (ex) {
-        console.error(ex);
-    }
-});
-```
-
-#### Customize the `BarcodeScanner` Settings (optional)
-
-Let's take a look at the following code snippets:
-
-```javascript
-// Sets which camera and what resolution to use
-let allCameras = await scanner.getAllCameras();
-await scanner.setCurrentCamera(allCameras[0].deviceId);
-await scanner.setResolution(1280, 720);
-```
-
-```javascript
-// Sets up the scanner behavior
-let scanSettings = await scanner.getScanSettings();
-// Disregards duplicated results found in a specified time period (in milliseconds).
-scanSettings.duplicateForgetTime = 5000; // The default is 3000
-// Sets a scan interval in milliseconds so the SDK may release the CPU from time to time.
-// (setting this value larger is a simple way to save battery power and reduce device heating).
-scanSettings.intervalTime = 100; // The default is 0.
-// Sets captureAndDecodeInParallel to false, which tells the SDK not to acquire the next frame while decoding the first.
-// This is another way to save battery power and is recommended on low-end phones. However, it does slow down the decoding speed.
-scanSettings.captureAndDecodeInParallel = false; // The default is true.
-await scanner.updateScanSettings(scanSettings);
-```
-
-```javascript
-// Uses one of the built-in RuntimeSetting templates: "single" (decode a single barcode, the default mode), "speed", "balance", "coverage", "dense" and "distance"
-await scanner.updateRuntimeSettings("speed");
-
-// Makes changes to the template. The code below demonstrates how to specify enabled symbologies
-let runtimeSettings = await scanner.getRuntimeSettings();
-runtimeSettings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_ONED | Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
-await scanner.updateRuntimeSettings(runtimeSettings);
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/yfkcajxz/)
-
-As you can see from the above code snippets, there are three types of configurations:
-
-- Customize the data source: This configuration includes which camera to use, the preferred resolution, etc. Learn more here.
-
-- `get/updateScanSettings`: Configures the behavior of the scanner which includes `duplicateForgetTime` and `intervalTime`, etc.
-
-- `get/updateRuntimeSettings`: Configures the decode engine with either a built-in template or a comprehensive `RuntimeSettings` object. For example, the following uses the built-in "speed" settings with updated `localizationModes`.
-
-  ```javascript
-  await barcodeScanner.updateRuntimeSettings("speed");
-  //await barcodeScanner.updateRuntimeSettings("balance"); //alternative
-  //await barcodeScanner.updateRuntimeSettings("coverage"); //alternative
-  let settings = await barcodeScanner.getRuntimeSettings();
-  settings.localizationModes = [
-      Dynamsoft.DBR.EnumLocalizationMode.LM_CONNECTED_BLOCKS,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_SCAN_DIRECTLY,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_LINES, 0, 0, 0, 0, 0
-  ];
-  await barcodeScanner.updateRuntimeSettings(settings);
-  ```
-
-  Try in [JSFiddle](https://jsfiddle.net/DynamsoftTeam/f24h8c1m/).
-
-  See also [settings samples](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/parameter-settings.html?ver=9.6.11&utm_source=guide).
-
-> Find the full list of the runtime settings here.
-
-### Customize the UI (optional)
-
-The built-in UI of the `BarcodeScanner` object is defined in the file `dist/dbr.ui.html` . There are a few ways to customize it:
-
-#### Modify the file `dist/dbr.ui.html` directly
-
-  This option is only possible when you [Host the SDK yourself](#host-the-sdk-yourself) instead of using a public CDN.
-
-#### Copy the file `dist/dbr.ui.html` to your application, modify it and use the the API `defaultUIElementURL` to set it as the default UI
-
-  ```javascript
-  // This line only takes effect before the method `createInstance()` is called.
-  Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "THE-URL-TO-THE-FILE";
-  ```
-
-#### Append the default UI element to your page, customize it before showing it
-
-  ```html
-  
    
-  ```
-
-  ```javascript
-  document.getElementById('div-ui-container').appendChild(scanner.getUIElement());
-  document.getElementsByClassName('dce-btn-close')[0].hidden = true; // Hide the close button
-  ```
-
-#### Build the UI element from scratch and connect it to the SDK with the API `setUIElement(HTMLElement)`
-
-1. **Embed the video**
-  
-  ```html
-  
    
-      
    
-  
    
-  
-  ```
-
-  > The video element will be created and appended to the DIV element with the class `dce-video-container` , make sure the class name is the same. Besides, the CSS property `position` of the DIV element must be either `relative` , `absolute` , `fixed` , or `sticky` .
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)
-
-2. **[Optional] Add the camera list and resolution list**
-
-  If the class names of the created select elements match the default class names, i.e. `dce-sel-camera` and `dce-sel-resolution` respectively, the SDK will automatically populate the lists and handle the camera/resolution switching.
-
-  ```html
-    
    
-        
    
-        
    
-    
    
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-  ```html
-  
    
-      
-      
-      
    
-      
    
-  
    
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)
-
-  > By default, only 3 hard-coded resolutions (1920 x 1080, 1280 x 720，640 x 480) are populated as options. You can show a customized set of options by hardcoding them.
-
-  ```html
-  
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)
-
-  > Generally, you need to provide a resolution that the camera supports. However, in case a camera does not support the specified resolution, it usually uses the cloest supported resolution. As a result, the selected resolution may not be the actual resolution. In this case, add an option with the class name `dce-opt-gotResolution` (as shown above) and the SDK will automatically use it to show the **actual resolution**.
-
-  See the section of the Explore Features guide on [UI customization]({{site.features}}customize-the-ui.html?lang=js) to learn more.
-
-## API Documentation
-
-You can check out the detailed documentation about the APIs of the SDK at
-[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.11](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.11).
-
-## System Requirements
-
-DBR requires the following features to work:
-
-- Secure context (HTTPS deployment)
-
-  When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons
-  
-  - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.
-  > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.
-  
-  - Dynamsoft License requires a secure context to work.
-
-- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`
-
-  The above four features are required for the SDK to work.
-
-- `MediaDevices`/`getUserMedia`
-
-  This API is only required for in-browser video streaming. If a browser does not support this API, the [Single Frame Mode](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/BarcodeScanner.html?ver=9.6.11&utm_source=guide#singleframemode) will be used automatically. If the API exists but doesn't work correctly, the Single Frame Mode can be used as an alternative way to access the camera.
-
-- `getSettings`
-
-  This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.
-
-The following table is a list of supported browsers based on the above requirements:
-
-  Browser Name | Version
-  :-: | :-:
-  Chrome | v59+1
-  Firefox | v52+ (v55+ on Android/iOS1)
-  Edge2 | v16+
-  Safari3 | v11+
-
-  1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.
-  
-  3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.
-
-Apart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.
-
-## How to Upgrade
-
-If you want to upgrade the SDK from an old version to a newer one, please see [how to upgrade](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/upgrade-guide/?ver=9.6.11&utm_source=guide).
-
-## Release Notes
-
-Learn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).
-
-## Next Steps
-
-Now that you have got the SDK integrated, you can choose to move forward in the following directions
-
-1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)
-2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)
-3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)
diff --git a/programming-old/javascript/user-guide/index-v9.6.2.md b/programming-old/javascript/user-guide/index-v9.6.2.md
deleted file mode 100644
index b4c138e2..00000000
--- a/programming-old/javascript/user-guide/index-v9.6.2.md
+++ /dev/null
@@ -1,523 +0,0 @@
----
-layout: default-layout
-title: v9.6.2 User Guide - Dynamsoft Barcode Reader JavaScript Edition
-description: This is the user guide of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, javascript, js
-breadcrumbText: User Guide
-noTitleIndex: true
-needGenerateH3Content: true
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/index-v9.6.2.html
----
-
-
-
-# Barcode Reader for Your Website - User Guide
-
-[Dynamsoft Barcode Reader JavaScript Edition](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) (DBR-JS) is equipped with industry-leading algorithms for exceptional speed, accuracy and read rates in barcode reading. Using its well-designed API, you can turn your web page into a barcode scanner with just a few lines of code.
-
-![version](https://img.shields.io/npm/v/dynamsoft-javascript-barcode.svg)
-![downloads](https://img.shields.io/npm/dm/dynamsoft-javascript-barcode.svg)
-![jsdelivr](https://img.shields.io/jsdelivr/npm/hm/dynamsoft-javascript-barcode.svg)
-![vulnerabilities](https://img.shields.io/snyk/vulnerabilities/npm/dynamsoft-javascript-barcode.svg)
-
-Once the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.
-
-In this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.
-
-Table of Contents
-
-- [Barcode Reader for Your Website - User Guide](#barcode-reader-for-your-website---user-guide)
-  - [Hello World - Simplest Implementation](#hello-world---simplest-implementation)
-    - [Understand the code](#understand-the-code)
-      - [About the code](#about-the-code)
-    - [Run the example](#run-the-example)
-  - [Building your own page](#building-your-own-page)
-    - [Include the SDK](#include-the-sdk)
-      - [Use a public CDN](#use-a-public-cdn)
-      - [Host the SDK yourself](#host-the-sdk-yourself)
-    - [Configure the SDK](#configure-the-sdk)
-      - [Specify the license](#specify-the-license)
-      - [Specify the location of the "engine" files](#specify-the-location-of-the-engine-files)
-    - [Interact with the SDK](#interact-with-the-sdk)
-      - [Create a `BarcodeScanner` object](#create-a-barcodescanner-object)
-      - [Customize the `BarcodeScanner` Settings (optional)](#customize-the-barcodescanner-settings-optional)
-    - [Customize the UI (optional)](#customize-the-ui-optional)
-      - [Modify the file `dist/dbr.ui.html` directly](#modify-the-file-distdbruihtml-directly)
-      - [Copy the file `dist/dbr.ui.html` to your application, modify it and use the the API `defaultUIElementURL` to set it as the default UI](#copy-the-file-distdbruihtml-to-your-application-modify-it-and-use-the-the-api-defaultuielementurl-to-set-it-as-the-default-ui)
-      - [Append the default UI element to your page, customize it before showing it](#append-the-default-ui-element-to-your-page-customize-it-before-showing-it)
-      - [Build the UI element from scratch and connect it to the SDK with the API setUIElement(HTMLElement)](#build-the-ui-element-from-scratch-and-connect-it-to-the-sdk-with-the-api-setuielementhtmlelement)
-  - [API Documentation](#api-documentation)
-  - [System Requirements](#system-requirements)
-  - [How to Upgrade](#how-to-upgrade)
-  - [Release Notes](#release-notes)
-  - [Next Steps](#next-steps)
-
-**Popular Examples**
-
-- Hello World - [Guide](#hello-world---simplest-implementation) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.2/1.hello-world/1.hello-world.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.6.2&utm_source=guide)
-- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.2&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.2/1.hello-world/3.read-video-angular) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/3.read-video-angular/dist/hello-world/?ver=9.6.2&utm_source=guide)
-- React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.2&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.2/1.hello-world/4.read-video-react) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/4.read-video-react/build/?ver=9.6.2&utm_source=guide)
-- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.2&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.2/1.hello-world/6.read-video-vue3) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/6.read-video-vue3/dist/?ver=9.6.2&utm_source=guide)
-- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.2&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.2/1.hello-world/10.read-video-pwa) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/10.read-video-pwa/helloworld-pwa.html?ver=9.6.2&utm_source=guide)
-- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.6.2&utm_source=guide&&lang=js) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.2/4.use-case/2.read-a-drivers-license.html) \| [Run](https://demo.dynamsoft.com/samples/dbr/js/4.use-case/2.read-a-drivers-license.html?ver=9.6.2&utm_source=guide)
-- Fill A Form - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-barcodes-as-input.html?lang=js&&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.2/4.use-case/1.fill-a-form-with-barcode-reading.html) \| [Run](https://demo.dynamsoft.com/samples/dbr/js/4.use-case/1.fill-a-form-with-barcode-reading.html?ver=9.6.2&utm_source=guide)
-
-You can also:
-
-- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.2&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)
-- Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.6.2&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.2/)
-
-## Hello World - Simplest Implementation
-
-Let's start with the "Hello World" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream.  
-
-- Basic Requirements
-  - Internet connection
-  - [A supported browser](#system-requirements)
-  - Camera access
-
-### Understand the code
-
-The complete code of the "Hello World" example is shown below
-
-```html
-
-
-
-
-    
-    
-
-
-
-```
-
-
    
-  
-    Code in Github
-  
-   
-  
-    Run via JSFiddle
-  
-   
-  
-    Run in Dynamsoft
-  
-
    
-
------
-
-#### About the code
-
-- The DBR-JS SDK is included in the code via the **jsDelivr** CDN.
-
-> In some rare cases, you might not be able to access the CDN. If this happens, you can use [https://download2.dynamsoft.com/dbr/dynamsoft-barcode-reader-js/dynamsoft-barcode-reader-js-9.6.2/dist/dbr.js](https://download2.dynamsoft.com/dbr/dynamsoft-barcode-reader-js/dynamsoft-barcode-reader-js-9.6.2/dist/dbr.js) for the test. However, please DO NOT use it in your production application because it is temporary. Instead, you can try [hosting the SDK yourself](#host-the-sdk-yourself).
-
-- `license`: This property specifies a license key. Note that the license "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" used in this example is an online license and requires network connection to work. Read more on [Specify the license](#specify-the-license).
-
-- `createInstance()`: This method creates a `BarcodeScanner` object. This object can read barcodes directly from a video input with the help of its interactive UI (hidden by default) and the MediaDevices interface.
-
-- `onFrameRead`: This event is triggered every time the SDK finishes scanning a video frame. The `results` object contains all the barcode results that the SDK have found on this frame. In this example, we print the results to the browser console.
-
-- `onUniqueRead`: This event is triggered when the SDK finds a new barcode, which is not a duplicate among multiple frames. `txt` holds the barcode text value while `result` is an object that holds details of the barcode. In this example, an alert will be displayed for this new barcode.
-
-- `show()`: This method brings up the built-in UI of the `BarcodeScanner` object and starts scanning.
-
-### Run the example
-
-You can run the example deployed to the Dynamsoft Demo Server or test it with JSFiddle code editor. You will be asked to allow access to your camera, after which the video will be displayed on the page. After that, you can point the camera at a barcode to read it.
-
-When a barcode is decoded, you will see the result text pop up and the barcode location will be highlighted in the video feed.
-
-Alternatively, you can make a local test simply by taking the code in step 1, pasting it in a file with the name "hello-world.html" and open it in a browser.
-
-*Note*:
-
-If you open the web page as `file:///` or `http://` , the camera may not work correctly because the API getUserMedia usually requires HTTPS to access the camera.
-
-To make sure your web application can access the camera, please configure your web server to support HTTPS. The following links may help.
-
-1. NGINX: Configuring HTTPS servers
-2. IIS: Create a Self Signed Certificate in IIS
-3. Tomcat: Setting Up SSL on Tomcat in 5 minutes
-4. Node.js: npm tls
-
-If the test doesn't go as expected, you can [contact us](https://www.dynamsoft.com/contact/?ver=9.6.2&utm_source=guide).
-
-
-
-

    
-
-**Pinned Message:**
-
-- [Temporary solution for iPhone 14 Pro Max rear camera not focusing](https://github.com/Dynamsoft/barcode-reader-javascript-samples/issues/99#issuecomment-1407584605)
-
-## Building your own page
-
-### Include the SDK
-
-#### Use a public CDN
-
-The simplest way to include the SDK is to use either the [jsDelivr](https://jsdelivr.com/) or [UNPKG](https://unpkg.com/) CDN. The "hello world" example above uses **jsDelivr**.
-
-- jsDelivr
-
-  ```html
-  
-  ```
-
-- UNPKG  
-
-  ```html
-  
-  ```
-
-#### Host the SDK yourself
-
-Besides using the public CDN, you can also download the SDK and host its files on your own server or a commercial CDN before including it in your application.
-
-Options to download the SDK:
-
-- From the website
-
-  Download the JavaScript Package
-
-- yarn
-
-  ```cmd
-  yarn add dynamsoft-javascript-barcode
-  ```
-
-- npm
-
-  ```cmd
-  npm install dynamsoft-javascript-barcode --save
-  ```
-
-Depending on how you downloaded the SDK and how you intend to use it, you can typically include it like this:
-
-```html
-
-```
-
-or
-
-```html
-
-```
-
-or
-
-```typescript
-import { BarcodeScanner } from 'dynamsoft-javascript-barcode';
-```
-
-**NOTE**
-
-* Some older web application servers do not set `.wasm` mimetype as `application/wasm`. Upgrade your web application servers, or define the mimetype yourselves:
-  * [Apache](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Apache_Configuration_htaccess#media_types_and_character_encodings)
-  * [IIS](https://docs.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/mimemap)
-  * [Nginx](https://www.nginx.com/resources/wiki/start/topics/examples/full/#mime-types)
-
-* To work properly, the SDK requires a few engine files, which are relatively large and may take quite a few seconds to download. We recommend that you set a longer cache time for these engine files, to maximize the performance of your web application.
-
-  ```cmd
-  Cache-Control: max-age=31536000
-  ```
-
-  Reference: [Cache-Control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control).
-
-### Configure the SDK
-
-Before using the SDK, you need to configure a few things.
-
-#### Specify the license
-
-The SDK requires a license to work, use the API `license` to specify a license key.
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-```
-
-To test the SDK, you can request a 30-day trial license via the Request a Trial License link.
-
-> If you register a Dynamsoft account and download the SDK from the official website, Dynamsoft will automatically generate a 30-day trial license for you, and put the license key into all the samples attached to the SDK.
-
-#### Specify the location of the "engine" files
-
-This is usually only required with frameworks like Angular or React, etc. where dbr.js is compiled into another file.
-
-The purpose is to tell the SDK where to find the engine files (\*.worker.js, \*.wasm.js and \*.wasm, etc.). The API is called `engineResourcePath`:
-
-```javascript
-//The following code uses the jsDelivr CDN, feel free to change it to your own location of these files
-Dynamsoft.DBR.BarcodeScanner.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.2/dist/";
-```
-
-### Interact with the SDK
-
-#### Create a `BarcodeScanner` object
-
-You can use one of two classes ( `BarcodeScanner` and `BarcodeReader` ) to interact with the SDK. `BarcodeReader` is a low-level class that processes images directly. `BarcodeScanner` , on the other hand, inherits from `BarcodeReader` and provides high-level APIs and a built-in GUI to allow continuous barcode scanning on video frames. We'll focus on `BarcodeScanner` in this guide.
-
-To use the SDK, we first create a `BarcodeScanner` object.
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-let scanner = null;
-try {
-    scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-} catch (ex) {
-    console.error(ex);
-}
-```
-
-Tip: When creating a `BarcodeScanner` object within a function which may be called more than once, it's best to use a "helper" variable to avoid double creation such as `pScanner` in the following code
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-let pScanner = null;
-document.getElementById('btn-scan').addEventListener('click', async () => {
-    try {
-        const scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance());
-    } catch (ex) {
-        console.error(ex);
-    }
-});
-```
-
-#### Customize the `BarcodeScanner` Settings (optional)
-
-Let's take a look at the following code snippets:
-
-```javascript
-// Sets which camera and what resolution to use
-let allCameras = await scanner.getAllCameras();
-await scanner.setCurrentCamera(allCameras[0].deviceId);
-await scanner.setResolution(1280, 720);
-```
-
-```javascript
-// Sets up the scanner behavior
-let scanSettings = await scanner.getScanSettings();
-// Disregards duplicated results found in a specified time period (in milliseconds).
-scanSettings.duplicateForgetTime = 5000; // The default is 3000
-// Sets a scan interval in milliseconds so the SDK may release the CPU from time to time.
-// (setting this value larger is a simple way to save battery power and reduce device heating).
-scanSettings.intervalTime = 100; // The default is 0.
-// Sets captureAndDecodeInParallel to false, which tells the SDK not to acquire the next frame while decoding the first.
-// This is another way to save battery power and is recommended on low-end phones. However, it does slow down the decoding speed.
-scanSettings.captureAndDecodeInParallel = false; // The default is true.
-await scanner.updateScanSettings(scanSettings);
-```
-
-```javascript
-// Uses one of the built-in RuntimeSetting templates: "single" (decode a single barcode, the default mode), "speed", "balance", "coverage", "dense" and "distance"
-await scanner.updateRuntimeSettings("speed");
-
-// Makes changes to the template. The code below demonstrates how to specify enabled symbologies
-let runtimeSettings = await scanner.getRuntimeSettings();
-runtimeSettings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_ONED | Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
-await scanner.updateRuntimeSettings(runtimeSettings);
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/yfkcajxz/)
-
-As you can see from the above code snippets, there are three types of configurations:
-
-- Customize the data source: This configuration includes which camera to use, the preferred resolution, etc. Learn more here.
-
-- `get/updateScanSettings`: Configures the behavior of the scanner which includes `duplicateForgetTime` and `intervalTime`, etc.
-
-- `get/updateRuntimeSettings`: Configures the decode engine with either a built-in template or a comprehensive `RuntimeSettings` object. For example, the following uses the built-in "speed" settings with updated `localizationModes`.
-
-  ```javascript
-  await barcodeScanner.updateRuntimeSettings("speed");
-  //await barcodeScanner.updateRuntimeSettings("balance"); //alternative
-  //await barcodeScanner.updateRuntimeSettings("coverage"); //alternative
-  let settings = await barcodeScanner.getRuntimeSettings();
-  settings.localizationModes = [
-      Dynamsoft.DBR.EnumLocalizationMode.LM_CONNECTED_BLOCKS,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_SCAN_DIRECTLY,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_LINES, 0, 0, 0, 0, 0
-  ];
-  await barcodeScanner.updateRuntimeSettings(settings);
-  ```
-
-  Try in [JSFiddle](https://jsfiddle.net/DynamsoftTeam/f24h8c1m/).
-
-  See also [settings samples](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/parameter-settings.html?ver=9.6.2&utm_source=guide).
-
-> Find the full list of the runtime settings here.
-
-### Customize the UI (optional)
-
-The built-in UI of the `BarcodeScanner` object is defined in the file `dist/dbr.ui.html` . There are a few ways to customize it:
-
-#### Modify the file `dist/dbr.ui.html` directly
-
-  This option is only possible when you [Host the SDK yourself](#host-the-sdk-yourself) instead of using a public CDN.
-
-#### Copy the file `dist/dbr.ui.html` to your application, modify it and use the the API `defaultUIElementURL` to set it as the default UI
-
-  ```javascript
-  // This line only takes effect before the method `createInstance()` is called.
-  Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "THE-URL-TO-THE-FILE";
-  ```
-
-#### Append the default UI element to your page, customize it before showing it
-
-  ```html
-  
    
-  ```
-
-  ```javascript
-  document.getElementById('div-ui-container').appendChild(scanner.getUIElement());
-  document.getElementsByClassName('dce-btn-close')[0].hidden = true; // Hide the close button
-  ```
-
-#### Build the UI element from scratch and connect it to the SDK with the API setUIElement(HTMLElement)
-
-1. **Embed the video**
-  
-  ```html
-  
    
-      
    
-  
    
-  
-  ```
-
-  > The video element will be created and appended to the DIV element with the class `dce-video-container` , make sure the class name is the same. Besides, the CSS property `position` of the DIV element must be either `relative` , `absolute` , `fixed` , or `sticky` .
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)
-
-2. **[Optional] Add the camera list and resolution list**
-
-  If the class names of the created select elements match the default class names, i.e. `dce-sel-camera` and `dce-sel-resolution` respectively, the SDK will automatically populate the lists and handle the camera/resolution switching.
-
-  ```html
-    
    
-        
    
-        
    
-    
    
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-  ```html
-  
    
-      
-      
-      
    
-      
    
-  
    
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)
-
-  > By default, only 3 hard-coded resolutions (1920 x 1080, 1280 x 720，640 x 480) are populated as options. You can show a customized set of options by hardcoding them.
-
-  ```html
-  
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)
-
-  > Generally, you need to provide a resolution that the camera supports. However, in case a camera does not support the specified resolution, it usually uses the cloest supported resolution. As a result, the selected resolution may not be the actual resolution. In this case, add an option with the class name `dce-opt-gotResolution` (as shown above) and the SDK will automatically use it to show the **actual resolution**.
-
-  See the section of the Explore Features guide on [UI customization]({{site.features}}customize-the-ui.html?lang=js) to learn more.
-
-## API Documentation
-
-You can check out the detailed documentation about the APIs of the SDK at
-[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.2](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.2).
-
-## System Requirements
-
-DBR requires the following features to work:
-
-- Secure context (HTTPS deployment)
-
-  When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons
-  
-  - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.
-  > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.
-  
-  - Dynamsoft License requires a secure context to work.
-
-- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`
-
-  The above four features are required for the SDK to work.
-
-- `MediaDevices`/`getUserMedia`
-
-  This API is only required for in-browser video streaming. If a browser does not support this API, the [Single Frame Mode](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/BarcodeScanner.html?ver=9.6.2&utm_source=guide#singleframemode) will be used automatically. If the API exists but doesn't work correctly, the Single Frame Mode can be used as an alternative way to access the camera.
-
-- `getSettings`
-
-  This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.
-
-The following table is a list of supported browsers based on the above requirements:
-
-  Browser Name | Version
-  :-: | :-:
-  Chrome | v59+1
-  Firefox | v52+ (v55+ on Android/iOS1)
-  Edge2 | v16+
-  Safari3 | v11+
-
-  1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.
-  
-  3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.
-
-Apart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.
-
-## How to Upgrade
-
-If you want to upgrade the SDK from an old version to a newer one, please see [how to upgrade](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/upgrade-guide/?ver=9.6.2&utm_source=guide).
-
-## Release Notes
-
-Learn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).
-
-## Next Steps
-
-Now that you have got the SDK integrated, you can choose to move forward in the following directions
-
-1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)
-2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)
-3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)
diff --git a/programming-old/javascript/user-guide/index-v9.6.20.md b/programming-old/javascript/user-guide/index-v9.6.20.md
deleted file mode 100644
index 291372fd..00000000
--- a/programming-old/javascript/user-guide/index-v9.6.20.md
+++ /dev/null
@@ -1,510 +0,0 @@
----
-layout: default-layout
-title: v9.6.20 User Guide - Dynamsoft Barcode Reader JavaScript Edition
-description: This is the user guide of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, javascript, js
-breadcrumbText: User Guide
-noTitleIndex: true
-needGenerateH3Content: true
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/index-v9.6.20.html
----
-
-
-
-# Barcode Reader for Your Website - User Guide
-
-[Dynamsoft Barcode Reader JavaScript Edition](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) (DBR-JS) is equipped with industry-leading algorithms for exceptional speed, accuracy and read rates in barcode reading. Using its well-designed API, you can turn your web page into a barcode scanner with just a few lines of code.
-
-![version](https://img.shields.io/npm/v/dynamsoft-javascript-barcode.svg)
-![downloads](https://img.shields.io/npm/dm/dynamsoft-javascript-barcode.svg)
-![jsdelivr](https://img.shields.io/jsdelivr/npm/hm/dynamsoft-javascript-barcode.svg)
-![vulnerabilities](https://img.shields.io/snyk/vulnerabilities/npm/dynamsoft-javascript-barcode.svg)
-
-Once the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.
-
-
-
-In this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.
-
-Table of Contents
-
-- [Hello World - Simplest Implementation](#hello-world---simplest-implementation)
-  - [Understand the code](#understand-the-code)
-  - [Run the example](#run-the-example)
-- [Building your own page](#building-your-own-page)
-  - [Include the SDK](#include-the-sdk)
-  - [Configure the SDK](#configure-the-sdk)
-  - [Interact with the SDK](#interact-with-the-sdk)
-  - [Customize the UI (optional)](#customize-the-ui-optional)
-- [API Documentation](#api-documentation)
-- [System Requirements](#system-requirements)
-- [How to Upgrade](#how-to-upgrade)
-- [Release Notes](#release-notes)
-- [Next Steps](#next-steps)
-
-**Popular Examples**
-
-- Hello World - [Guide](#hello-world---simplest-implementation) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.20/1.hello-world/1.hello-world.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.6.20&utm_source=guide)
-- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.20&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.20/1.hello-world/3.read-video-angular) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/3.read-video-angular/dist/hello-world/?ver=9.6.20&utm_source=guide)
-- React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.20&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.20/1.hello-world/4.read-video-react) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/4.read-video-react/build/?ver=9.6.20&utm_source=guide)
-- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.20&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.20/1.hello-world/6.read-video-vue3) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/6.read-video-vue3/dist/?ver=9.6.20&utm_source=guide)
-- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.20&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.20/1.hello-world/10.read-video-pwa) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/10.read-video-pwa/helloworld-pwa.html?ver=9.6.20&utm_source=guide)
-- WebView in Android and iOS - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.20/1.hello-world/14.read-video-webview)
-- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.6.20&utm_source=guide&&lang=js) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.20/4.use-case/2.read-a-drivers-license.html) \| [Run](https://demo.dynamsoft.com/samples/dbr/js/4.use-case/2.read-a-drivers-license.html?ver=9.6.20&utm_source=guide)
-- Fill A Form - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-barcodes-as-input.html?lang=js&&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.20/4.use-case/1.fill-a-form-with-barcode-reading.html) \| [Run](https://demo.dynamsoft.com/samples/dbr/js/4.use-case/1.fill-a-form-with-barcode-reading.html?ver=9.6.20&utm_source=guide)
-- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/4.use-case/3.show-result-texts-on-the-video.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/4.use-case/3.show-result-texts-on-the-video.html?ver=9.6.20&utm_source=guide)
-- Debug Camera and Collect Video Frame - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/debug.html?lang=js&&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.20/5.others/debug)
-
-You can also:
-
-- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.20&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)
-- Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.6.20&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.20/)
-
-## Hello World - Simplest Implementation
-
-Let's start with the "Hello World" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream.  
-
-- Basic Requirements
-  - Internet connection
-  - [A supported browser](#system-requirements)
-  - Camera access
-
-### Understand the code
-
-The complete code of the "Hello World" example is shown below
-
-```html
-
-
-
-
-    
-    
-
-
-
-```
-
-
    
-  
-    Code in Github
-  
-   
-  
-    Run via JSFiddle
-  
-   
-  
-    Run in Dynamsoft
-  
-
    
-
------
-
-#### About the code
-
-- The DBR-JS SDK is included in the code via the **jsDelivr** CDN.
-
-> In some rare cases, you might not be able to access the CDN. If this happens, you can use [https://download2.dynamsoft.com/dbr/dynamsoft-barcode-reader-js/dynamsoft-barcode-reader-js-9.6.20/dist/dbr.js](https://download2.dynamsoft.com/dbr/dynamsoft-barcode-reader-js/dynamsoft-barcode-reader-js-9.6.20/dist/dbr.js) for the test. However, please DO NOT use CDN of `download2.dynamsoft.com` in your production application because it is temporary. Instead, you can try [hosting the SDK yourself](#host-the-sdk-yourself).
-
-- `license`: This property specifies a license key. Note that the license "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" used in this example is an online license and requires network connection to work. Read more on [Specify the license](#specify-the-license).
-
-- `createInstance()`: This method creates a `BarcodeScanner` object. This object can read barcodes directly from a video input with the help of its interactive UI (hidden by default) and the MediaDevices interface.
-
-- `onFrameRead`: This event is triggered every time the SDK finishes scanning a video frame. The `results` object contains all the barcode results that the SDK have found on this frame. In this example, we print the results to the browser console.
-
-- `onUniqueRead`: This event is triggered when the SDK finds a new barcode, which is not a duplicate among multiple frames. `txt` holds the barcode text value while `result` is an object that holds details of the barcode. In this example, an alert will be displayed for this new barcode.
-
-- `show()`: This method brings up the built-in UI of the `BarcodeScanner` object and starts scanning.
-
-### Run the example
-
-You can run the example deployed to the Dynamsoft Demo Server or test it with JSFiddle code editor. You will be asked to allow access to your camera, after which the video will be displayed on the page. After that, you can point the camera at a barcode to read it.
-
-When a barcode is decoded, you will see the result text pop up and the barcode location will be highlighted in the video feed.
-
-Alternatively, you can make a local test simply by taking the code in step 1, pasting it in a file with the name "hello-world.html" and open it in a browser.
-
-*Note*:
-
-If you open the web page as `file:///` or `http://` , the camera may not work correctly because the API getUserMedia usually requires HTTPS to access the camera.
-
-To make sure your web application can access the camera, please configure your web server to support HTTPS. The following links may help.
-
-1. NGINX: Configuring HTTPS servers
-2. IIS: Create a Self Signed Certificate in IIS
-3. Tomcat: Setting Up SSL on Tomcat in 5 minutes
-4. Node.js: npm tls
-
-If the test doesn't go as expected, you can [contact us](https://www.dynamsoft.com/contact/?ver=9.6.20&utm_source=guide).
-
-## Building your own page
-
-### Include the SDK
-
-#### Use a public CDN
-
-The simplest way to include the SDK is to use either the [jsDelivr](https://jsdelivr.com/) or [UNPKG](https://unpkg.com/) CDN. The "hello world" example above uses **jsDelivr**.
-
-- jsDelivr
-
-  ```html
-  
-  ```
-
-- UNPKG  
-
-  ```html
-  
-  ```
-
-#### Host the SDK yourself
-
-Besides using the public CDN, you can also download the SDK and host its files on your own server or a commercial CDN before including it in your application.
-
-Options to download the SDK:
-
-- From the website
-
-  Download the JavaScript Package
-
-- yarn
-
-  ```cmd
-  yarn add dynamsoft-javascript-barcode
-  ```
-
-- npm
-
-  ```cmd
-  npm install dynamsoft-javascript-barcode --save
-  ```
-
-Depending on how you downloaded the SDK and how you intend to use it, you can typically include it like this:
-
-```html
-
-```
-
-or
-
-```html
-
-```
-
-or
-
-```typescript
-import { BarcodeScanner } from 'dynamsoft-javascript-barcode';
-```
-
-**NOTE**
-
-* Some older web application servers do not set `.wasm` mimetype as `application/wasm`. Upgrade your web application servers, or define the mimetype yourselves:
-  * [Apache](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Apache_Configuration_htaccess#media_types_and_character_encodings)
-  * [IIS](https://docs.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/mimemap)
-  * [Nginx](https://www.nginx.com/resources/wiki/start/topics/examples/full/#mime-types)
-
-* To work properly, the SDK requires a few engine files, which are relatively large and may take quite a few seconds to download. We recommend that you set a longer cache time for these engine files, to maximize the performance of your web application.
-
-  ```cmd
-  Cache-Control: max-age=31536000
-  ```
-
-  Reference: [Cache-Control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control).
-
-### Configure the SDK
-
-Before using the SDK, you need to configure a few things.
-
-#### Specify the license
-
-The SDK requires a license to work, use the API `license` to specify a license key.
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-```
-
-To test the SDK, you can request a 30-day trial license via the Request a Trial License link.
-
-> If you register a Dynamsoft account and download the SDK from the official website, Dynamsoft will automatically generate a 30-day trial license for you, and put the license key into all the samples attached to the SDK.
-
-#### Specify the location of the "engine" files
-
-This is usually only required with frameworks like Angular or React, etc. where dbr.js is compiled into another file.
-
-The purpose is to tell the SDK where to find the engine files (\*.worker.js, \*.wasm.js and \*.wasm, etc.). The API is called `engineResourcePath`:
-
-```javascript
-//The following code uses the jsDelivr CDN, feel free to change it to your own location of these files
-Dynamsoft.DBR.BarcodeScanner.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.20/dist/";
-```
-
-### Interact with the SDK
-
-#### Create a `BarcodeScanner` object
-
-You can use one of two classes ( `BarcodeScanner` and `BarcodeReader` ) to interact with the SDK. `BarcodeReader` is a low-level class that processes images directly. `BarcodeScanner` , on the other hand, inherits from `BarcodeReader` and provides high-level APIs and a built-in GUI to allow continuous barcode scanning on video frames. We'll focus on `BarcodeScanner` in this guide.
-
-To use the SDK, we first create a `BarcodeScanner` object.
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-let scanner = null;
-try {
-    scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-} catch (ex) {
-    console.error(ex);
-}
-```
-
-Tip: When creating a `BarcodeScanner` object within a function which may be called more than once, it's best to use a "helper" variable to avoid double creation such as `pScanner` in the following code
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-let pScanner = null;
-document.getElementById('btn-scan').addEventListener('click', async () => {
-    try {
-        const scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance());
-    } catch (ex) {
-        console.error(ex);
-    }
-});
-```
-
-#### Customize the `BarcodeScanner` Settings (optional)
-
-Let's take a look at the following code snippets:
-
-```javascript
-// Sets which camera and what resolution to use
-let allCameras = await scanner.getAllCameras();
-await scanner.setCurrentCamera(allCameras[0].deviceId);
-await scanner.setResolution(1280, 720);
-```
-
-```javascript
-// Sets up the scanner behavior
-let scanSettings = await scanner.getScanSettings();
-// Disregards duplicated results found in a specified time period (in milliseconds).
-scanSettings.duplicateForgetTime = 5000; // The default is 3000
-// Sets a scan interval in milliseconds so the SDK may release the CPU from time to time.
-// (setting this value larger is a simple way to save battery power and reduce device heating).
-scanSettings.intervalTime = 100; // The default is 0.
-// Sets captureAndDecodeInParallel to false, which tells the SDK not to acquire the next frame while decoding the first.
-// This is another way to save battery power and is recommended on low-end phones. However, it does slow down the decoding speed.
-scanSettings.captureAndDecodeInParallel = false; // The default is true.
-await scanner.updateScanSettings(scanSettings);
-```
-
-```javascript
-// Uses one of the built-in RuntimeSetting templates: "single" (decode a single barcode, the default mode), "speed", "balance", "coverage", "dense" and "distance"
-await scanner.updateRuntimeSettings("speed");
-
-// Makes changes to the template. The code below demonstrates how to specify enabled symbologies
-let runtimeSettings = await scanner.getRuntimeSettings();
-runtimeSettings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_ONED | Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
-await scanner.updateRuntimeSettings(runtimeSettings);
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/yfkcajxz/)
-
-As you can see from the above code snippets, there are three types of configurations:
-
-- Customize the data source: This configuration includes which camera to use, the preferred resolution, etc. Learn more here.
-
-- `get/updateScanSettings`: Configures the behavior of the scanner which includes `duplicateForgetTime` and `intervalTime`, etc.
-
-- `get/updateRuntimeSettings`: Configures the decode engine with either a built-in template or a comprehensive `RuntimeSettings` object. For example, the following uses the built-in "speed" settings with updated `localizationModes`.
-
-  ```javascript
-  await barcodeScanner.updateRuntimeSettings("speed");
-  //await barcodeScanner.updateRuntimeSettings("balance"); //alternative
-  //await barcodeScanner.updateRuntimeSettings("coverage"); //alternative
-  let settings = await barcodeScanner.getRuntimeSettings();
-  settings.localizationModes = [
-      Dynamsoft.DBR.EnumLocalizationMode.LM_CONNECTED_BLOCKS,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_SCAN_DIRECTLY,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_LINES, 0, 0, 0, 0, 0
-  ];
-  await barcodeScanner.updateRuntimeSettings(settings);
-  ```
-
-  Try in [JSFiddle](https://jsfiddle.net/DynamsoftTeam/f24h8c1m/).
-
-  See also [settings samples](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/parameter-settings.html?ver=9.6.20&utm_source=guide).
-
-> Find the full list of the runtime settings here.
-
-### Customize the UI (optional)
-
-The built-in UI of the `BarcodeScanner` object is defined in the file `dist/dbr.ui.html` . There are a few ways to customize it:
-
-#### Modify the file `dist/dbr.ui.html` directly
-
-  This option is only possible when you [Host the SDK yourself](#host-the-sdk-yourself) instead of using a public CDN.
-
-#### Copy the file `dist/dbr.ui.html` to your application, modify it and use the the API `defaultUIElementURL` to set it as the default UI
-
-  ```javascript
-  // This line only takes effect before the method `createInstance()` is called.
-  Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "THE-URL-TO-THE-FILE";
-  ```
-
-#### Append the default UI element to your page, customize it before showing it
-
-  ```html
-  
    
-  ```
-
-  ```javascript
-  document.getElementById('div-ui-container').appendChild(scanner.getUIElement());
-  document.getElementsByClassName('dce-btn-close')[0].hidden = true; // Hide the close button
-  ```
-
-#### Build the UI element from scratch and connect it to the SDK with the API `setUIElement(HTMLElement)`
-
-1. **Embed the video**
-  
-  ```html
-  
    
-      
    
-  
    
-  
-  ```
-
-  > The video element will be created and appended to the DIV element with the class `dce-video-container` , make sure the class name is the same. Besides, the CSS property `position` of the DIV element must be either `relative` , `absolute` , `fixed` , or `sticky` .
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)
-
-2. **[Optional] Add the camera list and resolution list**
-
-  If the class names of the created select elements match the default class names, i.e. `dce-sel-camera` and `dce-sel-resolution` respectively, the SDK will automatically populate the lists and handle the camera/resolution switching.
-
-  ```html
-    
    
-        
    
-        
    
-    
    
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-  ```html
-  
    
-      
-      
-      
    
-      
    
-  
    
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)
-
-  > By default, only 3 hard-coded resolutions (1920 x 1080, 1280 x 720，640 x 480) are populated as options. You can show a customized set of options by hardcoding them.
-
-  ```html
-  
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)
-
-  > Generally, you need to provide a resolution that the camera supports. However, in case a camera does not support the specified resolution, it usually uses the cloest supported resolution. As a result, the selected resolution may not be the actual resolution. In this case, add an option with the class name `dce-opt-gotResolution` (as shown above) and the SDK will automatically use it to show the **actual resolution**.
-
-  See the section of the Explore Features guide on [UI customization]({{site.features}}customize-the-ui.html?lang=js) to learn more.
-
-## API Documentation
-
-You can check out the detailed documentation about the APIs of the SDK at
-[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.20](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.20).
-
-## System Requirements
-
-DBR requires the following features to work:
-
-- Secure context (HTTPS deployment)
-
-  When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons
-  
-  - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.
-  > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.
-  
-  - Dynamsoft License requires a secure context to work.
-
-- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`
-
-  The above four features are required for the SDK to work.
-
-- `MediaDevices`/`getUserMedia`
-
-  This API is only required for in-browser video streaming. If a browser does not support this API, the [Single Frame Mode](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/BarcodeScanner.html?ver=9.6.20&utm_source=guide#singleframemode) will be used automatically. If the API exists but doesn't work correctly, the Single Frame Mode can be used as an alternative way to access the camera.
-
-- `getSettings`
-
-  This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.
-
-The following table is a list of supported browsers based on the above requirements:
-
-  Browser Name | Version
-  :-: | :-:
-  Chrome | v59+1
-  Firefox | v52+ (v55+ on Android/iOS1)
-  Edge2 | v16+
-  Safari3 | v11+
-
-  1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.
-  
-  3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.
-
-Apart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.
-
-## How to Upgrade
-
-If you want to upgrade the SDK from an old version to a newer one, please see [how to upgrade](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/upgrade-guide/?ver=9.6.20&utm_source=guide).
-
-## Release Notes
-
-Learn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).
-
-## Next Steps
-
-Now that you have got the SDK integrated, you can choose to move forward in the following directions
-
-1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)
-2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)
-3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)
diff --git a/programming-old/javascript/user-guide/index-v9.6.21.md b/programming-old/javascript/user-guide/index-v9.6.21.md
deleted file mode 100644
index 9af34089..00000000
--- a/programming-old/javascript/user-guide/index-v9.6.21.md
+++ /dev/null
@@ -1,511 +0,0 @@
----
-layout: default-layout
-title: v9.6.21 User Guide - Dynamsoft Barcode Reader JavaScript Edition
-description: This is the user guide of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, javascript, js
-breadcrumbText: User Guide
-noTitleIndex: true
-needGenerateH3Content: true
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/index-v9.6.21.html
-schema: schemas/dynamsoft-facilitates-mit-research-schema.json
----
-
-
-
-# Barcode Reader for Your Website - User Guide
-
-[Dynamsoft Barcode Reader JavaScript Edition](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) (DBR-JS) is equipped with industry-leading algorithms for exceptional speed, accuracy and read rates in barcode reading. Using its well-designed API, you can turn your web page into a barcode scanner with just a few lines of code.
-
-![version](https://img.shields.io/npm/v/dynamsoft-javascript-barcode.svg)
-![downloads](https://img.shields.io/npm/dm/dynamsoft-javascript-barcode.svg)
-![jsdelivr](https://img.shields.io/jsdelivr/npm/hm/dynamsoft-javascript-barcode.svg)
-![vulnerabilities](https://img.shields.io/snyk/vulnerabilities/npm/dynamsoft-javascript-barcode.svg)
-
-Once the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.
-
-
-
-In this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.
-
-Table of Contents
-
-- [Hello World - Simplest Implementation](#hello-world---simplest-implementation)
-  - [Understand the code](#understand-the-code)
-  - [Run the example](#run-the-example)
-- [Building your own page](#building-your-own-page)
-  - [Include the SDK](#include-the-sdk)
-  - [Configure the SDK](#configure-the-sdk)
-  - [Interact with the SDK](#interact-with-the-sdk)
-  - [Customize the UI (optional)](#customize-the-ui-optional)
-- [API Documentation](#api-documentation)
-- [System Requirements](#system-requirements)
-- [How to Upgrade](#how-to-upgrade)
-- [Release Notes](#release-notes)
-- [Next Steps](#next-steps)
-
-**Popular Examples**
-
-- Hello World - [Guide](#hello-world---simplest-implementation) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.21/1.hello-world/1.hello-world.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.6.21&utm_source=guide)
-- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.21&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.21/1.hello-world/3.read-video-angular) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/3.read-video-angular/dist/hello-world/?ver=9.6.21&utm_source=guide)
-- React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.21&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.21/1.hello-world/4.read-video-react) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/4.read-video-react/build/?ver=9.6.21&utm_source=guide)
-- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.21&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.21/1.hello-world/6.read-video-vue3) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/6.read-video-vue3/dist/?ver=9.6.21&utm_source=guide)
-- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.21&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.21/1.hello-world/10.read-video-pwa) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/10.read-video-pwa/helloworld-pwa.html?ver=9.6.21&utm_source=guide)
-- WebView in Android and iOS - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.21/1.hello-world/14.read-video-webview)
-- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.6.21&utm_source=guide&&lang=js) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.21/4.use-case/2.read-a-drivers-license.html) \| [Run](https://demo.dynamsoft.com/samples/dbr/js/4.use-case/2.read-a-drivers-license.html?ver=9.6.21&utm_source=guide)
-- Fill A Form - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-barcodes-as-input.html?lang=js&&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.21/4.use-case/1.fill-a-form-with-barcode-reading.html) \| [Run](https://demo.dynamsoft.com/samples/dbr/js/4.use-case/1.fill-a-form-with-barcode-reading.html?ver=9.6.21&utm_source=guide)
-- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/4.use-case/3.show-result-texts-on-the-video.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/4.use-case/3.show-result-texts-on-the-video.html?ver=9.6.21&utm_source=guide)
-- Debug Camera and Collect Video Frame - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/debug.html?lang=js&&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.21/5.others/debug)
-
-You can also:
-
-- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.21&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)
-- Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.6.21&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.21/)
-
-## Hello World - Simplest Implementation
-
-Let's start with the "Hello World" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream.  
-
-- Basic Requirements
-  - Internet connection
-  - [A supported browser](#system-requirements)
-  - Camera access
-
-### Understand the code
-
-The complete code of the "Hello World" example is shown below
-
-```html
-
-
-
-
-    
-    
-
-
-
-```
-
-
    
-  
-    Code in Github
-  
-   
-  
-    Run via JSFiddle
-  
-   
-  
-    Run in Dynamsoft
-  
-
    
-
------
-
-#### About the code
-
-- The DBR-JS SDK is included in the code via the **jsDelivr** CDN.
-
-> In some rare cases, you might not be able to access the CDN. If this happens, you can use [https://download2.dynamsoft.com/dbr/dynamsoft-barcode-reader-js/dynamsoft-barcode-reader-js-9.6.21/dist/dbr.js](https://download2.dynamsoft.com/dbr/dynamsoft-barcode-reader-js/dynamsoft-barcode-reader-js-9.6.21/dist/dbr.js) for the test. However, please DO NOT use CDN of `download2.dynamsoft.com` in your production application because it is temporary. Instead, you can try [hosting the SDK yourself](#host-the-sdk-yourself).
-
-- `license`: This property specifies a license key. Note that the license "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" used in this example is an online license and requires network connection to work. Read more on [Specify the license](#specify-the-license).
-
-- `createInstance()`: This method creates a `BarcodeScanner` object. This object can read barcodes directly from a video input with the help of its interactive UI (hidden by default) and the MediaDevices interface.
-
-- `onFrameRead`: This event is triggered every time the SDK finishes scanning a video frame. The `results` object contains all the barcode results that the SDK have found on this frame. In this example, we print the results to the browser console.
-
-- `onUniqueRead`: This event is triggered when the SDK finds a new barcode, which is not a duplicate among multiple frames. `txt` holds the barcode text value while `result` is an object that holds details of the barcode. In this example, an alert will be displayed for this new barcode.
-
-- `show()`: This method brings up the built-in UI of the `BarcodeScanner` object and starts scanning.
-
-### Run the example
-
-You can run the example deployed to the Dynamsoft Demo Server or test it with JSFiddle code editor. You will be asked to allow access to your camera, after which the video will be displayed on the page. After that, you can point the camera at a barcode to read it.
-
-When a barcode is decoded, you will see the result text pop up and the barcode location will be highlighted in the video feed.
-
-Alternatively, you can make a local test simply by taking the code in step 1, pasting it in a file with the name "hello-world.html" and open it in a browser.
-
-*Note*:
-
-If you open the web page as `file:///` or `http://` , the camera may not work correctly because the API getUserMedia usually requires HTTPS to access the camera.
-
-To make sure your web application can access the camera, please configure your web server to support HTTPS. The following links may help.
-
-1. NGINX: Configuring HTTPS servers
-2. IIS: Create a Self Signed Certificate in IIS
-3. Tomcat: Setting Up SSL on Tomcat in 5 minutes
-4. Node.js: npm tls
-
-If the test doesn't go as expected, you can [contact us](https://www.dynamsoft.com/contact/?ver=9.6.21&utm_source=guide).
-
-## Building your own page
-
-### Include the SDK
-
-#### Use a public CDN
-
-The simplest way to include the SDK is to use either the [jsDelivr](https://jsdelivr.com/) or [UNPKG](https://unpkg.com/) CDN. The "hello world" example above uses **jsDelivr**.
-
-- jsDelivr
-
-  ```html
-  
-  ```
-
-- UNPKG  
-
-  ```html
-  
-  ```
-
-#### Host the SDK yourself
-
-Besides using the public CDN, you can also download the SDK and host its files on your own server or a commercial CDN before including it in your application.
-
-Options to download the SDK:
-
-- From the website
-
-  Download the JavaScript Package
-
-- yarn
-
-  ```cmd
-  yarn add dynamsoft-javascript-barcode
-  ```
-
-- npm
-
-  ```cmd
-  npm install dynamsoft-javascript-barcode --save
-  ```
-
-Depending on how you downloaded the SDK and how you intend to use it, you can typically include it like this:
-
-```html
-
-```
-
-or
-
-```html
-
-```
-
-or
-
-```typescript
-import { BarcodeScanner } from 'dynamsoft-javascript-barcode';
-```
-
-**NOTE**
-
-* Some older web application servers do not set `.wasm` mimetype as `application/wasm`. Upgrade your web application servers, or define the mimetype yourselves:
-  * [Apache](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Apache_Configuration_htaccess#media_types_and_character_encodings)
-  * [IIS](https://docs.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/mimemap)
-  * [Nginx](https://www.nginx.com/resources/wiki/start/topics/examples/full/#mime-types)
-
-* To work properly, the SDK requires a few engine files, which are relatively large and may take quite a few seconds to download. We recommend that you set a longer cache time for these engine files, to maximize the performance of your web application.
-
-  ```cmd
-  Cache-Control: max-age=31536000
-  ```
-
-  Reference: [Cache-Control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control).
-
-### Configure the SDK
-
-Before using the SDK, you need to configure a few things.
-
-#### Specify the license
-
-The SDK requires a license to work, use the API `license` to specify a license key.
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-```
-
-To test the SDK, you can request a 30-day trial license via the Request a Trial License link.
-
-> If you register a Dynamsoft account and download the SDK from the official website, Dynamsoft will automatically generate a 30-day trial license for you, and put the license key into all the samples attached to the SDK.
-
-#### Specify the location of the "engine" files
-
-This is usually only required with frameworks like Angular or React, etc. where dbr.js is compiled into another file.
-
-The purpose is to tell the SDK where to find the engine files (\*.worker.js, \*.wasm.js and \*.wasm, etc.). The API is called `engineResourcePath`:
-
-```javascript
-//The following code uses the jsDelivr CDN, feel free to change it to your own location of these files
-Dynamsoft.DBR.BarcodeScanner.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.21/dist/";
-```
-
-### Interact with the SDK
-
-#### Create a `BarcodeScanner` object
-
-You can use one of two classes ( `BarcodeScanner` and `BarcodeReader` ) to interact with the SDK. `BarcodeReader` is a low-level class that processes images directly. `BarcodeScanner` , on the other hand, inherits from `BarcodeReader` and provides high-level APIs and a built-in GUI to allow continuous barcode scanning on video frames. We'll focus on `BarcodeScanner` in this guide.
-
-To use the SDK, we first create a `BarcodeScanner` object.
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-let scanner = null;
-try {
-    scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-} catch (ex) {
-    console.error(ex);
-}
-```
-
-Tip: When creating a `BarcodeScanner` object within a function which may be called more than once, it's best to use a "helper" variable to avoid double creation such as `pScanner` in the following code
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-let pScanner = null;
-document.getElementById('btn-scan').addEventListener('click', async () => {
-    try {
-        const scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance());
-    } catch (ex) {
-        console.error(ex);
-    }
-});
-```
-
-#### Customize the `BarcodeScanner` Settings (optional)
-
-Let's take a look at the following code snippets:
-
-```javascript
-// Sets which camera and what resolution to use
-let allCameras = await scanner.getAllCameras();
-await scanner.setCurrentCamera(allCameras[0].deviceId);
-await scanner.setResolution(1280, 720);
-```
-
-```javascript
-// Sets up the scanner behavior
-let scanSettings = await scanner.getScanSettings();
-// Disregards duplicated results found in a specified time period (in milliseconds).
-scanSettings.duplicateForgetTime = 5000; // The default is 3000
-// Sets a scan interval in milliseconds so the SDK may release the CPU from time to time.
-// (setting this value larger is a simple way to save battery power and reduce device heating).
-scanSettings.intervalTime = 100; // The default is 0.
-// Sets captureAndDecodeInParallel to false, which tells the SDK not to acquire the next frame while decoding the first.
-// This is another way to save battery power and is recommended on low-end phones. However, it does slow down the decoding speed.
-scanSettings.captureAndDecodeInParallel = false; // The default is true.
-await scanner.updateScanSettings(scanSettings);
-```
-
-```javascript
-// Uses one of the built-in RuntimeSetting templates: "single" (decode a single barcode, the default mode), "speed", "balance", "coverage", "dense" and "distance"
-await scanner.updateRuntimeSettings("speed");
-
-// Makes changes to the template. The code below demonstrates how to specify enabled symbologies
-let runtimeSettings = await scanner.getRuntimeSettings();
-runtimeSettings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_ONED | Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
-await scanner.updateRuntimeSettings(runtimeSettings);
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/yfkcajxz/)
-
-As you can see from the above code snippets, there are three types of configurations:
-
-- Customize the data source: This configuration includes which camera to use, the preferred resolution, etc. Learn more here.
-
-- `get/updateScanSettings`: Configures the behavior of the scanner which includes `duplicateForgetTime` and `intervalTime`, etc.
-
-- `get/updateRuntimeSettings`: Configures the decode engine with either a built-in template or a comprehensive `RuntimeSettings` object. For example, the following uses the built-in "speed" settings with updated `localizationModes`.
-
-  ```javascript
-  await barcodeScanner.updateRuntimeSettings("speed");
-  //await barcodeScanner.updateRuntimeSettings("balance"); //alternative
-  //await barcodeScanner.updateRuntimeSettings("coverage"); //alternative
-  let settings = await barcodeScanner.getRuntimeSettings();
-  settings.localizationModes = [
-      Dynamsoft.DBR.EnumLocalizationMode.LM_CONNECTED_BLOCKS,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_SCAN_DIRECTLY,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_LINES, 0, 0, 0, 0, 0
-  ];
-  await barcodeScanner.updateRuntimeSettings(settings);
-  ```
-
-  Try in [JSFiddle](https://jsfiddle.net/DynamsoftTeam/f24h8c1m/).
-
-  See also [settings samples](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/parameter-settings.html?ver=9.6.21&utm_source=guide).
-
-> Find the full list of the runtime settings here.
-
-### Customize the UI (optional)
-
-The built-in UI of the `BarcodeScanner` object is defined in the file `dist/dbr.ui.html` . There are a few ways to customize it:
-
-#### Modify the file `dist/dbr.ui.html` directly
-
-  This option is only possible when you [Host the SDK yourself](#host-the-sdk-yourself) instead of using a public CDN.
-
-#### Copy the file `dist/dbr.ui.html` to your application, modify it and use the the API `defaultUIElementURL` to set it as the default UI
-
-  ```javascript
-  // This line only takes effect before the method `createInstance()` is called.
-  Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "THE-URL-TO-THE-FILE";
-  ```
-
-#### Append the default UI element to your page, customize it before showing it
-
-  ```html
-  
    
-  ```
-
-  ```javascript
-  document.getElementById('div-ui-container').appendChild(scanner.getUIElement());
-  document.getElementsByClassName('dce-btn-close')[0].hidden = true; // Hide the close button
-  ```
-
-#### Build the UI element from scratch and connect it to the SDK with the API `setUIElement(HTMLElement)`
-
-1. **Embed the video**
-  
-  ```html
-  
    
-      
    
-  
    
-  
-  ```
-
-  > The video element will be created and appended to the DIV element with the class `dce-video-container` , make sure the class name is the same. Besides, the CSS property `position` of the DIV element must be either `relative` , `absolute` , `fixed` , or `sticky` .
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)
-
-2. **[Optional] Add the camera list and resolution list**
-
-  If the class names of the created select elements match the default class names, i.e. `dce-sel-camera` and `dce-sel-resolution` respectively, the SDK will automatically populate the lists and handle the camera/resolution switching.
-
-  ```html
-    
    
-        
    
-        
    
-    
    
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-  ```html
-  
    
-      
-      
-      
    
-      
    
-  
    
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)
-
-  > By default, only 3 hard-coded resolutions (1920 x 1080, 1280 x 720，640 x 480) are populated as options. You can show a customized set of options by hardcoding them.
-
-  ```html
-  
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)
-
-  > Generally, you need to provide a resolution that the camera supports. However, in case a camera does not support the specified resolution, it usually uses the closest supported resolution. As a result, the selected resolution may not be the actual resolution. In this case, add an option with the class name `dce-opt-gotResolution` (as shown above) and the SDK will automatically use it to show the **actual resolution**.
-
-  See the section of the Explore Features guide on [UI customization]({{site.features}}customize-the-ui.html?lang=js) to learn more.
-
-## API Documentation
-
-You can check out the detailed documentation about the APIs of the SDK at
-[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.21](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.21).
-
-## System Requirements
-
-DBR requires the following features to work:
-
-- Secure context (HTTPS deployment)
-
-  When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons
-  
-  - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.
-  > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.
-  
-  - Dynamsoft License requires a secure context to work.
-
-- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`
-
-  The above four features are required for the SDK to work.
-
-- `MediaDevices`/`getUserMedia`
-
-  This API is only required for in-browser video streaming. If a browser does not support this API, the [Single Frame Mode](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/BarcodeScanner.html?ver=9.6.21&utm_source=guide#singleframemode) will be used automatically. If the API exists but doesn't work correctly, the Single Frame Mode can be used as an alternative way to access the camera.
-
-- `getSettings`
-
-  This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.
-
-The following table is a list of supported browsers based on the above requirements:
-
-  Browser Name | Version
-  :-: | :-:
-  Chrome | v59+1
-  Firefox | v52+ (v55+ on Android/iOS1)
-  Edge2 | v16+
-  Safari3 | v11+
-
-  1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.
-  
-  3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.
-
-Apart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.
-
-## How to Upgrade
-
-If you want to upgrade the SDK from an old version to a newer one, please see [how to upgrade](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/upgrade-guide/?ver=9.6.21&utm_source=guide).
-
-## Release Notes
-
-Learn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).
-
-## Next Steps
-
-Now that you have got the SDK integrated, you can choose to move forward in the following directions
-
-1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)
-2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)
-3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)
diff --git a/programming-old/javascript/user-guide/index-v9.6.30.md b/programming-old/javascript/user-guide/index-v9.6.30.md
deleted file mode 100644
index fbc4603a..00000000
--- a/programming-old/javascript/user-guide/index-v9.6.30.md
+++ /dev/null
@@ -1,511 +0,0 @@
----
-layout: default-layout
-title: v9.6.30 User Guide - Dynamsoft Barcode Reader JavaScript Edition
-description: This is the user guide of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, javascript, js
-breadcrumbText: User Guide
-noTitleIndex: true
-needGenerateH3Content: true
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/index-v9.6.30.html
-schema: schemas/dynamsoft-facilitates-mit-research-schema.json
----
-
-
-
-# Barcode Reader for Your Website - User Guide
-
-[Dynamsoft Barcode Reader JavaScript Edition](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) (DBR-JS) is equipped with industry-leading algorithms for exceptional speed, accuracy and read rates in barcode reading. Using its well-designed API, you can turn your web page into a barcode scanner with just a few lines of code.
-
-![version](https://img.shields.io/npm/v/dynamsoft-javascript-barcode.svg)
-![downloads](https://img.shields.io/npm/dm/dynamsoft-javascript-barcode.svg)
-![jsdelivr](https://img.shields.io/jsdelivr/npm/hm/dynamsoft-javascript-barcode.svg)
-![vulnerabilities](https://img.shields.io/snyk/vulnerabilities/npm/dynamsoft-javascript-barcode.svg)
-
-Once the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.
-
-
-
-In this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.
-
-Table of Contents
-
-- [Hello World - Simplest Implementation](#hello-world---simplest-implementation)
-  - [Understand the code](#understand-the-code)
-  - [Run the example](#run-the-example)
-- [Building your own page](#building-your-own-page)
-  - [Include the SDK](#include-the-sdk)
-  - [Configure the SDK](#configure-the-sdk)
-  - [Interact with the SDK](#interact-with-the-sdk)
-  - [Customize the UI (optional)](#customize-the-ui-optional)
-- [API Documentation](#api-documentation)
-- [System Requirements](#system-requirements)
-- [How to Upgrade](#how-to-upgrade)
-- [Release Notes](#release-notes)
-- [Next Steps](#next-steps)
-
-**Popular Examples**
-
-- Hello World - [Guide](#hello-world---simplest-implementation) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.30/1.hello-world/1.hello-world.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.6.30&utm_source=guide)
-- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.30&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.30/1.hello-world/3.read-video-angular) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/3.read-video-angular/dist/hello-world/?ver=9.6.30&utm_source=guide)
-- React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.30&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.30/1.hello-world/4.read-video-react) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/4.read-video-react/build/?ver=9.6.30&utm_source=guide)
-- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.30&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.30/1.hello-world/6.read-video-vue3) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/6.read-video-vue3/dist/?ver=9.6.30&utm_source=guide)
-- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.30&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.30/1.hello-world/10.read-video-pwa) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/10.read-video-pwa/helloworld-pwa.html?ver=9.6.30&utm_source=guide)
-- WebView in Android and iOS - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.30/1.hello-world/14.read-video-webview)
-- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.6.30&utm_source=guide&&lang=js) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.30/4.use-case/2.read-a-drivers-license.html) \| [Run](https://demo.dynamsoft.com/samples/dbr/js/4.use-case/2.read-a-drivers-license.html?ver=9.6.30&utm_source=guide)
-- Fill A Form - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-barcodes-as-input.html?lang=js&&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.30/4.use-case/1.fill-a-form-with-barcode-reading.html) \| [Run](https://demo.dynamsoft.com/samples/dbr/js/4.use-case/1.fill-a-form-with-barcode-reading.html?ver=9.6.30&utm_source=guide)
-- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/4.use-case/3.show-result-texts-on-the-video.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/4.use-case/3.show-result-texts-on-the-video.html?ver=9.6.30&utm_source=guide)
-- Debug Camera and Collect Video Frame - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/debug.html?lang=js&&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.30/5.others/debug)
-
-You can also:
-
-- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.30&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)
-- Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.6.30&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.30/)
-
-## Hello World - Simplest Implementation
-
-Let's start with the "Hello World" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream.  
-
-- Basic Requirements
-  - Internet connection
-  - [A supported browser](#system-requirements)
-  - Camera access
-
-### Understand the code
-
-The complete code of the "Hello World" example is shown below
-
-```html
-
-
-
-
-    
-    
-
-
-
-```
-
-
    
-  
-    Code in Github
-  
-   
-  
-    Run via JSFiddle
-  
-   
-  
-    Run in Dynamsoft
-  
-
    
-
------
-
-#### About the code
-
-- The DBR-JS SDK is included in the code via the **jsDelivr** CDN.
-
-> In some rare cases, you might not be able to access the CDN. If this happens, you can use [https://download2.dynamsoft.com/dbr/dynamsoft-barcode-reader-js/dynamsoft-barcode-reader-js-9.6.30/dist/dbr.js](https://download2.dynamsoft.com/dbr/dynamsoft-barcode-reader-js/dynamsoft-barcode-reader-js-9.6.30/dist/dbr.js) for the test. However, please DO NOT use CDN of `download2.dynamsoft.com` in your production application because it is temporary. Instead, you can try [hosting the SDK yourself](#host-the-sdk-yourself).
-
-- `license`: This property specifies a license key. Note that the license "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" used in this example is an online license and requires network connection to work. Read more on [Specify the license](#specify-the-license).
-
-- `createInstance()`: This method creates a `BarcodeScanner` object. This object can read barcodes directly from a video input with the help of its interactive UI (hidden by default) and the MediaDevices interface.
-
-- `onFrameRead`: This event is triggered every time the SDK finishes scanning a video frame. The `results` object contains all the barcode results that the SDK have found on this frame. In this example, we print the results to the browser console.
-
-- `onUniqueRead`: This event is triggered when the SDK finds a new barcode, which is not a duplicate among multiple frames. `txt` holds the barcode text value while `result` is an object that holds details of the barcode. In this example, an alert will be displayed for this new barcode.
-
-- `show()`: This method brings up the built-in UI of the `BarcodeScanner` object and starts scanning.
-
-### Run the example
-
-You can run the example deployed to the Dynamsoft Demo Server or test it with JSFiddle code editor. You will be asked to allow access to your camera, after which the video will be displayed on the page. After that, you can point the camera at a barcode to read it.
-
-When a barcode is decoded, you will see the result text pop up and the barcode location will be highlighted in the video feed.
-
-Alternatively, you can make a local test simply by taking the code in step 1, pasting it in a file with the name "hello-world.html" and open it in a browser.
-
-*Note*:
-
-If you open the web page as `file:///` or `http://` , the camera may not work correctly because the API getUserMedia usually requires HTTPS to access the camera.
-
-To make sure your web application can access the camera, please configure your web server to support HTTPS. The following links may help.
-
-1. NGINX: Configuring HTTPS servers
-2. IIS: Create a Self Signed Certificate in IIS
-3. Tomcat: Setting Up SSL on Tomcat in 5 minutes
-4. Node.js: npm tls
-
-If the test doesn't go as expected, you can [contact us](https://www.dynamsoft.com/contact/?ver=9.6.30&utm_source=guide).
-
-## Building your own page
-
-### Include the SDK
-
-#### Use a public CDN
-
-The simplest way to include the SDK is to use either the [jsDelivr](https://jsdelivr.com/) or [UNPKG](https://unpkg.com/) CDN. The "hello world" example above uses **jsDelivr**.
-
-- jsDelivr
-
-  ```html
-  
-  ```
-
-- UNPKG  
-
-  ```html
-  
-  ```
-
-#### Host the SDK yourself
-
-Besides using the public CDN, you can also download the SDK and host its files on your own server or a commercial CDN before including it in your application.
-
-Options to download the SDK:
-
-- From the website
-
-  Download the JavaScript Package
-
-- yarn
-
-  ```cmd
-  yarn add dynamsoft-javascript-barcode
-  ```
-
-- npm
-
-  ```cmd
-  npm install dynamsoft-javascript-barcode --save
-  ```
-
-Depending on how you downloaded the SDK and how you intend to use it, you can typically include it like this:
-
-```html
-
-```
-
-or
-
-```html
-
-```
-
-or
-
-```typescript
-import { BarcodeScanner } from 'dynamsoft-javascript-barcode';
-```
-
-**NOTE**
-
-* Some older web application servers do not set `.wasm` mimetype as `application/wasm`. Upgrade your web application servers, or define the mimetype yourselves:
-  * [Apache](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Apache_Configuration_htaccess#media_types_and_character_encodings)
-  * [IIS](https://docs.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/mimemap)
-  * [Nginx](https://www.nginx.com/resources/wiki/start/topics/examples/full/#mime-types)
-
-* To work properly, the SDK requires a few engine files, which are relatively large and may take quite a few seconds to download. We recommend that you set a longer cache time for these engine files, to maximize the performance of your web application.
-
-  ```cmd
-  Cache-Control: max-age=31536000
-  ```
-
-  Reference: [Cache-Control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control).
-
-### Configure the SDK
-
-Before using the SDK, you need to configure a few things.
-
-#### Specify the license
-
-The SDK requires a license to work, use the API `license` to specify a license key.
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-```
-
-To test the SDK, you can request a 30-day trial license via the Request a Trial License link.
-
-> If you register a Dynamsoft account and download the SDK from the official website, Dynamsoft will automatically generate a 30-day trial license for you, and put the license key into all the samples attached to the SDK.
-
-#### Specify the location of the "engine" files
-
-This is usually only required with frameworks like Angular or React, etc. where dbr.js is compiled into another file.
-
-The purpose is to tell the SDK where to find the engine files (\*.worker.js, \*.wasm.js and \*.wasm, etc.). The API is called `engineResourcePath`:
-
-```javascript
-//The following code uses the jsDelivr CDN, feel free to change it to your own location of these files
-Dynamsoft.DBR.BarcodeScanner.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.30/dist/";
-```
-
-### Interact with the SDK
-
-#### Create a `BarcodeScanner` object
-
-You can use one of two classes ( `BarcodeScanner` and `BarcodeReader` ) to interact with the SDK. `BarcodeReader` is a low-level class that processes images directly. `BarcodeScanner` , on the other hand, inherits from `BarcodeReader` and provides high-level APIs and a built-in GUI to allow continuous barcode scanning on video frames. We'll focus on `BarcodeScanner` in this guide.
-
-To use the SDK, we first create a `BarcodeScanner` object.
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-let scanner = null;
-try {
-    scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-} catch (ex) {
-    console.error(ex);
-}
-```
-
-Tip: When creating a `BarcodeScanner` object within a function which may be called more than once, it's best to use a "helper" variable to avoid double creation such as `pScanner` in the following code
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-let pScanner = null;
-document.getElementById('btn-scan').addEventListener('click', async () => {
-    try {
-        const scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance());
-    } catch (ex) {
-        console.error(ex);
-    }
-});
-```
-
-#### Customize the `BarcodeScanner` Settings (optional)
-
-Let's take a look at the following code snippets:
-
-```javascript
-// Sets which camera and what resolution to use
-let allCameras = await scanner.getAllCameras();
-await scanner.setCurrentCamera(allCameras[0].deviceId);
-await scanner.setResolution(1280, 720);
-```
-
-```javascript
-// Sets up the scanner behavior
-let scanSettings = await scanner.getScanSettings();
-// Disregards duplicated results found in a specified time period (in milliseconds).
-scanSettings.duplicateForgetTime = 5000; // The default is 3000
-// Sets a scan interval in milliseconds so the SDK may release the CPU from time to time.
-// (setting this value larger is a simple way to save battery power and reduce device heating).
-scanSettings.intervalTime = 100; // The default is 0.
-// Sets captureAndDecodeInParallel to false, which tells the SDK not to acquire the next frame while decoding the first.
-// This is another way to save battery power and is recommended on low-end phones. However, it does slow down the decoding speed.
-scanSettings.captureAndDecodeInParallel = false; // The default is true.
-await scanner.updateScanSettings(scanSettings);
-```
-
-```javascript
-// Uses one of the built-in RuntimeSetting templates: "single" (decode a single barcode, the default mode), "speed", "balance", "coverage", "dense" and "distance"
-await scanner.updateRuntimeSettings("speed");
-
-// Makes changes to the template. The code below demonstrates how to specify enabled symbologies
-let runtimeSettings = await scanner.getRuntimeSettings();
-runtimeSettings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_ONED | Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
-await scanner.updateRuntimeSettings(runtimeSettings);
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/yfkcajxz/)
-
-As you can see from the above code snippets, there are three types of configurations:
-
-- Customize the data source: This configuration includes which camera to use, the preferred resolution, etc. Learn more here.
-
-- `get/updateScanSettings`: Configures the behavior of the scanner which includes `duplicateForgetTime` and `intervalTime`, etc.
-
-- `get/updateRuntimeSettings`: Configures the decode engine with either a built-in template or a comprehensive `RuntimeSettings` object. For example, the following uses the built-in "speed" settings with updated `localizationModes`.
-
-  ```javascript
-  await barcodeScanner.updateRuntimeSettings("speed");
-  //await barcodeScanner.updateRuntimeSettings("balance"); //alternative
-  //await barcodeScanner.updateRuntimeSettings("coverage"); //alternative
-  let settings = await barcodeScanner.getRuntimeSettings();
-  settings.localizationModes = [
-      Dynamsoft.DBR.EnumLocalizationMode.LM_CONNECTED_BLOCKS,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_SCAN_DIRECTLY,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_LINES, 0, 0, 0, 0, 0
-  ];
-  await barcodeScanner.updateRuntimeSettings(settings);
-  ```
-
-  Try in [JSFiddle](https://jsfiddle.net/DynamsoftTeam/f24h8c1m/).
-
-  See also [settings samples](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/parameter-settings.html?ver=9.6.30&utm_source=guide).
-
-> Find the full list of the runtime settings here.
-
-### Customize the UI (optional)
-
-The built-in UI of the `BarcodeScanner` object is defined in the file `dist/dbr.ui.html` . There are a few ways to customize it:
-
-#### Modify the file `dist/dbr.ui.html` directly
-
-  This option is only possible when you [Host the SDK yourself](#host-the-sdk-yourself) instead of using a public CDN.
-
-#### Copy the file `dist/dbr.ui.html` to your application, modify it and use the the API `defaultUIElementURL` to set it as the default UI
-
-  ```javascript
-  // This line only takes effect before the method `createInstance()` is called.
-  Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "THE-URL-TO-THE-FILE";
-  ```
-
-#### Append the default UI element to your page, customize it before showing it
-
-  ```html
-  
    
-  ```
-
-  ```javascript
-  document.getElementById('div-ui-container').appendChild(scanner.getUIElement());
-  document.getElementsByClassName('dce-btn-close')[0].hidden = true; // Hide the close button
-  ```
-
-#### Build the UI element from scratch and connect it to the SDK with the API `setUIElement(HTMLElement)`
-
-1. **Embed the video**
-  
-  ```html
-  
    
-      
    
-  
    
-  
-  ```
-
-  > The video element will be created and appended to the DIV element with the class `dce-video-container` , make sure the class name is the same. Besides, the CSS property `position` of the DIV element must be either `relative` , `absolute` , `fixed` , or `sticky` .
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)
-
-2. **[Optional] Add the camera list and resolution list**
-
-  If the class names of the created select elements match the default class names, i.e. `dce-sel-camera` and `dce-sel-resolution` respectively, the SDK will automatically populate the lists and handle the camera/resolution switching.
-
-  ```html
-    
    
-        
    
-        
    
-    
    
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-  ```html
-  
    
-      
-      
-      
    
-      
    
-  
    
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)
-
-  > By default, only 3 hard-coded resolutions (1920 x 1080, 1280 x 720，640 x 480) are populated as options. You can show a customized set of options by hardcoding them.
-
-  ```html
-  
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)
-
-  > Generally, you need to provide a resolution that the camera supports. However, in case a camera does not support the specified resolution, it usually uses the closest supported resolution. As a result, the selected resolution may not be the actual resolution. In this case, add an option with the class name `dce-opt-gotResolution` (as shown above) and the SDK will automatically use it to show the **actual resolution**.
-
-  See the section of the Explore Features guide on [UI customization]({{site.features}}customize-the-ui.html?lang=js) to learn more.
-
-## API Documentation
-
-You can check out the detailed documentation about the APIs of the SDK at
-[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.30](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.30).
-
-## System Requirements
-
-DBR requires the following features to work:
-
-- Secure context (HTTPS deployment)
-
-  When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons
-  
-  - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.
-  > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.
-  
-  - Dynamsoft License requires a secure context to work.
-
-- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`
-
-  The above four features are required for the SDK to work.
-
-- `MediaDevices`/`getUserMedia`
-
-  This API is only required for in-browser video streaming. If a browser does not support this API, the [Single Frame Mode](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/BarcodeScanner.html?ver=9.6.30&utm_source=guide#singleframemode) will be used automatically. If the API exists but doesn't work correctly, the Single Frame Mode can be used as an alternative way to access the camera.
-
-- `getSettings`
-
-  This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.
-
-The following table is a list of supported browsers based on the above requirements:
-
-  Browser Name | Version
-  :-: | :-:
-  Chrome | v59+1
-  Firefox | v52+ (v55+ on Android/iOS1)
-  Edge2 | v16+
-  Safari3 | v11+
-
-  1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.
-  
-  3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.
-
-Apart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.
-
-## How to Upgrade
-
-If you want to upgrade the SDK from an old version to a newer one, please see [how to upgrade](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/upgrade-guide/?ver=9.6.30&utm_source=guide).
-
-## Release Notes
-
-Learn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).
-
-## Next Steps
-
-Now that you have got the SDK integrated, you can choose to move forward in the following directions
-
-1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)
-2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)
-3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)
diff --git a/programming-old/javascript/user-guide/index-v9.6.31.md b/programming-old/javascript/user-guide/index-v9.6.31.md
deleted file mode 100644
index 4a1aae17..00000000
--- a/programming-old/javascript/user-guide/index-v9.6.31.md
+++ /dev/null
@@ -1,511 +0,0 @@
----
-layout: default-layout
-title: v9.6.31 User Guide - Dynamsoft Barcode Reader JavaScript Edition
-description: This is the user guide of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, javascript, js
-breadcrumbText: User Guide
-noTitleIndex: true
-needGenerateH3Content: true
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/index-v9.6.31.html
-schema: schemas/dynamsoft-facilitates-mit-research-schema.json
----
-
-
-
-# Barcode Reader for Your Website - User Guide
-
-[Dynamsoft Barcode Reader JavaScript Edition](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) (DBR-JS) is equipped with industry-leading algorithms for exceptional speed, accuracy and read rates in barcode reading. Using its well-designed API, you can turn your web page into a barcode scanner with just a few lines of code.
-
-![version](https://img.shields.io/npm/v/dynamsoft-javascript-barcode.svg)
-![downloads](https://img.shields.io/npm/dm/dynamsoft-javascript-barcode.svg)
-![jsdelivr](https://img.shields.io/jsdelivr/npm/hm/dynamsoft-javascript-barcode.svg)
-![vulnerabilities](https://img.shields.io/snyk/vulnerabilities/npm/dynamsoft-javascript-barcode.svg)
-
-Once the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.
-
-
-
-In this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.
-
-Table of Contents
-
-- [Hello World - Simplest Implementation](#hello-world---simplest-implementation)
-  - [Understand the code](#understand-the-code)
-  - [Run the example](#run-the-example)
-- [Building your own page](#building-your-own-page)
-  - [Include the SDK](#include-the-sdk)
-  - [Configure the SDK](#configure-the-sdk)
-  - [Interact with the SDK](#interact-with-the-sdk)
-  - [Customize the UI (optional)](#customize-the-ui-optional)
-- [API Documentation](#api-documentation)
-- [System Requirements](#system-requirements)
-- [How to Upgrade](#how-to-upgrade)
-- [Release Notes](#release-notes)
-- [Next Steps](#next-steps)
-
-**Popular Examples**
-
-- Hello World - [Guide](#hello-world---simplest-implementation) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.31/1.hello-world/1.hello-world.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.6.31&utm_source=guide)
-- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.31&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.31/1.hello-world/3.read-video-angular) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/3.read-video-angular/dist/hello-world/?ver=9.6.31&utm_source=guide)
-- React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.31&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.31/1.hello-world/4.read-video-react) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/4.read-video-react/build/?ver=9.6.31&utm_source=guide)
-- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.31&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.31/1.hello-world/6.read-video-vue3) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/6.read-video-vue3/dist/?ver=9.6.31&utm_source=guide)
-- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.31&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.31/1.hello-world/10.read-video-pwa) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/10.read-video-pwa/helloworld-pwa.html?ver=9.6.31&utm_source=guide)
-- WebView in Android and iOS - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.31/1.hello-world/14.read-video-webview)
-- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.6.31&utm_source=guide&&lang=js) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.31/4.use-case/2.read-a-drivers-license.html) \| [Run](https://demo.dynamsoft.com/samples/dbr/js/4.use-case/2.read-a-drivers-license.html?ver=9.6.31&utm_source=guide)
-- Fill A Form - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-barcodes-as-input.html?lang=js&&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.31/4.use-case/1.fill-a-form-with-barcode-reading.html) \| [Run](https://demo.dynamsoft.com/samples/dbr/js/4.use-case/1.fill-a-form-with-barcode-reading.html?ver=9.6.31&utm_source=guide)
-- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/4.use-case/3.show-result-texts-on-the-video.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/4.use-case/3.show-result-texts-on-the-video.html?ver=9.6.31&utm_source=guide)
-- Debug Camera and Collect Video Frame - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/debug.html?lang=js&&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.31/5.others/debug)
-
-You can also:
-
-- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.31&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)
-- Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.6.31&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.31/)
-
-## Hello World - Simplest Implementation
-
-Let's start with the "Hello World" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream.  
-
-- Basic Requirements
-  - Internet connection
-  - [A supported browser](#system-requirements)
-  - Camera access
-
-### Understand the code
-
-The complete code of the "Hello World" example is shown below
-
-```html
-
-
-
-
-    
-    
-
-
-
-```
-
-
    
-  
-    Code in Github
-  
-   
-  
-    Run via JSFiddle
-  
-   
-  
-    Run in Dynamsoft
-  
-
    
-
------
-
-#### About the code
-
-- The DBR-JS SDK is included in the code via the **jsDelivr** CDN.
-
-> In some rare cases, you might not be able to access the CDN. If this happens, you can use [https://download2.dynamsoft.com/dbr/dynamsoft-barcode-reader-js/dynamsoft-barcode-reader-js-9.6.31/dist/dbr.js](https://download2.dynamsoft.com/dbr/dynamsoft-barcode-reader-js/dynamsoft-barcode-reader-js-9.6.31/dist/dbr.js) for the test. However, please DO NOT use CDN of `download2.dynamsoft.com` in your production application because it is temporary. Instead, you can try [hosting the SDK yourself](#host-the-sdk-yourself).
-
-- `license`: This property specifies a license key. Note that the license "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" used in this example is an online license and requires network connection to work. Read more on [Specify the license](#specify-the-license).
-
-- `createInstance()`: This method creates a `BarcodeScanner` object. This object can read barcodes directly from a video input with the help of its interactive UI (hidden by default) and the MediaDevices interface.
-
-- `onFrameRead`: This event is triggered every time the SDK finishes scanning a video frame. The `results` object contains all the barcode results that the SDK have found on this frame. In this example, we print the results to the browser console.
-
-- `onUniqueRead`: This event is triggered when the SDK finds a new barcode, which is not a duplicate among multiple frames. `txt` holds the barcode text value while `result` is an object that holds details of the barcode. In this example, an alert will be displayed for this new barcode.
-
-- `show()`: This method brings up the built-in UI of the `BarcodeScanner` object and starts scanning.
-
-### Run the example
-
-You can run the example deployed to the Dynamsoft Demo Server or test it with JSFiddle code editor. You will be asked to allow access to your camera, after which the video will be displayed on the page. After that, you can point the camera at a barcode to read it.
-
-When a barcode is decoded, you will see the result text pop up and the barcode location will be highlighted in the video feed.
-
-Alternatively, you can make a local test simply by taking the code in step 1, pasting it in a file with the name "hello-world.html" and open it in a browser.
-
-*Note*:
-
-If you open the web page as `file:///` or `http://` , the camera may not work correctly because the API getUserMedia usually requires HTTPS to access the camera.
-
-To make sure your web application can access the camera, please configure your web server to support HTTPS. The following links may help.
-
-1. NGINX: Configuring HTTPS servers
-2. IIS: Create a Self Signed Certificate in IIS
-3. Tomcat: Setting Up SSL on Tomcat in 5 minutes
-4. Node.js: npm tls
-
-If the test doesn't go as expected, you can [contact us](https://www.dynamsoft.com/contact/?ver=9.6.31&utm_source=guide).
-
-## Building your own page
-
-### Include the SDK
-
-#### Use a public CDN
-
-The simplest way to include the SDK is to use either the [jsDelivr](https://jsdelivr.com/) or [UNPKG](https://unpkg.com/) CDN. The "hello world" example above uses **jsDelivr**.
-
-- jsDelivr
-
-  ```html
-  
-  ```
-
-- UNPKG  
-
-  ```html
-  
-  ```
-
-#### Host the SDK yourself
-
-Besides using the public CDN, you can also download the SDK and host its files on your own server or a commercial CDN before including it in your application.
-
-Options to download the SDK:
-
-- From the website
-
-  Download the JavaScript Package
-
-- yarn
-
-  ```cmd
-  yarn add dynamsoft-javascript-barcode
-  ```
-
-- npm
-
-  ```cmd
-  npm install dynamsoft-javascript-barcode --save
-  ```
-
-Depending on how you downloaded the SDK and how you intend to use it, you can typically include it like this:
-
-```html
-
-```
-
-or
-
-```html
-
-```
-
-or
-
-```typescript
-import { BarcodeScanner } from 'dynamsoft-javascript-barcode';
-```
-
-**NOTE**
-
-* Some older web application servers do not set `.wasm` mimetype as `application/wasm`. Upgrade your web application servers, or define the mimetype yourselves:
-  * [Apache](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Apache_Configuration_htaccess#media_types_and_character_encodings)
-  * [IIS](https://docs.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/mimemap)
-  * [Nginx](https://www.nginx.com/resources/wiki/start/topics/examples/full/#mime-types)
-
-* To work properly, the SDK requires a few engine files, which are relatively large and may take quite a few seconds to download. We recommend that you set a longer cache time for these engine files, to maximize the performance of your web application.
-
-  ```cmd
-  Cache-Control: max-age=31536000
-  ```
-
-  Reference: [Cache-Control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control).
-
-### Configure the SDK
-
-Before using the SDK, you need to configure a few things.
-
-#### Specify the license
-
-The SDK requires a license to work, use the API `license` to specify a license key.
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-```
-
-To test the SDK, you can request a 30-day trial license via the Request a Trial License link.
-
-> If you register a Dynamsoft account and download the SDK from the official website, Dynamsoft will automatically generate a 30-day trial license for you, and put the license key into all the samples attached to the SDK.
-
-#### Specify the location of the "engine" files
-
-This is usually only required with frameworks like Angular or React, etc. where dbr.js is compiled into another file.
-
-The purpose is to tell the SDK where to find the engine files (\*.worker.js, \*.wasm.js and \*.wasm, etc.). The API is called `engineResourcePath`:
-
-```javascript
-//The following code uses the jsDelivr CDN, feel free to change it to your own location of these files
-Dynamsoft.DBR.BarcodeScanner.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.31/dist/";
-```
-
-### Interact with the SDK
-
-#### Create a `BarcodeScanner` object
-
-You can use one of two classes ( `BarcodeScanner` and `BarcodeReader` ) to interact with the SDK. `BarcodeReader` is a low-level class that processes images directly. `BarcodeScanner` , on the other hand, inherits from `BarcodeReader` and provides high-level APIs and a built-in GUI to allow continuous barcode scanning on video frames. We'll focus on `BarcodeScanner` in this guide.
-
-To use the SDK, we first create a `BarcodeScanner` object.
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-let scanner = null;
-try {
-    scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-} catch (ex) {
-    console.error(ex);
-}
-```
-
-Tip: When creating a `BarcodeScanner` object within a function which may be called more than once, it's best to use a "helper" variable to avoid double creation such as `pScanner` in the following code
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-let pScanner = null;
-document.getElementById('btn-scan').addEventListener('click', async () => {
-    try {
-        const scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance());
-    } catch (ex) {
-        console.error(ex);
-    }
-});
-```
-
-#### Customize the `BarcodeScanner` Settings (optional)
-
-Let's take a look at the following code snippets:
-
-```javascript
-// Sets which camera and what resolution to use
-let allCameras = await scanner.getAllCameras();
-await scanner.setCurrentCamera(allCameras[0].deviceId);
-await scanner.setResolution(1280, 720);
-```
-
-```javascript
-// Sets up the scanner behavior
-let scanSettings = await scanner.getScanSettings();
-// Disregards duplicated results found in a specified time period (in milliseconds).
-scanSettings.duplicateForgetTime = 5000; // The default is 3000
-// Sets a scan interval in milliseconds so the SDK may release the CPU from time to time.
-// (setting this value larger is a simple way to save battery power and reduce device heating).
-scanSettings.intervalTime = 100; // The default is 0.
-// Sets captureAndDecodeInParallel to false, which tells the SDK not to acquire the next frame while decoding the first.
-// This is another way to save battery power and is recommended on low-end phones. However, it does slow down the decoding speed.
-scanSettings.captureAndDecodeInParallel = false; // The default is true.
-await scanner.updateScanSettings(scanSettings);
-```
-
-```javascript
-// Uses one of the built-in RuntimeSetting templates: "single" (decode a single barcode, the default mode), "speed", "balance", "coverage", "dense" and "distance"
-await scanner.updateRuntimeSettings("speed");
-
-// Makes changes to the template. The code below demonstrates how to specify enabled symbologies
-let runtimeSettings = await scanner.getRuntimeSettings();
-runtimeSettings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_ONED | Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
-await scanner.updateRuntimeSettings(runtimeSettings);
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/yfkcajxz/)
-
-As you can see from the above code snippets, there are three types of configurations:
-
-- Customize the data source: This configuration includes which camera to use, the preferred resolution, etc. Learn more here.
-
-- `get/updateScanSettings`: Configures the behavior of the scanner which includes `duplicateForgetTime` and `intervalTime`, etc.
-
-- `get/updateRuntimeSettings`: Configures the decode engine with either a built-in template or a comprehensive `RuntimeSettings` object. For example, the following uses the built-in "speed" settings with updated `localizationModes`.
-
-  ```javascript
-  await barcodeScanner.updateRuntimeSettings("speed");
-  //await barcodeScanner.updateRuntimeSettings("balance"); //alternative
-  //await barcodeScanner.updateRuntimeSettings("coverage"); //alternative
-  let settings = await barcodeScanner.getRuntimeSettings();
-  settings.localizationModes = [
-      Dynamsoft.DBR.EnumLocalizationMode.LM_CONNECTED_BLOCKS,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_SCAN_DIRECTLY,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_LINES, 0, 0, 0, 0, 0
-  ];
-  await barcodeScanner.updateRuntimeSettings(settings);
-  ```
-
-  Try in [JSFiddle](https://jsfiddle.net/DynamsoftTeam/f24h8c1m/).
-
-  See also [settings samples](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/parameter-settings.html?ver=9.6.31&utm_source=guide).
-
-> Find the full list of the runtime settings here.
-
-### Customize the UI (optional)
-
-The built-in UI of the `BarcodeScanner` object is defined in the file `dist/dbr.ui.html` . There are a few ways to customize it:
-
-#### Modify the file `dist/dbr.ui.html` directly
-
-  This option is only possible when you [Host the SDK yourself](#host-the-sdk-yourself) instead of using a public CDN.
-
-#### Copy the file `dist/dbr.ui.html` to your application, modify it and use the the API `defaultUIElementURL` to set it as the default UI
-
-  ```javascript
-  // This line only takes effect before the method `createInstance()` is called.
-  Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "THE-URL-TO-THE-FILE";
-  ```
-
-#### Append the default UI element to your page, customize it before showing it
-
-  ```html
-  
    
-  ```
-
-  ```javascript
-  document.getElementById('div-ui-container').appendChild(scanner.getUIElement());
-  document.getElementsByClassName('dce-btn-close')[0].hidden = true; // Hide the close button
-  ```
-
-#### Build the UI element from scratch and connect it to the SDK with the API `setUIElement(HTMLElement)`
-
-1. **Embed the video**
-  
-  ```html
-  
    
-      
    
-  
    
-  
-  ```
-
-  > The video element will be created and appended to the DIV element with the class `dce-video-container` , make sure the class name is the same. Besides, the CSS property `position` of the DIV element must be either `relative` , `absolute` , `fixed` , or `sticky` .
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)
-
-2. **[Optional] Add the camera list and resolution list**
-
-  If the class names of the created select elements match the default class names, i.e. `dce-sel-camera` and `dce-sel-resolution` respectively, the SDK will automatically populate the lists and handle the camera/resolution switching.
-
-  ```html
-    
    
-        
    
-        
    
-    
    
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-  ```html
-  
    
-      
-      
-      
    
-      
    
-  
    
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)
-
-  > By default, only 3 hard-coded resolutions (1920 x 1080, 1280 x 720，640 x 480) are populated as options. You can show a customized set of options by hardcoding them.
-
-  ```html
-  
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)
-
-  > Generally, you need to provide a resolution that the camera supports. However, in case a camera does not support the specified resolution, it usually uses the closest supported resolution. As a result, the selected resolution may not be the actual resolution. In this case, add an option with the class name `dce-opt-gotResolution` (as shown above) and the SDK will automatically use it to show the **actual resolution**.
-
-  See the section of the Explore Features guide on [UI customization]({{site.features}}customize-the-ui.html?lang=js) to learn more.
-
-## API Documentation
-
-You can check out the detailed documentation about the APIs of the SDK at
-[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.31](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.31).
-
-## System Requirements
-
-DBR requires the following features to work:
-
-- Secure context (HTTPS deployment)
-
-  When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons
-  
-  - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.
-  > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.
-  
-  - Dynamsoft License requires a secure context to work.
-
-- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`
-
-  The above four features are required for the SDK to work.
-
-- `MediaDevices`/`getUserMedia`
-
-  This API is only required for in-browser video streaming. If a browser does not support this API, the [Single Frame Mode](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/BarcodeScanner.html?ver=9.6.31&utm_source=guide#singleframemode) will be used automatically. If the API exists but doesn't work correctly, the Single Frame Mode can be used as an alternative way to access the camera.
-
-- `getSettings`
-
-  This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.
-
-The following table is a list of supported browsers based on the above requirements:
-
-  Browser Name | Version
-  :-: | :-:
-  Chrome | v59+1
-  Firefox | v52+ (v55+ on Android/iOS1)
-  Edge2 | v16+
-  Safari3 | v11+
-
-  1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.
-  
-  3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.
-
-Apart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.
-
-## How to Upgrade
-
-If you want to upgrade the SDK from an old version to a newer one, please see [how to upgrade](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/upgrade-guide/?ver=9.6.31&utm_source=guide).
-
-## Release Notes
-
-Learn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).
-
-## Next Steps
-
-Now that you have got the SDK integrated, you can choose to move forward in the following directions
-
-1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)
-2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)
-3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)
diff --git a/programming-old/javascript/user-guide/index-v9.6.32.md b/programming-old/javascript/user-guide/index-v9.6.32.md
deleted file mode 100644
index 3a8f94c2..00000000
--- a/programming-old/javascript/user-guide/index-v9.6.32.md
+++ /dev/null
@@ -1,511 +0,0 @@
----
-layout: default-layout
-title: v9.6.32 User Guide - Dynamsoft Barcode Reader JavaScript Edition
-description: This is the user guide of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, javascript, js
-breadcrumbText: User Guide
-noTitleIndex: true
-needGenerateH3Content: true
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/index-v9.6.32.html
-schema: schemas/dynamsoft-facilitates-mit-research-schema.json
----
-
-
-
-# Barcode Reader for Your Website - User Guide
-
-[Dynamsoft Barcode Reader JavaScript Edition](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) (DBR-JS) is equipped with industry-leading algorithms for exceptional speed, accuracy and read rates in barcode reading. Using its well-designed API, you can turn your web page into a barcode scanner with just a few lines of code.
-
-![version](https://img.shields.io/npm/v/dynamsoft-javascript-barcode.svg)
-![downloads](https://img.shields.io/npm/dm/dynamsoft-javascript-barcode.svg)
-![jsdelivr](https://img.shields.io/jsdelivr/npm/hm/dynamsoft-javascript-barcode.svg)
-![vulnerabilities](https://img.shields.io/snyk/vulnerabilities/npm/dynamsoft-javascript-barcode.svg)
-
-Once the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.
-
-
-
-In this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.
-
-Table of Contents
-
-- [Hello World - Simplest Implementation](#hello-world---simplest-implementation)
-  - [Understand the code](#understand-the-code)
-  - [Run the example](#run-the-example)
-- [Building your own page](#building-your-own-page)
-  - [Include the SDK](#include-the-sdk)
-  - [Configure the SDK](#configure-the-sdk)
-  - [Interact with the SDK](#interact-with-the-sdk)
-  - [Customize the UI (optional)](#customize-the-ui-optional)
-- [API Documentation](#api-documentation)
-- [System Requirements](#system-requirements)
-- [How to Upgrade](#how-to-upgrade)
-- [Release Notes](#release-notes)
-- [Next Steps](#next-steps)
-
-**Popular Examples**
-
-- Hello World - [Guide](#hello-world---simplest-implementation) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.32/1.hello-world/1.hello-world.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.6.32&utm_source=guide)
-- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.32&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.32/1.hello-world/3.read-video-angular) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/3.read-video-angular/dist/hello-world/?ver=9.6.32&utm_source=guide)
-- React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.32&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.32/1.hello-world/4.read-video-react) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/4.read-video-react/build/?ver=9.6.32&utm_source=guide)
-- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.32&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.32/1.hello-world/6.read-video-vue3) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/6.read-video-vue3/dist/?ver=9.6.32&utm_source=guide)
-- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.32&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.32/1.hello-world/10.read-video-pwa) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/10.read-video-pwa/helloworld-pwa.html?ver=9.6.32&utm_source=guide)
-- WebView in Android and iOS - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.32/1.hello-world/14.read-video-webview)
-- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.6.32&utm_source=guide&&lang=js) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.32/4.use-case/2.read-a-drivers-license.html) \| [Run](https://demo.dynamsoft.com/samples/dbr/js/4.use-case/2.read-a-drivers-license.html?ver=9.6.32&utm_source=guide)
-- Fill A Form - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-barcodes-as-input.html?lang=js&&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.32/4.use-case/1.fill-a-form-with-barcode-reading.html) \| [Run](https://demo.dynamsoft.com/samples/dbr/js/4.use-case/1.fill-a-form-with-barcode-reading.html?ver=9.6.32&utm_source=guide)
-- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/4.use-case/3.show-result-texts-on-the-video.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/4.use-case/3.show-result-texts-on-the-video.html?ver=9.6.32&utm_source=guide)
-- Debug Camera and Collect Video Frame - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/debug.html?lang=js&&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.32/5.others/debug)
-
-You can also:
-
-- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.32&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)
-- Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.6.32&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.32/)
-
-## Hello World - Simplest Implementation
-
-Let's start with the "Hello World" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream.  
-
-- Basic Requirements
-  - Internet connection
-  - [A supported browser](#system-requirements)
-  - Camera access
-
-### Understand the code
-
-The complete code of the "Hello World" example is shown below
-
-```html
-
-
-
-
-    
-    
-
-
-
-```
-
-
    
-  
-    Code in Github
-  
-   
-  
-    Run via JSFiddle
-  
-   
-  
-    Run in Dynamsoft
-  
-
    
-
------
-
-#### About the code
-
-- The DBR-JS SDK is included in the code via the **jsDelivr** CDN.
-
-> In some rare cases, you might not be able to access the CDN. If this happens, you can use [https://download2.dynamsoft.com/dbr/dynamsoft-barcode-reader-js/dynamsoft-barcode-reader-js-9.6.32/dist/dbr.js](https://download2.dynamsoft.com/dbr/dynamsoft-barcode-reader-js/dynamsoft-barcode-reader-js-9.6.32/dist/dbr.js) for the test. However, please DO NOT use CDN of `download2.dynamsoft.com` in your production application because it is temporary. Instead, you can try [hosting the SDK yourself](#host-the-sdk-yourself).
-
-- `license`: This property specifies a license key. Note that the license "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" used in this example is an online license and requires network connection to work. Read more on [Specify the license](#specify-the-license).
-
-- `createInstance()`: This method creates a `BarcodeScanner` object. This object can read barcodes directly from a video input with the help of its interactive UI (hidden by default) and the MediaDevices interface.
-
-- `onFrameRead`: This event is triggered every time the SDK finishes scanning a video frame. The `results` object contains all the barcode results that the SDK have found on this frame. In this example, we print the results to the browser console.
-
-- `onUniqueRead`: This event is triggered when the SDK finds a new barcode, which is not a duplicate among multiple frames. `txt` holds the barcode text value while `result` is an object that holds details of the barcode. In this example, an alert will be displayed for this new barcode.
-
-- `show()`: This method brings up the built-in UI of the `BarcodeScanner` object and starts scanning.
-
-### Run the example
-
-You can run the example deployed to the Dynamsoft Demo Server or test it with JSFiddle code editor. You will be asked to allow access to your camera, after which the video will be displayed on the page. After that, you can point the camera at a barcode to read it.
-
-When a barcode is decoded, you will see the result text pop up and the barcode location will be highlighted in the video feed.
-
-Alternatively, you can make a local test simply by taking the code in step 1, pasting it in a file with the name "hello-world.html" and open it in a browser.
-
-*Note*:
-
-If you open the web page as `file:///` or `http://` , the camera may not work correctly because the API getUserMedia usually requires HTTPS to access the camera.
-
-To make sure your web application can access the camera, please configure your web server to support HTTPS. The following links may help.
-
-1. NGINX: Configuring HTTPS servers
-2. IIS: Create a Self Signed Certificate in IIS
-3. Tomcat: Setting Up SSL on Tomcat in 5 minutes
-4. Node.js: npm tls
-
-If the test doesn't go as expected, you can [contact us](https://www.dynamsoft.com/contact/?ver=9.6.32&utm_source=guide).
-
-## Building your own page
-
-### Include the SDK
-
-#### Use a public CDN
-
-The simplest way to include the SDK is to use either the [jsDelivr](https://jsdelivr.com/) or [UNPKG](https://unpkg.com/) CDN. The "hello world" example above uses **jsDelivr**.
-
-- jsDelivr
-
-  ```html
-  
-  ```
-
-- UNPKG  
-
-  ```html
-  
-  ```
-
-#### Host the SDK yourself
-
-Besides using the public CDN, you can also download the SDK and host its files on your own server or a commercial CDN before including it in your application.
-
-Options to download the SDK:
-
-- From the website
-
-  Download the JavaScript Package
-
-- yarn
-
-  ```cmd
-  yarn add dynamsoft-javascript-barcode
-  ```
-
-- npm
-
-  ```cmd
-  npm install dynamsoft-javascript-barcode --save
-  ```
-
-Depending on how you downloaded the SDK and how you intend to use it, you can typically include it like this:
-
-```html
-
-```
-
-or
-
-```html
-
-```
-
-or
-
-```typescript
-import { BarcodeScanner } from 'dynamsoft-javascript-barcode';
-```
-
-**NOTE**
-
-* Some older web application servers do not set `.wasm` mimetype as `application/wasm`. Upgrade your web application servers, or define the mimetype yourselves:
-  * [Apache](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Apache_Configuration_htaccess#media_types_and_character_encodings)
-  * [IIS](https://docs.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/mimemap)
-  * [Nginx](https://www.nginx.com/resources/wiki/start/topics/examples/full/#mime-types)
-
-* To work properly, the SDK requires a few engine files, which are relatively large and may take quite a few seconds to download. We recommend that you set a longer cache time for these engine files, to maximize the performance of your web application.
-
-  ```cmd
-  Cache-Control: max-age=31536000
-  ```
-
-  Reference: [Cache-Control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control).
-
-### Configure the SDK
-
-Before using the SDK, you need to configure a few things.
-
-#### Specify the license
-
-The SDK requires a license to work, use the API `license` to specify a license key.
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-```
-
-To test the SDK, you can request a 30-day trial license via the Request a Trial License link.
-
-> If you register a Dynamsoft account and download the SDK from the official website, Dynamsoft will automatically generate a 30-day trial license for you, and put the license key into all the samples attached to the SDK.
-
-#### Specify the location of the "engine" files
-
-This is usually only required with frameworks like Angular or React, etc. where dbr.js is compiled into another file.
-
-The purpose is to tell the SDK where to find the engine files (\*.worker.js, \*.wasm.js and \*.wasm, etc.). The API is called `engineResourcePath`:
-
-```javascript
-//The following code uses the jsDelivr CDN, feel free to change it to your own location of these files
-Dynamsoft.DBR.BarcodeScanner.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.32/dist/";
-```
-
-### Interact with the SDK
-
-#### Create a `BarcodeScanner` object
-
-You can use one of two classes ( `BarcodeScanner` and `BarcodeReader` ) to interact with the SDK. `BarcodeReader` is a low-level class that processes images directly. `BarcodeScanner` , on the other hand, inherits from `BarcodeReader` and provides high-level APIs and a built-in GUI to allow continuous barcode scanning on video frames. We'll focus on `BarcodeScanner` in this guide.
-
-To use the SDK, we first create a `BarcodeScanner` object.
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-let scanner = null;
-try {
-    scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-} catch (ex) {
-    console.error(ex);
-}
-```
-
-Tip: When creating a `BarcodeScanner` object within a function which may be called more than once, it's best to use a "helper" variable to avoid double creation such as `pScanner` in the following code
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-let pScanner = null;
-document.getElementById('btn-scan').addEventListener('click', async () => {
-    try {
-        const scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance());
-    } catch (ex) {
-        console.error(ex);
-    }
-});
-```
-
-#### Customize the `BarcodeScanner` Settings (optional)
-
-Let's take a look at the following code snippets:
-
-```javascript
-// Sets which camera and what resolution to use
-let allCameras = await scanner.getAllCameras();
-await scanner.setCurrentCamera(allCameras[0].deviceId);
-await scanner.setResolution(1280, 720);
-```
-
-```javascript
-// Sets up the scanner behavior
-let scanSettings = await scanner.getScanSettings();
-// Disregards duplicated results found in a specified time period (in milliseconds).
-scanSettings.duplicateForgetTime = 5000; // The default is 3000
-// Sets a scan interval in milliseconds so the SDK may release the CPU from time to time.
-// (setting this value larger is a simple way to save battery power and reduce device heating).
-scanSettings.intervalTime = 100; // The default is 0.
-// Sets captureAndDecodeInParallel to false, which tells the SDK not to acquire the next frame while decoding the first.
-// This is another way to save battery power and is recommended on low-end phones. However, it does slow down the decoding speed.
-scanSettings.captureAndDecodeInParallel = false; // The default is true.
-await scanner.updateScanSettings(scanSettings);
-```
-
-```javascript
-// Uses one of the built-in RuntimeSetting templates: "single" (decode a single barcode, the default mode), "speed", "balance", "coverage", "dense" and "distance"
-await scanner.updateRuntimeSettings("speed");
-
-// Makes changes to the template. The code below demonstrates how to specify enabled symbologies
-let runtimeSettings = await scanner.getRuntimeSettings();
-runtimeSettings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_ONED | Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
-await scanner.updateRuntimeSettings(runtimeSettings);
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/yfkcajxz/)
-
-As you can see from the above code snippets, there are three types of configurations:
-
-- Customize the data source: This configuration includes which camera to use, the preferred resolution, etc. Learn more here.
-
-- `get/updateScanSettings`: Configures the behavior of the scanner which includes `duplicateForgetTime` and `intervalTime`, etc.
-
-- `get/updateRuntimeSettings`: Configures the decode engine with either a built-in template or a comprehensive `RuntimeSettings` object. For example, the following uses the built-in "speed" settings with updated `localizationModes`.
-
-  ```javascript
-  await barcodeScanner.updateRuntimeSettings("speed");
-  //await barcodeScanner.updateRuntimeSettings("balance"); //alternative
-  //await barcodeScanner.updateRuntimeSettings("coverage"); //alternative
-  let settings = await barcodeScanner.getRuntimeSettings();
-  settings.localizationModes = [
-      Dynamsoft.DBR.EnumLocalizationMode.LM_CONNECTED_BLOCKS,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_SCAN_DIRECTLY,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_LINES, 0, 0, 0, 0, 0
-  ];
-  await barcodeScanner.updateRuntimeSettings(settings);
-  ```
-
-  Try in [JSFiddle](https://jsfiddle.net/DynamsoftTeam/f24h8c1m/).
-
-  See also [settings samples](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/parameter-settings.html?ver=9.6.32&utm_source=guide).
-
-> Find the full list of the runtime settings here.
-
-### Customize the UI (optional)
-
-The built-in UI of the `BarcodeScanner` object is defined in the file `dist/dbr.ui.html` . There are a few ways to customize it:
-
-#### Modify the file `dist/dbr.ui.html` directly
-
-  This option is only possible when you [Host the SDK yourself](#host-the-sdk-yourself) instead of using a public CDN.
-
-#### Copy the file `dist/dbr.ui.html` to your application, modify it and use the the API `defaultUIElementURL` to set it as the default UI
-
-  ```javascript
-  // This line only takes effect before the method `createInstance()` is called.
-  Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "THE-URL-TO-THE-FILE";
-  ```
-
-#### Append the default UI element to your page, customize it before showing it
-
-  ```html
-  
    
-  ```
-
-  ```javascript
-  document.getElementById('div-ui-container').appendChild(scanner.getUIElement());
-  document.getElementsByClassName('dce-btn-close')[0].hidden = true; // Hide the close button
-  ```
-
-#### Build the UI element from scratch and connect it to the SDK with the API `setUIElement(HTMLElement)`
-
-1. **Embed the video**
-  
-  ```html
-  
    
-      
    
-  
    
-  
-  ```
-
-  > The video element will be created and appended to the DIV element with the class `dce-video-container` , make sure the class name is the same. Besides, the CSS property `position` of the DIV element must be either `relative` , `absolute` , `fixed` , or `sticky` .
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)
-
-2. **[Optional] Add the camera list and resolution list**
-
-  If the class names of the created select elements match the default class names, i.e. `dce-sel-camera` and `dce-sel-resolution` respectively, the SDK will automatically populate the lists and handle the camera/resolution switching.
-
-  ```html
-    
    
-        
    
-        
    
-    
    
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-  ```html
-  
    
-      
-      
-      
    
-      
    
-  
    
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)
-
-  > By default, only 3 hard-coded resolutions (1920 x 1080, 1280 x 720，640 x 480) are populated as options. You can show a customized set of options by hardcoding them.
-
-  ```html
-  
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)
-
-  > Generally, you need to provide a resolution that the camera supports. However, in case a camera does not support the specified resolution, it usually uses the closest supported resolution. As a result, the selected resolution may not be the actual resolution. In this case, add an option with the class name `dce-opt-gotResolution` (as shown above) and the SDK will automatically use it to show the **actual resolution**.
-
-  See the section of the Explore Features guide on [UI customization]({{site.features}}customize-the-ui.html?lang=js) to learn more.
-
-## API Documentation
-
-You can check out the detailed documentation about the APIs of the SDK at
-[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.32](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.32).
-
-## System Requirements
-
-DBR requires the following features to work:
-
-- Secure context (HTTPS deployment)
-
-  When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons
-  
-  - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.
-  > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.
-  
-  - Dynamsoft License requires a secure context to work.
-
-- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`
-
-  The above four features are required for the SDK to work.
-
-- `MediaDevices`/`getUserMedia`
-
-  This API is only required for in-browser video streaming. If a browser does not support this API, the [Single Frame Mode](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/BarcodeScanner.html?ver=9.6.32&utm_source=guide#singleframemode) will be used automatically. If the API exists but doesn't work correctly, the Single Frame Mode can be used as an alternative way to access the camera.
-
-- `getSettings`
-
-  This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.
-
-The following table is a list of supported browsers based on the above requirements:
-
-  Browser Name | Version
-  :-: | :-:
-  Chrome | v59+1
-  Firefox | v52+ (v55+ on Android/iOS1)
-  Edge2 | v16+
-  Safari3 | v11+
-
-  1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.
-  
-  3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.
-
-Apart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.
-
-## How to Upgrade
-
-If you want to upgrade the SDK from an old version to a newer one, please see [how to upgrade](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/upgrade-guide/?ver=9.6.32&utm_source=guide).
-
-## Release Notes
-
-Learn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).
-
-## Next Steps
-
-Now that you have got the SDK integrated, you can choose to move forward in the following directions
-
-1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)
-2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)
-3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)
diff --git a/programming-old/javascript/user-guide/index-v9.6.33.md b/programming-old/javascript/user-guide/index-v9.6.33.md
deleted file mode 100644
index 8dcafbf4..00000000
--- a/programming-old/javascript/user-guide/index-v9.6.33.md
+++ /dev/null
@@ -1,511 +0,0 @@
----
-layout: default-layout
-title: v9.6.33 User Guide - Dynamsoft Barcode Reader JavaScript Edition
-description: This is the user guide of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, javascript, js
-breadcrumbText: User Guide
-noTitleIndex: true
-needGenerateH3Content: true
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/index-v9.6.33.html
-schema: schemas/dynamsoft-facilitates-mit-research-schema.json
----
-
-
-
-# Barcode Reader for Your Website - User Guide
-
-[Dynamsoft Barcode Reader JavaScript Edition](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) (DBR-JS) is equipped with industry-leading algorithms for exceptional speed, accuracy and read rates in barcode reading. Using its well-designed API, you can turn your web page into a barcode scanner with just a few lines of code.
-
-![version](https://img.shields.io/npm/v/dynamsoft-javascript-barcode.svg)
-![downloads](https://img.shields.io/npm/dm/dynamsoft-javascript-barcode.svg)
-![jsdelivr](https://img.shields.io/jsdelivr/npm/hm/dynamsoft-javascript-barcode.svg)
-![vulnerabilities](https://img.shields.io/snyk/vulnerabilities/npm/dynamsoft-javascript-barcode.svg)
-
-Once the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.
-
-
-
-In this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.
-
-Table of Contents
-
-- [Hello World - Simplest Implementation](#hello-world---simplest-implementation)
-  - [Understand the code](#understand-the-code)
-  - [Run the example](#run-the-example)
-- [Building your own page](#building-your-own-page)
-  - [Include the SDK](#include-the-sdk)
-  - [Configure the SDK](#configure-the-sdk)
-  - [Interact with the SDK](#interact-with-the-sdk)
-  - [Customize the UI (optional)](#customize-the-ui-optional)
-- [API Documentation](#api-documentation)
-- [System Requirements](#system-requirements)
-- [How to Upgrade](#how-to-upgrade)
-- [Release Notes](#release-notes)
-- [Next Steps](#next-steps)
-
-**Popular Examples**
-
-- Hello World - [Guide](#hello-world---simplest-implementation) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.33/1.hello-world/1.hello-world.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.6.33&utm_source=guide)
-- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.33&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.33/1.hello-world/3.read-video-angular) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/3.read-video-angular/dist/hello-world/?ver=9.6.33&utm_source=guide)
-- React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.33&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.33/1.hello-world/4.read-video-react) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/4.read-video-react/build/?ver=9.6.33&utm_source=guide)
-- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.33&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.33/1.hello-world/6.read-video-vue3) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/6.read-video-vue3/dist/?ver=9.6.33&utm_source=guide)
-- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.33&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.33/1.hello-world/10.read-video-pwa) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/10.read-video-pwa/helloworld-pwa.html?ver=9.6.33&utm_source=guide)
-- WebView in Android and iOS - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.33/1.hello-world/14.read-video-webview)
-- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.6.33&utm_source=guide&&lang=js) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.33/4.use-case/2.read-a-drivers-license.html) \| [Run](https://demo.dynamsoft.com/samples/dbr/js/4.use-case/2.read-a-drivers-license.html?ver=9.6.33&utm_source=guide)
-- Fill A Form - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-barcodes-as-input.html?lang=js&&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.33/4.use-case/1.fill-a-form-with-barcode-reading.html) \| [Run](https://demo.dynamsoft.com/samples/dbr/js/4.use-case/1.fill-a-form-with-barcode-reading.html?ver=9.6.33&utm_source=guide)
-- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/4.use-case/3.show-result-texts-on-the-video.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/4.use-case/3.show-result-texts-on-the-video.html?ver=9.6.33&utm_source=guide)
-- Debug Camera and Collect Video Frame - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/debug.html?lang=js&&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.33/5.others/debug)
-
-You can also:
-
-- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.33&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)
-- Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.6.33&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.33/)
-
-## Hello World - Simplest Implementation
-
-Let's start with the "Hello World" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream.  
-
-- Basic Requirements
-  - Internet connection
-  - [A supported browser](#system-requirements)
-  - Camera access
-
-### Understand the code
-
-The complete code of the "Hello World" example is shown below
-
-```html
-
-
-
-
-    
-    
-
-
-
-```
-
-
    
-  
-    Code in Github
-  
-   
-  
-    Run via JSFiddle
-  
-   
-  
-    Run in Dynamsoft
-  
-
    
-
------
-
-#### About the code
-
-- The DBR-JS SDK is included in the code via the **jsDelivr** CDN.
-
-> In some rare cases, you might not be able to access the CDN. If this happens, you can use [https://download2.dynamsoft.com/dbr/dynamsoft-barcode-reader-js/dynamsoft-barcode-reader-js-9.6.33/dist/dbr.js](https://download2.dynamsoft.com/dbr/dynamsoft-barcode-reader-js/dynamsoft-barcode-reader-js-9.6.33/dist/dbr.js) for the test. However, please DO NOT use CDN of `download2.dynamsoft.com` in your production application because it is temporary. Instead, you can try [hosting the SDK yourself](#host-the-sdk-yourself).
-
-- `license`: This property specifies a license key. Note that the license "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" used in this example is an online license and requires network connection to work. Read more on [Specify the license](#specify-the-license).
-
-- `createInstance()`: This method creates a `BarcodeScanner` object. This object can read barcodes directly from a video input with the help of its interactive UI (hidden by default) and the MediaDevices interface.
-
-- `onFrameRead`: This event is triggered every time the SDK finishes scanning a video frame. The `results` object contains all the barcode results that the SDK have found on this frame. In this example, we print the results to the browser console.
-
-- `onUniqueRead`: This event is triggered when the SDK finds a new barcode, which is not a duplicate among multiple frames. `txt` holds the barcode text value while `result` is an object that holds details of the barcode. In this example, an alert will be displayed for this new barcode.
-
-- `show()`: This method brings up the built-in UI of the `BarcodeScanner` object and starts scanning.
-
-### Run the example
-
-You can run the example deployed to the Dynamsoft Demo Server or test it with JSFiddle code editor. You will be asked to allow access to your camera, after which the video will be displayed on the page. After that, you can point the camera at a barcode to read it.
-
-When a barcode is decoded, you will see the result text pop up and the barcode location will be highlighted in the video feed.
-
-Alternatively, you can make a local test simply by taking the code in step 1, pasting it in a file with the name "hello-world.html" and open it in a browser.
-
-*Note*:
-
-If you open the web page as `file:///` or `http://` , the camera may not work correctly because the API getUserMedia usually requires HTTPS to access the camera.
-
-To make sure your web application can access the camera, please configure your web server to support HTTPS. The following links may help.
-
-1. NGINX: Configuring HTTPS servers
-2. IIS: Create a Self Signed Certificate in IIS
-3. Tomcat: Setting Up SSL on Tomcat in 5 minutes
-4. Node.js: npm tls
-
-If the test doesn't go as expected, you can [contact us](https://www.dynamsoft.com/contact/?ver=9.6.33&utm_source=guide).
-
-## Building your own page
-
-### Include the SDK
-
-#### Use a public CDN
-
-The simplest way to include the SDK is to use either the [jsDelivr](https://jsdelivr.com/) or [UNPKG](https://unpkg.com/) CDN. The "hello world" example above uses **jsDelivr**.
-
-- jsDelivr
-
-  ```html
-  
-  ```
-
-- UNPKG  
-
-  ```html
-  
-  ```
-
-#### Host the SDK yourself
-
-Besides using the public CDN, you can also download the SDK and host its files on your own server or a commercial CDN before including it in your application.
-
-Options to download the SDK:
-
-- From the website
-
-  Download the JavaScript Package
-
-- yarn
-
-  ```cmd
-  yarn add dynamsoft-javascript-barcode
-  ```
-
-- npm
-
-  ```cmd
-  npm install dynamsoft-javascript-barcode --save
-  ```
-
-Depending on how you downloaded the SDK and how you intend to use it, you can typically include it like this:
-
-```html
-
-```
-
-or
-
-```html
-
-```
-
-or
-
-```typescript
-import { BarcodeScanner } from 'dynamsoft-javascript-barcode';
-```
-
-**NOTE**
-
-* Some older web application servers do not set `.wasm` mimetype as `application/wasm`. Upgrade your web application servers, or define the mimetype yourselves:
-  * [Apache](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Apache_Configuration_htaccess#media_types_and_character_encodings)
-  * [IIS](https://docs.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/mimemap)
-  * [Nginx](https://www.nginx.com/resources/wiki/start/topics/examples/full/#mime-types)
-
-* To work properly, the SDK requires a few engine files, which are relatively large and may take quite a few seconds to download. We recommend that you set a longer cache time for these engine files, to maximize the performance of your web application.
-
-  ```cmd
-  Cache-Control: max-age=31536000
-  ```
-
-  Reference: [Cache-Control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control).
-
-### Configure the SDK
-
-Before using the SDK, you need to configure a few things.
-
-#### Specify the license
-
-The SDK requires a license to work, use the API `license` to specify a license key.
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-```
-
-To test the SDK, you can request a 30-day trial license via the Request a Trial License link.
-
-> If you register a Dynamsoft account and download the SDK from the official website, Dynamsoft will automatically generate a 30-day trial license for you, and put the license key into all the samples attached to the SDK.
-
-#### Specify the location of the "engine" files
-
-This is usually only required with frameworks like Angular or React, etc. where dbr.js is compiled into another file.
-
-The purpose is to tell the SDK where to find the engine files (\*.worker.js, \*.wasm.js and \*.wasm, etc.). The API is called `engineResourcePath`:
-
-```javascript
-//The following code uses the jsDelivr CDN, feel free to change it to your own location of these files
-Dynamsoft.DBR.BarcodeScanner.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.33/dist/";
-```
-
-### Interact with the SDK
-
-#### Create a `BarcodeScanner` object
-
-You can use one of two classes ( `BarcodeScanner` and `BarcodeReader` ) to interact with the SDK. `BarcodeReader` is a low-level class that processes images directly. `BarcodeScanner` , on the other hand, inherits from `BarcodeReader` and provides high-level APIs and a built-in GUI to allow continuous barcode scanning on video frames. We'll focus on `BarcodeScanner` in this guide.
-
-To use the SDK, we first create a `BarcodeScanner` object.
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-let scanner = null;
-try {
-    scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-} catch (ex) {
-    console.error(ex);
-}
-```
-
-Tip: When creating a `BarcodeScanner` object within a function which may be called more than once, it's best to use a "helper" variable to avoid double creation such as `pScanner` in the following code
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-let pScanner = null;
-document.getElementById('btn-scan').addEventListener('click', async () => {
-    try {
-        const scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance());
-    } catch (ex) {
-        console.error(ex);
-    }
-});
-```
-
-#### Customize the `BarcodeScanner` Settings (optional)
-
-Let's take a look at the following code snippets:
-
-```javascript
-// Sets which camera and what resolution to use
-let allCameras = await scanner.getAllCameras();
-await scanner.setCurrentCamera(allCameras[0].deviceId);
-await scanner.setResolution(1280, 720);
-```
-
-```javascript
-// Sets up the scanner behavior
-let scanSettings = await scanner.getScanSettings();
-// Disregards duplicated results found in a specified time period (in milliseconds).
-scanSettings.duplicateForgetTime = 5000; // The default is 3000
-// Sets a scan interval in milliseconds so the SDK may release the CPU from time to time.
-// (setting this value larger is a simple way to save battery power and reduce device heating).
-scanSettings.intervalTime = 100; // The default is 0.
-// Sets captureAndDecodeInParallel to false, which tells the SDK not to acquire the next frame while decoding the first.
-// This is another way to save battery power and is recommended on low-end phones. However, it does slow down the decoding speed.
-scanSettings.captureAndDecodeInParallel = false; // The default is true.
-await scanner.updateScanSettings(scanSettings);
-```
-
-```javascript
-// Uses one of the built-in RuntimeSetting templates: "single" (decode a single barcode, the default mode), "speed", "balance", "coverage", "dense" and "distance"
-await scanner.updateRuntimeSettings("speed");
-
-// Makes changes to the template. The code below demonstrates how to specify enabled symbologies
-let runtimeSettings = await scanner.getRuntimeSettings();
-runtimeSettings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_ONED | Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
-await scanner.updateRuntimeSettings(runtimeSettings);
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/yfkcajxz/)
-
-As you can see from the above code snippets, there are three types of configurations:
-
-- Customize the data source: This configuration includes which camera to use, the preferred resolution, etc. Learn more here.
-
-- `get/updateScanSettings`: Configures the behavior of the scanner which includes `duplicateForgetTime` and `intervalTime`, etc.
-
-- `get/updateRuntimeSettings`: Configures the decode engine with either a built-in template or a comprehensive `RuntimeSettings` object. For example, the following uses the built-in "speed" settings with updated `localizationModes`.
-
-  ```javascript
-  await barcodeScanner.updateRuntimeSettings("speed");
-  //await barcodeScanner.updateRuntimeSettings("balance"); //alternative
-  //await barcodeScanner.updateRuntimeSettings("coverage"); //alternative
-  let settings = await barcodeScanner.getRuntimeSettings();
-  settings.localizationModes = [
-      Dynamsoft.DBR.EnumLocalizationMode.LM_CONNECTED_BLOCKS,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_SCAN_DIRECTLY,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_LINES, 0, 0, 0, 0, 0
-  ];
-  await barcodeScanner.updateRuntimeSettings(settings);
-  ```
-
-  Try in [JSFiddle](https://jsfiddle.net/DynamsoftTeam/f24h8c1m/).
-
-  See also [settings samples](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/parameter-settings.html?ver=9.6.33&utm_source=guide).
-
-> Find the full list of the runtime settings here.
-
-### Customize the UI (optional)
-
-The built-in UI of the `BarcodeScanner` object is defined in the file `dist/dbr.ui.html` . There are a few ways to customize it:
-
-#### Modify the file `dist/dbr.ui.html` directly
-
-  This option is only possible when you [Host the SDK yourself](#host-the-sdk-yourself) instead of using a public CDN.
-
-#### Copy the file `dist/dbr.ui.html` to your application, modify it and use the the API `defaultUIElementURL` to set it as the default UI
-
-  ```javascript
-  // This line only takes effect before the method `createInstance()` is called.
-  Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "THE-URL-TO-THE-FILE";
-  ```
-
-#### Append the default UI element to your page, customize it before showing it
-
-  ```html
-  
    
-  ```
-
-  ```javascript
-  document.getElementById('div-ui-container').appendChild(scanner.getUIElement());
-  document.getElementsByClassName('dce-btn-close')[0].hidden = true; // Hide the close button
-  ```
-
-#### Build the UI element from scratch and connect it to the SDK with the API `setUIElement(HTMLElement)`
-
-1. **Embed the video**
-  
-  ```html
-  
    
-      
    
-  
    
-  
-  ```
-
-  > The video element will be created and appended to the DIV element with the class `dce-video-container` , make sure the class name is the same. Besides, the CSS property `position` of the DIV element must be either `relative` , `absolute` , `fixed` , or `sticky` .
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)
-
-2. **[Optional] Add the camera list and resolution list**
-
-  If the class names of the created select elements match the default class names, i.e. `dce-sel-camera` and `dce-sel-resolution` respectively, the SDK will automatically populate the lists and handle the camera/resolution switching.
-
-  ```html
-    
    
-        
    
-        
    
-    
    
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-  ```html
-  
    
-      
-      
-      
    
-      
    
-  
    
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)
-
-  > By default, only 3 hard-coded resolutions (1920 x 1080, 1280 x 720，640 x 480) are populated as options. You can show a customized set of options by hardcoding them.
-
-  ```html
-  
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)
-
-  > Generally, you need to provide a resolution that the camera supports. However, in case a camera does not support the specified resolution, it usually uses the closest supported resolution. As a result, the selected resolution may not be the actual resolution. In this case, add an option with the class name `dce-opt-gotResolution` (as shown above) and the SDK will automatically use it to show the **actual resolution**.
-
-  See the section of the Explore Features guide on [UI customization]({{site.features}}customize-the-ui.html?lang=js) to learn more.
-
-## API Documentation
-
-You can check out the detailed documentation about the APIs of the SDK at
-[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.33](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.33).
-
-## System Requirements
-
-DBR requires the following features to work:
-
-- Secure context (HTTPS deployment)
-
-  When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons
-  
-  - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.
-  > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.
-  
-  - Dynamsoft License requires a secure context to work.
-
-- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`
-
-  The above four features are required for the SDK to work.
-
-- `MediaDevices`/`getUserMedia`
-
-  This API is only required for in-browser video streaming. If a browser does not support this API, the [Single Frame Mode](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/BarcodeScanner.html?ver=9.6.33&utm_source=guide#singleframemode) will be used automatically. If the API exists but doesn't work correctly, the Single Frame Mode can be used as an alternative way to access the camera.
-
-- `getSettings`
-
-  This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.
-
-The following table is a list of supported browsers based on the above requirements:
-
-  Browser Name | Version
-  :-: | :-:
-  Chrome | v59+1
-  Firefox | v52+ (v55+ on Android/iOS1)
-  Edge2 | v16+
-  Safari3 | v11+
-
-  1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.
-  
-  3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.
-
-Apart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.
-
-## How to Upgrade
-
-If you want to upgrade the SDK from an old version to a newer one, please see [how to upgrade](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/upgrade-guide/?ver=9.6.33&utm_source=guide).
-
-## Release Notes
-
-Learn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).
-
-## Next Steps
-
-Now that you have got the SDK integrated, you can choose to move forward in the following directions
-
-1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)
-2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)
-3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)
diff --git a/programming-old/javascript/user-guide/index-v9.6.40.md b/programming-old/javascript/user-guide/index-v9.6.40.md
deleted file mode 100644
index 6acc2651..00000000
--- a/programming-old/javascript/user-guide/index-v9.6.40.md
+++ /dev/null
@@ -1,512 +0,0 @@
----
-layout: default-layout
-title: v9.6.40 User Guide - Dynamsoft Barcode Reader JavaScript Edition
-description: This is the user guide of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, javascript, js
-breadcrumbText: User Guide
-noTitleIndex: true
-needGenerateH3Content: true
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/index-v9.6.40.html
-schema: schemas/dynamsoft-facilitates-mit-research-schema.json
----
-
-
-
-# Barcode Reader for Your Website - User Guide
-
-[Dynamsoft Barcode Reader JavaScript Edition](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) (DBR-JS) is equipped with industry-leading algorithms for exceptional speed, accuracy and read rates in barcode reading. Using its well-designed API, you can turn your web page into a barcode scanner with just a few lines of code.
-
-![version](https://img.shields.io/npm/v/dynamsoft-javascript-barcode.svg)
-![downloads](https://img.shields.io/npm/dm/dynamsoft-javascript-barcode.svg)
-![jsdelivr](https://img.shields.io/jsdelivr/npm/hm/dynamsoft-javascript-barcode.svg)
-![vulnerabilities](https://img.shields.io/snyk/vulnerabilities/npm/dynamsoft-javascript-barcode.svg)
-
-Once the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.
-
-
-
-In this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.
-
-Table of Contents
-
-- [Hello World - Simplest Implementation](#hello-world---simplest-implementation)
-  - [Understand the code](#understand-the-code)
-  - [Run the example](#run-the-example)
-- [Building your own page](#building-your-own-page)
-  - [Include the SDK](#include-the-sdk)
-  - [Configure the SDK](#configure-the-sdk)
-  - [Interact with the SDK](#interact-with-the-sdk)
-  - [Customize the UI (optional)](#customize-the-ui-optional)
-- [API Documentation](#api-documentation)
-- [System Requirements](#system-requirements)
-- [How to Upgrade](#how-to-upgrade)
-- [Release Notes](#release-notes)
-- [Next Steps](#next-steps)
-
-**Popular Examples**
-
-- Hello World - [Guide](#hello-world---simplest-implementation) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/1.hello-world/1.hello-world.html)
-- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.40&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/1.hello-world/3.read-video-angular)
-- React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.40&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/1.hello-world/4.read-video-react)
-- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.40&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/1.hello-world/6.read-video-vue3)
-- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.40&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/1.hello-world/10.read-video-pwa)
-- WebView in Android and iOS - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.40/1.hello-world/14.read-video-webview)
-- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.6.40&utm_source=guide&&lang=js) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/4.use-case/2.read-a-drivers-license.html)
-- Fill A Form - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-barcodes-as-input.html?lang=js&&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/4.use-case/1.fill-a-form-with-barcode-reading.html)
-- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/4.use-case/3.show-result-texts-on-the-video.html)
-- Debug Camera and Collect Video Frame - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/debug.html?lang=js&&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/5.others/debug)
-
-You can also:
-
-- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.40&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)
-- Try Online Examples - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.40/)
-
-## Hello World - Simplest Implementation
-
-Let's start with the "Hello World" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream.  
-
-- Basic Requirements
-  - Internet connection
-  - [A supported browser](#system-requirements)
-  - Camera access
-
-### Understand the code
-
-The complete code of the "Hello World" example is shown below
-
-```html
-
-
-
-
-    
-    
-
-
-
-```
-
-
    
-  
-    Code in Github
-  
-   
-  
-    Run via JSFiddle
-  
-  
-
    
-
------
-
-#### About the code
-
-- The DBR-JS SDK is included in the code via the **jsDelivr** CDN.
-
-> In some rare cases, you might not be able to access the CDN. If this happens, you can use [https://download2.dynamsoft.com/dbr/dynamsoft-barcode-reader-js/dynamsoft-barcode-reader-js-9.6.40/dist/dbr.js](https://download2.dynamsoft.com/dbr/dynamsoft-barcode-reader-js/dynamsoft-barcode-reader-js-9.6.40/dist/dbr.js) for the test. However, please DO NOT use CDN of `download2.dynamsoft.com` in your production application because it is temporary. Instead, you can try [hosting the SDK yourself](#host-the-sdk-yourself).
-
-- `license`: This property specifies a license key. Note that the license "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" used in this example is an online license and requires network connection to work. Read more on [Specify the license](#specify-the-license).
-
-- `createInstance()`: This method creates a `BarcodeScanner` object. This object can read barcodes directly from a video input with the help of its interactive UI (hidden by default) and the MediaDevices interface.
-
-- `onFrameRead`: This event is triggered every time the SDK finishes scanning a video frame. The `results` object contains all the barcode results that the SDK have found on this frame. In this example, we print the results to the browser console.
-
-- `onUniqueRead`: This event is triggered when the SDK finds a new barcode, which is not a duplicate among multiple frames. `txt` holds the barcode text value while `result` is an object that holds details of the barcode. In this example, an alert will be displayed for this new barcode.
-
-- `show()`: This method brings up the built-in UI of the `BarcodeScanner` object and starts scanning.
-
-### Run the example
-
-You can run the example deployed to the Dynamsoft Demo Server or test it with JSFiddle code editor. You will be asked to allow access to your camera, after which the video will be displayed on the page. After that, you can point the camera at a barcode to read it.
-
-When a barcode is decoded, you will see the result text pop up and the barcode location will be highlighted in the video feed.
-
-Alternatively, you can make a local test simply by taking the code in step 1, pasting it in a file with the name "hello-world.html" and open it in a browser.
-
-*Note*:
-
-If you open the web page as `file:///` or `http://` , the camera may not work correctly because the API getUserMedia usually requires HTTPS to access the camera.
-
-To make sure your web application can access the camera, please configure your web server to support HTTPS. The following links may help.
-
-1. NGINX: Configuring HTTPS servers
-2. IIS: Create a Self Signed Certificate in IIS
-3. Tomcat: Setting Up SSL on Tomcat in 5 minutes
-4. Node.js: npm tls
-
-If the test doesn't go as expected, you can [contact us](https://www.dynamsoft.com/contact/?ver=9.6.40&utm_source=guide).
-
-## Building your own page
-
-### Include the SDK
-
-#### Use a public CDN
-
-The simplest way to include the SDK is to use either the [jsDelivr](https://jsdelivr.com/) or [UNPKG](https://unpkg.com/) CDN. The "hello world" example above uses **jsDelivr**.
-
-- jsDelivr
-
-  ```html
-  
-  ```
-
-- UNPKG  
-
-  ```html
-  
-  ```
-
-#### Host the SDK yourself
-
-Besides using the public CDN, you can also download the SDK and host its files on your own server or a commercial CDN before including it in your application.
-
-Options to download the SDK:
-
-- From the website
-
-  Download the JavaScript Package
-
-- yarn
-
-  ```cmd
-  yarn add dynamsoft-javascript-barcode
-  ```
-
-- npm
-
-  ```cmd
-  npm install dynamsoft-javascript-barcode --save
-  ```
-
-Depending on how you downloaded the SDK and how you intend to use it, you can typically include it like this:
-
-```html
-
-```
-
-or
-
-```html
-
-```
-
-or
-
-```typescript
-import { BarcodeScanner } from 'dynamsoft-javascript-barcode';
-```
-
-**NOTE**
-
-* Some older web application servers do not set `.wasm` mimetype as `application/wasm`. Upgrade your web application servers, or define the mimetype yourselves:
-  * [Apache](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Apache_Configuration_htaccess#media_types_and_character_encodings)
-  * [IIS](https://docs.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/mimemap)
-  * [Nginx](https://www.nginx.com/resources/wiki/start/topics/examples/full/#mime-types)
-
-* To work properly, the SDK requires a few engine files, which are relatively large and may take quite a few seconds to download. We recommend that you set a longer cache time for these engine files, to maximize the performance of your web application.
-
-  ```cmd
-  Cache-Control: max-age=31536000
-  ```
-
-  Reference: [Cache-Control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control).
-
-### Configure the SDK
-
-Before using the SDK, you need to configure a few things.
-
-#### Specify the license
-
-The SDK requires a license to work, use the API `license` to specify a license key.
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-```
-
-To test the SDK, you can request a 30-day trial license via the Request a Trial License link.
-
-> If you register a Dynamsoft account and download the SDK from the official website, Dynamsoft will automatically generate a 30-day trial license for you, and put the license key into all the samples attached to the SDK.
-
-#### Specify the location of the "engine" files
-
-This is usually only required with frameworks like Angular or React, etc. where dbr.js is compiled into another file.
-
-The purpose is to tell the SDK where to find the engine files (\*.worker.js, \*.wasm.js and \*.wasm, etc.). The API is called `engineResourcePath`:
-
-```javascript
-//The following code uses the jsDelivr CDN, feel free to change it to your own location of these files
-Dynamsoft.DBR.BarcodeScanner.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.40/dist/";
-```
-
-### Interact with the SDK
-
-#### Create a `BarcodeScanner` object
-
-You can use one of two classes ( `BarcodeScanner` and `BarcodeReader` ) to interact with the SDK. `BarcodeReader` is a low-level class that processes images directly. `BarcodeScanner` , on the other hand, inherits from `BarcodeReader` and provides high-level APIs and a built-in GUI to allow continuous barcode scanning on video frames. We'll focus on `BarcodeScanner` in this guide.
-
-To use the SDK, we first create a `BarcodeScanner` object.
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-let scanner = null;
-try {
-    scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-} catch (ex) {
-    console.error(ex);
-}
-```
-
-Tip: When creating a `BarcodeScanner` object within a function which may be called more than once, it's best to use a "helper" variable to avoid double creation such as `pScanner` in the following code
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-let pScanner = null;
-document.getElementById('btn-scan').addEventListener('click', async () => {
-    try {
-        const scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance());
-    } catch (ex) {
-        console.error(ex);
-    }
-});
-```
-
-#### Customize the `BarcodeScanner` Settings (optional)
-
-Let's take a look at the following code snippets:
-
-```javascript
-// Sets which camera and what resolution to use
-let allCameras = await scanner.getAllCameras();
-await scanner.setCurrentCamera(allCameras[0].deviceId);
-await scanner.setResolution(1280, 720);
-```
-
-```javascript
-// Sets up the scanner behavior
-let scanSettings = await scanner.getScanSettings();
-// Disregards duplicated results found in a specified time period (in milliseconds).
-scanSettings.duplicateForgetTime = 5000; // The default is 3000
-// Sets a scan interval in milliseconds so the SDK may release the CPU from time to time.
-// (setting this value larger is a simple way to save battery power and reduce device heating).
-scanSettings.intervalTime = 100; // The default is 0.
-// Sets captureAndDecodeInParallel to false, which tells the SDK not to acquire the next frame while decoding the first.
-// This is another way to save battery power and is recommended on low-end phones. However, it does slow down the decoding speed.
-scanSettings.captureAndDecodeInParallel = false; // The default is true.
-await scanner.updateScanSettings(scanSettings);
-```
-
-```javascript
-// Uses one of the built-in RuntimeSetting templates: "single" (decode a single barcode, the default mode), "speed", "balance", "coverage", "dense" and "distance"
-await scanner.updateRuntimeSettings("speed");
-
-// Makes changes to the template. The code below demonstrates how to specify enabled symbologies
-let runtimeSettings = await scanner.getRuntimeSettings();
-runtimeSettings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_ONED | Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
-await scanner.updateRuntimeSettings(runtimeSettings);
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/yfkcajxz/)
-
-As you can see from the above code snippets, there are three types of configurations:
-
-- Customize the data source: This configuration includes which camera to use, the preferred resolution, etc. Learn more here.
-
-- `get/updateScanSettings`: Configures the behavior of the scanner which includes `duplicateForgetTime` and `intervalTime`, etc.
-
-- `get/updateRuntimeSettings`: Configures the decode engine with either a built-in template or a comprehensive `RuntimeSettings` object. For example, the following uses the built-in "speed" settings with updated `localizationModes`.
-
-  ```javascript
-  await barcodeScanner.updateRuntimeSettings("speed");
-  //await barcodeScanner.updateRuntimeSettings("balance"); //alternative
-  //await barcodeScanner.updateRuntimeSettings("coverage"); //alternative
-  let settings = await barcodeScanner.getRuntimeSettings();
-  settings.localizationModes = [
-      Dynamsoft.DBR.EnumLocalizationMode.LM_CONNECTED_BLOCKS,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_SCAN_DIRECTLY,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_LINES, 0, 0, 0, 0, 0
-  ];
-  await barcodeScanner.updateRuntimeSettings(settings);
-  ```
-
-  Try in [JSFiddle](https://jsfiddle.net/DynamsoftTeam/f24h8c1m/).
-
-  See also [settings samples](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/parameter-settings.html?ver=9.6.40&utm_source=guide).
-
-> Find the full list of the runtime settings here.
-
-### Customize the UI (optional)
-
-The built-in UI of the `BarcodeScanner` object is defined in the file `dist/dbr.ui.html` . There are a few ways to customize it:
-
-#### Modify the file `dist/dbr.ui.html` directly
-
-  This option is only possible when you [Host the SDK yourself](#host-the-sdk-yourself) instead of using a public CDN.
-
-#### Copy the file `dist/dbr.ui.html` to your application, modify it and use the the API `defaultUIElementURL` to set it as the default UI
-
-  ```javascript
-  // This line only takes effect before the method `createInstance()` is called.
-  Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "THE-URL-TO-THE-FILE";
-  ```
-
-#### Append the default UI element to your page, customize it before showing it
-
-  ```html
-  
    
-  ```
-
-  ```javascript
-  document.getElementById('div-ui-container').appendChild(scanner.getUIElement());
-  document.getElementsByClassName('dce-btn-close')[0].hidden = true; // Hide the close button
-  ```
-
-#### Build the UI element from scratch and connect it to the SDK with the API `setUIElement(HTMLElement)`
-
-1. **Embed the video**
-  
-  ```html
-  
    
-      
    
-  
    
-  
-  ```
-
-  > The video element will be created and appended to the DIV element with the class `dce-video-container` , make sure the class name is the same. Besides, the CSS property `position` of the DIV element must be either `relative` , `absolute` , `fixed` , or `sticky` .
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)
-
-2. **[Optional] Add the camera list and resolution list**
-
-  If the class names of the created select elements match the default class names, i.e. `dce-sel-camera` and `dce-sel-resolution` respectively, the SDK will automatically populate the lists and handle the camera/resolution switching.
-
-  ```html
-    
    
-        
    
-        
    
-    
    
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-  ```html
-  
    
-      
-      
-      
    
-      
    
-  
    
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)
-
-  > By default, only 3 hard-coded resolutions (1920 x 1080, 1280 x 720，640 x 480) are populated as options. You can show a customized set of options by hardcoding them.
-
-  ```html
-  
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)
-
-  > Generally, you need to provide a resolution that the camera supports. However, in case a camera does not support the specified resolution, it usually uses the closest supported resolution. As a result, the selected resolution may not be the actual resolution. In this case, add an option with the class name `dce-opt-gotResolution` (as shown above) and the SDK will automatically use it to show the **actual resolution**.
-
-  See the section of the Explore Features guide on [UI customization]({{site.features}}customize-the-ui.html?lang=js) to learn more.
-
-## API Documentation
-
-You can check out the detailed documentation about the APIs of the SDK at
-[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.40](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.40).
-
-## System Requirements
-
-DBR requires the following features to work:
-
-- Secure context (HTTPS deployment)
-
-  When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons
-  
-  - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.
-  > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.
-  
-  - Dynamsoft License requires a secure context to work.
-
-- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`
-
-  The above four features are required for the SDK to work.
-
-- `MediaDevices`/`getUserMedia`
-
-  This API is only required for in-browser video streaming. If a browser does not support this API, the [Single Frame Mode](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/BarcodeScanner.html?ver=9.6.40&utm_source=guide#singleframemode) will be used automatically. If the API exists but doesn't work correctly, the Single Frame Mode can be used as an alternative way to access the camera.
-
-- `getSettings`
-
-  This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.
-
-The following table is a list of supported browsers based on the above requirements:
-
-  Browser Name | Version
-  :-: | :-:
-  Chrome | v59+1
-  Firefox | v52+ (v55+ on Android/iOS1)
-  Edge2 | v16+
-  Safari3 | v11+
-
-  1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.
-  
-  3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.
-
-Apart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.
-
-## How to Upgrade
-
-If you want to upgrade the SDK from an old version to a newer one, please see [how to upgrade](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/upgrade-guide/?ver=9.6.40&utm_source=guide).
-
-## Release Notes
-
-Learn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).
-
-## Next Steps
-
-Now that you have got the SDK integrated, you can choose to move forward in the following directions
-
-1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)
-2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)
-3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)
diff --git a/programming-old/javascript/user-guide/index-v9.6.42.md b/programming-old/javascript/user-guide/index-v9.6.42.md
deleted file mode 100644
index 8e1f62df..00000000
--- a/programming-old/javascript/user-guide/index-v9.6.42.md
+++ /dev/null
@@ -1,512 +0,0 @@
----
-layout: default-layout
-title: v9.6.42 User Guide - Dynamsoft Barcode Reader JavaScript Edition
-description: This is the user guide of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, javascript, js
-breadcrumbText: User Guide
-noTitleIndex: true
-needGenerateH3Content: true
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/index-v9.6.42.html
-schema: schemas/dynamsoft-facilitates-mit-research-schema.json
----
-
-
-
-# Barcode Reader for Your Website - User Guide
-
-[Dynamsoft Barcode Reader JavaScript Edition](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) (DBR-JS) is equipped with industry-leading algorithms for exceptional speed, accuracy and read rates in barcode reading. Using its well-designed API, you can turn your web page into a barcode scanner with just a few lines of code.
-
-![version](https://img.shields.io/npm/v/dynamsoft-javascript-barcode.svg)
-![downloads](https://img.shields.io/npm/dm/dynamsoft-javascript-barcode.svg)
-![jsdelivr](https://img.shields.io/jsdelivr/npm/hm/dynamsoft-javascript-barcode.svg)
-![vulnerabilities](https://img.shields.io/snyk/vulnerabilities/npm/dynamsoft-javascript-barcode.svg)
-
-Once the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.
-
-
-
-In this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.
-
-Table of Contents
-
-- [Hello World - Simplest Implementation](#hello-world---simplest-implementation)
-  - [Understand the code](#understand-the-code)
-  - [Run the example](#run-the-example)
-- [Building your own page](#building-your-own-page)
-  - [Include the SDK](#include-the-sdk)
-  - [Configure the SDK](#configure-the-sdk)
-  - [Interact with the SDK](#interact-with-the-sdk)
-  - [Customize the UI (optional)](#customize-the-ui-optional)
-- [API Documentation](#api-documentation)
-- [System Requirements](#system-requirements)
-- [How to Upgrade](#how-to-upgrade)
-- [Release Notes](#release-notes)
-- [Next Steps](#next-steps)
-
-**Popular Examples**
-
-- Hello World - [Guide](#hello-world---simplest-implementation) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.42/1.hello-world/1.hello-world.html)
-- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.42&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.42/1.hello-world/3.read-video-angular)
-- React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.42&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.42/1.hello-world/4.read-video-react)
-- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.42&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.42/1.hello-world/6.read-video-vue3)
-- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.42&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.42/1.hello-world/10.read-video-pwa)
-- WebView in Android and iOS - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.42/1.hello-world/14.read-video-webview)
-- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.6.42&utm_source=guide&&lang=js) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.42/4.use-case/2.read-a-drivers-license.html)
-- Fill A Form - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-barcodes-as-input.html?lang=js&&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.42/4.use-case/1.fill-a-form-with-barcode-reading.html)
-- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/4.use-case/3.show-result-texts-on-the-video.html)
-- Debug Camera and Collect Video Frame - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/debug.html?lang=js&&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.42/5.others/debug)
-
-You can also:
-
-- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.42&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)
-- Try Online Examples - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.42/)
-
-## Hello World - Simplest Implementation
-
-Let's start with the "Hello World" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream.  
-
-- Basic Requirements
-  - Internet connection
-  - [A supported browser](#system-requirements)
-  - Camera access
-
-### Understand the code
-
-The complete code of the "Hello World" example is shown below
-
-```html
-
-
-
-
-    
-    
-
-
-
-```
-
-
    
-  
-    Code in Github
-  
-   
-  
-    Run via JSFiddle
-  
-  
-
    
-
------
-
-#### About the code
-
-- The DBR-JS SDK is included in the code via the **jsDelivr** CDN.
-
-> In some rare cases, you might not be able to access the CDN. If this happens, you can use [https://download2.dynamsoft.com/dbr/dynamsoft-barcode-reader-js/dynamsoft-barcode-reader-js-9.6.42/dist/dbr.js](https://download2.dynamsoft.com/dbr/dynamsoft-barcode-reader-js/dynamsoft-barcode-reader-js-9.6.42/dist/dbr.js) for the test. However, please DO NOT use CDN of `download2.dynamsoft.com` in your production application because it is temporary. Instead, you can try [hosting the SDK yourself](#host-the-sdk-yourself).
-
-- `license`: This property specifies a license key. Note that the license "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" used in this example is an online license and requires network connection to work. Read more on [Specify the license](#specify-the-license).
-
-- `createInstance()`: This method creates a `BarcodeScanner` object. This object can read barcodes directly from a video input with the help of its interactive UI (hidden by default) and the MediaDevices interface.
-
-- `onFrameRead`: This event is triggered every time the SDK finishes scanning a video frame. The `results` object contains all the barcode results that the SDK have found on this frame. In this example, we print the results to the browser console.
-
-- `onUniqueRead`: This event is triggered when the SDK finds a new barcode, which is not a duplicate among multiple frames. `txt` holds the barcode text value while `result` is an object that holds details of the barcode. In this example, an alert will be displayed for this new barcode.
-
-- `show()`: This method brings up the built-in UI of the `BarcodeScanner` object and starts scanning.
-
-### Run the example
-
-You can run the example deployed to the Dynamsoft Demo Server or test it with JSFiddle code editor. You will be asked to allow access to your camera, after which the video will be displayed on the page. After that, you can point the camera at a barcode to read it.
-
-When a barcode is decoded, you will see the result text pop up and the barcode location will be highlighted in the video feed.
-
-Alternatively, you can make a local test simply by taking the code in step 1, pasting it in a file with the name "hello-world.html" and open it in a browser.
-
-*Note*:
-
-If you open the web page as `file:///` or `http://` , the camera may not work correctly because the API getUserMedia usually requires HTTPS to access the camera.
-
-To make sure your web application can access the camera, please configure your web server to support HTTPS. The following links may help.
-
-1. NGINX: Configuring HTTPS servers
-2. IIS: Create a Self Signed Certificate in IIS
-3. Tomcat: Setting Up SSL on Tomcat in 5 minutes
-4. Node.js: npm tls
-
-If the test doesn't go as expected, you can [contact us](https://www.dynamsoft.com/contact/?ver=9.6.42&utm_source=guide).
-
-## Building your own page
-
-### Include the SDK
-
-#### Use a public CDN
-
-The simplest way to include the SDK is to use either the [jsDelivr](https://jsdelivr.com/) or [UNPKG](https://unpkg.com/) CDN. The "hello world" example above uses **jsDelivr**.
-
-- jsDelivr
-
-  ```html
-  
-  ```
-
-- UNPKG  
-
-  ```html
-  
-  ```
-
-#### Host the SDK yourself
-
-Besides using the public CDN, you can also download the SDK and host its files on your own server or a commercial CDN before including it in your application.
-
-Options to download the SDK:
-
-- From the website
-
-  Download the JavaScript Package
-
-- npm
-
-  ```cmd
-  npm i dynamsoft-javascript-barcode -E
-  ```
-
-- yarn
-
-  ```cmd
-  yarn add dynamsoft-javascript-barcode -E
-  ```
-
-Depending on how you downloaded the SDK and how you intend to use it, you can typically include it like this:
-
-```html
-
-```
-
-or
-
-```html
-
-```
-
-or
-
-```typescript
-import { BarcodeScanner } from 'dynamsoft-javascript-barcode';
-```
-
-**NOTE**
-
-* Some older web application servers do not set `.wasm` mimetype as `application/wasm`. Upgrade your web application servers, or define the mimetype yourselves:
-  * [Apache](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Apache_Configuration_htaccess#media_types_and_character_encodings)
-  * [IIS](https://docs.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/mimemap)
-  * [Nginx](https://www.nginx.com/resources/wiki/start/topics/examples/full/#mime-types)
-
-* To work properly, the SDK requires a few engine files, which are relatively large and may take quite a few seconds to download. We recommend that you set a longer cache time for these engine files, to maximize the performance of your web application.
-
-  ```cmd
-  Cache-Control: max-age=31536000
-  ```
-
-  Reference: [Cache-Control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control).
-
-### Configure the SDK
-
-Before using the SDK, you need to configure a few things.
-
-#### Specify the license
-
-The SDK requires a license to work, use the API `license` to specify a license key.
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-```
-
-To test the SDK, you can request a 30-day trial license via the Request a Trial License link.
-
-> If you register a Dynamsoft account and download the SDK from the official website, Dynamsoft will automatically generate a 30-day trial license for you, and put the license key into all the samples attached to the SDK.
-
-#### Specify the location of the "engine" files
-
-This is usually only required with frameworks like Angular or React, etc. where dbr.js is compiled into another file.
-
-The purpose is to tell the SDK where to find the engine files (\*.worker.js, \*.wasm.js and \*.wasm, etc.). The API is called `engineResourcePath`:
-
-```javascript
-//The following code uses the jsDelivr CDN, feel free to change it to your own location of these files
-Dynamsoft.DBR.BarcodeScanner.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.42/dist/";
-```
-
-### Interact with the SDK
-
-#### Create a `BarcodeScanner` object
-
-You can use one of two classes ( `BarcodeScanner` and `BarcodeReader` ) to interact with the SDK. `BarcodeReader` is a low-level class that processes images directly. `BarcodeScanner` , on the other hand, inherits from `BarcodeReader` and provides high-level APIs and a built-in GUI to allow continuous barcode scanning on video frames. We'll focus on `BarcodeScanner` in this guide.
-
-To use the SDK, we first create a `BarcodeScanner` object.
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-let scanner = null;
-try {
-    scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-} catch (ex) {
-    console.error(ex);
-}
-```
-
-Tip: When creating a `BarcodeScanner` object within a function which may be called more than once, it's best to use a "helper" variable to avoid double creation such as `pScanner` in the following code
-
-```javascript
-Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY";
-let pScanner = null;
-document.getElementById('btn-scan').addEventListener('click', async () => {
-    try {
-        const scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance());
-    } catch (ex) {
-        console.error(ex);
-    }
-});
-```
-
-#### Customize the `BarcodeScanner` Settings (optional)
-
-Let's take a look at the following code snippets:
-
-```javascript
-// Sets which camera and what resolution to use
-let allCameras = await scanner.getAllCameras();
-await scanner.setCurrentCamera(allCameras[0].deviceId);
-await scanner.setResolution(1280, 720);
-```
-
-```javascript
-// Sets up the scanner behavior
-let scanSettings = await scanner.getScanSettings();
-// Disregards duplicated results found in a specified time period (in milliseconds).
-scanSettings.duplicateForgetTime = 5000; // The default is 3000
-// Sets a scan interval in milliseconds so the SDK may release the CPU from time to time.
-// (setting this value larger is a simple way to save battery power and reduce device heating).
-scanSettings.intervalTime = 100; // The default is 0.
-// Sets captureAndDecodeInParallel to false, which tells the SDK not to acquire the next frame while decoding the first.
-// This is another way to save battery power and is recommended on low-end phones. However, it does slow down the decoding speed.
-scanSettings.captureAndDecodeInParallel = false; // The default is true.
-await scanner.updateScanSettings(scanSettings);
-```
-
-```javascript
-// Uses one of the built-in RuntimeSetting templates: "single" (decode a single barcode, the default mode), "speed", "balance", "coverage", "dense" and "distance"
-await scanner.updateRuntimeSettings("speed");
-
-// Makes changes to the template. The code below demonstrates how to specify enabled symbologies
-let runtimeSettings = await scanner.getRuntimeSettings();
-runtimeSettings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_ONED | Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
-await scanner.updateRuntimeSettings(runtimeSettings);
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/yfkcajxz/)
-
-As you can see from the above code snippets, there are three types of configurations:
-
-- Customize the data source: This configuration includes which camera to use, the preferred resolution, etc. Learn more here.
-
-- `get/updateScanSettings`: Configures the behavior of the scanner which includes `duplicateForgetTime` and `intervalTime`, etc.
-
-- `get/updateRuntimeSettings`: Configures the decode engine with either a built-in template or a comprehensive `RuntimeSettings` object. For example, the following uses the built-in "speed" settings with updated `localizationModes`.
-
-  ```javascript
-  await barcodeScanner.updateRuntimeSettings("speed");
-  //await barcodeScanner.updateRuntimeSettings("balance"); //alternative
-  //await barcodeScanner.updateRuntimeSettings("coverage"); //alternative
-  let settings = await barcodeScanner.getRuntimeSettings();
-  settings.localizationModes = [
-      Dynamsoft.DBR.EnumLocalizationMode.LM_CONNECTED_BLOCKS,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_SCAN_DIRECTLY,
-      Dynamsoft.DBR.EnumLocalizationMode.LM_LINES, 0, 0, 0, 0, 0
-  ];
-  await barcodeScanner.updateRuntimeSettings(settings);
-  ```
-
-  Try in [JSFiddle](https://jsfiddle.net/DynamsoftTeam/f24h8c1m/).
-
-  See also [settings samples](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/parameter-settings.html?ver=9.6.42&utm_source=guide).
-
-> Find the full list of the runtime settings here.
-
-### Customize the UI (optional)
-
-The built-in UI of the `BarcodeScanner` object is defined in the file `dist/dbr.ui.html` . There are a few ways to customize it:
-
-#### Modify the file `dist/dbr.ui.html` directly
-
-  This option is only possible when you [Host the SDK yourself](#host-the-sdk-yourself) instead of using a public CDN.
-
-#### Copy the file `dist/dbr.ui.html` to your application, modify it and use the the API `defaultUIElementURL` to set it as the default UI
-
-  ```javascript
-  // This line only takes effect before the method `createInstance()` is called.
-  Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "THE-URL-TO-THE-FILE";
-  ```
-
-#### Append the default UI element to your page, customize it before showing it
-
-  ```html
-  
    
-  ```
-
-  ```javascript
-  document.getElementById('div-ui-container').appendChild(scanner.getUIElement());
-  document.getElementsByClassName('dce-btn-close')[0].hidden = true; // Hide the close button
-  ```
-
-#### Build the UI element from scratch and connect it to the SDK with the API `setUIElement(HTMLElement)`
-
-1. **Embed the video**
-  
-  ```html
-  
    
-      
    
-  
    
-  
-  ```
-
-  > The video element will be created and appended to the DIV element with the class `dce-video-container` , make sure the class name is the same. Besides, the CSS property `position` of the DIV element must be either `relative` , `absolute` , `fixed` , or `sticky` .
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)
-
-2. **[Optional] Add the camera list and resolution list**
-
-  If the class names of the created select elements match the default class names, i.e. `dce-sel-camera` and `dce-sel-resolution` respectively, the SDK will automatically populate the lists and handle the camera/resolution switching.
-
-  ```html
-    
    
-        
    
-        
    
-    
    
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-  ```html
-  
    
-      
-      
-      
    
-      
    
-  
    
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)
-
-  > By default, only 3 hard-coded resolutions (1920 x 1080, 1280 x 720，640 x 480) are populated as options. You can show a customized set of options by hardcoding them.
-
-  ```html
-  
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)
-
-  > Generally, you need to provide a resolution that the camera supports. However, in case a camera does not support the specified resolution, it usually uses the closest supported resolution. As a result, the selected resolution may not be the actual resolution. In this case, add an option with the class name `dce-opt-gotResolution` (as shown above) and the SDK will automatically use it to show the **actual resolution**.
-
-  See the section of the Explore Features guide on [UI customization]({{site.features}}customize-the-ui.html?lang=js) to learn more.
-
-## API Documentation
-
-You can check out the detailed documentation about the APIs of the SDK at
-[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.42](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.42).
-
-## System Requirements
-
-DBR requires the following features to work:
-
-- Secure context (HTTPS deployment)
-
-  When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons
-  
-  - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.
-  > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.
-  
-  - Dynamsoft License requires a secure context to work.
-
-- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`
-
-  The above four features are required for the SDK to work.
-
-- `MediaDevices`/`getUserMedia`
-
-  This API is only required for in-browser video streaming. If a browser does not support this API, the [Single Frame Mode](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/BarcodeScanner.html?ver=9.6.42&utm_source=guide#singleframemode) will be used automatically. If the API exists but doesn't work correctly, the Single Frame Mode can be used as an alternative way to access the camera.
-
-- `getSettings`
-
-  This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.
-
-The following table is a list of supported browsers based on the above requirements:
-
-  Browser Name | Version
-  :-: | :-:
-  Chrome | v59+1
-  Firefox | v52+ (v55+ on Android/iOS1)
-  Edge2 | v16+
-  Safari3 | v11+
-
-  1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.
-  
-  3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.
-
-Apart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.
-
-## How to Upgrade
-
-If you want to upgrade the SDK from an old version to a newer one, please see [how to upgrade](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/upgrade-guide/?ver=9.6.42&utm_source=guide).
-
-## Release Notes
-
-Learn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).
-
-## Next Steps
-
-Now that you have got the SDK integrated, you can choose to move forward in the following directions
-
-1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)
-2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)
-3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)
diff --git a/programming-old/javascript/user-guide/optimize-performance.md b/programming-old/javascript/user-guide/optimize-performance.md
deleted file mode 100644
index e4989d34..00000000
--- a/programming-old/javascript/user-guide/optimize-performance.md
+++ /dev/null
@@ -1,137 +0,0 @@
----
-layout: default-layout
-title: Advanced Customizations - Dynamsoft Barcode Reader JavaScript Edition
-description: This page shows how to optimize the performance of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, advanced customizations, debug, area, region, javascript, js
-needAutoGenerateSidebar: true
----
-
-# Advanced Usage
-
-- [Advanced Usage](#advanced-usage)
-  - [Read a specific area/region](#read-a-specific-arearegion)
-  - [Account for newline characters in the barcode result](#account-for-newline-characters-in-the-barcode-result)
-  - [Show internal logs](#show-internal-logs)
-  - [Set mode arguments](#set-mode-arguments)
-  - [Display images in different stages of the reading process](#display-images-in-different-stages-of-the-reading-process)
-
-## Read a specific area/region
-
-To speed up the scanning process, you can choose to scan only a specific area/region.
-
-```javascript
-let settings = await scanner.getRuntimeSettings();
-/*
- * The following code shrinks the decoding region by 25% on all sides
- */
-settings.region.regionMeasuredByPercentage = 1;
-settings.region.regionLeft = 25;
-settings.region.regionTop = 25;
-settings.region.regionRight = 75;
-settings.region.regionBottom = 75;
-await scanner.updateRuntimeSettings(settings);
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/taykq592/)
-
-## Account for newline characters in the barcode result
-
-When it comes to HTML, newline characters ( `\n` ) are not interpreted as they normally would. Therefore, if a barcode result contains a newline character, and you display the result in an modal dialogue box or some other text elements, then the newline character will probably be ignored.
-
-There are two ways in which you can resolve this:
-
-1. Wrap the element used to display the result in a `
    ` element.
-2. Manually replace each `\n` character in the result with `
    `
-
-## Show internal logs
-
-Include the following in your code to print internal logs in the console.
-
-```javascript
-Dynamsoft.DBR.BarcodeReader._onLog = console.log;
-```
-
-## Set mode arguments
-
-To precisely control a mode, you can adjust its specific parameters.
-
-```javascript
-let settings = await scanner.getRuntimeSettings();
-
-/*
- * The following code sets the sensitivity of the TextureDetectionModes to 9
- */
-
-settings.furtherModes.textureDetectionModes = [
-    Dynamsoft.DBR.EnumTextureDetectionMode.TDM_GENERAL_WIDTH_CONCENTRATION, 0, 0, 0, 0, 0, 0, 0
-];
-
-await scanner.updateRuntimeSettings(settings);
-// The 2nd parameter 0 specifies the 0th mode of TextureDetectionModes, 
-// which is "Dynamsoft.DBR.EnumTextureDetectionMode.TDM_GENERAL_WIDTH_CONCENTRATION" in this case.
-await scanner.setModeArgument("TextureDetectionModes", 0, "Sensitivity", "9");
-```
-
-## Display images in different stages of the reading process
-
-The original canvases are saved when setting `ifSaveOriginalImageInACanvas` to `true`. The method `getOriginalImageInACanvas()` returns a canvas which holds the image to be passed to the barcode reader engine for decoding. 
-
-The intermediate result canvases are created when `intermediateResultTypes` is set to a value other than `IRT_NO_RESULT` . Then these intermediate result canvases can be returned with the method `getIntermediateCanvas()` to be used for showing and debugging the barcode reading process. 
-
-> *NOTE*
->  
-> For efficiency, the library may utilize WebGL (Web Graphics Library) for preprocessing an image before passing it to the barcode reader engine. If WebGL is used, the image captured from the camera will not be rendered on the canvas, instead, it gets processed by WebGL first and then is passed to the barcode reader engine directly. In this case, there won't be an original canvas.
-> 
-> Therefore, if `ifSaveOriginalImageInACanvas` is set to `true` for a `BarcodeScanenr` instance, the WebGL feature will be disabled for that instance.
->
-> You can manually disable the WebGL feature by setting `_bUseWebgl` as `false`. If WebGL is disabled, when you try to get the intermediate result canvas (with `getIntermediateCanvas()`) specified by `EnumIntermediateResultType.IRT_ORIGINAL_IMAGE` , the canvas will be exactly the same image as you would get with `getOriginalImageInACanvas()` .
-
-The following shows how to display these images on the page
-
-```html
-
    
-
    
-```
-
-```javascript
-// original canvas
-(async () => {
-    let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-    document.getElementById('scannerV').appendChild(scanner.getUIElement());
-    scanner.ifSaveOriginalImageInACanvas = true;
-    scanner.onUniqueRead = async (txt, result) => {
-        try {
-            let cvs = scanner.getOriginalImageInACanvas();
-            document.getElementById('cvses').appendChild(cvs);
-            scanner.destroyContext();
-        } catch (ex) {
-            console.error(ex);
-        }
-    };
-    await scanner.show();
-})();
-```
-
-```javascript
-// intermediate result canvas
-(async () => {
-    let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-    // scanner._bUseWebgl = false;
-    document.getElementById('scannerV').appendChild(scanner.getUIElement());
-    let rs = await scanner.getRuntimeSettings();
-    rs.intermediateResultTypes = Dynamsoft.DBR.EnumIntermediateResultType.IRT_ORIGINAL_IMAGE;
-    await scanner.updateRuntimeSettings(rs);
-    scanner.onUniqueRead = async (txt, result) => {
-        try {
-            let cvss = await scanner.getIntermediateCanvas();
-            for (let cvs of cvss) {
-                document.getElementById('cvses').appendChild(cvs);
-            }
-            scanner.destroyContext();
-        } catch (ex) {
-            console.error(ex);
-        }
-    };
-    await scanner.show();
-})();
-```
\ No newline at end of file
diff --git a/programming-old/javascript/user-guide/upgrade-v7.6.0.md b/programming-old/javascript/user-guide/upgrade-v7.6.0.md
deleted file mode 100644
index db4840e8..00000000
--- a/programming-old/javascript/user-guide/upgrade-v7.6.0.md
+++ /dev/null
@@ -1,29 +0,0 @@
----
-layout: default-layout
-title: v7.6.0 User guide: How to Upgrade - Dynamsoft Barcode Reader JavaScript Edition
-description: This page shows how to upgrade Dynamsoft Barcode Reader JavaScript SDK from v7.x to v9.x.
-keywords: user guide, upgrade, javascript, js
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/upgrade-v7.6.0.html
----
-
-# How to Upgrade
-
-## From version 7.2.2-v2 and above
-
-If you are using a **CDN**, simply update the version number denoted after **@** in the URL.
-
-   ```html
-   
-   ```
-
-If you have deployed the library files on your own server, you'll need to replace the old files with the ones in the latest version. Download the latest version [here](https://www.dynamsoft.com/Downloads/Dynamic-Barcode-Reader-Download.aspx).
-
-## From version 7.2.2-v2 or below
-
-Some major changes were made in version 7.2.2-v2 and will require existing code updates in your application.
-
-Follow the detailed guide in [this post](https://www.dynamsoft.com/blog/announcement/dynamsoft-barcode-reader-sdk-for-javascript-upgrade-from-v7-1-3-to-v7-2-2/) for upgrade steps. 
-
-If you need further assistance with the upgrade, please feel free to [contact us](https://www.dynamsoft.com/Company/Contact.aspx).
-
diff --git a/programming-old/javascript/user-guide/upgrade-v9.6.31.md b/programming-old/javascript/user-guide/upgrade-v9.6.31.md
deleted file mode 100644
index b1260dff..00000000
--- a/programming-old/javascript/user-guide/upgrade-v9.6.31.md
+++ /dev/null
@@ -1,131 +0,0 @@
----
-layout: default-layout
-title: How to Upgrade - Dynamsoft Barcode Reader JavaScript Edition
-description: This page shows how to upgrade Dynamsoft Barcode Reader JavaScript SDK up till version 8.2.5.
-keywords: user guide, upgrade, javascript, js
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/upgrade-v9.6.31.html
----
-
-# How to Upgrade
-
-## From v8.x to v8.2.5
-
-In v8.2.5, we introduced the API `organizationID` as the recommended way to fetch a trackable license. However, all old ways of licensing the library are still supported.
-
----
-## From v8.x to v8.1.2
-
-### `TextResult` exception
-
-In v8.1, we added exceptions to the `TextResult` class. An exception message and code is returned with each result if no valid license (trial or full) is present.
-
-The following is an example of what may be returned:
-
-`[Attention(exceptionCode:-20000)] http:/*d*n*m*soft.q*.com*r/U4***U*EaRA****W9*ZB`
-
-More details on the exception can be found within each result. For example:
-
-```
-result.exception = {
-   code: "-20000",
-   message: "No license specified. Visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js to acquire a license or email support@dynamsoft.com."
-}
-```
-
----
-## From v7.x to v8.x
-
-### Change your license
-
-In v8.0, we introduced a new license tracking mechanism, [License 2.0](https://www.dynamsoft.com/license-tracking/docs/about/index.html). If you have a v7.x license and wish to upgrade to v8.x, you must [contact us](https://www.dynamsoft.com/Company/Contact.aspx) to acquire a new license. 
-
-### Update version and code
-
-If you are using a **CDN**, simply update the version number denoted after **@** in the URL.
-
-```html
-
-```
-
-If you have deployed the library files to your server, you'll need to replace the old files with the ones in the latest version. Download the latest version [here](https://www.dynamsoft.com/Downloads/Dynamic-Barcode-Reader-Download.aspx).
-
-Next, replace the value ("PRODUCT-KEYS") of `data-productKeys` with the handshake code or organization ID you receive based on License 2.0 (as mentioned in the section [Change your license](#change-your-license) above).
-
-### API changes
-
-#### :exclamation: *Namespace change*
-
-Use the new namespace `Dynamsoft.DBR` in place of just `Dynamsoft`. The following shows the equivalent changes for `BarcodeScanner` and `BarcodeReader`:
-
-```js
-Dynamsoft.BarcodeScanner -> Dynamsoft.DBR.BarcodeScanner
-Dynamsoft.BarcodeReader -> Dynamsoft.DBR.BarcodeReader
-```
-
-If you are using the library as an ES/CMD module, you don't need to change your code. Otherwise, you can either make a global change from `Dynamsoft` to `Dynamsoft.DBR` or use the following line to quickly make the namespace change.
-
-```js
-Dynamsoft = Dynamsoft.DBR; //This line should be called before you call any other methods/properties of the library.
-```
-
-#### Deprecating `deblurLevel`
-
-`deblurLevel` has been deprecated in v8.0 and replaced with `deblurModes`. Although `deblurLevel` will continue to work in v8.0, we recommend updating your code to use `deblurModes` as soon as possible to avoid any breaking changes in the future.
-
-Check out the code below on how to switch from `deblurLevel` to `deblurModes`.
-
-```js
-let settings = await barcodeScanner.getRuntimeSettings();
-//settings.deblurLevel = 9;
-settings.deblurModes = ["DM_DIRECT_BINARIZATION",   
-                        "DM_THRESHOLD_BINARIZATION", 
-                        "DM_GRAY_EQUALIZATION",
-                        "DM_SMOOTHING",
-                        "DM_MORPHING",
-                        "DM_DEEP_ANALYSIS",
-                        "DM_SHARPENING",
-                        "DM_SKIP"] 
-await barcodeScanner.updateRuntimeSettings(settings);
-```
-
-#### Default runtime setting has changed from `speed` to `single` for `BarcodeScanner`
-
-The `single` runtime setting was introduced in v7.5 as an experimental feature for `BarcodeScanner`. In v8.0, `single` is made the default setting.
-
-Before v8.0, the default setting was `speed`.
-
-*NOTE*
-
-`BarcodeReader` still uses `coverage` as the default setting.
-
-#### Removed some deprecated APIs from `textResult`
-
-* `BarcodeText` is removed, use `barcodeText` instead
-* `BarcodeFormat` is removed, use `barcodeFormat` instead
-* `BarcodeFormatString` is removed, use `barcodeFormatString` instead
-* `LocalizationResult` is removed, use `localizationResult` instead
-* `ResultPoints` in `localizationResult` is removed, use `x1,x2,x3,x4,y1,y2,y3,y4` instead
-* `accompanyingTextBytes` is removed, if you wish to use the feature or something similar, please [contact us](https://www.dynamsoft.com/Company/Contact.aspx).
-
----
-## Upgrade to v7.x
-
-### From version 7.2.2-v2 and above
-
-If you are using a **CDN**, simply update the version number denoted after **@** in the URL.
-
-   ```html
-   
-   ```
-
-If you have deployed the library files on your own server, you'll need to replace the old files with the ones in the latest version. Download the latest version [here](https://www.dynamsoft.com/Downloads/Dynamic-Barcode-Reader-Download.aspx).
-
-### Prior to version 7.2.2-v2
-
-Some major changes were made in version 7.2.2-v2 and will require existing code updates in your application.
-
-Follow the detailed guide in [this post](https://www.dynamsoft.com/blog/announcement/dynamsoft-barcode-reader-sdk-for-javascript-upgrade-from-v7-1-3-to-v7-2-2/) for upgrade steps. 
-
-If you need further assistance with the upgrade, please feel free to [contact us](https://www.dynamsoft.com/Company/Contact.aspx).
-
diff --git a/programming-old/javascript/user-guide/use-cases/index.md b/programming-old/javascript/user-guide/use-cases/index.md
deleted file mode 100644
index b1f5c69d..00000000
--- a/programming-old/javascript/user-guide/use-cases/index.md
+++ /dev/null
@@ -1,23 +0,0 @@
----
-layout: default-layout
-title: Use Cases - Dynamsoft Barcode Reader JavaScript Edition User Guide
-description: This page explores the use cases of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, use cases, javascript, js
-breadcrumbText: Use Cases
-noTitleIndex: true
-needGenerateH3Content: true
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/use-cases/index.html
----
-
-# Use Cases
-
-* [Scan barcodes as input]({{site.usecases}}scan-barcodes-as-input.html?lang=js)
-* [Scan and parse PDF417 on AAMVA documents]({{site.usecases}}scan-and-parse-AAMVA.html?lang=js)
-* [Read DPM codes]({{site.usecases}}read-dpm-codes.html?lang=js)
-* [Read Postal codes]({{site.usecases}}read-postal-codes.html?lang=js)
-
-
\ No newline at end of file
diff --git a/programming/javascript/api-reference/barcode-reader-module-v10.5.3000.md b/programming/javascript/api-reference/barcode-reader-module-v10.5.3000.md
deleted file mode 100644
index 799c2da4..00000000
--- a/programming/javascript/api-reference/barcode-reader-module-v10.5.3000.md
+++ /dev/null
@@ -1,52 +0,0 @@
----
-layout: default-layout
-title: BarcodeReader Module - Dynamsoft Barcode Reader JavaScript Edition API
-description: This page introduces the BarcodeReader module in Dynamsoft Barcode Reader JavaScript Edition.
-keywords: barcode reader, module, api reference, javascript, js
-needAutoGenerateSidebar: true
-needGenerateH3Content: true
-noTitleIndex: true
----
-
-# DynamsoftBarcodeReader Module
-
-The BarcodeReader module is defined in the namespace `Dynamsoft.DBR`. It includes a class named "BarcodeReaderModule" along with various interfaces and enumerations.
-
-## BarcodeReaderModule Class
-
-This class defines common functionality in the `BarcodeReader` module. At present, there is only one API.
-
-| API Name                                                             | Description                                      |
-| -------------------------------------------------------------------- | ------------------------------------------------ |
-| `static` [getVersion()](./barcode-reader-module-class.md#getversion) | Returns the version of the BarcodeReader module. |
-
-## Interfaces
-
-* [AztecDetails](./interfaces/aztec-details.md)
-* [BarcodeDetails](./interfaces/barcode-details.md)
-* [BarcodeResultItem](./interfaces/barcode-result-item.md)
-* [CandidateBarcodeZone](./interfaces/candidate-barcode-zone.md)
-* [CandidateBarcodeZonesUnit](./interfaces/candidate-barcode-zones-unit.md)
-* [ComplementedBarcodeImageUnit](./interfaces/complemented-barcode-image-unit.md)
-* [DataMatrixDetails](./interfaces/datamatrix-details.md)
-* [DecodedBarcodeElement](./interfaces/decoded-barcode-element.md)
-* [DecodedBarcodesResult](./interfaces/decoded-barcodes-result.md)
-* [DecodedBarcodesUnit](./interfaces/decoded-barcodes-unit.md)
-* [DeformationResistedBarcode](./interfaces/deformation-resisted-barcode.md)
-* [DeformationResistedBarcodeImageUnit](./interfaces/deformation-resisted-barcode-image-unit.md)
-* [ExtendedBarcodeResult](./interfaces/extended-barcode-result.md)
-* [LocalizedBarcodeElement](./interfaces/localized-barcode-element.md)
-* [LocalizedBarcodesUnit](./interfaces/localized-barcodes-unit.md)
-* [OneDCodeDetails](./interfaces/oned-code-details.md)
-* [PDF417Details](./interfaces/pdf417-details.md)
-* [QRCodeDetails](./interfaces/qr-code-details.md)
-* [ScaledUpBarcodeImageUnit](./interfaces/scaled-up-barcode-image-unit.md)
-* [SimplifiedBarcodeReaderSettings](./interfaces/simplified-barcode-reader-settings.md)
-
-## Enums
-
-* [EnumBarcodeFormat]({{ site.dcvb_enums }}barcode-reader/barcode-format.html?lang=js)
-* [EnumDeblurMode]({{ site.dcvb_enums }}barcode-reader/deblur-mode.html?lang=js)
-* [EnumExtendedBarcodeResultType]({{ site.dcvb_enums }}barcode-reader/extended-barcode-result-type.html?lang=js)
-* [EnumLocalizationMode]({{ site.dcvb_enums }}barcode-reader/localization-mode.html?lang=js)
-* [EnumQRCodeErrorCorrectionLevel]({{ site.dcvb_enums }}barcode-reader/qr-code-error-correction-level.html?lang=js)
diff --git a/programming/javascript/api-reference/barcode-scanner-v10.5.3000.md b/programming/javascript/api-reference/barcode-scanner-v10.5.3000.md
deleted file mode 100644
index 324bec36..00000000
--- a/programming/javascript/api-reference/barcode-scanner-v10.5.3000.md
+++ /dev/null
@@ -1,409 +0,0 @@
----
-layout: default-layout
-title: BarcodeScanner JavaScript Edition - API Reference
-keywords: Documentation, BarcodeScanner JavaScript Edition, API, APIs
-breadcrumbText: BarcodeScanner API References
-description: Dynamsoft BarcodeScanner JavaScript Edition - API Reference
-needAutoGenerateSidebar: true
-needGenerateH3Content: true
-noTitleIndex: true
----
-
-# Barcode Scanner JavaScript Edition API Reference
-
-BarcodeScanner is a configurable barcode scanning module featuring a pre-built UI that supports both live camera and still image decoding. Designed for effortless integration into web applications, it offers a ready-to-use, customizable interface to streamline barcode scanning implementation.
-
-## Constructor
-
-### BarcodeScanner
-
-```ts
-new BarcodeScanner(config?: BarcodeScannerConfig)
-```
-
-**Parameters**
-
-`config` (optional): Assigns the license and configures the different settings of the `BarcodeScanner`, including the container, supported barcode formats, and more. This config object is of type [*BarcodeScannerConfig*](#barcodescannerconfig).
-
-**Code Snippet**
-
-```js
-const barcodeScanner = new Dynamsoft.BarcodeScanner({
-  license: "YOUR_LICENSE_KEY_HERE",
-  scannerViewConfig: {
-  //  container: "#camera-view-container",
-  //  showCloseButton: true,
-  },
-  // showUploadImageButton: true,
-  // scanMode: Dynamsoft.EnumScanMode.SM_MULTI_UNIQUE,
-  // showResultView: true,
-});
-```
-
-## Methods
-
-### launch()
-
-Launches the scanner and optionally renders the scanning UI based on scanMode and container configuration.
-
-```ts
-launch(): Promise
-```
-
-**Returns**
-
-A promise that resolves to a [`BarcodeScanResult`](#barcodescanresult).
-
-**Code Snippet**
-
-```js
-(async () => {
-    // Launch the scanner and wait for the result
-    try {
-        const result = await barcodeScanner.launch();
-        console.log(result); // print the BarcodeScanResult to the console
-    } catch (error){
-        console.error(error);
-    }
-})();
-```
-
-### dispose()
-
-Disposes the scanner instance and cleans up all related resources.
-
-```ts
-dispose(): void
-```
-
-**Code Snippet**
-
-```js
-barcodeScanner.dispose();
-console.log("Scanner resources released.");
-```
-
-### decode()
-
-Decodes a barcode from an image, URL, or canvas element.
-
-```ts
-decode(imageOrFile: Blob | string | DSImageData | HTMLImageElement | HTMLVideoElement | HTMLCanvasElement,templateName?: string): Promise
-```
-
-**Parameters**
-
-`imageOrFile`: The input image source.
-
-`templateName` (optional): The name of the [`CaptureVisionTemplate`]({{ site.dcvb_js_api }}capture-vision-router/preset-templates.html) to be used.
-
-**Returns**
-
-A promise that resolves to a `CapturedResult`.
-
-**Code Snippet**
-
-```js
-const imageUrl = 'https://example.com/image.png';
-const results = barcodeScanner.decode(imageUrl);
-//... do something with the results
-```
-
-## Interfaces
-
-### BarcodeScannerConfig
-
-Configuration options for initializing a `BarcodeScanner`.
-
-```ts
-interface BarcodeScannerConfig {
-  license?: string;
-  scanMode?: EnumScanMode;
-  templateFilePath?: string;
-  utilizedTemplateNames?: UtilizedTemplateNames;
-  engineResourcePaths?: EngineResourcePaths;
-  uiPath?: string;
-  barcodeFormats?: EnumBarcodeFormat | Array;
-  duplicateForgetTime?: number;
-  removePoweredByMessage?: boolean;
-  container?: HTMLElement | string | undefined;
-  onUniqueBarcodeScanned?: (result: BarcodeResultItem) => void | Promise;
-  showResultView?: boolean;
-  showUploadImageButton?: boolean;
-  scannerViewConfig?: ScannerViewConfig;
-  resultViewConfig?: ResultViewConfig;
-}
-```
-
-| Property                | Type                           | Default Value | Description                                                     |
-| ----------------------- | ------------------------------ | --- | --------------------------------------------------------------- |
-| `license` | `string` | `N/A` | The license key to activate the barcode scanner. |
-| `scanMode`(optional) | [`EnumScanMode`](#enumscanmode) | `SM_SINGLE` | Defines the scan mode of the BarcodeScanner|
-| `templateFilePath`(optional) | `string` | `N/A` | Path to a CaptureVisionTemplate file used for barcode reading. |
-| `utilizedTemplateNames`(optional) | `UtilizedTemplateNames` | `{"single": "ReadSingleBarcode", "multi_unique": "ReadBarcodes_SpeedFirst", "image": "ReadBarcodes_ReadRateFirst"}` | Defines template names mapped to scanning modes. |
-| `engineResourcePaths`(optional) | `EngineResourcePaths` | `N/A` | Paths to engine resources like WASM or workers. See [EngineResourcePaths](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/core/core-module-class.html?product=dbr&lang=javascript#engineresourcepaths) for details. |
-| `uiPath` (optional) | `string` | `N/A` | Path to the custom UI (`.xml` template file) for the ScannerView.|
-| `barcodeFormats`(optional) | `EnumBarcodeFormat` \| `Array` | `N/A` | [EnumBarcodeFormat](https://www.dynamsoft.com/capture-vision/docs/core/enums/barcode-reader/barcode-format.html?lang=js&product=dbr) or an array of `EnumBarcodeFormat` specifying the formats to recognize. |
-| `duplicateForgetTime`(optional) | `number` | `3000` | Time interval in milliseconds before duplicate barcodes can be reported again. |
-| `removePoweredByMessage`(optional) | `boolean` | `false` | Whether to remove the "powered by" message. |
-| `container`(optional) | `HTMLElement` \| `string` | `N/A` | A container element or selector for rendering the scanner and/or result view. |
-| `onUniqueBarcodeScanned` | `void` \| `Promise` | `N/A` | A callback triggered when a unique barcode is scanned (only valid in SM_MULTI_UNIQUE). |
-| `showResultView`(optional) | `boolean` | `false` | Whether to display a result view in SM_MULTI_UNIQUE mode. |
-| `showUploadImageButton`(optional) | `boolean` | `false` | Determines the visibility of the "uploadImage" button that allows the user to upload an image for decoding. |
-| `scannerViewConfig`(optional) | `ScannerViewConfig` | see [ScannerViewConfig](#scannerviewconfig) | Configuration for the scanner view. |
-| `resultViewConfig`(optional) | `ResultViewConfig` | see [ResultViewConfig](#resultviewconfig) | Configuration for the result view (only valid in SM_MULTI_UNIQUE). |
-
-**Code Snippet**
-
-```html
-
-    
    
-    
-
-```
-
-### ScannerViewConfig
-
-The ScannerViewConfig is used to configure the UI elements of the **BarcodeScannerView**. If the ScannerViewConfig is not assigned, then the library will use the default BarcodeScannerView.
-
-```ts
-interface ScannerViewConfig {
-  container?: HTMLElement | string | undefined;
-  showCloseButton?: boolean;
-}
-```
-
-| Property                | Type                           | Default Value | Description                                                     |
-| ----------------------- | ------------------------------ | --- | --------------------------------------------------------------- |
-| `container` (optional) | `HTMLElement` \| `string` \| `undefined` | `N/A` | A dedicated container for the ScannerView (video stream). |
-| `showCloseButton` (optional) | `boolean` | `false` | Determines the visibility of the "closeButton" button that allows the user to close the ScannerView. |
-
-**Code Snippet**
-
-```js
-const barcodeScannerViewConfig = {
-  showCloseButton: true // display the close button that shows up at the top right of the view
-};
-
-const barcodeScannerConfig = {
-    license: "YOUR_LICENSE_KEY_HERE",
-    scannerViewConfig: barcodeScannerViewConfig
-};
-```
-
-### ResultViewConfig
-
-The ResultViewConfig is used to configure the UI elements of the **BarcodeResultView**. If the ResultViewConfig is not assigned, then the library will use the default BarcodeResultView.
-
-```ts
-interface ResultViewConfig {
-  container?: HTMLElement | string | undefined;
-  toolbarButtonsConfig?: BarcodeResultViewToolbarButtonsConfig;
-}
-```
-
-| Property                | Type                           | Default Value | Description                                                     |
-| ----------------------- | ------------------------------ | --- | --------------------------------------------------------------- |
-| `container` (optional) | `HTMLElement` \| `string` \| `undefined` | `N/A` | A dedicated container for the ResultView. |
-| `toolbarButtonsConfig` (optional) | `BarcodeResultViewToolbarButtonsConfig` | see [BarcodeResultViewToolbarButtonsConfig](#barcoderesultviewtoolbarbuttonsconfig) | Configures the main bottom toolbar of the ResultView.|
-
-**Code Snippet**
-
-```js
-const barcodeResultViewConfig = {
-    toolbarButtonsConfig: {
-      clear: {
-          label: "Clear-all", // Changes the text label of the clear button to "Clear-all"; string is "Clear" by default
-          isHidden: true // Hides the clear button; false by default
-      },
-      done: {
-          label: "Return Home", // Changes the text label of the done button to "Return Home"; string is "Done" by default
-          isHidden: false // Hides the done button; false by default
-      }
-  },
-}
-
-const barcodeScannerConfig = {
-    license: "YOUR_LICENSE_KEY_HERE",
-    resultViewConfig: barcodeResultViewConfig
-};
-```
-
-### BarcodeResultViewToolbarButtonsConfig
-
-The BarcodeResultViewToolbarButtonsConfig is used to configure the buttons of the toolbar in the BarcodeResultView.
-
-```ts
-interface BarcodeResultViewToolbarButtonsConfig {
-  clear?: ToolbarButtonConfig;
-  done?: ToolbarButtonConfig;
-}
-```
-
-| Property                | Type                           | Description                                                     |
-| ----------------------- | ------------------------------ | --------------------------------------------------------------- |
-| `clear` (optional) | [`ToolbarButtonConfig`](#toolbarbuttonconfig)  | Configuration for the clear button of the toolbar. |
-| `done` (optional)  | [`ToolbarButtonConfig`](#toolbarbuttonconfig)  | Configuration for the done button of the toolbar.  |
-
-**Code Snippet**
-
-```js
-// Default value as shown below
-const barcodeScannerButtonConfig = {
-    clear: {
-        label: "Clear", 
-        isHidden: false
-    },
-    done: {
-        label: "Done",
-        isHidden: false
-    }
-};
-
-const barcodeResultViewConfig = {
-    toolbarButtonsConfig: barcodeScannerButtonConfig
-};
-```
-
-### ToolbarButtonConfig
-
-The interface used to configure the properties of the toolbar button.
-
-```ts
-interface ToolbarButtonConfig {
-  label: string;
-  className?: string;
-  isHidden?: boolean;
-}
-```
-
-| Property                | Type                           | Description                                                     |
-| ----------------------- | ------------------------------ | --------------------------------------------------------------- |
-| `label`      | `string`  | The text label of the button.  |
-| `className`  | `string`  | Assigns a custom class to the button (usually to apply custom styling).  |
-| `isHidden`   | `boolean` | Hides/Shows the button in the toolbar.  |
-
-### BarcodeScanResult
-
-The BarcodeScanResult is the most basic interface that is used to represent the full barcode scan result object. It comes with a result status, the original and cropped image result, and the detailed info of the decoded barcode(s).
-
-```ts
-interface BarcodeScanResult {
-  status: ResultStatus;
-  barcodeResults?: BarcodeResultItem[];
-  originalImageResult?: DSImageData;
-  barcodeImage?: DSImageData;
-}
-```
-
-| Property                | Type                           | Description                                                     |
-| ----------------------- | ------------------------------ | --------------------------------------------------------------- |
-| `status` (optional)              | [`ResultStatus`](#resultstatus)  | The status of the barcode scanning, which can be success, cancelled, or failed (indicating that something has gone wrong during the scanning process).  |
-| `originalImageResult` (optional) | [`DSImageData`]({{ site.dcvb_js_api }}core/basic-structures/ds-image-data.html)  | A `DSImageData` object that represents the original image of the successfully decoded barcode.  |
-| `barcodeResults` (optional)      | [`Array`]({{ site.js_api }}interfaces/barcode-result-item.html)  | An array of BarcodeResultItem Represents the decoded barcode(s).         |
-
-**Code Snippet**
-
-```js
-(async () => {
-    // Launch the scanner and wait for the result
-    const result = await barcodeScanner.launch();
-    console.log(result.status.message); // prints the result status message to the console
-    console.log(result.status.code); // prints the result status code to the console
-    console.log(result.barcodeResults); // prints an array containing all the decoded barcode results to the console. Note that in SM_SINGLE mode, the length of this array is 1.
-})();
-```
-
-### UtilizedTemplateNames
-
-An object that defines the names of templates utilized by the BarcodeScanner for different scanning modes.
-
-```ts
-interface UtilizedTemplateNames {
-  single: string;
-  multi_unique: string;
-  image: string;
-}
-```
-
-| Property                | Type                           | Description                                                     |
-| ----------------------- | ------------------------------ | --------------------------------------------------------------- |
-| `single`      | `string`  | Template name used for single barcode scanning mode.  |
-| `multi_unique`  | `string`  | Template name used for scanning multiple unique barcodes.  |
-| `image`   | `string` | Template name used when barcode scanning is based on a provided image input.  |
-
-**Code Snippet**
-
-```js
-const barcodeScannerConfig = {
-    //..
-    utilizedTemplateNames:{
-      single: `ReadSingleBarcode`,
-      multi_unique: `ReadBarcodes_SpeedFirst`,
-      image: `ReadBarcodes_ReadRateFirst`,
-    }
-    //..
-}
-```
-
-### ResultStatus
-
-ResultStatus is used to represent the status of the barcode scanning result. This status can be **success**, **cancelled** if the user closes the scanner during scanning, or **failed** if something went wrong during the scanning process. The *code* of the result status is a [`EnumResultStatus`](#enumresultstatus).
-
-```ts
-type ResultStatus = {
-  code: EnumResultStatus;
-  message: string;
-}
-```
-
-## Enums
-
-### EnumScanMode
-
-```ts
-enum EnumScanMode {
-    SM_SINGLE = 0,
-    SM_MULTI_UNIQUE = 1
-}
-```
-
-### EnumResultStatus
-
-```ts
-enum EnumResultStatus {
-    RS_SUCCESS = 0,
-    RS_CANCELLED = 1,
-    RS_FAILED = 2
-}
-```
\ No newline at end of file
diff --git a/programming/javascript/api-reference/index-v10.5.3000.md b/programming/javascript/api-reference/index-v10.5.3000.md
deleted file mode 100644
index 43bfa0c7..00000000
--- a/programming/javascript/api-reference/index-v10.5.3000.md
+++ /dev/null
@@ -1,180 +0,0 @@
----
-layout: default-layout
-title: Dynamsoft Barcode Reader JavaScript Edition v10.x API Reference - Main Page
-description: This is the main page of Dynamsoft Barcode Reader for JavaScript SDK API Reference.
-keywords: BarcodeReader, api reference, javascript, js
-needAutoGenerateSidebar: true
-needGenerateH3Content: true
-breadcrumbText: API Reference
-noTitleIndex: true
-
----
-
-# Dynamsoft Barcode Reader JavaScript Edition API Reference Index
-
-## [DynamsoftCaptureVisionRouter]({{ site.dcvb_js_api }}capture-vision-router/capture-vision-router-module.html)
-
-### Classes
-
-* [CaptureVisionRouter]({{ site.dcvb_js_api }}capture-vision-router/capture-vision-router-module.html)
-* [CaptureVisionRouterModule]({{ site.dcvb_js_api }}capture-vision-router/capture-vision-router-module-class.html)
-* [CapturedResultReceiver]({{ site.dcvb_js_api }}capture-vision-router/captured-result-receiver.html)
-* [IntermediateResultManager]({{ site.dcvb_js_api }}capture-vision-router/intermediate-result-manager.html)
-* [IntermediateResultReceiver]({{ site.dcvb_js_api }}capture-vision-router/intermediate-result-receiver.html)
-* [BufferedItemsManager]({{ site.dcvb_js_api }}capture-vision-router/buffered-items-manager.html)
-
-### Interfaces
-
-* [CapturedResult]({{ site.dcvb_js_api }}capture-vision-router/interfaces/captured-result.html)
-* [SimplifiedCaptureVisionSettings]({{ site.dcvb_js_api }}capture-vision-router/interfaces/simplified-capture-vision-settings.html)
-
-### Enums
-
-* [EnumImageSourceState]({{ site.dcvb_enums }}core/image-source-state.html?lang=js)
-
-## [DynamsoftBarcodeReader](./barcode-reader-module.html)
-
-### Classes
-
-* [BarcodeReaderModule](./barcode-reader-module-class.html)
-
-### Interfaces
-
-* [AztecDetails](./interfaces/aztec-details.html)
-* [BarcodeDetails](./interfaces/barcode-details.html)
-* [BarcodeResultItem](./interfaces/barcode-result-item.html)
-* [CandidateBarcodeZone](./interfaces/candidate-barcode-zone.html)
-* [CandidateBarcodeZonesUnit](./interfaces/candidate-barcode-zones-unit.html)
-* [ComplementedBarcodeImageUnit](./interfaces/complemented-barcode-image-unit.html)
-* [DataMatrixDetails](./interfaces/datamatrix-details.html)
-* [DecodedBarcodeElement](./interfaces/decoded-barcode-element.html)
-* [DecodedBarcodesResult](./interfaces/decoded-barcodes-result.html)
-* [DecodedBarcodesUnit](./interfaces/decoded-barcodes-unit.html)
-* [DeformationResistedBarcode](./interfaces/deformation-resisted-barcode.html)
-* [DeformationResistedBarcodeImageUnit](./interfaces/deformation-resisted-barcode-image-unit.html)
-* [ExtendedBarcodeResult](./interfaces/extended-barcode-result.html)
-* [LocalizedBarcodeElement](./interfaces/localized-barcode-element.html)
-* [LocalizedBarcodesUnit](./interfaces/localized-barcodes-unit.html)
-* [OneDCodeDetails](./interfaces/oned-code-details.html)
-* [PDF417Details](./interfaces/pdf417-details.html)
-* [QRCodeDetails](./interfaces/qr-code-details.html)
-* [ScaledUpBarcodeImageUnit](./interfaces/scaled-up-barcode-image-unit.html)
-* [SimplifiedBarcodeReaderSettings](./interfaces/simplified-barcode-reader-settings.html)
-
-### Enums
-
-* [EnumBarcodeFormat]({{ site.dcvb_enums }}barcode-reader/barcode-format.html?lang=js)
-* [EnumDeblurMode]({{ site.dcvb_enums }}barcode-reader/deblur-mode.html?lang=js)
-* [EnumExtendedBarcodeResultType]({{ site.dcvb_enums }}barcode-reader/extended-barcode-result-type.html?lang=js)
-* [EnumLocalizationMode]({{ site.dcvb_enums }}barcode-reader/localization-mode.html?lang=js)
-* [EnumQRCodeErrorCorrectionLevel]({{ site.dcvb_enums }}barcode-reader/qr-code-error-correction-level.html?lang=js)
-
-## [DynamsoftCameraEnhancer]({{ site.dce_js_api }}index.html)
-
-### Classes
-
-* [CameraEnhancer]({{ site.dce_js_api }}index.html)
-* [CameraView]({{ site.dce_js_api }}cameraview.html)
-* [ImageEditorView]({{ site.dce_js_api }}imageeditorview.html)
-* [CameraEnhancerModule]({{ site.dce_js_api }}cameraenhancermodule.html)
-* [DrawingItem]({{ site.dce_js_api }}drawingitem.html)
-* [DrawingLayer]({{ site.dce_js_api }}drawinglayer.html)
-* [DrawingStyleManager]({{ site.dce_js_api }}drawinglayer.html)
-* [Feedback]({{ site.dce_js_api }}feedback.html)
-
-### Interfaces
-
-* [CameraTestResponse]({{ site.dce_js_api }}interface/cameratestresponse.html)
-* [DCEFrame]({{ site.dce_js_api }}interface/dceframe.html)
-* [DrawingItemEvent]({{ site.dce_js_api }}interface/drawingitemevent.html)
-* [DrawingStyle]({{ site.dce_js_api }}interface/drawingstyle.html)
-* [Note]({{ site.dce_js_api }}interface/note.html)
-* [PlayCallbackInfo]({{ site.dce_js_api }}interface/playcallbackinfo.html)
-* [Resolution]({{ site.dce_js_api }}interface/resolution.html)
-* [TipConfig]({{ site.dce_js_api }}interface/tipconfig.html)
-* [VideoDevice]({{ site.dce_js_api }}interface/videodevice.html)
-* [VideoFrameTag]({{ site.dce_js_api }}interface/videoframetag.html)
-
-### Enums
-
-* [EnumDrawingItemMediaType]({{ site.dce_js_api }}enum/enumdrawingitemmediatype.html)
-* [EnumDrawingItemState]({{ site.dce_js_api }}enum/enumdrawingitemstate.html)
-* [EnumEnhancedFeatures]({{ site.dce_js_api }}enum/enumenhancedfeatures.html)
-
-## [DynamsoftCore]({{ site.dcvb_js_api }}core/core-module.html)
-
-### Classes
-
-* [CoreModule]({{ site.dcvb_js_api }}core/core-module-class.html)
-* [ImageSourceAdapter]({{ site.dcvb_js_api }}core/image-source-adapter.html)
-
-### Interfaces
-
-* [Arc]({{ site.dcvb_js_api }}core/basic-structures/arc.html)
-* [Contour]({{ site.dcvb_js_api }}core/basic-structures/contour.html)
-* [Corner]({{ site.dcvb_js_api }}core/basic-structures/corner.html)
-* [DSRect]({{ site.dcvb_js_api }}core/basic-structures/ds-rect.html)
-* [Edge]({{ site.dcvb_js_api }}core/basic-structures/edge.html)
-* [LineSegment]({{ site.dcvb_js_api }}core/basic-structures/line-segment.html)
-* [Point]({{ site.dcvb_js_api }}core/basic-structures/point.html)
-* [Polygon]({{ site.dcvb_js_api }}core/basic-structures/polygon.html)
-* [Quadrilateral]({{ site.dcvb_js_api }}core/basic-structures/quadrilateral.html)
-* [Rect]({{ site.dcvb_js_api }}core/basic-structures/rect.html)
-* [CapturedResultItem]({{ site.dcvb_js_api }}core/basic-structures/captured-result-item.html)
-* [DSFile]({{ site.dcvb_js_api }}core/basic-structures/ds-file.html)
-* [DSImageData]({{ site.dcvb_js_api }}core/basic-structures/ds-image-data.html)
-* [ImageSourceErrorListener]({{ site.dcvb_js_api }}core/basic-structures/image-source-error-listener.html)
-* [ImageTag]({{ site.dcvb_js_api }}core/basic-structures/image-tag.html)
-* [OriginalImageResultItem]({{ site.dcvb_js_api }}core/basic-structures/original-image-result-item.html)
-* [TextZone]({{ site.dcvb_js_api }}core/intermediate-results/text-zone.html)
-* [Warning]({{ site.dcvb_js_api }}core/basic-structures/warning.html)
-* [BinaryImageUnit]({{ site.dcvb_js_api }}core/intermediate-results/binary-image-unit.html)
-* [ColourImageUnit]({{ site.dcvb_js_api }}core/intermediate-results/colour-image-unit.html)
-* [ContoursUnit]({{ site.dcvb_js_api }}core/intermediate-results/contours-unit.html)
-* [EnhancedGrayscaleImageUnit]({{ site.dcvb_js_api }}core/intermediate-results/enhanced-grayscale-image-unit.html)
-* [GrayscaleImageUnit]({{ site.dcvb_js_api }}core/intermediate-results/grayscale-image-unit.html)
-* [IntermediateResult]({{ site.dcvb_js_api }}core/intermediate-results/intermediate-result.html)
-* [IntermediateResultExtraInfo]({{ site.dcvb_js_api }}core/intermediate-results/intermediate-result-extra-info.html)
-* [IntermediateResultUnit]({{ site.dcvb_js_api }}core/intermediate-results/intermediate-result-unit.html)
-* [ObservationParameters]({{ site.dcvb_js_api }}core/intermediate-results/observation-parameters.html)
-* [LineSegmentsUnit]({{ site.dcvb_js_api }}core/intermediate-results/line-segments-unit.html)
-* [PredetectedRegionElement]({{ site.dcvb_js_api }}core/intermediate-results/predetected-region-element.html)
-* [PredetectedRegionsUnit]({{ site.dcvb_js_api }}core/intermediate-results/predetected-regions-unit.html)
-* [RegionObjectElement]({{ site.dcvb_js_api }}core/intermediate-results/region-object-element.html)
-* [ScaledDownColourImageUnit]({{ site.dcvb_js_api }}core/intermediate-results/scaled-down-colour-image-unit.html)
-* [TextRemovedBinaryImageUnit]({{ site.dcvb_js_api }}core/intermediate-results/text-removed-binary-image-unit.html)
-* [TextureDetectionResultUnit]({{ site.dcvb_js_api }}core/intermediate-results/texture-detection-result-unit.html)
-* [TextureRemovedBinaryImageUnit]({{ site.dcvb_js_api }}core/intermediate-results/texture-removed-binary-image-unit.html)
-* [TextureRemovedGrayscaleImageUnit]({{ site.dcvb_js_api }}core/intermediate-results/texture-removed-grayscale-image-unit.html)
-* [TextZonesUnit]({{ site.dcvb_js_api }}core/intermediate-results/text-zones-unit.html)
-* [TransformedGrayscaleImageUnit]({{ site.dcvb_js_api }}core/intermediate-results/transformed-grayscale-image-unit.html)
-
-### Enums
-
-* [EnumBufferOverflowProtectionMode]({{ site.dcvb_enums }}core/buffer-overflow-protection-mode.html?lang=js)
-* [EnumCapturedResultItemType]({{ site.dcvb_enums }}core/captured-result-item-type.html?lang=js)
-* [EnumColourChannelUsageType]({{ site.dcvb_enums }}core/colour-channel-usage-type.html?lang=js)
-* [EnumCornerType]({{ site.dcvb_enums }}core/corner-type.html?lang=js)
-* [EnumErrorCode]({{ site.dcvb_enums }}core/error-code.html?lang=js)
-* [EnumGrayscaleEnhancementMode]({{ site.dcvb_enums }}core/grayscale-enhancement-mode.html?lang=js)
-* [EnumGrayscaleTransformationMode]({{ site.dcvb_enums }}core/grayscale-transformation-mode.html?lang=js)
-* [EnumImagePixelFormat]({{ site.dcvb_enums }}core/image-pixel-format.html?lang=js)
-* [EnumImageTagType]({{ site.dcvb_enums }}core/image-tag-type.html?lang=js)
-* [EnumIntermediateResultUnitType]({{ site.dcvb_enums }}core/intermediate-result-unit-type.html?lang=js)
-* [EnumRegionObjectElementType]({{ site.dcvb_enums }}core/region-object-element-type.html?lang=js)
-* [EnumSectionType]({{ site.dcvb_enums }}core/section-type.html?lang=js)
-
-## [DynamsoftLicense]({{ site.dcvb_js_api }}license/license-module.html)
-
-### Classes
-
-* [LicenseModule]({{ site.dcvb_js_api }}license/license-module-class.html)
-* [LicenseManager]({{ site.dcvb_js_api }}license/license-manager.html)
-
-## [DynamsoftUtility]({{ site.dcvb_js_api }}utility/utility-module.html)
-
-### Classes
-
-* [UtilityModule]({{ site.dcvb_js_api }}utility/utility-module-class.html)
-* [ImageManager]({{ site.dcvb_js_api }}utility/image-manager.html)
-* [MultiFrameResultCrossFilter]({{ site.dcvb_js_api }}utility//multi-frame-result-cross-filter.html)
\ No newline at end of file
diff --git a/programming/javascript/api-reference/interfaces/candidate-barcode-zones-unit-v2.0.21.md b/programming/javascript/api-reference/interfaces/candidate-barcode-zones-unit-v2.0.21.md
deleted file mode 100644
index 974d7708..00000000
--- a/programming/javascript/api-reference/interfaces/candidate-barcode-zones-unit-v2.0.21.md
+++ /dev/null
@@ -1,34 +0,0 @@
----
-layout: default-layout
-title: interface CandidateBarcodeZonesUnit - Dynamsoft Barcode Reader Module JS Edition API Reference
-description: This page shows the JS edition of the interface CandidateBarcodeZonesUnit in Dynamsoft Barcode Reader Module.
-keywords: candidate barcode zone, JS
-needAutoGenerateSidebar: true
-noTitleIndex: true
----
-
-# CandidateBarcodeZonesUnit
-
-A unit of data related to candidate barcode zones within an image.
-
-```typescript
-interface CandidateBarcodeZonesUnit extends Core.IntermediateResultUnit {
-    candidateBarcodeZones: Array;
-}
-```
-
-
-## candidateBarcodeZones
-
-An array of `Quadrilateral` objects. Each `Quadrilateral` represents a region or zone within an image that is considered a candidate for containing a barcode.
-
-```typescript
-candidateBarcodeZones: Array;
-```
-
-**See also**
-
-* [Quadrilateral]({{ site.dcv_js_api }}core/basic-structures/quadrilateral.html)
\ No newline at end of file
diff --git a/programming/javascript/api-reference/interfaces/decoded-barcodes-result-v10.5.3000.md b/programming/javascript/api-reference/interfaces/decoded-barcodes-result-v10.5.3000.md
deleted file mode 100644
index 1c803771..00000000
--- a/programming/javascript/api-reference/interfaces/decoded-barcodes-result-v10.5.3000.md
+++ /dev/null
@@ -1,78 +0,0 @@
----
-layout: default-layout
-title: interface DecodedBarcodesResult - Dynamsoft Core Module JS Edition API Reference
-description: This page shows the JS edition of the interface DecodedBarcodesResult in Dynamsoft DBR Module.
-keywords: decoded barcode, barcode result, item, JS
-needAutoGenerateSidebar: true
-noTitleIndex: true
----
-
-# DecodedBarcodesResult
-
-Interface DecodedBarcodesResult represents information of decoded barcodes from an image.
-
-```typescript
-interface DecodedBarcodesResult {
-    readonly originalImageHashId: string;
-    readonly originalImageTag: Core.ImageTag;
-    readonly barcodeResultItems: Array;
-    readonly errorCode: number;
-    readonly errorString: string;
-}
-```
-
-
-## originalImageHashId
-
-A unique identifier or hash of the original image from which the barcodes were decoded. It can be used to associate the result with a specific input image.
-
-```typescript
-readonly originalImageHashId: string;
-```
-
-## originalImageTag
-
-An image tag associated with the original image.
-
-```typescript
-readonly originalImageTag: Core.ImageTag;
-```
-
-**See also**
-
-* [ImageTag]({{ site.dcvb_js_api }}core/basic-structures/image-tag.html)
-
-## barcodeResultItems
-
-An array of BarcodeResultItem objects, representing the list of decoded barcodes found in the image.
-
-```typescript
-readonly barcodeResultItems: Array;
-```
-
-**See also**
-
-* [BarcodeResultItem]({{ site.js_api }}interfaces/barcode-result-item.html)
-
-## errorCode
-
-The error code of the barcode reading result, if an error occurred.
-
-```typescript
-readonly errorCode: number;
-```
-
-## errorString
-
-The error message of the barcode reading result, if an error occurred.
-
-```typescript
-readonly errorString: string;
-```
\ No newline at end of file
diff --git a/programming/javascript/api-reference/interfaces/deformation-resisted-barcode-image-unit-v2.0.21.md b/programming/javascript/api-reference/interfaces/deformation-resisted-barcode-image-unit-v2.0.21.md
deleted file mode 100644
index e6a246dc..00000000
--- a/programming/javascript/api-reference/interfaces/deformation-resisted-barcode-image-unit-v2.0.21.md
+++ /dev/null
@@ -1,34 +0,0 @@
----
-layout: default-layout
-title: interface DeformationResistedBarcodeImageUnit - Dynamsoft Barcode Reader Module JS Edition API Reference
-description: This page shows the JS edition of the interface DeformationResistedBarcodeImageUnit in Dynamsoft Barcode Reader Module.
-keywords: deformation resisted, Image unit, JS
-needAutoGenerateSidebar: true
-noTitleIndex: true
----
-
-# DeformationResistedBarcodeImageUnit
-
-A unit of data that contains deformation resisted barcode image. It extends the `IntermediateResultUnit` interface.
-
-```typescript
-interface DeformationResistedBarcodeImageUnit extends Core.IntermediateResultUnit {
-    imageData: Core.DSImageData;
-}
-```
-
-
-## imageData
-
-The image data of the deformation resisted barcode.
-
-```typescript
-imageData: Core.DSImageData;
-```
-
-**See also**
-
-* [DSImageData]({{ site.dcv_js_api }}core/basic-structures/ds-image-data.html)
\ No newline at end of file
diff --git a/programming/javascript/api-reference/interfaces/pdf417-details-v10.5.3000.md b/programming/javascript/api-reference/interfaces/pdf417-details-v10.5.3000.md
deleted file mode 100644
index 71e43098..00000000
--- a/programming/javascript/api-reference/interfaces/pdf417-details-v10.5.3000.md
+++ /dev/null
@@ -1,70 +0,0 @@
----
-layout: default-layout
-title: interface PDF417Details - Dynamsoft Core Module JS Edition API Reference
-description: This page shows the JS edition of the interface PDF417Details in Dynamsoft DBR Module.
-keywords: PDF417 details, JS
-needAutoGenerateSidebar: true
-noTitleIndex: true
----
-
-# PDF417Details
-
-This interface extends `BarcodeDetails` interface and adds properties specific to PDF417 barcodes such as `rows`, `columns`, `errorCorrectionLevel`, etc.
-
-```typescript
-interface PDF417Details extends BarcodeDetails {
-    rows: number;
-    columns: number;
-    errorCorrectionLevel: number;
-    hasLeftRowIndicator: number;
-    hasRightRowIndicator: number;
-}
-```
-
-
-## rows
-
-The row count of the PDF417 barcode, indicating how many rows of modules it contains.
-
-```typescript
-rows: number;
-```
-
-## columns
-
-The column count of the PDF417 barcode, indicating how many columns of modules it contains.
-
-```typescript
-columns: number;
-```
-
-## errorCorrectionLevel
-
-The error correction level of the PDF417 barcode.
-
-```typescript
-errorCorrectionLevel: number;
-```
-
-## hasLeftRowIndicator
-
-Indicates whether the PDF417 code has a left row indicator (1 means yes, 0 means no). Row indicators are used to denote the start of a new row in the barcode.
-
-```typescript
-hasLeftRowIndicator: number;
-```
-
-## hasRightRowIndicator
-
-Indicates whether the PDF417 code has a right row indicator (1 means yes, 0 means no). Similar to the left row indicator, the right row indicator is used to denote the end of a row in the barcode.
-
-```typescript
-hasRightRowIndicator: number;
-```
\ No newline at end of file
diff --git a/programming/javascript/api-reference/interfaces/qr-code-details-v10.2.10.md b/programming/javascript/api-reference/interfaces/qr-code-details-v10.2.10.md
deleted file mode 100644
index b3d9428a..00000000
--- a/programming/javascript/api-reference/interfaces/qr-code-details-v10.2.10.md
+++ /dev/null
@@ -1,111 +0,0 @@
----
-layout: default-layout
-title: interface QR CodeDetails - Dynamsoft Core Module JS Edition API Reference
-description: This page shows the JS edition of the interface QR CodeDetails in Dynamsoft DBR Module.
-keywords: QR Code details, JS
-needAutoGenerateSidebar: true
-noTitleIndex: true
----
-
-# QRCodeDetails
-
-This interface extends `BarcodeDetails` interface and adds properties specific to QR barcodes such as `rows`, `columns`, `errorCorrectionLevel`, etc.
-
-```typescript
-interface QRCodeDetails extends BarcodeDetails {
-    rows: number;
-    columns: number;
-    errorCorrectionLevel: number;
-    version: number;
-    model: number;
-    mode: number;
-    page: number;
-    totalPage: number;
-    parityData: number;
-}
-```
-
-
-
-## rows
-
-The row count of the QR Code, indicating how many rows of modules it contains.
-
-```typescript
-rows: number;
-```
-
-## columns
-
-The column count of the QR Code, indicating how many columns of modules it contains.
-
-```typescript
-columns: number;
-```
-
-## errorCorrectionLevel
-
-The error correction level of the QR Code.
-
-```typescript
-errorCorrectionLevel: number;
-```
-
-## version
-
-The version of the QR code. QR codes come in different versions, each with varying data capacities and sizes.
-
-```typescript
-version: number;
-```
-
-## model
-
-Number of models of the QR Code.
-
-```typescript
-model: number;
-```
-
-## mode
-
-Identify the first data encoding mode of the QR Code.
-
-```typescript
-mode: number;
-```
-
-## page
-
-Position of the particular symbol in the Structured Append format of the QR Code.
-
-```typescript
-page: number;
-```
-
-## totalPage
-
-Identify the total number of symbols to be concatenated in the Structured Append format of the QR Code.
-
-```typescript
-totalPage: number;
-```
-
-## parityData
-
-A value obtained by XORing byte by byte the ASCII/JIS values of all the original input data before division into symbol blocks. It's used for error checking and correction.
-
-```typescript
-parityData: number;
-```
\ No newline at end of file
diff --git a/programming/javascript/index-v10.4.3100.md b/programming/javascript/index-v10.4.3100.md
deleted file mode 100644
index 55f989f2..00000000
--- a/programming/javascript/index-v10.4.3100.md
+++ /dev/null
@@ -1,88 +0,0 @@
----
-layout: default-layout
-title: Introduction - Dynamsoft Barcode Reader JavaScript Edition
-description: This is introduction page of Dynamsoft Barcode Reader JavaScript SDK version 10.0.21.
-keywords: javascript, js
-needAutoGenerateSidebar: true
-needGenerateH3Content: true
-noTitleIndex: false
-breadcrumbText: JavaScript
----
-
-# Introduction to Dynamsoft Barcode Reader JavaScript Edition version 10.x
-
-Dynamsoft Barcode Reader (DBR) can be used in JavaScript to add barcode reading capabilities to websites running in modern browsers. It is ideal for
-
-* organizations who already have sophisticated websites and do not intend to develop mobile applications for the same purposes; or
-* organizations whose customers have no desire to install applications for temporary usage of their services.
-
-To get a fast start, you can
-
-* read the [User Guide](user-guide/), or
-* try the [Samples and Demos](samples-demos/)
-
-The following describes the highlights of DBR JavaScript edition (DBR-JS) version 10.x.
-
-## Fast Integration
-
-This [JSFiddle example](https://jsfiddle.net/DynamsoftTeam/csm2f9wb/) demonstrates all the code needed to build a web application using DBR, end users of the web page can open it in a browser, access their cameras and read barcodes directly from the video input.
-
-### Camera Control
-
-Customers generally need to scan a barcode on the fly at which time there is no better input than the camera hooked to or built into the device itself. As shown in the code snippet above, the product **Dynamsoft Camera Enhancer (DCE)** is used to provide camera support. It makes use of the powerful [**MediaDevices**](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices) interface (provided by the browser itself) to instantly access the video input of the camera, capture image frames and supply them to the back-end decoding engine.
-
-> DBR and DCE communicate through the interface called [Image Source Adapter]({{ site.dcvb_architecture }}input.html#image-source-adapter?lang=js).
-
-### Interactive UI
-
-Good interaction design is essential for a website. With the help of DCE, the barcode reading process is made interactive as shown in the screenshot below.
-
-![Interactive UI](assets/interactive-ui.png)
-
-## High Performance
-
-Barcode reading is usually just an auxiliary way to assist a small step in a complex workflow. Customers like the convenience, but if it takes too long or is error-prone, their patience will quickly run out. Therefore, high performance is crucial.
-
-### Unparalleled Speed
-
-DBR showcases Dynamsoft's cutting-edge technology in light-speed recognition of barcodes. In most cases, an image gets deblurred, binarized and read under 100 milliseconds.
-
-With the help of DCE JS, DBR no longer wastes time on image capture and often gets high-quality images for processing, which further increases its speed.
-
-### Proficiency in Handling Difficult Environments
-
-The actual use environment is unpredictable. The barcode may appear distorted, inverted, or partially damaged; the background may be textured or spotted; the light may be very low, and there may be shadows and glare. DBR handles all these cases with its rich image processing algorithms through various adjustable settings.
-
-### Exceptional Accuracy
-
-DBR does a lot of preparation work to make sure the barcode is as legible as possible for the decoding engine to read. This ensures a very high accuracy. In addition, DBR achieves even higher accuracy through the following ways:
-
-* DBR can verify results by comparing the results of multiple consecutive recognitions;
-* DBR has a confidence score for each recognition which can be used to filter unwanted results;
-* DBR is also able to verify the barcode result with printed text that accompanies the barcode with the help of the product **Dynamsoft Label Recognizer (DLR)**.
-
-Through many experiences, DBR has also cultivated its error correction ability to handle
-
-* Non-standard barcodes which do not strictly abide by the specification;
-* Deformed barcodes which are usually caused by improper printing.
-
-## Effortless Expansion
-
-DBR-JS v10.x is based on [Dynamsoft Capture Vision]({{site.dcvb_architecture}}) which is a modular architecture. This architecture makes it easy to add new functionality or custom behavior with very little change to the code. Two examples are:
-
-* Add **Dynamsoft Document Normalizer (DDN)** to do perspective correction before pass an image frame to read barcodes;
-* Add **Dynamsoft Code Parser (DCP)** to parse the text embedded in the PDF417 on driver's licenses.
-
-## Next Step
-
-Read the [User Guide](user-guide/) to start building your own websites with barcode reading capabilities.
-
-## See Also
-
-### API Reference
-
-For an overview of the APIs, see the [API Reference](api-reference/).
-
-### Release Notes
-
-For a peek of DBR-JS history, check the [Release Notes](release-notes/).
diff --git a/programming/javascript/index-v10.5.3000.md b/programming/javascript/index-v10.5.3000.md
deleted file mode 100644
index 0a2d97c4..00000000
--- a/programming/javascript/index-v10.5.3000.md
+++ /dev/null
@@ -1,105 +0,0 @@
----
-layout: default-layout
-title: Introduction - Dynamsoft Barcode Reader JavaScript Edition
-description: This is introduction page of Dynamsoft Barcode Reader JavaScript SDK version 10.0.21.
-keywords: javascript, js
-needAutoGenerateSidebar: true
-needGenerateH3Content: true
-noTitleIndex: true
-breadcrumbText: JavaScript
----
-
-# Introduction to Dynamsoft Barcode Reader JavaScript Edition version 10.x
-
-Dynamsoft Barcode Reader (DBR) can be used in JavaScript to add barcode reading capabilities to websites running in modern browsers. It is ideal for
-
-* organizations who already have sophisticated websites and do not intend to develop mobile applications for the same purposes; or
-* organizations whose customers have no desire to install applications for temporary usage of their services.
-
-To get a fast start, you can
-
-* read the [User Guide](user-guide/barcode-scanner.html), or
-* try the [Samples and Demos](samples-demos/)
-
-The following describes the highlights of DBR JavaScript edition (DBR-JS) version 10.x.
-
-# ✨New in v10.5.3000: BarcodeScanner – Simplified API and Built-in UI
-
-Version 10.5.3000 introduces the all-new `BarcodeScanner` class, offering a streamlined API and a prebuilt interactive UI, making barcode scanning integration easier than ever. This is now the recommended way to use DBR-JS, especially for developers who want a quick, clean, and robust scanning experience with minimal setup.
-
-With `BarcodeScanner`, you can:
-
-- Instantiate and configure the scanner with just a few lines of code;
-
-- Select your scanning mode and present a ready-to-use scanning interface;
-
-- Focus on your application logic without worrying about camera setup, UI rendering, or lifecycle management.
-
-> [!TIP]
-> You can either get a [quick start with the BarcodeScanner APIs](user-guide/barcode-scanner.html) or experience a highly customizable [development with the foundational APIs](user-guide/index.html). If you're just starting out, we highly recommend using the `BarcodeScanner` class for the best balance of simplicity, performance, and user experience.
-
----
-
-## Fast Integration
-
-This [JSFiddle example](https://jsfiddle.net/DynamsoftTeam/gcqjf5r7/) demonstrates all the code needed to build a web application using `BarcodeScanner`, end users of the web page can open it in a browser, access their cameras and read barcodes directly from the video input.
-
-### Camera Control
-
-Customers generally need to scan a barcode on the fly at which time there is no better input than the camera hooked to or built into the device itself. As shown in the code snippet above, the product **Dynamsoft Camera Enhancer (DCE)** is used to provide camera support. It makes use of the powerful [**MediaDevices**](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices) interface (provided by the browser itself) to instantly access the video input of the camera, capture image frames and supply them to the back-end decoding engine.
-
-> DBR and DCE communicate through the interface called [Image Source Adapter]({{ site.dcvb_architecture }}input.html#image-source-adapter?lang=js).
-
-### Interactive UI
-
-Good interaction design is essential for a website. With the help of DCE, the barcode reading process is made interactive as shown in the screenshot below.
-
-![Interactive UI](assets/interactive-ui.png)
-
-## High Performance
-
-Barcode reading is usually just an auxiliary way to assist a small step in a complex workflow. Customers like the convenience, but if it takes too long or is error-prone, their patience will quickly run out. Therefore, high performance is crucial.
-
-### Unparalleled Speed
-
-DBR showcases Dynamsoft's cutting-edge technology in light-speed recognition of barcodes. In most cases, an image gets deblurred, binarized and read under 100 milliseconds.
-
-With the help of DCE JS, DBR no longer wastes time on image capture and often gets high-quality images for processing, which further increases its speed.
-
-### Proficiency in Handling Difficult Environments
-
-The actual use environment is unpredictable. The barcode may appear distorted, inverted, or partially damaged; the background may be textured or spotted; the light may be very low, and there may be shadows and glare. DBR handles all these cases with its rich image processing algorithms through various adjustable settings.
-
-### Exceptional Accuracy
-
-DBR does a lot of preparation work to make sure the barcode is as legible as possible for the decoding engine to read. This ensures a very high accuracy. In addition, DBR achieves even higher accuracy through the following ways:
-
-* DBR can verify results by comparing the results of multiple consecutive recognitions;
-* DBR has a confidence score for each recognition which can be used to filter unwanted results;
-* DBR is also able to verify the barcode result with printed text that accompanies the barcode with the help of the product **Dynamsoft Label Recognizer (DLR)**.
-
-Through many experiences, DBR has also cultivated its error correction ability to handle
-
-* Non-standard barcodes which do not strictly abide by the specification;
-* Deformed barcodes which are usually caused by improper printing.
-
-## Effortless Expansion
-
-DBR-JS v10.x is based on [Dynamsoft Capture Vision]({{site.dcvb_architecture}}) which is a modular architecture. This architecture makes it easy to add new functionality or custom behavior with very little change to the code. Two examples are:
-
-* Add **Dynamsoft Document Normalizer (DDN)** to do perspective correction before pass an image frame to read barcodes;
-* Add **Dynamsoft Code Parser (DCP)** to parse the text embedded in the PDF417 on driver's licenses.
-
-## Next Step
-
-Read the [User Guide](user-guide/barcode-scanner.html) to start building your own websites with barcode reading capabilities.
-
-## See Also
-
-### API Reference
-
-For an overview of the APIs, see the [API Reference](api-reference/barcode-scanner.html).
-
-### Release Notes
-
-For a peek of DBR-JS history, check the [Release Notes](release-notes/).
diff --git a/programming/javascript/release-notes/index.md b/programming/javascript/release-notes/index.md
index 6582a2fa..1b620133 100644
--- a/programming/javascript/release-notes/index.md
+++ b/programming/javascript/release-notes/index.md
@@ -5,7 +5,6 @@ description: This is the release notes page of Dynamsoft Barcode Reader JavaScri
 keywords: release notes, javascript
 needAutoGenerateSidebar: false
 breadcrumbText: Release Notes
-permalink: /programming/javascript/release-notes/index.html
 ---
 
 # DBR JavaScript SDK - Release Notes
diff --git a/programming/javascript/release-notes/js-9.md b/programming/javascript/release-notes/js-9.md
index e4721774..57bd1ddf 100644
--- a/programming/javascript/release-notes/js-9.md
+++ b/programming/javascript/release-notes/js-9.md
@@ -112,7 +112,7 @@ permalink: /programming/javascript/release-notes/js-9.html
 #### Improved
 
 - Updated the barcode reader algorithm to v9.6.10.
-- Updated the internal `Dynamsoft Camera Enhancer` to [v3.3.1](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/release-note/release-notes-3.x.html#331-02202023).
+- Updated the internal `Dynamsoft Camera Enhancer` to [v3.3.1](https://www.dynamsoft.com/camera-enhancer/docs-archive/web/programming/javascript/release-note/release-notes-3.x.html#331-02202023).
 - The method [`decodeBuffer`](../api-reference/BarcodeReader.md#decodebuffer) is updated to accept an additional parameter "orientation" to help specify the orientation of the image data.
 - The interface [`LocalizationResult`](../api-reference/interface/LocalizationResult.md) is updated to have a new property "transformationMatrix".
 - Three missing errorcodes are added: DBR_PANORAMA_LICENSE_INVALID, DBR_PHARMACODE_LICENSE_INVALID, DBR_IMAGE_ORIENTATION_INVALID. Check the full list at [`EnumErrorCode`](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/enum/EnumErrorCode.html).
@@ -197,7 +197,7 @@ permalink: /programming/javascript/release-notes/js-9.html
 ## 9.2.12 (08/04/2022)
 
 * Fixed a bug where the scan region mask and/or other shapes drawn on the UI were not updated when the view changed to landscape from portrait or vice versa on mobile devices.
-* This version uses [Dynamsoft Camera Enhancer version 3.0.1](https://www.dynamsoft.com/camera-enhancer/docs/programming/javascript/release-note/release-notes-3.x.html?ver=latest#301-08042022).
+* This version uses [Dynamsoft Camera Enhancer version 3.0.1](https://www.dynamsoft.com/camera-enhancer/docs-archive/web/programming/javascript/release-note/release-notes-3.x.html?ver=latest#301-08042022).
 
 ## 9.2.11 (07/28/2022)
 
@@ -213,7 +213,7 @@ permalink: /programming/javascript/release-notes/js-9.html
 * The method `setImageSource()` now takes an additional parameter `options` which helps to pass the information needed by the `BarcodeReader` object, such as the definition (`Dynamsoft.DCE.DrawingItem`) for creating the shapes that highlight barcodes.
 * When reading 1D barcodes, the callback `onFrameRead` now verifies a result across multiple frames before outputting it so that it is more reliable. The same logic was always used for the callback `onUniqueRead`.
 * The methods `pauseScan()` (for `BarcodeScanner`) and `pauseScanning()` (for `BarcodeReader`) now both accept an optional parameter `options`, which can control the behavior of the pause, such as whether to keep results highlighted (`keepResultsHighlighted`).
-* This version uses [Dynamsoft Camera Enhancer version 3.0.0](https://www.dynamsoft.com/camera-enhancer/docs/programming/javascript/release-note/release-notes-3.x.html#300-07272022) instead of the previous version 2.3.2.
+* This version uses [Dynamsoft Camera Enhancer version 3.0.0](https://www.dynamsoft.com/camera-enhancer/docs-archive/web/programming/javascript/release-note/release-notes-3.x.html#300-07272022) instead of the previous version 2.3.2.
 
 ### Fixed
 
diff --git a/programming/javascript/samples-demos/index-v10.4.3100.md b/programming/javascript/samples-demos/index-v10.4.3100.md
deleted file mode 100644
index f4671783..00000000
--- a/programming/javascript/samples-demos/index-v10.4.3100.md
+++ /dev/null
@@ -1,188 +0,0 @@
----
-layout: default-layout
-title: Samples and Demos Index - Dynamsoft Barcode Reader JavaScript Edition
-description: Refer these samples and demos for different frameworks such as Angular, React, NuxtJS, etc, of Dynamsoft Barcode Reader JavaScript Edition.
-keywords: javascript, js
-breadcrumbText: Samples and Demos
-noTitleIndex: true
-needAutoGenerateSidebar: false
----
-
-
    
-    
-    
    
-        
    Demo and Samples - DBR JavaScript Edition
    
-    
    
-    
    
-        
    Hello World
    
-        
    
-            
    Hello World 
-                     Run it↗
-            
    
-            
    Read
-                    an Existing Image
    
-            
    Hello World in
-                    Angular (Angular logo) 
-                        
    
-            
    
-                    Hello World in
-                    React (React logo)
-                        
    
-            
    
-                    Hello World in
-                    React (using Hooks) (React logo)
-                        
    
-                
    
-                    Hello World in
-                    Vue 3 (Vue3 logo)
-                
    
-                
    
-                    Hello World in
-                    Next.js ()
-                
    
-                
    
-                    Hello World in
-                    NuxtJS ()
-                
    
-                
    
-                    Hello World in
-                    Electron (Electron logo)
-                
    
-                
    Hello World in PWA
-                
    
-                
    Hello World with RequireJS
-                
    
-                
    Hello World with ES6
-                
    
-                
    Hello World in WebView
-                
    
-        
    
-        
    Use Case
    
-        
    
-            
    Read Video and
-                    Fill a
-                    Form
    
-            
    Read a
-                    Driver's License
    
-            
    Show Result Texts on the Video
    
-            
    Find Item via Barcode
    
-        
    
-        
-        
    Others
    
-        
    
-            
    Collect
-                        Images for Debugging
-            
    
-        
    
-    
    
-    
    
-        
    Official online Demo
    
-    
    
-
-
    
-
diff --git a/programming/javascript/samples-demos/index-v11.0.3000.md b/programming/javascript/samples-demos/index-v11.0.3000.md
deleted file mode 100644
index 0c466488..00000000
--- a/programming/javascript/samples-demos/index-v11.0.3000.md
+++ /dev/null
@@ -1,310 +0,0 @@
----
-layout: default-layout
-title: Samples and Demos Index - Dynamsoft Barcode Reader JavaScript Edition
-description: Refer these samples and demos for different frameworks such as Angular, React, NuxtJS, etc, of Dynamsoft Barcode Reader JavaScript Edition.
-keywords: javascript, js
-breadcrumbText: Samples and Demos
-noTitleIndex: true
-needAutoGenerateSidebar: false
----
-
-
-
    
-    
-        
-    
-    
    
-        
    BarcodeScanner API Samples
    
-    
    
-    
    
-        
    Scan Single Barcode
    
-        
    
-            
    Hello World
-                
-            
    
-            
    Scan and Search
-                
-            
    
-            
    Hello World in
-                    Angular (Angular logo)
-                
-                
-            
    
-            
    
-                    Hello World in
-                    React (React logo)
-                
-                
-            
    
-            
    
-                    Hello World in
-                    Vue (Vue logo)
-                
-                
-            
    
-        
    
-        
    Scan Multiple Barcodes
    
-        
    
-            
    Hello World
-            
-                
-            
    
-            
    Scan 
-                to Cart Simulation
-                
-            
    
-        
    
-    
    
-    
    
-        
    Foundational API Samples
    
-    
    
-    
    
-        
    Hello World
    
-        
    
-            
    Hello 
-                World
-                
-            
    
-            
    Read
-                    an Existing
-                    Image
-                
-            
    
-            
    Hello World in
-                    Angular (Angular logo)
-                
-                
-            
    
-            
    Hello World in
-                    Blazor (Blazor logo)
-                
-                
-            
    
-            
    
-                    Hello World in
-                    React (React logo)
-                
-                
-            
    
-            
    
-                Hello World in
-                    React(using Hooks)(React logo)
-                
-                
-            
    
-            
    
-                    Hello World in
-                    Vue (Vue logo)
-                
-                
-            
    
-            
    
-                    Hello World in
-                    Next.js (
-                        
-                            
-                                
-                                    
-                                        
-                                        
-                                        
-                                    
-                                    
-                                
-                            
-                        
-                    )
-                
-            
    
-            
    
-                    Hello World in
-                    NuxtJS (
-                        
-                            
-                            
-                            
-                        
-                    )
-                
-            
    
-            
    
-                    Hello World in
-                    Electron (Electron logo)
-                
-                
-            
    
-            
    Hello World in
-                    PWA
-                
-            
    
-            
    Hello
-                    World with
-                    RequireJS
-                
-            
    
-            
    Hello
-                    World with
-                    ES6
-                
-            
    
-            
    
-                Hello World in
-                WebView 
-            
-        
    
-        
    
-        
    Use Case
    
-        
    
-            
    Read Video and
-                    Fill a
-                    Form
-                
-            
    
-            
    Read a
-                    Driver's License
-                
-            
    
-            
    Show Result Texts on the Video
-                
-            
    
-            
    Find Item via Barcode
-                
-            
    
-        
    
-        
    Others
    
-        
    
-            
    Collect
-                    Images for Debugging
-                
-            
    
-        
    
-    
    
-    
    Official Online Demo
-        
-        
-    
    
-
    
\ No newline at end of file
diff --git a/programming/javascript/samples-demos/index.md b/programming/javascript/samples-demos/index.md
index 17a9e31f..018a728a 100644
--- a/programming/javascript/samples-demos/index.md
+++ b/programming/javascript/samples-demos/index.md
@@ -8,7 +8,7 @@ noTitleIndex: true
 needAutoGenerateSidebar: false
 ---