diff --git a/_config.yml b/_config.yml
index dc37ba19..81d54629 100644
--- a/_config.yml
+++ b/_config.yml
@@ -1,35 +1,36 @@
-repositoryUrl: https://github.com/dynamsoft-docs/barcode-reader-docs-js/blob/main
+repositoryUrl: https://github.com/dynamsoft-docs/barcode-reader-docs-js/blob/v10
 repository: dynamsoft-docs/barcode-reader-docs-js
-docFullPath: https://www.dynamsoft.com/barcode-reader/docs/web/
-firstLevelUrl: /barcode-reader/docs/web
+docFullPath: https://www.dynamsoft.com/barcode-reader/docs/v10/web/
+firstLevelUrl: /barcode-reader/docs/v10/web
 docRootName: "Barcode Reader JS Edition"
-docHomePage: /barcode-reader/docs/web/programming/javascript/
+docHomePage: /barcode-reader/docs/v10/web/programming/javascript/
 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/
-introduction: /barcode-reader/docs/core/introduction/
-programming: /barcode-reader/docs/core/programming/
-parameters: /barcode-reader/docs/core/parameters/
-parameters_reference: /barcode-reader/docs/core/parameters/reference/
-license_activation: /barcode-reader/docs/core/license-activation/
-release_notes: /barcode-reader/docs/core/release-notes/
-performance: /barcode-reader/docs/core/performance/
-understanding: /barcode-reader/docs/core/understanding/
-faq: /barcode-reader/docs/core/faq/
-faq_js: /barcode-reader/docs/web/programming/javascript/faq/
+features: /barcode-reader/docs/v10/core/programming/features/
+usecases: /barcode-reader/docs/v10/core/programming/usecases/
+introduction: /barcode-reader/docs/v10/core/introduction/
+programming: /barcode-reader/docs/v10/core/programming/
+parameters: /barcode-reader/docs/v10/core/parameters/
+parameters_reference: /barcode-reader/docs/v10/core/parameters/reference/
+license_activation: /barcode-reader/docs/v10/core/license-activation/
+release_notes: /barcode-reader/docs/v10/core/release-notes/
+performance: /barcode-reader/docs/v10/core/performance/
+understanding: /barcode-reader/docs/v10/core/understanding/
+faq: /barcode-reader/docs/v10/core/faq/
+faq_js: /barcode-reader/docs/v10/web/programming/javascript/faq/
 
-js: /barcode-reader/docs/web/programming/javascript/
-js_api: /barcode-reader/docs/web/programming/javascript/api-reference/
-dce_js_api: /camera-enhancer/docs/web/programming/javascript/api-reference/
-dcp_js_api: /code-parser/docs/web/programming/javascript/api-reference/
-js_release_notes: /barcode-reader/docs/web/programming/javascript/release-notes/
-image_parameters: /barcode-reader/docs/core/parameters/reference/image-parameter/
-scenario_settings: /barcode-reader/docs/core/parameters/scenario-settings/
-enumerations: /barcode-reader/docs/core/parameters/enum/
+js: /barcode-reader/docs/v10/web/programming/javascript/
+js_api: /barcode-reader/docs/v10/web/programming/javascript/api-reference/
+dce_js_api: /camera-enhancer/docs/v2/web/programming/javascript/api-reference/
+dcp_js_api: /code-parser/docs/v2/web/programming/javascript/api-reference/
+js_release_notes: /barcode-reader/docs/v10/web/programming/javascript/release-notes/
+image_parameters: /barcode-reader/docs/v10/core/parameters/reference/image-parameter/
+scenario_settings: /barcode-reader/docs/v10/core/parameters/scenario-settings/
+enumerations: /barcode-reader/docs/v10/core/parameters/enum/
 code_types: /code-parser/docs/core/code-types/
 
 architecture: /capture-vision/docs-archive/core/architecture/
@@ -40,24 +41,24 @@ dcv_js_api: /capture-vision/docs-archive/web/programming/javascript/api-referenc
 dcv_enumerations: /capture-vision/docs-archive/core/enums/
 dcv_introduction: /capture-vision/docs-archive/core/introduction/
 
-dcvb_architecture: /capture-vision/docs/core/architecture/
-dcvb_enums: /capture-vision/docs/core/enums/
-dcvb_parameter: /capture-vision/docs/core/parameters/
-dcvb_parameter_file: /capture-vision/docs/core/parameters/file/
-dcvb_parameters: /capture-vision/docs/core/parameters/reference/
-dcvb_js_api: /capture-vision/docs/web/programming/javascript/api-reference/
-dcvb_enumerations: /capture-vision/docs/core/enums/
-dcvb_introduction: /capture-vision/docs/core/introduction/
+dcvb_architecture: /capture-vision/docs/v2/core/architecture/
+dcvb_enums: /capture-vision/docs/v2/core/enums/
+dcvb_parameter: /capture-vision/docs/v2/core/parameters/
+dcvb_parameter_file: /capture-vision/docs/v2/core/parameters/file/
+dcvb_parameters: /capture-vision/docs/v2/core/parameters/reference/
+dcvb_js_api: /capture-vision/docs/v2/web/programming/javascript/api-reference/
+dcvb_enumerations: /capture-vision/docs/v2/core/enums/
+dcvb_introduction: /capture-vision/docs/v2/core/introduction/
 
-assets: /barcode-reader/docs/web/assets/
-edit_icon: /barcode-reader/docs/web/assets/img-icon/edit-icon.png
-smile_icon: /barcode-reader/docs/web/assets/img-icon/icon-smile.png
-sad_icon: /barcode-reader/docs/web/assets/img-icon/icon-sad.png
-dbr_icon: /barcode-reader/docs/web/assets/img-icon/icon-dbr.svg
-dwt_icon: /barcode-reader/docs/web/assets/img-icon/icon-dwt.svg
-dnt_icon: /barcode-reader/docs/web/assets/img-icon/icon-dnt.svg
+assets: /barcode-reader/docs/v10/web/assets/
+edit_icon: /barcode-reader/docs/v10/web/assets/img-icon/edit-icon.png
+smile_icon: /barcode-reader/docs/v10/web/assets/img-icon/icon-smile.png
+sad_icon: /barcode-reader/docs/v10/web/assets/img-icon/icon-sad.png
+dbr_icon: /barcode-reader/docs/v10/web/assets/img-icon/icon-dbr.svg
+dwt_icon: /barcode-reader/docs/v10/web/assets/img-icon/icon-dwt.svg
+dnt_icon: /barcode-reader/docs/v10/web/assets/img-icon/icon-dnt.svg
 
-baseurl: "/barcode-reader/docs/web"
+baseurl: "/barcode-reader/docs/v10/web"
 plugins:
   - jemoji
 
@@ -69,17 +70,17 @@ defaults:
     values:
       ignore: true
       docRootName: "Barcode Reader JavaScript Edition" 
-      docHomePage: "/barcode-reader/docs/web/programming/javascript/"
+      docHomePage: "/barcode-reader/docs/v10/web/programming/javascript/"
   - scope:
       path: "programming/javascript"
     values:
       docRootName: "Barcode Reader JavaScript Edition" 
-      docHomePage: "/barcode-reader/docs/web/programming/javascript/"
+      docHomePage: "/barcode-reader/docs/v10/web/programming/javascript/"
   - scope:
       path: "programming-old/javascript"
     values:
       docRootName: "Barcode Reader JavaScript Edition" 
-      docHomePage: "/barcode-reader/docs/web/programming/javascript/"
+      docHomePage: "/barcode-reader/docs/v10/web/programming/javascript/"
   - scope:
       path: ""
     values:
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..9d8a2b53 100644
--- a/_data/product_version.yml
+++ b/_data/product_version.yml
@@ -1,59 +1,5 @@
 useGroupedVersion: true
 
 version_info_list_js:
-  - value: latest version(11.0.6000)
-  - value: 11.x
-    child:
-      - 11.0.3000
   - 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 and older
\ No newline at end of file
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 @@
-<li>
-  <a href="{{ site.js }}" class="otherLinkColour">Introduction</a>
-</li>
-<li lang="javascript" class="category">DEVELOPMENT</li>
-<li lang="javascript">
-  <a style="cursor: pointer; color: #3c3c3c">User Guide</a>
-  <ul lang="javascript">
-    <li lang="javascript">
-      <a
-        href="{{ site.js }}user-guide/index.html"
-        style="cursor: pointer; color: #3c3c3c"
-        >Get Started</a
-      >
-    </li>
-  </ul>
-</li>
-<li>
-  <a href="{{ site.js }}samples-demos/index.html" class="otherLinkColour"
-    >Samples and Demos</a
-  >
-  <ul>
-    <li>
-      <a
-        target="_blank"
-        href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/"
-        class="otherLinkColour refreshLink"
-        >Hello World</a
-      >
-      <ul>
-        <li>
-          <a
-            target="_blank"
-            href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/hello-world/hello-world.html"
-            class="otherLinkColour refreshLink"
-            >Minimal Code&nearrow;</a
-          >
-        </li>
-        <li>
-          <a
-            target="_blank"
-            href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/angular"
-            class="otherLinkColour refreshLink"
-            >Hello World with Angular</a
-          >
-        </li>
-        <li>
-          <a
-            target="_blank"
-            href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/react"
-            class="otherLinkColour refreshLink"
-            >Hello World with React</a
-          >
-        </li>
-        <li>
-          <a
-            target="_blank"
-            href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/vue"
-            class="otherLinkColour refreshLink"
-            >Hello World with Vue 3</a
-          >
-        </li>
-        <li>
-          <a
-            target="_blank"
-            href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/next"
-            class="otherLinkColour refreshLink"
-            >Hello World with Next.js</a
-          >
-        </li>
-        <li>
-          <a
-            target="_blank"
-            href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/nuxt"
-            class="otherLinkColour refreshLink"
-            >Hello World with NuxtJS</a
-          >
-        </li>
-        <li>
-          <a
-            target="_blank"
-            href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/electron"
-            class="otherLinkColour refreshLink"
-            >Hello World with Electron</a
-          >
-        </li>
-        <li>
-          <a
-            target="_blank"
-            href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/pwa"
-            class="otherLinkColour refreshLink"
-            >Hello World with PWA</a
-          >
-        </li>
-      </ul>
-    </li>
-    <li>
-      <a
-        target="_blank"
-        href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/use-case"
-        class="otherLinkColour refreshLink"
-        >Use Cases</a
-      >
-    </li>
-    <li>
-      <a
-        target="_blank"
-        href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/others/debug"
-        class="otherLinkColour refreshLink"
-        >Debug Sample</a
-      >
-    </li>
-    <li>
-      <a
-        target="_blank"
-        href="https://demo.dynamsoft.com/barcode-reader-js/"
-        class="otherLinkColour refreshLink"
-        >Official Online Demo &nearrow;</a
-      >
-    </li>
-  </ul>
-</li>
-<li lang="javascript">
-  <a href="{{ site.js_api }}index.html" class="otherLinkColour"
-    >API Reference</a
-  >
-  <ul lang="javascript">
-    <!-- CVR -->
-    <li>
-      <a
-        href="{{ site.dcv_js_api }}capture-vision-router/capture-vision-router-module.html"
-        class="otherLinkColour"
-        >DynamsoftCaptureVisionRouter</a
-      >
-      <ul>
-        <li>
-          <a class="otherLinkColour">CaptureVisionRouter</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}capture-vision-router/instantiate.html"
-                class="otherLinkColour"
-                >Create and Destroy Instances</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}capture-vision-router/single-image-processing.html"
-                class="otherLinkColour"
-                >Single-Image Processing</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}capture-vision-router/multiple-image-processing.html"
-                class="otherLinkColour"
-                >Multiple-Image Processing</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}capture-vision-router/settings.html"
-                class="otherLinkColour"
-                >Settings</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}capture-vision-router/preset-templates.html"
-                class="otherLinkColour"
-                >Preset Template</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}capture-vision-router/intermediate-result.html"
-                class="otherLinkColour"
-                >Intermediate Result</a
-              >
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a>Classes</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}capture-vision-router/capture-vision-router-module-class.html"
-                class="otherLinkColour"
-                >CaptureVisionRouterModule</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}capture-vision-router/captured-result-receiver.html"
-                class="otherLinkColour"
-                >CapturedResultReceiver</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}capture-vision-router/intermediate-result-manager.html"
-                class="otherLinkColour"
-                >IntermediateResultManager</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}capture-vision-router/intermediate-result-receiver.html"
-                class="otherLinkColour"
-                >IntermediateResultReceiver</a
-              >
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a class="otherLinkColour">Interfaces</a>
-          <ul>
-            <!-- <li>
-              <a
-                href="{{ site.dcv_js_api }}capture-vision-router/interfaces/image-source-state-listener.html"
-                class="otherLinkColour"
-                >ImageSourceStateListener</a
-              >
-            </li> -->
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}capture-vision-router/interfaces/simplified-capture-vision-settings.html"
-                class="otherLinkColour"
-                >SimplifiedCaptureVisionSettings</a
-              >
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a class="otherLinkColour">Enums</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.enums }}core/image-source-state.html?lang=js"
-                class="otherLinkColour"
-                >EnumImageSourceState</a
-              >
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-    <!-- DBR -->
-    <li lang="javascript">
-      <a
-        href="{{ site.js_api }}barcode-reader-module.html"
-        class="otherLinkColour"
-        >DynamsoftBarcodeReader</a
-      >
-      <ul>
-        <li>
-          <a
-            href="{{ site.js_api }}barcode-reader-module-class.html"
-            class="otherLinkColour"
-            >BarcodeReaderModule</a
-          >
-        </li>
-        <li>
-          <a class="otherLinkColour">Interfaces</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/aztec-details.html"
-                class="otherLinkColour"
-                >AztecDetails</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/barcode-details.html"
-                class="otherLinkColour"
-                >BarcodeDetails</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/barcode-result-item.html"
-                class="otherLinkColour"
-                >BarcodeResultItem</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/candidate-barcode-zones-unit.html"
-                class="otherLinkColour"
-                >CandidateBarcodeZonesUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/complemented-barcode-image-unit.html"
-                class="otherLinkColour"
-                >ComplementedBarcodeImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/datamatrix-details.html"
-                class="otherLinkColour"
-                >DataMatrixDetails</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/decoded-barcode-element.html"
-                class="otherLinkColour"
-                >DecodedBarcodeElement</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/decoded-barcodes-result.html"
-                class="otherLinkColour"
-                >DecodedBarcodesResult</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/decoded-barcodes-unit.html"
-                class="otherLinkColour"
-                >DecodedBarcodesUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/deformation-resisted-barcode-image-unit.html"
-                class="otherLinkColour"
-                >DeformationResistedBarcodeImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/extended-barcode-result.html"
-                class="otherLinkColour"
-                >ExtendedBarcodeResult</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/localized-barcode-element.html"
-                class="otherLinkColour"
-                >LocalizedBarcodeElement</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/localized-barcodes-unit.html"
-                class="otherLinkColour"
-                >LocalizedBarcodesUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/oned-code-details.html"
-                class="otherLinkColour"
-                >OneDCodeDetails</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/pdf417-details.html"
-                class="otherLinkColour"
-                >PDF417Details</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/qr-code-details.html"
-                class="otherLinkColour"
-                >QRCodeDetails</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/scaled-up-barcode-image-unit.html"
-                class="otherLinkColour"
-                >ScaledUpBarcodeImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/simplified-barcode-reader-settings.html"
-                class="otherLinkColour"
-                >SimplifiedBarcodeReaderSettings</a
-              >
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a class="otherLinkColour">Enums</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.dcv_enumerations }}barcode-reader/barcode-format.html?lang=js"
-                class="otherLinkColour"
-                >EnumBarcodeFormat</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_enumerations }}barcode-reader/deblur-mode.html?lang=js"
-                class="otherLinkColour"
-                >EnumDeblurMode</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_enumerations }}barcode-reader/extended-barcode-result-type.html?lang=js"
-                class="otherLinkColour"
-                >EnumExtendedBarcodeResultType</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_enumerations }}barcode-reader/localization-mode.html?lang=js"
-                class="otherLinkColour"
-                >EnumLocalizationMode</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_enumerations }}barcode-reader/qr-code-error-correction-level.html?lang=js"
-                class="otherLinkColour"
-                >EnumQRCodeErrorCorrectionLevel</a
-              >
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-    <!-- License -->
-    <li>
-      <a
-        href="{{ site.dcv_js_api }}license/license-module.html"
-        class="otherLinkColour"
-        >DynamsoftLicense</a
-      >
-      <ul>
-        <li>
-          <a
-            href="{{ site.dcv_js_api }}license/license-manager.html"
-            class="otherLinkColour"
-            >LicenseManager</a
-          >
-        </li>
-        <li>
-          <a
-            href="{{ site.dcv_js_api }}license/license-module-class.html"
-            class="otherLinkColour"
-            >LicenseModule</a
-          >
-        </li>
-      </ul>
-    </li>
-    <!-- Utility -->
-    <li>
-      <a
-        href="{{ site.dcv_js_api }}utility/utility-module.html"
-        class="otherLinkColour"
-        >DynamsoftUtility</a
-      >
-      <ul>
-        <li>
-          <a
-            href="{{ site.dcv_js_api }}utility/image-manager.html"
-            class="otherLinkColour"
-            >ImageManager</a
-          >
-        </li>
-        <li>
-          <a
-            href="{{ site.dcv_js_api }}utility/multi-frame-result-cross-filter.html"
-            class="otherLinkColour"
-            >MultiFrameResultCrossFilter</a
-          >
-        </li>
-        <li>
-          <a
-            href="{{ site.dcv_js_api }}utility/utility-module-class.html"
-            class="otherLinkColour"
-            >UtilityModule</a
-          >
-        </li>
-      </ul>
-    </li>
-    <!-- Core -->
-    <li>
-      <a
-        href="{{ site.dcv_js_api }}core/core-module.html"
-        class="otherLinkColour"
-        >DynamsoftCore</a
-      >
-      <ul>
-        <li>
-          <a>Classes</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/core-module-class.html"
-                class="otherLinkColour"
-                >CoreModule</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/image-source-adapter.html"
-                class="otherLinkColour"
-                >ImageSourceAdapter</a
-              >
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a>Interfaces</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/basic-structures/arc.html"
-                class="otherLinkColour"
-                >Arc</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/intermediate-results/binary-image-unit.html"
-                class="otherLinkColour"
-                >BinaryImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/intermediate-results/colour-image-unit.html"
-                class="otherLinkColour"
-                >ColourImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/basic-structures/captured-result.html"
-                class="otherLinkColour"
-                >CapturedResult</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/basic-structures/captured-result-item.html"
-                class="otherLinkColour"
-                >CapturedResultItem</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/basic-structures/contour.html"
-                class="otherLinkColour"
-                >Contour</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/intermediate-results/contours-unit.html"
-                class="otherLinkColour"
-                >ContoursUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/basic-structures/corner.html"
-                class="otherLinkColour"
-                >Corner</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/basic-structures/ds-image-data.html"
-                class="otherLinkColour"
-                >DSImageData</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/basic-structures/ds-rect.html"
-                class="otherLinkColour"
-                >DSRect</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/basic-structures/edge.html"
-                class="otherLinkColour"
-                >Edge</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/intermediate-results/enhanced-grayscale-image-unit.html"
-                class="otherLinkColour"
-                >EnhancedGrayscaleImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/basic-structures/file-image-tag.html"
-                class="otherLinkColour"
-                >FileImageTag</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/intermediate-results/grayscale-image-unit.html"
-                class="otherLinkColour"
-                >GrayscaleImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/basic-structures/image-source-error-listener.html"
-                class="otherLinkColour"
-                >ImageSourceErrorListener</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/basic-structures/image-tag.html"
-                class="otherLinkColour"
-                >ImageTag</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/intermediate-results/intermediate-result.html"
-                class="otherLinkColour"
-                >IntermediateResult</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/intermediate-results/intermediate-result-extra-info.html"
-                class="otherLinkColour"
-                >IntermediateResultExtraInfo</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/intermediate-results/intermediate-result-unit.html"
-                class="otherLinkColour"
-                >IntermediateResultUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/intermediate-results/line-segments-unit.html"
-                class="otherLinkColour"
-                >LineSegmentsUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/basic-structures/line-segment.html"
-                class="otherLinkColour"
-                >LineSegment</a
-              >
-            </li>
-            <!-- <li>
-              <a
-                href="{{ site.dcv_js_api }}core/intermediate-results/observation-parameters.html"
-                class="otherLinkColour"
-                >ObservationParameters</a
-              >
-            </li> -->
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/basic-structures/original-image-result-item.html"
-                class="otherLinkColour"
-                >OriginalImageResultItem</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/basic-structures/point.html"
-                class="otherLinkColour"
-                >Point</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/intermediate-results/predetected-region-element.html"
-                class="otherLinkColour"
-                >PredetectedRegionElement</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/intermediate-results/predetected-regions-unit.html"
-                class="otherLinkColour"
-                >PredetectedRegionsUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/basic-structures/polygon.html"
-                class="otherLinkColour"
-                >Polygon</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/basic-structures/quadrilateral.html"
-                class="otherLinkColour"
-                >Quadrilateral</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/basic-structures/rect.html"
-                class="otherLinkColour"
-                >Rect</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/intermediate-results/region-object-element.html"
-                class="otherLinkColour"
-                >RegionObjectElement</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/intermediate-results/scaled-down-colour-image-unit.html"
-                class="otherLinkColour"
-                >ScaledDownColourImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/intermediate-results/text-removed-binary-image-unit.html"
-                class="otherLinkColour"
-                >TextRemovedBinaryImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/intermediate-results/text-zones-unit.html"
-                class="otherLinkColour"
-                >TextZonesUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/intermediate-results/texture-detection-result-unit.html"
-                class="otherLinkColour"
-                >TextureDetectionResultUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/intermediate-results/texture-removed-binary-image-unit.html"
-                class="otherLinkColour"
-                >TextureRemovedBinaryImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/intermediate-results/texture-removed-grayscale-image-unit.html"
-                class="otherLinkColour"
-                >TextureRemovedGrayscaleImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/intermediate-results/transformed-grayscale-image-unit.html"
-                class="otherLinkColour"
-                >TransformedGrayscaleImageUnit</a
-              >
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a>Enumerations</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.enums }}core/buffer-overflow-protection-mode.html?lang=js"
-                class="otherLinkColour"
-                >BufferOverflowProtectionMode</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.enums }}core/captured-result-item-type.html?lang=js"
-                class="otherLinkColour"
-                >CapturedResultItemType</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.enums }}core/colour-channel-usage-type.html?lang=js"
-                class="otherLinkColour"
-                >ColourChannelUsageType</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.enums }}core/corner-type.html?lang=js"
-                class="otherLinkColour"
-                >CornerType</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.enums }}core/error-code.html?lang=js"
-                class="otherLinkColour"
-                >ErrorCode</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.enums }}core/grayscale-enhancement-mode.html?lang=js"
-                class="otherLinkColour"
-                >GrayscaleEnhancementMode</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.enums }}core/grayscale-transformation-mode.html?lang=js"
-                class="otherLinkColour"
-                >GrayscaleTransformationMode</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.enums }}core/image-pixel-format.html?lang=js"
-                class="otherLinkColour"
-                >ImagePixelFormat</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.enums }}core/image-tag-type.html?lang=js"
-                class="otherLinkColour"
-                >ImageTagType</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.enums }}core/intermediate-result-unit-type.html?lang=js"
-                class="otherLinkColour"
-                >IntermediateResultUnitType</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.enums }}core/region-object-element-type.html?lang=js"
-                class="otherLinkColour"
-                >RegionObjectElementType</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.enums }}core/section-type.html?lang=js"
-                class="otherLinkColour"
-                >SectionType</a
-              >
-            </li>
-            <!-- <li>
-              <a
-                href="{{ site.enums }}core/transform-matrix-type.html?lang=js"
-                class="otherLinkColour"
-                >TransformMatrixType</a
-              >
-            </li> -->
-          </ul>
-        </li>
-      </ul>
-    </li>
-  </ul>
-</li>
-<li lang="javascript" class="category">USEFUL RESOURCES</li>
-<li lang="javascript">
-  <a href="{{ site.js_release_notes }}index.html" class="otherLinkColour"
-    >Release Notes</a
-  >
-  <ul>
-    <li>
-      <a href="{{ site.js_release_notes }}js-10.html" class="otherLinkColour"
-        >Version 10.x</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js_release_notes }}js-9.html" class="otherLinkColour"
-        >Version 9.x</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js_release_notes }}js-8.html" class="otherLinkColour"
-        >Version 8.x</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js_release_notes }}js-7.html" class="otherLinkColour"
-        >Version 7.x</a
-      >
-    </li>
-  </ul>
-</li>
-<li>
-  <a
-    href="{{ site.js }}upgrade-guide/index.html"
-    style="cursor: pointer; color: #3c3c3c"
-    >Upgrade Instructions</a
-  >
-  <ul>
-    <li>
-      <a href="{{ site.js }}upgrade-guide/9to10.html" class="otherLinkColour"
-        >Upgrade v9 to v10</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}upgrade-guide/8to9.html" class="otherLinkColour"
-        >Upgrade v8 to v9</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}upgrade-guide/7to9.html" class="otherLinkColour"
-        >Upgrade v7 to v9</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}upgrade-guide/7-notice.html" class="otherLinkColour"
-        >EOS for v7.x</a
-      >
-    </li>
-  </ul>
-</li>
-
-<li>
-  <a href="{{ site.js }}faq/" class="otherLinkColour">FAQ</a>
-  <ul>
-    <li>
-      <a href="{{ site.js }}faq/ways-to-copy-dbr-js-deployable-files.html"
-        >How to get a copy of Dbr JS deployable files ?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/javascript-sdk-offline-mode-use.html"
-        >How to use the JavaScript SDK in offline mode?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/server-requirements-for-dbr-js-deployment.html"
-        >What are the server requirements for Dbr JS deployment?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/pros-and-cons-of-cdn.html"
-        >What are the pros and cons of using the CDN?</a
-      >
-    </li>
-    <li>
-      <a
-        href="{{ site.js }}faq/differences-between-full-and-compact-editions.html"
-        >What are the differences between the compact edition and the full
-        edition?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/is-https-required.html"
-        >Is HTTPS absolutely required?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/use-of-onFrameRead-and-onUnduplicateRead.html"
-        >When to use onFrameRead and when to use onUniqueRead?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/call-loadWasm-proactively.html"
-        >Do we have to call loadWasm proactively?</a
-      >
-    </li>
-    <li>
-      <a
-        href="{{ site.js }}faq/differences-between-updateScanSettings-updateVideoSettings-and-updateRuntimeSettings.html"
-        >Differences between
-        updateScanSettings/updateVideoSettings/updateRuntimeSettings?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/different-ways-to-customize-ui.html"
-        >What are the different ways to customize the UI?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/get-sdk-logs.html"
-        >How to get the logs for the JavaScript SDK?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/upgrade-old-to-new.html"
-        >How do you upgrade to a newer version of the SDK?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/change-domain-binding-of-product-key.html"
-        >How to change the domain binding of your product key?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/when-singleFrameMode-is-enabled.html"
-        >When is singleFrameMode enabled?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/get-intermediate-result-images.html"
-        >How to get intermediate result images?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/read-inverted-image.html"
-        >How to read an inverted image?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/read-from-existing-files.html"
-        >How to read barcodes from existing files?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/formats-supported-for-existing-files.html"
-        >Formats supported when reading barcodes from files in local memory?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/read-text-from-barcode-image.html"
-        >How to read the text info usually located around a barcode image?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/scan-US-drivers-license.html"
-        >How to scan the barcode on a US Driver"s License and get the first
-        name, last name, DOB, etc.?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/add-remove-beep-sound.html"
-        >How to add/remove a "beep" sound once a barcode is found?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/nodejs-implementation.html"
-        >How do I create a NodeJS application using the SDK?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/check-current-version.html"
-        >How to check the version of the JavaScript SDK I am currently using?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/unable-to-scan-aztec-code.html"
-        >Why am I unable to scan an Aztec code in the helloworld sample?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/stop-camera-to-open-right-away.html"
-        >Enable the camera on the click of a button?</a
-      >
-    </li>
-    <li>
-      <a
-        href="{{ site.js }}faq/difference-between-barcodeReader-and-barcodeScanner.html"
-        >What is the difference between the BarcodeReader class and the
-        BarcodeScanner class?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/newline-character-not-being-rendered.html"
-        >Why are newline characters not being rendered when displaying the
-        barcode results in a textbox?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/resolve-magic-word.html"
-        >How to resolve the expected magic word error that occurs when using the
-        JavaScript SDK?</a
-      >
-    </li>
-    <li>
-      <a
-        href="{{ site.js }}faq/general-troubleshooting-steps-for-decode-failure.html"
-        >What are the general troubleshooting steps if an image fails to decode
-        with the JavaScript SDK?</a
-      >
-    </li>
-    <li>
-      <a
-        href="{{ site.js }}faq/difference-between-bestspeed-and-bestcoverage.html"
-        >What are the differences between the "speed", "coverage", "balance, and
-        "single" runtime templates?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/avoid-incorrect-barcode-results.html"
-        >How to avoid incorrect barcode results?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/how-license-tracking-works.html"
-        >How does the license work - Per Scan, Per Device, Per Concurrent
-        Device?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/new-license-required-per-device-licensing.html"
-        >When is a new license spot taken when using a per-device licensing
-        model?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/delay-when-open-camera.html"
-        >How to get rid of the delay when opening the camera?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/hide-laser-message-ui.html"
-        >How can I hide the laser bar and Dynamsoft message in the default UI of
-        the BarcodeScanner?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/ios-16-incompatible.html"
-        >Why is the Javascript SDK not recognizing any barcodes on iOS 16.4?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/check-camera.html"
-        >How to check the camera permissions programmatically in Dynamsoft
-        Barcode Reader JavaScript SDK?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/ios-17-readability.html"
-        >How do I resolve the issue of the Barcode Reader not recognizing any
-        barcodes via video in iOS 16.7 or 17?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/enable-supported-barcode-format.html"
-        >How to Enable Specific Barcode Formats with Your License?</a>
-    </li>
-  </ul>
-</li>
-<li class="category">OTHERS</li>
-<li>
-  <a
-    target="_blank"
-    href="{{ site.introduction }}index.html"
-    class="otherLinkColour refreshLink"
-    >Develop for Mobile or Server/Desktop</a
-  >
-</li>
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 @@
-<li>
-  <a href="{{ site.js }}" class="otherLinkColour">Introduction</a>
-</li>
-<li lang="javascript" class="category">DEVELOPMENT</li>
-<li lang="javascript">
-  <a style="cursor: pointer; color: #3c3c3c">User Guide</a>
-  <ul lang="javascript">
-    <li lang="javascript">
-      <a
-        href="{{ site.js }}user-guide/index.html"
-        style="cursor: pointer; color: #3c3c3c"
-        >Get Started</a
-      >
-    </li>
-    <li lang="javascript">
-      <a
-        href="{{ site.js }}user-guide/use-in-framework.html"
-        style="cursor: pointer; color: #3c3c3c"
-        >Use in Framework</a
-      >
-    </li>
-    <li>
-      <a
-        href="{{ site.js }}user-guide/explore-features/index.html"
-        class="otherLinkColour"
-        >Explore Features</a
-      >
-      <ul>
-        <li>
-          <a class="otherLinkColour">Basic Features</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.features }}barcode-formats-and-count.html?lang=js"
-                class="otherLinkColour"
-                >Specify barcode formats and count</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.features }}barcode-scan-region.html?lang=js"
-                class="otherLinkColour"
-                >Read a specific area/region</a
-              >
-            </li>
-            <!-- <li><a href="{{ site.features }}customize-the-ui.html?lang=js" class="otherLinkColour">Customize
-                the UI</a></li> -->
-          </ul>
-        </li>
-        <li>
-          <a class="otherLinkColour">Handle Different Cases</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.features }}read-inverted-barcodes.html?lang=js"
-                class="otherLinkColour"
-                >Read inverted barcodes</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.features }}read-deformed-barcodes.html?lang=js"
-                class="otherLinkColour"
-                >Read deformed barcodes</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.features }}read-incomplete-barcodes.html?lang=js"
-                class="otherLinkColour"
-                >Read incomplete barcodes</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.features }}read-dense-barcodes.html?lang=js"
-                class="otherLinkColour"
-                >Read dense barcodes</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.features }}read-a-large-image.html?lang=js"
-                class="otherLinkColour"
-                >Read barcodes from a large image</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.features }}read-barcodes-with-small-module-size.html?lang=js"
-                class="otherLinkColour"
-                >Read barcodes with small module size</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.features }}read-barcodes-with-imbalanced-colour.html?lang=js"
-                class="otherLinkColour"
-                >Read images with imbalanced colors</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.features }}read-barcodes-with-uneven-lighting.html?lang=js"
-                class="otherLinkColour"
-                >Read images with uneven lighting</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.features }}read-images-with-texture.html?lang=js"
-                class="otherLinkColour"
-                >Read images with texture</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.features }}read-images-with-lots-of-text.html?lang=js"
-                class="otherLinkColour"
-                >Read images with lots of text</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.features }}preprocess-images.html?lang=js"
-                class="otherLinkColour"
-                >Preprocess images to read difficult barcodes</a
-              >
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a class="otherLinkColour">Barcode Results</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.features }}get-confidence-rotation.html?lang=js"
-                class="otherLinkColour"
-                >Get barcode confidence and rotation</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.features }}get-barcode-location.html?lang=js"
-                class="otherLinkColour"
-                >Get barcode location</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.features }}get-detailed-info.html?lang=js"
-                class="otherLinkColour"
-                >Get detailed barcode information</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.features }}filter-and-sort.html?lang=js"
-                class="otherLinkColour"
-                >Filter and sort decoding results</a
-              >
-            </li>
-            <!-- <li><a href="{{ site.features }}use-intermidiate-results.html?lang=js" class="otherLinkColour">Use intermediate
-                results</a>
-            </li> -->
-          </ul>
-        </li>
-        <li>
-          <a class="otherLinkColour">Advanced Features</a>
-          <ul>
-            <!-- <li><a href="{{ site.features }}control-terminate-phase.html?lang=js" class="otherLinkColour">Control when to
-                terminate a
-                decoding process</a></li> -->
-            <li>
-              <a
-                href="{{ site.features }}use-runtimesettings-or-templates.html?lang=js"
-                class="otherLinkColour"
-                >Use SimplifiedCaptureVisionSettings or Templates</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.features }}use-format-specific-configuration.html?lang=js"
-                class="otherLinkColour"
-                >Use format specific configurations</a
-              >
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-  </ul>
-</li>
-<li>
-  <a href="{{ site.js }}samples-demos/index.html" class="otherLinkColour"
-    >Samples and Demos</a
-  >
-  <!-- <ul>
-    <li>
-      <a
-        target="_blank"
-        href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/"
-        class="otherLinkColour refreshLink"
-        >Hello World</a
-      >
-      <ul>
-        <li>
-          <a
-            target="_blank"
-            href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/hello-world/hello-world.html"
-            class="otherLinkColour refreshLink"
-            >Minimal Code&nearrow;</a
-          >
-        </li>
-        <li>
-          <a
-            target="_blank"
-            href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/angular"
-            class="otherLinkColour refreshLink"
-            >Hello World with Angular</a
-          >
-        </li>
-        <li>
-          <a
-            target="_blank"
-            href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/react"
-            class="otherLinkColour refreshLink"
-            >Hello World with React</a
-          >
-        </li>
-        <li>
-          <a
-            target="_blank"
-            href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/vue"
-            class="otherLinkColour refreshLink"
-            >Hello World with Vue 3</a
-          >
-        </li>
-        <li>
-          <a
-            target="_blank"
-            href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/next"
-            class="otherLinkColour refreshLink"
-            >Hello World with Next.js</a
-          >
-        </li>
-        <li>
-          <a
-            target="_blank"
-            href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/nuxt"
-            class="otherLinkColour refreshLink"
-            >Hello World with NuxtJS</a
-          >
-        </li>
-        <li>
-          <a
-            target="_blank"
-            href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/electron"
-            class="otherLinkColour refreshLink"
-            >Hello World with Electron</a
-          >
-        </li>
-        <li>
-          <a
-            target="_blank"
-            href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/pwa"
-            class="otherLinkColour refreshLink"
-            >Hello World with PWA</a
-          >
-        </li>
-      </ul>
-    </li>
-    <li>
-      <a
-        target="_blank"
-        href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/use-case"
-        class="otherLinkColour refreshLink"
-        >Use Cases</a
-      >
-    </li>
-    <li>
-      <a
-        target="_blank"
-        href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/others/debug"
-        class="otherLinkColour refreshLink"
-        >Debug Sample</a
-      >
-    </li>
-    <li>
-      <a
-        target="_blank"
-        href="https://demo.dynamsoft.com/barcode-reader-js/"
-        class="otherLinkColour refreshLink"
-        >Official Online Demo &nearrow;</a
-      >
-    </li>
-  </ul> -->
-</li>
-<li lang="javascript">
-  <a href="{{ site.js_api }}index.html" class="otherLinkColour"
-    >API Reference</a
-  >
-  <ul lang="javascript">
-    <!-- CVR -->
-    <li>
-      <a
-        href="{{ site.dcv_js_api }}capture-vision-router/capture-vision-router-module.html"
-        class="otherLinkColour"
-        >DynamsoftCaptureVisionRouter</a
-      >
-      <ul>
-        <li>
-          <a class="otherLinkColour">CaptureVisionRouter</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}capture-vision-router/instantiate.html"
-                class="otherLinkColour"
-                >Create and Destroy Instances</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}capture-vision-router/single-image-processing.html"
-                class="otherLinkColour"
-                >Single-Image Processing</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}capture-vision-router/multiple-image-processing.html"
-                class="otherLinkColour"
-                >Multiple-Image Processing</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}capture-vision-router/settings.html"
-                class="otherLinkColour"
-                >Settings</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}capture-vision-router/preset-templates.html"
-                class="otherLinkColour"
-                >Preset Templates</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}capture-vision-router/intermediate-result.html"
-                class="otherLinkColour"
-                >Intermediate Result</a
-              >
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a>Classes</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}capture-vision-router/capture-vision-router-module-class.html"
-                class="otherLinkColour"
-                >CaptureVisionRouterModule</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}capture-vision-router/captured-result-receiver.html"
-                class="otherLinkColour"
-                >CapturedResultReceiver</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}capture-vision-router/intermediate-result-manager.html"
-                class="otherLinkColour"
-                >IntermediateResultManager</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}capture-vision-router/intermediate-result-receiver.html"
-                class="otherLinkColour"
-                >IntermediateResultReceiver</a
-              >
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a class="otherLinkColour">Interfaces</a>
-          <ul>
-            <!-- <li>
-              <a
-                href="{{ site.dcv_js_api }}capture-vision-router/interfaces/image-source-state-listener.html"
-                class="otherLinkColour"
-                >ImageSourceStateListener</a
-              >
-            </li> -->
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}capture-vision-router/interfaces/captured-result.html"
-                class="otherLinkColour"
-                >CapturedResult</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}capture-vision-router/interfaces/simplified-capture-vision-settings.html"
-                class="otherLinkColour"
-                >SimplifiedCaptureVisionSettings</a
-              >
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a class="otherLinkColour">Enums</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.enums }}core/image-source-state.html?lang=js"
-                class="otherLinkColour"
-                >EnumImageSourceState</a
-              >
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-    <!-- DBR -->
-    <li lang="javascript">
-      <a
-        href="{{ site.js_api }}barcode-reader-module.html"
-        class="otherLinkColour"
-        >DynamsoftBarcodeReader</a
-      >
-      <ul>
-        <li>
-          <a
-            href="{{ site.js_api }}barcode-reader-module-class.html"
-            class="otherLinkColour"
-            >BarcodeReaderModule</a
-          >
-        </li>
-        <li>
-          <a class="otherLinkColour">Interfaces</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/aztec-details.html"
-                class="otherLinkColour"
-                >AztecDetails</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/barcode-details.html"
-                class="otherLinkColour"
-                >BarcodeDetails</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/barcode-result-item.html"
-                class="otherLinkColour"
-                >BarcodeResultItem</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/candidate-barcode-zone.html"
-                class="otherLinkColour"
-                >CandidateBarcodeZone</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/candidate-barcode-zones-unit.html"
-                class="otherLinkColour"
-                >CandidateBarcodeZonesUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/complemented-barcode-image-unit.html"
-                class="otherLinkColour"
-                >ComplementedBarcodeImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/datamatrix-details.html"
-                class="otherLinkColour"
-                >DataMatrixDetails</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/decoded-barcode-element.html"
-                class="otherLinkColour"
-                >DecodedBarcodeElement</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/decoded-barcodes-result.html"
-                class="otherLinkColour"
-                >DecodedBarcodesResult</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/decoded-barcodes-unit.html"
-                class="otherLinkColour"
-                >DecodedBarcodesUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/deformation-resisted-barcode.html"
-                class="otherLinkColour"
-                >DeformationResistedBarcode</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/deformation-resisted-barcode-image-unit.html"
-                class="otherLinkColour"
-                >DeformationResistedBarcodeImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/extended-barcode-result.html"
-                class="otherLinkColour"
-                >ExtendedBarcodeResult</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/localized-barcode-element.html"
-                class="otherLinkColour"
-                >LocalizedBarcodeElement</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/localized-barcodes-unit.html"
-                class="otherLinkColour"
-                >LocalizedBarcodesUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/oned-code-details.html"
-                class="otherLinkColour"
-                >OneDCodeDetails</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/pdf417-details.html"
-                class="otherLinkColour"
-                >PDF417Details</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/qr-code-details.html"
-                class="otherLinkColour"
-                >QRCodeDetails</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/scaled-up-barcode-image-unit.html"
-                class="otherLinkColour"
-                >ScaledUpBarcodeImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/simplified-barcode-reader-settings.html"
-                class="otherLinkColour"
-                >SimplifiedBarcodeReaderSettings</a
-              >
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a class="otherLinkColour">Enums</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.dcv_enumerations }}barcode-reader/barcode-format.html?lang=js"
-                class="otherLinkColour"
-                >EnumBarcodeFormat</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_enumerations }}barcode-reader/deblur-mode.html?lang=js"
-                class="otherLinkColour"
-                >EnumDeblurMode</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_enumerations }}barcode-reader/extended-barcode-result-type.html?lang=js"
-                class="otherLinkColour"
-                >EnumExtendedBarcodeResultType</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_enumerations }}barcode-reader/localization-mode.html?lang=js"
-                class="otherLinkColour"
-                >EnumLocalizationMode</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_enumerations }}barcode-reader/qr-code-error-correction-level.html?lang=js"
-                class="otherLinkColour"
-                >EnumQRCodeErrorCorrectionLevel</a
-              >
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-    <!-- DCE -->
-    <li>
-      <a href="{{ site.dce_js_api }}index.html" class="otherLinkColour"
-        >DynamsoftCameraEnhancer</a
-      >
-      <ul>
-        <li>
-          <a class="otherLinkColour">CameraEnhancer</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}instantiate.html"
-                class="otherLinkColour"
-                >Instantiate</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}camera-control.html"
-                class="otherLinkColour"
-                >Camera Control</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}acquisition.html"
-                class="otherLinkColour"
-                >Frame Acquisition</a
-              >
-            </li>
-            <li>
-              <a href="{{ site.dce_js_api }}ui.html" class="otherLinkColour"
-                >UI</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}auxiliary.html"
-                class="otherLinkColour"
-                >Auxiliary</a
-              >
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a class="otherLinkColour">View Classes</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}cameraview.html"
-                class="otherLinkColour"
-                >CameraView</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}imageeditorview.html"
-                class="otherLinkColour"
-                >ImageEditorView</a
-              >
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a class="otherLinkColour">Auxiliary Classes</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}cameraenhancermodule.html"
-                class="otherLinkColour"
-                >CameraEnhancerModule</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}drawingitem.html"
-                class="otherLinkColour"
-                >DrawingItem</a
-              >
-              <ul>
-                <li>
-                  <a
-                    href="{{ site.dce_js_api }}imagedrawingitem.html"
-                    class="otherLinkColour"
-                    >ImageDrawingItem
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dce_js_api }}linedrawingitem.html"
-                    class="otherLinkColour"
-                    >LineDrawingItem</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dce_js_api }}quaddrawingitem.html"
-                    class="otherLinkColour"
-                    >QuadDrawingItem
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dce_js_api }}rectdrawingitem.html"
-                    class="otherLinkColour"
-                    >RectDrawingItem
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dce_js_api }}textdrawingitem.html"
-                    class="otherLinkColour"
-                    >TextDrawingItem</a
-                  >
-                </li>
-              </ul>
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}drawinglayer.html"
-                class="otherLinkColour"
-                >DrawingLayer</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}drawingstylemanager.html"
-                class="otherLinkColour"
-                >DrawingStyleManager</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}feedback.html"
-                class="otherLinkColour"
-                >Feedback</a
-              >
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a
-            href="{{ site.dce_js_api }}interface/index.html"
-            class="otherLinkColour"
-            >Interfaces</a
-          >
-          <ul>
-            <!--
-                    <li>
-                        <a href="{{ site.dce_js_api }}interface/cameratestresponse.html" class="otherLinkColour">CameraTestResponse</a>
-                    </li>
-                -->
-            <li>
-              <a
-                href="{{ site.dce_js_api }}interface/dceframe.html"
-                class="otherLinkColour"
-                >DCEFrame</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}interface/drawingitemevent.html"
-                class="otherLinkColour"
-                >DrawingItemEvent</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}interface/drawingstyle.html"
-                class="otherLinkColour"
-                >DrawingStyle</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}interface/note.html"
-                class="otherLinkColour"
-                >Note</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}interface/playcallbackinfo.html"
-                class="otherLinkColour"
-                >PlayCallbackInfo</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}interface/resolution.html"
-                class="otherLinkColour"
-                >Resolution</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}interface/tipconfig.html"
-                class="otherLinkColour"
-                >TipConfig</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}interface/videodeviceinfo.html"
-                class="otherLinkColour"
-                >VideoDeviceInfo</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}interface/videoframetag.html"
-                class="otherLinkColour"
-                >VideoFrameTag</a
-              >
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a href="{{ site.dce_js_api }}enum/index.html" class="otherLinkColour"
-            >Enumerations</a
-          >
-          <ul>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}enum/enumdrawingitemmediatype.html"
-                class="otherLinkColour"
-                >EnumDrawingItemMediaType</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}enum/enumdrawingitemstate.html"
-                class="otherLinkColour"
-                >EnumDrawingItemState</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}enum/enumenhancedfeatures.html"
-                class="otherLinkColour"
-                >EnumEnhancedFeatures</a
-              >
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-    <!-- License -->
-    <li>
-      <a
-        href="{{ site.dcv_js_api }}license/license-module.html"
-        class="otherLinkColour"
-        >DynamsoftLicense</a
-      >
-      <ul>
-        <li>
-          <a
-            href="{{ site.dcv_js_api }}license/license-manager.html"
-            class="otherLinkColour"
-            >LicenseManager</a
-          >
-        </li>
-        <li>
-          <a
-            href="{{ site.dcv_js_api }}license/license-module-class.html"
-            class="otherLinkColour"
-            >LicenseModule</a
-          >
-        </li>
-      </ul>
-    </li>
-    <!-- Utility -->
-    <li>
-      <a
-        href="{{ site.dcv_js_api }}utility/utility-module.html"
-        class="otherLinkColour"
-        >DynamsoftUtility</a
-      >
-      <ul>
-        <li>
-          <a
-            href="{{ site.dcv_js_api }}utility/image-manager.html"
-            class="otherLinkColour"
-            >ImageManager</a
-          >
-        </li>
-        <li>
-          <a
-            href="{{ site.dcv_js_api }}utility/multi-frame-result-cross-filter.html"
-            class="otherLinkColour"
-            >MultiFrameResultCrossFilter</a
-          >
-        </li>
-        <li>
-          <a
-            href="{{ site.dcv_js_api }}utility/utility-module-class.html"
-            class="otherLinkColour"
-            >UtilityModule</a
-          >
-        </li>
-      </ul>
-    </li>
-    <!-- Core -->
-    <li>
-      <a
-        href="{{ site.dcv_js_api }}core/core-module.html"
-        class="otherLinkColour"
-        >DynamsoftCore</a
-      >
-      <ul>
-        <li>
-          <a>Classes</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/core-module-class.html"
-                class="otherLinkColour"
-                >CoreModule</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/image-source-adapter.html"
-                class="otherLinkColour"
-                >ImageSourceAdapter</a
-              >
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a>Interfaces</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/basic-structures/arc.html"
-                class="otherLinkColour"
-                >Arc</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/intermediate-results/binary-image-unit.html"
-                class="otherLinkColour"
-                >BinaryImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/intermediate-results/colour-image-unit.html"
-                class="otherLinkColour"
-                >ColourImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/basic-structures/captured-result-item.html"
-                class="otherLinkColour"
-                >CapturedResultItem</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/basic-structures/contour.html"
-                class="otherLinkColour"
-                >Contour</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/intermediate-results/contours-unit.html"
-                class="otherLinkColour"
-                >ContoursUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/basic-structures/corner.html"
-                class="otherLinkColour"
-                >Corner</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/basic-structures/ds-image-data.html"
-                class="otherLinkColour"
-                >DSImageData</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/basic-structures/ds-rect.html"
-                class="otherLinkColour"
-                >DSRect</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/basic-structures/edge.html"
-                class="otherLinkColour"
-                >Edge</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/intermediate-results/enhanced-grayscale-image-unit.html"
-                class="otherLinkColour"
-                >EnhancedGrayscaleImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/basic-structures/file-image-tag.html"
-                class="otherLinkColour"
-                >FileImageTag</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/intermediate-results/grayscale-image-unit.html"
-                class="otherLinkColour"
-                >GrayscaleImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/basic-structures/image-source-error-listener.html"
-                class="otherLinkColour"
-                >ImageSourceErrorListener</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/basic-structures/image-tag.html"
-                class="otherLinkColour"
-                >ImageTag</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/intermediate-results/intermediate-result.html"
-                class="otherLinkColour"
-                >IntermediateResult</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/intermediate-results/intermediate-result-extra-info.html"
-                class="otherLinkColour"
-                >IntermediateResultExtraInfo</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/intermediate-results/intermediate-result-unit.html"
-                class="otherLinkColour"
-                >IntermediateResultUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/intermediate-results/line-segments-unit.html"
-                class="otherLinkColour"
-                >LineSegmentsUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/basic-structures/line-segment.html"
-                class="otherLinkColour"
-                >LineSegment</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/intermediate-results/observation-parameters.html"
-                class="otherLinkColour"
-                >ObservationParameters</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/basic-structures/original-image-result-item.html"
-                class="otherLinkColour"
-                >OriginalImageResultItem</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/basic-structures/point.html"
-                class="otherLinkColour"
-                >Point</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/intermediate-results/predetected-region-element.html"
-                class="otherLinkColour"
-                >PredetectedRegionElement</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/intermediate-results/predetected-regions-unit.html"
-                class="otherLinkColour"
-                >PredetectedRegionsUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/basic-structures/polygon.html"
-                class="otherLinkColour"
-                >Polygon</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/basic-structures/quadrilateral.html"
-                class="otherLinkColour"
-                >Quadrilateral</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/basic-structures/rect.html"
-                class="otherLinkColour"
-                >Rect</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/intermediate-results/region-object-element.html"
-                class="otherLinkColour"
-                >RegionObjectElement</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/intermediate-results/scaled-down-colour-image-unit.html"
-                class="otherLinkColour"
-                >ScaledDownColourImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/intermediate-results/text-removed-binary-image-unit.html"
-                class="otherLinkColour"
-                >TextRemovedBinaryImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/intermediate-results/texture-detection-result-unit.html"
-                class="otherLinkColour"
-                >TextureDetectionResultUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/intermediate-results/texture-removed-binary-image-unit.html"
-                class="otherLinkColour"
-                >TextureRemovedBinaryImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/intermediate-results/texture-removed-grayscale-image-unit.html"
-                class="otherLinkColour"
-                >TextureRemovedGrayscaleImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/basic-structures/text-zone.html"
-                class="otherLinkColour"
-                >TextZone</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/intermediate-results/text-zones-unit.html"
-                class="otherLinkColour"
-                >TextZonesUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcv_js_api }}core/intermediate-results/transformed-grayscale-image-unit.html"
-                class="otherLinkColour"
-                >TransformedGrayscaleImageUnit</a
-              >
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a>Enumerations</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.enums }}core/buffer-overflow-protection-mode.html?lang=js"
-                class="otherLinkColour"
-                >BufferOverflowProtectionMode</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.enums }}core/captured-result-item-type.html?lang=js"
-                class="otherLinkColour"
-                >CapturedResultItemType</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.enums }}core/colour-channel-usage-type.html?lang=js"
-                class="otherLinkColour"
-                >ColourChannelUsageType</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.enums }}core/corner-type.html?lang=js"
-                class="otherLinkColour"
-                >CornerType</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.enums }}core/error-code.html?lang=js"
-                class="otherLinkColour"
-                >ErrorCode</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.enums }}core/grayscale-enhancement-mode.html?lang=js"
-                class="otherLinkColour"
-                >GrayscaleEnhancementMode</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.enums }}core/grayscale-transformation-mode.html?lang=js"
-                class="otherLinkColour"
-                >GrayscaleTransformationMode</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.enums }}core/image-pixel-format.html?lang=js"
-                class="otherLinkColour"
-                >ImagePixelFormat</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.enums }}core/image-tag-type.html?lang=js"
-                class="otherLinkColour"
-                >ImageTagType</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.enums }}core/intermediate-result-unit-type.html?lang=js"
-                class="otherLinkColour"
-                >IntermediateResultUnitType</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.enums }}core/region-object-element-type.html?lang=js"
-                class="otherLinkColour"
-                >RegionObjectElementType</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.enums }}core/section-type.html?lang=js"
-                class="otherLinkColour"
-                >SectionType</a
-              >
-            </li>
-            <!-- <li>
-              <a
-                href="{{ site.enums }}core/transform-matrix-type.html?lang=js"
-                class="otherLinkColour"
-                >TransformMatrixType</a
-              >
-            </li> -->
-          </ul>
-        </li>
-      </ul>
-    </li>
-  </ul>
-</li>
-<li lang="javascript" class="category">USEFUL RESOURCES</li>
-<li lang="javascript">
-  <a href="{{ site.js_release_notes }}index.html" class="otherLinkColour"
-    >Release Notes</a
-  >
-  <ul>
-    <li>
-      <a href="{{ site.js_release_notes }}js-10.html" class="otherLinkColour"
-        >Version 10.x</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js_release_notes }}js-9.html" class="otherLinkColour"
-        >Version 9.x</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js_release_notes }}js-8.html" class="otherLinkColour"
-        >Version 8.x</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js_release_notes }}js-7.html" class="otherLinkColour"
-        >Version 7.x</a
-      >
-    </li>
-  </ul>
-</li>
-<li>
-  <a
-    href="{{ site.js }}upgrade-guide/index.html"
-    style="cursor: pointer; color: #3c3c3c"
-    >Upgrade Instructions</a
-  >
-  <ul>
-    <li>
-      <a href="{{ site.js }}upgrade-guide/9to10.html" class="otherLinkColour"
-        >Upgrade v9 to v10</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}upgrade-guide/8to9.html" class="otherLinkColour"
-        >Upgrade v8 to v9</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}upgrade-guide/7to9.html" class="otherLinkColour"
-        >Upgrade v7 to v9</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}upgrade-guide/7-notice.html" class="otherLinkColour"
-        >EOS for v7.x</a
-      >
-    </li>
-  </ul>
-</li>
-
-<li>
-  <a href="{{ site.js }}faq/" class="otherLinkColour">FAQ</a>
-  <ul>
-    <li>
-      <a href="{{ site.js }}faq/ways-to-copy-dbr-js-deployable-files.html"
-        >How to get a copy of Dbr JS deployable files ?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/javascript-sdk-offline-mode-use.html"
-        >How to use the JavaScript SDK in offline mode?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/server-requirements-for-dbr-js-deployment.html"
-        >What are the server requirements for Dbr JS deployment?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/pros-and-cons-of-cdn.html"
-        >What are the pros and cons of using the CDN?</a
-      >
-    </li>
-    <li>
-      <a
-        href="{{ site.js }}faq/differences-between-full-and-compact-editions.html"
-        >What are the differences between the compact edition and the full
-        edition?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/is-https-required.html"
-        >Is HTTPS absolutely required?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/call-loadWasm-proactively.html"
-        >Do we have to call loadWasm proactively?</a
-      >
-    </li>
-    <li>
-      <a
-        href="{{ site.js }}faq/barcode-reader-docs-js/programming/javascript/faq/How-to-use-initSettings-getSimplifiedSettings-updateSettings.html"
-        >How to use initSettings/getSimplifiedSettings/updateSettings?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/different-ways-to-customize-ui.html"
-        >What are the different ways to customize the UI?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/get-sdk-logs.html"
-        >How to get the logs for the JavaScript SDK?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/upgrade-old-to-new.html"
-        >How do you upgrade to a newer version of the SDK?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/change-domain-binding-of-product-key.html"
-        >How to change the domain binding of your product key?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/when-singleFrameMode-is-enabled.html"
-        >When is singleFrameMode enabled?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/get-intermediate-result-images.html"
-        >How to get intermediate result images?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/read-inverted-image.html"
-        >How to read an inverted image?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/read-from-existing-files.html"
-        >How to read barcodes from existing files?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/formats-supported-for-existing-files.html"
-        >Formats supported when reading barcodes from files in local memory?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/scan-US-drivers-license.html"
-        >How to scan the barcode on a US Driver"s License and get the first
-        name, last name, DOB, etc.?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/add-remove-beep-sound.html"
-        >How to add/remove a "beep" sound once a barcode is found?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/nodejs-implementation.html"
-        >How do I create a NodeJS application using the SDK?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/check-current-version.html"
-        >How to check the version of the JavaScript SDK I am currently using?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/unable-to-scan-aztec-code.html"
-        >Why am I unable to scan an Aztec code in the helloworld sample?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/stop-camera-to-open-right-away.html"
-        >Enable the camera on the click of a button?</a
-      >
-    </li>
-    <li>
-      <a
-        href="{{ site.js }}faq/difference-between-barcodeReader-and-barcodeScanner.html"
-        >What is the difference between the BarcodeReader class and the
-        BarcodeScanner class?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/newline-character-not-being-rendered.html"
-        >Why are newline characters not being rendered when displaying the
-        barcode results in a textbox?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/resolve-magic-word.html"
-        >How to resolve the expected magic word error that occurs when using the
-        JavaScript SDK?</a
-      >
-    </li>
-    <li>
-      <a
-        href="{{ site.js }}faq/general-troubleshooting-steps-for-decode-failure.html"
-        >What are the general troubleshooting steps if an image fails to decode
-        with the JavaScript SDK?</a
-      >
-    </li>
-    <li>
-      <a
-        href="{{ site.js }}faq/difference-between-bestspeed-and-bestcoverage.html"
-        >What are the differences between the "speed", "coverage", "balance, and
-        "single" runtime templates?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/avoid-incorrect-barcode-results.html"
-        >How to avoid incorrect barcode results?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/how-license-tracking-works.html"
-        >How does the license work - Per Scan, Per Device, Per Concurrent
-        Device?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/new-license-required-per-device-licensing.html"
-        >When is a new license spot taken when using a per-device licensing
-        model?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/delay-when-open-camera.html"
-        >How to get rid of the delay when opening the camera?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/hide-laser-message-ui.html"
-        >How can I hide the laser bar and Dynamsoft message in the default UI of
-        the BarcodeScanner?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/ios-16-incompatible.html"
-        >Why is the Javascript SDK not recognizing any barcodes on iOS 16.4?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/check-camera.html"
-        >How to check the camera permissions programmatically in Dynamsoft
-        Barcode Reader JavaScript SDK?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/ios-17-readability.html"
-        >How do I resolve the issue of the Barcode Reader not recognizing any
-        barcodes via video in iOS 16.7 or 17?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/enable-supported-barcode-format.html"
-        >How to Enable Specific Barcode Formats with Your License?</a>
-    </li>
-  </ul>
-</li>
-<li class="category">OTHERS</li>
-<li>
-  <a
-    target="_blank"
-    href="{{ site.introduction }}index.html"
-    class="otherLinkColour refreshLink"
-    >Develop for Mobile or Server/Desktop</a
-  >
-</li>
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 @@
-<li>
-  <a href="{{ site.js }}" class="otherLinkColour">Introduction</a>
-</li>
-<li lang="javascript" class="category">DEVELOPMENT</li>
-<li lang="javascript">
-  <a style="cursor: pointer; color: #3c3c3c">User Guide</a>
-  <ul lang="javascript">
-    <li lang="javascript">
-      <a
-        href="{{ site.js }}user-guide/index.html"
-        style="cursor: pointer; color: #3c3c3c"
-        >Get Started</a
-      >
-    </li>
-    <li lang="javascript">
-      <a
-        href="{{ site.js }}user-guide/use-in-framework.html"
-        style="cursor: pointer; color: #3c3c3c"
-        >Use in Framework</a
-      >
-    </li>
-    <li>
-      <a
-        href="{{ site.js }}user-guide/explore-features/index.html"
-        class="otherLinkColour"
-        >Explore Features</a
-      >
-      <ul>
-        <li>
-          <a class="otherLinkColour">Basic Features</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.features }}barcode-formats-and-count.html?lang=js"
-                class="otherLinkColour"
-                >Specify barcode formats and count</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.features }}barcode-scan-region.html?lang=js"
-                class="otherLinkColour"
-                >Read a specific area/region</a
-              >
-            </li>
-            <li>
-              <a 
-                href="{{ site.features }}ui-customization-js.html?lang=js" 
-                class="otherLinkColour"
-                >Customize the UI</a
-              >
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a class="otherLinkColour">Handle Different Cases</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.features }}read-inverted-barcodes.html?lang=js"
-                class="otherLinkColour"
-                >Read inverted barcodes</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.features }}read-deformed-barcodes.html?lang=js"
-                class="otherLinkColour"
-                >Read deformed barcodes</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.features }}read-incomplete-barcodes.html?lang=js"
-                class="otherLinkColour"
-                >Read incomplete barcodes</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.features }}read-dense-barcodes.html?lang=js"
-                class="otherLinkColour"
-                >Read dense barcodes</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.features }}read-a-large-image.html?lang=js"
-                class="otherLinkColour"
-                >Read barcodes from a large image</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.features }}read-barcodes-with-small-module-size.html?lang=js"
-                class="otherLinkColour"
-                >Read barcodes with small module size</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.features }}read-barcodes-with-imbalanced-colour.html?lang=js"
-                class="otherLinkColour"
-                >Read images with imbalanced colors</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.features }}read-barcodes-with-uneven-lighting.html?lang=js"
-                class="otherLinkColour"
-                >Read images with uneven lighting</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.features }}read-images-with-texture.html?lang=js"
-                class="otherLinkColour"
-                >Read images with texture</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.features }}read-images-with-lots-of-text.html?lang=js"
-                class="otherLinkColour"
-                >Read images with lots of text</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.features }}preprocess-images.html?lang=js"
-                class="otherLinkColour"
-                >Preprocess images to read difficult barcodes</a
-              >
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a class="otherLinkColour">Barcode Results</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.features }}get-confidence-rotation.html?lang=js"
-                class="otherLinkColour"
-                >Get barcode confidence and rotation</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.features }}get-barcode-location.html?lang=js"
-                class="otherLinkColour"
-                >Get barcode location</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.features }}get-detailed-info.html?lang=js"
-                class="otherLinkColour"
-                >Get detailed barcode information</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.features }}filter-and-sort.html?lang=js"
-                class="otherLinkColour"
-                >Filter and sort decoding results</a
-              >
-            </li>
-            <!-- <li><a href="{{ site.features }}use-intermidiate-results.html?lang=js" class="otherLinkColour">Use intermediate
-                results</a>
-            </li> -->
-          </ul>
-        </li>
-        <li>
-          <a class="otherLinkColour">Advanced Features</a>
-          <ul>
-            <!-- <li><a href="{{ site.features }}control-terminate-phase.html?lang=js" class="otherLinkColour">Control when to
-                terminate a
-                decoding process</a></li> -->
-            <li>
-              <a
-                href="{{ site.features }}use-runtimesettings-or-templates.html?lang=js"
-                class="otherLinkColour"
-                >Use SimplifiedCaptureVisionSettings or Templates</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.features }}use-format-specific-configuration.html?lang=js"
-                class="otherLinkColour"
-                >Use format specific configurations</a
-              >
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-  </ul>
-</li>
-<li>
-  <a href="{{ site.js }}samples-demos/index.html" class="otherLinkColour"
-    >Samples and Demos</a
-  >
-  <!-- <ul>
-    <li>
-      <a
-        target="_blank"
-        href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/"
-        class="otherLinkColour refreshLink"
-        >Hello World</a
-      >
-      <ul>
-        <li>
-          <a
-            target="_blank"
-            href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/hello-world/hello-world.html"
-            class="otherLinkColour refreshLink"
-            >Minimal Code&nearrow;</a
-          >
-        </li>
-        <li>
-          <a
-            target="_blank"
-            href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/angular"
-            class="otherLinkColour refreshLink"
-            >Hello World with Angular</a
-          >
-        </li>
-        <li>
-          <a
-            target="_blank"
-            href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/react"
-            class="otherLinkColour refreshLink"
-            >Hello World with React</a
-          >
-        </li>
-        <li>
-          <a
-            target="_blank"
-            href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/vue"
-            class="otherLinkColour refreshLink"
-            >Hello World with Vue 3</a
-          >
-        </li>
-        <li>
-          <a
-            target="_blank"
-            href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/next"
-            class="otherLinkColour refreshLink"
-            >Hello World with Next.js</a
-          >
-        </li>
-        <li>
-          <a
-            target="_blank"
-            href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/nuxt"
-            class="otherLinkColour refreshLink"
-            >Hello World with NuxtJS</a
-          >
-        </li>
-        <li>
-          <a
-            target="_blank"
-            href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/electron"
-            class="otherLinkColour refreshLink"
-            >Hello World with Electron</a
-          >
-        </li>
-        <li>
-          <a
-            target="_blank"
-            href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/pwa"
-            class="otherLinkColour refreshLink"
-            >Hello World with PWA</a
-          >
-        </li>
-      </ul>
-    </li>
-    <li>
-      <a
-        target="_blank"
-        href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/use-case"
-        class="otherLinkColour refreshLink"
-        >Use Cases</a
-      >
-    </li>
-    <li>
-      <a
-        target="_blank"
-        href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/others/debug"
-        class="otherLinkColour refreshLink"
-        >Debug Sample</a
-      >
-    </li>
-    <li>
-      <a
-        target="_blank"
-        href="https://demo.dynamsoft.com/barcode-reader-js/"
-        class="otherLinkColour refreshLink"
-        >Official Online Demo &nearrow;</a
-      >
-    </li>
-  </ul> -->
-</li>
-<li lang="javascript">
-  <a href="{{ site.js_api }}index.html" class="otherLinkColour"
-    >API Reference</a
-  >
-  <ul lang="javascript">
-    <!-- CVR -->
-    <li>
-      <a
-        href="{{ site.dcvb_js_api }}capture-vision-router/capture-vision-router-module.html"
-        class="otherLinkColour"
-        >DynamsoftCaptureVisionRouter</a
-      >
-      <ul>
-        <li>
-          <a class="otherLinkColour">CaptureVisionRouter</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}capture-vision-router/instantiate.html"
-                class="otherLinkColour"
-                >Create and Destroy Instances</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}capture-vision-router/single-image-processing.html"
-                class="otherLinkColour"
-                >Single-Image Processing</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}capture-vision-router/multiple-image-processing.html"
-                class="otherLinkColour"
-                >Multiple-Image Processing</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}capture-vision-router/settings.html"
-                class="otherLinkColour"
-                >Settings</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}capture-vision-router/preset-templates.html"
-                class="otherLinkColour"
-                >Preset Templates</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}capture-vision-router/intermediate-result.html"
-                class="otherLinkColour"
-                >Intermediate Result</a
-              >
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a>Classes</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}capture-vision-router/capture-vision-router-module-class.html"
-                class="otherLinkColour"
-                >CaptureVisionRouterModule</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}capture-vision-router/captured-result-receiver.html"
-                class="otherLinkColour"
-                >CapturedResultReceiver</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}capture-vision-router/intermediate-result-manager.html"
-                class="otherLinkColour"
-                >IntermediateResultManager</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}capture-vision-router/intermediate-result-receiver.html"
-                class="otherLinkColour"
-                >IntermediateResultReceiver</a
-              >
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a class="otherLinkColour">Interfaces</a>
-          <ul>
-            <!-- <li>
-              <a
-                href="{{ site.dcvb_js_api }}capture-vision-router/interfaces/image-source-state-listener.html"
-                class="otherLinkColour"
-                >ImageSourceStateListener</a
-              >
-            </li> -->
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}capture-vision-router/interfaces/captured-result.html"
-                class="otherLinkColour"
-                >CapturedResult</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}capture-vision-router/interfaces/simplified-capture-vision-settings.html"
-                class="otherLinkColour"
-                >SimplifiedCaptureVisionSettings</a
-              >
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a class="otherLinkColour">Enums</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.dcvb_enums }}core/image-source-state.html?lang=js"
-                class="otherLinkColour"
-                >EnumImageSourceState</a
-              >
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-    <!-- DBR -->
-    <li lang="javascript">
-      <a
-        href="{{ site.js_api }}barcode-reader-module.html"
-        class="otherLinkColour"
-        >DynamsoftBarcodeReader</a
-      >
-      <ul>
-        <li>
-          <a
-            href="{{ site.js_api }}barcode-reader-module-class.html"
-            class="otherLinkColour"
-            >BarcodeReaderModule</a
-          >
-        </li>
-        <li>
-          <a class="otherLinkColour">Interfaces</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/aztec-details.html"
-                class="otherLinkColour"
-                >AztecDetails</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/barcode-details.html"
-                class="otherLinkColour"
-                >BarcodeDetails</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/barcode-result-item.html"
-                class="otherLinkColour"
-                >BarcodeResultItem</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/candidate-barcode-zone.html"
-                class="otherLinkColour"
-                >CandidateBarcodeZone</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/candidate-barcode-zones-unit.html"
-                class="otherLinkColour"
-                >CandidateBarcodeZonesUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/complemented-barcode-image-unit.html"
-                class="otherLinkColour"
-                >ComplementedBarcodeImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/datamatrix-details.html"
-                class="otherLinkColour"
-                >DataMatrixDetails</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/decoded-barcode-element.html"
-                class="otherLinkColour"
-                >DecodedBarcodeElement</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/decoded-barcodes-result.html"
-                class="otherLinkColour"
-                >DecodedBarcodesResult</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/decoded-barcodes-unit.html"
-                class="otherLinkColour"
-                >DecodedBarcodesUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/deformation-resisted-barcode.html"
-                class="otherLinkColour"
-                >DeformationResistedBarcode</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/deformation-resisted-barcode-image-unit.html"
-                class="otherLinkColour"
-                >DeformationResistedBarcodeImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/extended-barcode-result.html"
-                class="otherLinkColour"
-                >ExtendedBarcodeResult</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/localized-barcode-element.html"
-                class="otherLinkColour"
-                >LocalizedBarcodeElement</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/localized-barcodes-unit.html"
-                class="otherLinkColour"
-                >LocalizedBarcodesUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/oned-code-details.html"
-                class="otherLinkColour"
-                >OneDCodeDetails</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/pdf417-details.html"
-                class="otherLinkColour"
-                >PDF417Details</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/qr-code-details.html"
-                class="otherLinkColour"
-                >QRCodeDetails</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/scaled-up-barcode-image-unit.html"
-                class="otherLinkColour"
-                >ScaledUpBarcodeImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.js_api }}interfaces/simplified-barcode-reader-settings.html"
-                class="otherLinkColour"
-                >SimplifiedBarcodeReaderSettings</a
-              >
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a class="otherLinkColour">Enums</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.dcvb_enums }}barcode-reader/barcode-format.html?lang=js"
-                class="otherLinkColour"
-                >EnumBarcodeFormat</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_enums }}barcode-reader/deblur-mode.html?lang=js"
-                class="otherLinkColour"
-                >EnumDeblurMode</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_enums }}barcode-reader/extended-barcode-result-type.html?lang=js"
-                class="otherLinkColour"
-                >EnumExtendedBarcodeResultType</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_enums }}barcode-reader/localization-mode.html?lang=js"
-                class="otherLinkColour"
-                >EnumLocalizationMode</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_enums }}barcode-reader/qr-code-error-correction-level.html?lang=js"
-                class="otherLinkColour"
-                >EnumQRCodeErrorCorrectionLevel</a
-              >
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-    <!-- DCE -->
-    <li>
-      <a href="{{ site.dce_js_api }}index.html" class="otherLinkColour"
-        >DynamsoftCameraEnhancer</a
-      >
-      <ul>
-        <li>
-          <a class="otherLinkColour">CameraEnhancer</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}instantiate.html"
-                class="otherLinkColour"
-                >Instantiate</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}camera-control.html"
-                class="otherLinkColour"
-                >Camera Control</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}acquisition.html"
-                class="otherLinkColour"
-                >Frame Acquisition</a
-              >
-            </li>
-            <li>
-              <a href="{{ site.dce_js_api }}ui.html" class="otherLinkColour"
-                >UI</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}auxiliary.html"
-                class="otherLinkColour"
-                >Auxiliary</a
-              >
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a class="otherLinkColour">View Classes</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}cameraview.html"
-                class="otherLinkColour"
-                >CameraView</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}imageeditorview.html"
-                class="otherLinkColour"
-                >ImageEditorView</a
-              >
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a class="otherLinkColour">Auxiliary Classes</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}cameraenhancermodule.html"
-                class="otherLinkColour"
-                >CameraEnhancerModule</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}drawingitem.html"
-                class="otherLinkColour"
-                >DrawingItem</a
-              >
-              <ul>
-                <li>
-                  <a
-                    href="{{ site.dce_js_api }}imagedrawingitem.html"
-                    class="otherLinkColour"
-                    >ImageDrawingItem
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dce_js_api }}linedrawingitem.html"
-                    class="otherLinkColour"
-                    >LineDrawingItem</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dce_js_api }}quaddrawingitem.html"
-                    class="otherLinkColour"
-                    >QuadDrawingItem
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dce_js_api }}rectdrawingitem.html"
-                    class="otherLinkColour"
-                    >RectDrawingItem
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dce_js_api }}textdrawingitem.html"
-                    class="otherLinkColour"
-                    >TextDrawingItem</a
-                  >
-                </li>
-              </ul>
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}drawinglayer.html"
-                class="otherLinkColour"
-                >DrawingLayer</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}drawingstylemanager.html"
-                class="otherLinkColour"
-                >DrawingStyleManager</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}feedback.html"
-                class="otherLinkColour"
-                >Feedback</a
-              >
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a
-            href="{{ site.dce_js_api }}interface/index.html"
-            class="otherLinkColour"
-            >Interfaces</a
-          >
-          <ul>
-            <!--
-                    <li>
-                        <a href="{{ site.dce_js_api }}interface/cameratestresponse.html" class="otherLinkColour">CameraTestResponse</a>
-                    </li>
-                -->
-            <li>
-              <a
-                href="{{ site.dce_js_api }}interface/dceframe.html"
-                class="otherLinkColour"
-                >DCEFrame</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}interface/drawingitemevent.html"
-                class="otherLinkColour"
-                >DrawingItemEvent</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}interface/drawingstyle.html"
-                class="otherLinkColour"
-                >DrawingStyle</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}interface/note.html"
-                class="otherLinkColour"
-                >Note</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}interface/playcallbackinfo.html"
-                class="otherLinkColour"
-                >PlayCallbackInfo</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}interface/resolution.html"
-                class="otherLinkColour"
-                >Resolution</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}interface/tipconfig.html"
-                class="otherLinkColour"
-                >TipConfig</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}interface/videodeviceinfo.html"
-                class="otherLinkColour"
-                >VideoDeviceInfo</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}interface/videoframetag.html"
-                class="otherLinkColour"
-                >VideoFrameTag</a
-              >
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a href="{{ site.dce_js_api }}enum/index.html" class="otherLinkColour"
-            >Enumerations</a
-          >
-          <ul>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}enum/enumdrawingitemmediatype.html"
-                class="otherLinkColour"
-                >EnumDrawingItemMediaType</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}enum/enumdrawingitemstate.html"
-                class="otherLinkColour"
-                >EnumDrawingItemState</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}enum/enumenhancedfeatures.html"
-                class="otherLinkColour"
-                >EnumEnhancedFeatures</a
-              >
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-    <!-- DCP
-    <li>
-      <a
-        href="{{ site.dcp_js_api }}code-parser-module.html"
-        class="otherLinkColour"
-        >DynamsoftCodeParser</a
-      >
-      <ul>
-        <li lang="android"><a href="{{ site.code_types }}" class="otherLinkColour">Supported Code Types</a>
-          <ul>
-              <li lang="android"><a href="{{ site.code_types }}mrtd.html" class="otherLinkColour">Machine Readable Travel Documents</a></li>
-              <li lang="android"><a href="{{ site.code_types }}aamva-dl-id.html" class="otherLinkColour">North America DL/ID</a></li>
-              <li lang="android"><a href="{{ site.code_types }}za-dl.html" class="otherLinkColour">South Africa Driver License</a></li>
-              <li lang="android"><a href="{{ site.code_types }}aadhaar.html" class="otherLinkColour">Aadhaar</a></li>
-              <li lang="android"><a href="{{ site.code_types }}vin.html" class="otherLinkColour">Vehicle Identification Number</a></li>
-          </ul>
-        </li>
-        <li>
-          <a
-            href="{{ site.dcp_js_api }}code-parser-module-class.html"
-            class="otherLinkColour"
-            >CodeParserModule</a
-          >
-        </li>
-        <li>
-          <a
-            href="{{ site.dcp_js_api }}code-parser.html"
-            class="otherLinkColour"
-            >CodeParser</a
-          >
-        </li>
-        <li>
-          <a class="otherLinkColour">Interfaces</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.dcp_js_api }}interfaces/parsed-result.html"
-                class="otherLinkColour"
-                >Parsedresult</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcp_js_api }}interfaces/parsed-result-item.html"
-                class="otherLinkColour"
-                >ParsedresultItem</a
-              >
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a class="otherLinkColour">Enumerations</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.dcvb_enums }}code-parser/mapping-status.html"
-                class="otherLinkColour"
-                >EnumMappingStatus</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_enums }}code-parser/validation-status.html"
-                class="otherLinkColour"
-                >EnumValidationStatus</a
-              >
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </li>    -->
-    <!-- License -->
-    <li>
-      <a
-        href="{{ site.dcvb_js_api }}license/license-module.html"
-        class="otherLinkColour"
-        >DynamsoftLicense</a
-      >
-      <ul>
-        <li>
-          <a
-            href="{{ site.dcvb_js_api }}license/license-manager.html"
-            class="otherLinkColour"
-            >LicenseManager</a
-          >
-        </li>
-        <li>
-          <a
-            href="{{ site.dcvb_js_api }}license/license-module-class.html"
-            class="otherLinkColour"
-            >LicenseModule</a
-          >
-        </li>
-      </ul>
-    </li>
-    <!-- Utility -->
-    <li>
-      <a
-        href="{{ site.dcvb_js_api }}utility/utility-module.html"
-        class="otherLinkColour"
-        >DynamsoftUtility</a
-      >
-      <ul>
-        <li>
-          <a
-            href="{{ site.dcvb_js_api }}utility/image-manager.html"
-            class="otherLinkColour"
-            >ImageManager</a
-          >
-        </li>
-        <li>
-          <a
-            href="{{ site.dcvb_js_api }}utility/multi-frame-result-cross-filter.html"
-            class="otherLinkColour"
-            >MultiFrameResultCrossFilter</a
-          >
-        </li>
-        <li>
-          <a
-            href="{{ site.dcvb_js_api }}utility/utility-module-class.html"
-            class="otherLinkColour"
-            >UtilityModule</a
-          >
-        </li>
-      </ul>
-    </li>
-    <!-- Core -->
-    <li>
-      <a
-        href="{{ site.dcvb_js_api }}core/core-module.html"
-        class="otherLinkColour"
-        >DynamsoftCore</a
-      >
-      <ul>
-        <li>
-          <a>Classes</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/core-module-class.html"
-                class="otherLinkColour"
-                >CoreModule</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/image-source-adapter.html"
-                class="otherLinkColour"
-                >ImageSourceAdapter</a
-              >
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a>Interfaces</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/basic-structures/arc.html"
-                class="otherLinkColour"
-                >Arc</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/intermediate-results/binary-image-unit.html"
-                class="otherLinkColour"
-                >BinaryImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/intermediate-results/colour-image-unit.html"
-                class="otherLinkColour"
-                >ColourImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/basic-structures/captured-result-item.html"
-                class="otherLinkColour"
-                >CapturedResultItem</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/basic-structures/contour.html"
-                class="otherLinkColour"
-                >Contour</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/intermediate-results/contours-unit.html"
-                class="otherLinkColour"
-                >ContoursUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/basic-structures/corner.html"
-                class="otherLinkColour"
-                >Corner</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/basic-structures/ds-image-data.html"
-                class="otherLinkColour"
-                >DSImageData</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/basic-structures/ds-rect.html"
-                class="otherLinkColour"
-                >DSRect</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/basic-structures/edge.html"
-                class="otherLinkColour"
-                >Edge</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/intermediate-results/enhanced-grayscale-image-unit.html"
-                class="otherLinkColour"
-                >EnhancedGrayscaleImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/basic-structures/file-image-tag.html"
-                class="otherLinkColour"
-                >FileImageTag</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/intermediate-results/grayscale-image-unit.html"
-                class="otherLinkColour"
-                >GrayscaleImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/basic-structures/image-source-error-listener.html"
-                class="otherLinkColour"
-                >ImageSourceErrorListener</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/basic-structures/image-tag.html"
-                class="otherLinkColour"
-                >ImageTag</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/intermediate-results/intermediate-result.html"
-                class="otherLinkColour"
-                >IntermediateResult</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/intermediate-results/intermediate-result-extra-info.html"
-                class="otherLinkColour"
-                >IntermediateResultExtraInfo</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/intermediate-results/intermediate-result-unit.html"
-                class="otherLinkColour"
-                >IntermediateResultUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/intermediate-results/line-segments-unit.html"
-                class="otherLinkColour"
-                >LineSegmentsUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/basic-structures/line-segment.html"
-                class="otherLinkColour"
-                >LineSegment</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/intermediate-results/observation-parameters.html"
-                class="otherLinkColour"
-                >ObservationParameters</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/basic-structures/original-image-result-item.html"
-                class="otherLinkColour"
-                >OriginalImageResultItem</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/basic-structures/point.html"
-                class="otherLinkColour"
-                >Point</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/intermediate-results/predetected-region-element.html"
-                class="otherLinkColour"
-                >PredetectedRegionElement</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/intermediate-results/predetected-regions-unit.html"
-                class="otherLinkColour"
-                >PredetectedRegionsUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/basic-structures/polygon.html"
-                class="otherLinkColour"
-                >Polygon</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/basic-structures/quadrilateral.html"
-                class="otherLinkColour"
-                >Quadrilateral</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/basic-structures/rect.html"
-                class="otherLinkColour"
-                >Rect</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/intermediate-results/region-object-element.html"
-                class="otherLinkColour"
-                >RegionObjectElement</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/intermediate-results/scaled-down-colour-image-unit.html"
-                class="otherLinkColour"
-                >ScaledDownColourImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/intermediate-results/text-removed-binary-image-unit.html"
-                class="otherLinkColour"
-                >TextRemovedBinaryImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/intermediate-results/texture-detection-result-unit.html"
-                class="otherLinkColour"
-                >TextureDetectionResultUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/intermediate-results/texture-removed-binary-image-unit.html"
-                class="otherLinkColour"
-                >TextureRemovedBinaryImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/intermediate-results/texture-removed-grayscale-image-unit.html"
-                class="otherLinkColour"
-                >TextureRemovedGrayscaleImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/basic-structures/text-zone.html"
-                class="otherLinkColour"
-                >TextZone</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/intermediate-results/text-zones-unit.html"
-                class="otherLinkColour"
-                >TextZonesUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/intermediate-results/transformed-grayscale-image-unit.html"
-                class="otherLinkColour"
-                >TransformedGrayscaleImageUnit</a
-              >
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a>Enumerations</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.dcvb_enums }}core/buffer-overflow-protection-mode.html?lang=js"
-                class="otherLinkColour"
-                >BufferOverflowProtectionMode</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_enums }}core/captured-result-item-type.html?lang=js"
-                class="otherLinkColour"
-                >CapturedResultItemType</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_enums }}core/colour-channel-usage-type.html?lang=js"
-                class="otherLinkColour"
-                >ColourChannelUsageType</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_enums }}core/corner-type.html?lang=js"
-                class="otherLinkColour"
-                >CornerType</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_enums }}core/error-code.html?lang=js"
-                class="otherLinkColour"
-                >ErrorCode</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_enums }}core/grayscale-enhancement-mode.html?lang=js"
-                class="otherLinkColour"
-                >GrayscaleEnhancementMode</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_enums }}core/grayscale-transformation-mode.html?lang=js"
-                class="otherLinkColour"
-                >GrayscaleTransformationMode</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_enums }}core/image-pixel-format.html?lang=js"
-                class="otherLinkColour"
-                >ImagePixelFormat</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_enums }}core/image-tag-type.html?lang=js"
-                class="otherLinkColour"
-                >ImageTagType</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_enums }}core/intermediate-result-unit-type.html?lang=js"
-                class="otherLinkColour"
-                >IntermediateResultUnitType</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_enums }}core/region-object-element-type.html?lang=js"
-                class="otherLinkColour"
-                >RegionObjectElementType</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_enums }}core/section-type.html?lang=js"
-                class="otherLinkColour"
-                >SectionType</a
-              >
-            </li>
-            <!-- <li>
-              <a
-                href="{{ site.dcvb_enums }}core/transform-matrix-type.html?lang=js"
-                class="otherLinkColour"
-                >TransformMatrixType</a
-              >
-            </li> -->
-          </ul>
-        </li>
-      </ul>
-    </li>
-  </ul>
-</li>
-{%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-understanding.html" -%}
-<li lang="javascript" class="category">USEFUL RESOURCES</li>
-<li lang="javascript">
-  <a href="{{ site.js_release_notes }}index.html" class="otherLinkColour"
-    >Release Notes</a
-  >
-  <ul>
-    <li>
-      <a href="{{ site.js_release_notes }}js-10.html" class="otherLinkColour"
-        >Version 10.x</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js_release_notes }}js-9.html" class="otherLinkColour"
-        >Version 9.x</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js_release_notes }}js-8.html" class="otherLinkColour"
-        >Version 8.x</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js_release_notes }}js-7.html" class="otherLinkColour"
-        >Version 7.x</a
-      >
-    </li>
-  </ul>
-</li>
-<li>
-  <a
-    href="{{ site.js }}upgrade-guide/index.html"
-    style="cursor: pointer; color: #3c3c3c"
-    >Upgrade Instructions</a
-  >
-  <ul>
-    <li>
-      <a href="{{ site.js }}upgrade-guide/9to10.html" class="otherLinkColour"
-        >Upgrade v9 to v10</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}upgrade-guide/8to9.html" class="otherLinkColour"
-        >Upgrade v8 to v9</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}upgrade-guide/7to9.html" class="otherLinkColour"
-        >Upgrade v7 to v9</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}upgrade-guide/7-notice.html" class="otherLinkColour"
-        >EOS for v7.x</a
-      >
-    </li>
-  </ul>
-</li>
-
-<li>
-  <a href="{{ site.js }}faq/" class="otherLinkColour">FAQ</a>
-  <ul>
-    <li>
-      <a href="{{ site.js }}faq/ways-to-copy-dbr-js-deployable-files.html"
-        >How to get a copy of Dbr JS deployable files ?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/javascript-sdk-offline-mode-use.html"
-        >How to use the JavaScript SDK in offline mode?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/pros-and-cons-of-cdn.html"
-        >What are the pros and cons of using the CDN?</a
-      >
-    </li>
-    <li>
-      <a
-        href="{{ site.js }}faq/differences-between-full-and-compact-editions.html"
-        >What are the differences between the compact edition and the full
-        edition?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/is-https-required.html"
-        >Is HTTPS absolutely required?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/call-loadWasm-proactively.html"
-        >Do we have to call loadWasm proactively?</a
-      >
-    </li>
-    <li>
-      <a
-        href="{{ site.js }}faq/barcode-reader-docs-js/programming/javascript/faq/How-to-use-initSettings-getSimplifiedSettings-updateSettings.html"
-        >How to use initSettings/getSimplifiedSettings/updateSettings?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/different-ways-to-customize-ui.html"
-        >What are the different ways to customize the UI?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/get-sdk-logs.html"
-        >How to get the logs for the JavaScript SDK?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/upgrade-old-to-new.html"
-        >How do you upgrade to a newer version of the SDK?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/change-domain-binding-of-product-key.html"
-        >How to change the domain binding of your product key?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/when-singleFrameMode-is-enabled.html"
-        >When is singleFrameMode enabled?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/get-intermediate-result-images.html"
-        >How to get intermediate result images?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/read-inverted-image.html"
-        >How to read an inverted image?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/read-from-existing-files.html"
-        >How to read barcodes from existing files?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/formats-supported-for-existing-files.html"
-        >Formats supported when reading barcodes from files in local memory?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/scan-US-drivers-license.html"
-        >How to scan the barcode on a US Driver"s License and get the first
-        name, last name, DOB, etc.?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/add-remove-beep-sound.html"
-        >How to add/remove a "beep" sound once a barcode is found?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/nodejs-implementation.html"
-        >How do I create a NodeJS application using the SDK?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/check-current-version.html"
-        >How to check the version of the JavaScript SDK I am currently using?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/unable-to-scan-aztec-code.html"
-        >Why am I unable to scan an Aztec code in the helloworld sample?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/stop-camera-to-open-right-away.html"
-        >Enable the camera on the click of a button?</a
-      >
-    </li>
-    <li>
-      <a
-        href="{{ site.js }}faq/difference-between-barcodeReader-and-barcodeScanner.html"
-        >What is the difference between the BarcodeReader class and the
-        BarcodeScanner class?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/newline-character-not-being-rendered.html"
-        >Why are newline characters not being rendered when displaying the
-        barcode results in a textbox?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/resolve-magic-word.html"
-        >How to resolve the expected magic word error that occurs when using the
-        JavaScript SDK?</a
-      >
-    </li>
-    <li>
-      <a
-        href="{{ site.js }}faq/general-troubleshooting-steps-for-decode-failure.html"
-        >What are the general troubleshooting steps if an image fails to decode
-        with the JavaScript SDK?</a
-      >
-    </li>
-    <li>
-      <a
-        href="{{ site.js }}faq/difference-between-bestspeed-and-bestcoverage.html"
-        >What are the differences between the "speed", "coverage", "balance, and
-        "single" runtime templates?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/avoid-incorrect-barcode-results.html"
-        >How to avoid incorrect barcode results?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/how-license-tracking-works.html"
-        >How does the license work - Per Scan, Per Device, Per Concurrent
-        Device?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/new-license-required-per-device-licensing.html"
-        >When is a new license spot taken when using a per-device licensing
-        model?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/delay-when-open-camera.html"
-        >How to get rid of the delay when opening the camera?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/hide-laser-message-ui.html"
-        >How can I hide the laser bar and Dynamsoft message in the default UI of
-        the BarcodeScanner?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/ios-16-incompatible.html"
-        >Why is the Javascript SDK not recognizing any barcodes on iOS 16.4?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/check-camera.html"
-        >How to check the camera permissions programmatically in Dynamsoft
-        Barcode Reader JavaScript SDK?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/ios-17-readability.html"
-        >How do I resolve the issue of the Barcode Reader not recognizing any
-        barcodes via video in iOS 16.7 or 17?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/remove-duplicates.html"
-        >How to Reduce Duplicate Scans and Optimize Scan Usage?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/webcam-support-dense.html"
-        >Why isn't my webcam reading the barcode on my driver's license or ID card?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/system-requirement.html"
-        >What are the system requirements for running the latest version of Dynamsoft Barcode Reader?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/enable-supported-barcode-format.html"
-        >How to Enable Specific Barcode Formats with Your License?</a>
-    </li>
-  </ul>
-</li>
-<li lang="javascript"><a href="{{ site.license_activation }}index.html" class="otherLinkColour">License Initialization</a></li>
-<!-- <li class="category">OTHERS</li>
-<li>
-  <a
-    target="_blank"
-    href="{{ site.introduction }}index.html"
-    class="otherLinkColour refreshLink"
-    >Develop for Mobile or Server/Desktop</a
-  >
-</li> -->
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 @@
-<li>
-  <a href="{{ site.js }}" class="otherLinkColour">Introduction</a>
-</li>
-<li lang="javascript" class="category">DEVELOPMENT</li>
-<li lang="javascript">
-  <a style="cursor: pointer; color: #3c3c3c">User Guide</a>
-  <ul lang="javascript">
-    <li lang="javascript">
-        <a
-          href="{{ site.js }}user-guide/barcode-scanner.html"
-          style="cursor: pointer; color: #3c3c3c"
-          >Start with RTU-BarcodeScanner</a
-        >
-    </li>
-    <li lang="javascript">
-        <a
-          href="{{ site.js }}user-guide/barcode-scanner-customization.html"
-          style="cursor: pointer; color: #3c3c3c"
-          >Customize your BarcodeScanner</a
-        >
-    </li>
-    <li lang="javascript">
-        <a
-          style="cursor: pointer; color: #3c3c3c"
-          >Develop with Foundational APIs</a
-        >
-      <ul lang="javascript">
-        <li lang="javascript">
-          <a
-            href="{{ site.js }}user-guide/index.html"
-            style="cursor: pointer; color: #3c3c3c"
-            >Get Started</a
-          >
-        </li>
-        <li lang="javascript">
-          <a
-            href="{{ site.js }}user-guide/use-in-framework.html"
-            style="cursor: pointer; color: #3c3c3c"
-            >Use in Framework</a
-          >
-        </li>
-        <li>
-          <a
-            href="{{ site.js }}user-guide/explore-features/index.html"
-            class="otherLinkColour"
-            >Explore Features</a
-          >
-          <ul>
-            <li>
-              <a class="otherLinkColour">Basic Features</a>
-              <ul>
-                <li>
-                  <a
-                    href="{{ site.features }}barcode-formats-and-count.html?lang=js"
-                    class="otherLinkColour"
-                    >Specify barcode formats and count</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.features }}barcode-scan-region.html?lang=js"
-                    class="otherLinkColour"
-                    >Read a specific area/region</a
-                  >
-                </li>
-                <li>
-                  <a 
-                    href="{{ site.features }}ui-customization-js.html?lang=js" 
-                    class="otherLinkColour"
-                    >Customize the UI</a
-                  >
-                </li>
-              </ul>
-            </li>
-            <li>
-              <a class="otherLinkColour">Handle Different Cases</a>
-              <ul>
-                <li>
-                  <a
-                    href="{{ site.features }}read-inverted-barcodes.html?lang=js"
-                    class="otherLinkColour"
-                    >Read inverted barcodes</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.features }}read-deformed-barcodes.html?lang=js"
-                    class="otherLinkColour"
-                    >Read deformed barcodes</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.features }}read-incomplete-barcodes.html?lang=js"
-                    class="otherLinkColour"
-                    >Read incomplete barcodes</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.features }}read-dense-barcodes.html?lang=js"
-                    class="otherLinkColour"
-                    >Read dense barcodes</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.features }}read-a-large-image.html?lang=js"
-                    class="otherLinkColour"
-                    >Read barcodes from a large image</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.features }}read-barcodes-with-small-module-size.html?lang=js"
-                    class="otherLinkColour"
-                    >Read barcodes with small module size</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.features }}read-barcodes-with-imbalanced-colour.html?lang=js"
-                    class="otherLinkColour"
-                    >Read images with imbalanced colors</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.features }}read-barcodes-with-uneven-lighting.html?lang=js"
-                    class="otherLinkColour"
-                    >Read images with uneven lighting</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.features }}read-images-with-texture.html?lang=js"
-                    class="otherLinkColour"
-                    >Read images with texture</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.features }}read-images-with-lots-of-text.html?lang=js"
-                    class="otherLinkColour"
-                    >Read images with lots of text</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.features }}preprocess-images.html?lang=js"
-                    class="otherLinkColour"
-                    >Preprocess images to read difficult barcodes</a
-                  >
-                </li>
-              </ul>
-            </li>
-            <li>
-              <a class="otherLinkColour">Barcode Results</a>
-              <ul>
-                <li>
-                  <a
-                    href="{{ site.features }}get-confidence-rotation.html?lang=js"
-                    class="otherLinkColour"
-                    >Get barcode confidence and rotation</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.features }}get-barcode-location.html?lang=js"
-                    class="otherLinkColour"
-                    >Get barcode location</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.features }}get-detailed-info.html?lang=js"
-                    class="otherLinkColour"
-                    >Get detailed barcode information</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.features }}filter-and-sort.html?lang=js"
-                    class="otherLinkColour"
-                    >Filter and sort decoding results</a
-                  >
-                </li>
-                <!-- <li><a href="{{ site.features }}use-intermidiate-results.html?lang=js" class="otherLinkColour">Use intermediate
-                    results</a>
-                </li> -->
-              </ul>
-            </li>
-            <li>
-              <a class="otherLinkColour">Advanced Features</a>
-              <ul>
-                <!-- <li><a href="{{ site.features }}control-terminate-phase.html?lang=js" class="otherLinkColour">Control when to
-                    terminate a
-                    decoding process</a></li> -->
-                <li>
-                  <a
-                    href="{{ site.features }}use-runtimesettings-or-templates.html?lang=js"
-                    class="otherLinkColour"
-                    >Use SimplifiedCaptureVisionSettings or Templates</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.features }}use-format-specific-configuration.html?lang=js"
-                    class="otherLinkColour"
-                    >Use format specific configurations</a
-                  >
-                </li>
-              </ul>
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-  </ul>
-</li>
-<li>
-  <a href="{{ site.js }}samples-demos/index.html" class="otherLinkColour"
-    >Samples and Demos</a
-  >
-</li>
-<li lang="javascript">
-  <a>API Reference</a>
-  <ul lang="javascript">
-    <li lang="javascript">
-        <a
-          href="{{ site.js_api }}barcode-scanner.html"
-          style="cursor: pointer; color: #3c3c3c"
-          >BarcodeScanner APIs</a
-        >
-    </li>
-    <li lang="javascript">
-        <a
-          href="{{ site.js_api }}index.html"
-          style="cursor: pointer; color: #3c3c3c"
-          >Foundational APIs</a
-        >
-      <ul lang="javascript">
-        <!-- CVR -->
-        <li>
-          <a
-            href="{{ site.dcvb_js_api }}capture-vision-router/capture-vision-router-module.html"
-            class="otherLinkColour"
-            >DynamsoftCaptureVisionRouter</a
-          >
-          <ul>
-            <li>
-              <a class="otherLinkColour">CaptureVisionRouter</a>
-              <ul>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}capture-vision-router/instantiate.html"
-                    class="otherLinkColour"
-                    >Create and Destroy Instances</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}capture-vision-router/single-image-processing.html"
-                    class="otherLinkColour"
-                    >Single-Image Processing</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}capture-vision-router/multiple-image-processing.html"
-                    class="otherLinkColour"
-                    >Multiple-Image Processing</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}capture-vision-router/settings.html"
-                    class="otherLinkColour"
-                    >Settings</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}capture-vision-router/preset-templates.html"
-                    class="otherLinkColour"
-                    >Preset Templates</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}capture-vision-router/intermediate-result.html"
-                    class="otherLinkColour"
-                    >Intermediate Result</a
-                  >
-                </li>
-              </ul>
-            </li>
-            <li>
-              <a>Classes</a>
-              <ul>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}capture-vision-router/capture-vision-router-module-class.html"
-                    class="otherLinkColour"
-                    >CaptureVisionRouterModule</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}capture-vision-router/captured-result-receiver.html"
-                    class="otherLinkColour"
-                    >CapturedResultReceiver</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}capture-vision-router/intermediate-result-manager.html"
-                    class="otherLinkColour"
-                    >IntermediateResultManager</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}capture-vision-router/intermediate-result-receiver.html"
-                    class="otherLinkColour"
-                    >IntermediateResultReceiver</a
-                  >
-                </li>
-              </ul>
-            </li>
-            <li>
-              <a class="otherLinkColour">Interfaces</a>
-              <ul>
-                <!-- <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}capture-vision-router/interfaces/image-source-state-listener.html"
-                    class="otherLinkColour"
-                    >ImageSourceStateListener</a
-                  >
-                </li> -->
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}capture-vision-router/interfaces/captured-result.html"
-                    class="otherLinkColour"
-                    >CapturedResult</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}capture-vision-router/interfaces/simplified-capture-vision-settings.html"
-                    class="otherLinkColour"
-                    >SimplifiedCaptureVisionSettings</a
-                  >
-                </li>
-              </ul>
-            </li>
-            <li>
-              <a class="otherLinkColour">Enums</a>
-              <ul>
-                <li>
-                  <a
-                    href="{{ site.dcvb_enums }}core/image-source-state.html?lang=js"
-                    class="otherLinkColour"
-                    >EnumImageSourceState</a
-                  >
-                </li>
-              </ul>
-            </li>
-          </ul>
-        </li>
-        <!-- DBR -->
-        <li lang="javascript">
-          <a
-            href="{{ site.js_api }}barcode-reader-module.html"
-            class="otherLinkColour"
-            >DynamsoftBarcodeReader</a
-          >
-          <ul>
-            <li>
-              <a
-                href="{{ site.js_api }}barcode-reader-module-class.html"
-                class="otherLinkColour"
-                >BarcodeReaderModule</a
-              >
-            </li>
-            <li>
-              <a class="otherLinkColour">Interfaces</a>
-              <ul>
-                <li>
-                  <a
-                    href="{{ site.js_api }}interfaces/aztec-details.html"
-                    class="otherLinkColour"
-                    >AztecDetails</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.js_api }}interfaces/barcode-details.html"
-                    class="otherLinkColour"
-                    >BarcodeDetails</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.js_api }}interfaces/barcode-result-item.html"
-                    class="otherLinkColour"
-                    >BarcodeResultItem</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.js_api }}interfaces/candidate-barcode-zone.html"
-                    class="otherLinkColour"
-                    >CandidateBarcodeZone</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.js_api }}interfaces/candidate-barcode-zones-unit.html"
-                    class="otherLinkColour"
-                    >CandidateBarcodeZonesUnit</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.js_api }}interfaces/complemented-barcode-image-unit.html"
-                    class="otherLinkColour"
-                    >ComplementedBarcodeImageUnit</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.js_api }}interfaces/datamatrix-details.html"
-                    class="otherLinkColour"
-                    >DataMatrixDetails</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.js_api }}interfaces/decoded-barcode-element.html"
-                    class="otherLinkColour"
-                    >DecodedBarcodeElement</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.js_api }}interfaces/decoded-barcodes-result.html"
-                    class="otherLinkColour"
-                    >DecodedBarcodesResult</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.js_api }}interfaces/decoded-barcodes-unit.html"
-                    class="otherLinkColour"
-                    >DecodedBarcodesUnit</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.js_api }}interfaces/deformation-resisted-barcode.html"
-                    class="otherLinkColour"
-                    >DeformationResistedBarcode</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.js_api }}interfaces/deformation-resisted-barcode-image-unit.html"
-                    class="otherLinkColour"
-                    >DeformationResistedBarcodeImageUnit</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.js_api }}interfaces/extended-barcode-result.html"
-                    class="otherLinkColour"
-                    >ExtendedBarcodeResult</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.js_api }}interfaces/localized-barcode-element.html"
-                    class="otherLinkColour"
-                    >LocalizedBarcodeElement</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.js_api }}interfaces/localized-barcodes-unit.html"
-                    class="otherLinkColour"
-                    >LocalizedBarcodesUnit</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.js_api }}interfaces/oned-code-details.html"
-                    class="otherLinkColour"
-                    >OneDCodeDetails</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.js_api }}interfaces/pdf417-details.html"
-                    class="otherLinkColour"
-                    >PDF417Details</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.js_api }}interfaces/qr-code-details.html"
-                    class="otherLinkColour"
-                    >QRCodeDetails</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.js_api }}interfaces/scaled-up-barcode-image-unit.html"
-                    class="otherLinkColour"
-                    >ScaledUpBarcodeImageUnit</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.js_api }}interfaces/simplified-barcode-reader-settings.html"
-                    class="otherLinkColour"
-                    >SimplifiedBarcodeReaderSettings</a
-                  >
-                </li>
-              </ul>
-            </li>
-            <li>
-              <a class="otherLinkColour">Enums</a>
-              <ul>
-                <li>
-                  <a
-                    href="{{ site.dcvb_enums }}barcode-reader/barcode-format.html?lang=js"
-                    class="otherLinkColour"
-                    >EnumBarcodeFormat</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_enums }}barcode-reader/deblur-mode.html?lang=js"
-                    class="otherLinkColour"
-                    >EnumDeblurMode</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_enums }}barcode-reader/extended-barcode-result-type.html?lang=js"
-                    class="otherLinkColour"
-                    >EnumExtendedBarcodeResultType</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_enums }}barcode-reader/localization-mode.html?lang=js"
-                    class="otherLinkColour"
-                    >EnumLocalizationMode</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_enums }}barcode-reader/qr-code-error-correction-level.html?lang=js"
-                    class="otherLinkColour"
-                    >EnumQRCodeErrorCorrectionLevel</a
-                  >
-                </li>
-              </ul>
-            </li>
-          </ul>
-        </li>
-        <!-- DCE -->
-        <li>
-          <a href="{{ site.dce_js_api }}index.html" class="otherLinkColour"
-            >DynamsoftCameraEnhancer</a
-          >
-          <ul>
-            <li>
-              <a class="otherLinkColour">CameraEnhancer</a>
-              <ul>
-                <li>
-                  <a
-                    href="{{ site.dce_js_api }}instantiate.html"
-                    class="otherLinkColour"
-                    >Instantiate</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dce_js_api }}camera-control.html"
-                    class="otherLinkColour"
-                    >Camera Control</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dce_js_api }}acquisition.html"
-                    class="otherLinkColour"
-                    >Frame Acquisition</a
-                  >
-                </li>
-                <li>
-                  <a href="{{ site.dce_js_api }}ui.html" class="otherLinkColour"
-                    >UI</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dce_js_api }}auxiliary.html"
-                    class="otherLinkColour"
-                    >Auxiliary</a
-                  >
-                </li>
-              </ul>
-            </li>
-            <li>
-              <a class="otherLinkColour">View Classes</a>
-              <ul>
-                <li>
-                  <a
-                    href="{{ site.dce_js_api }}cameraview.html"
-                    class="otherLinkColour"
-                    >CameraView</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dce_js_api }}imageeditorview.html"
-                    class="otherLinkColour"
-                    >ImageEditorView</a
-                  >
-                </li>
-              </ul>
-            </li>
-            <li>
-              <a class="otherLinkColour">Auxiliary Classes</a>
-              <ul>
-                <li>
-                  <a
-                    href="{{ site.dce_js_api }}cameraenhancermodule.html"
-                    class="otherLinkColour"
-                    >CameraEnhancerModule</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dce_js_api }}drawingitem.html"
-                    class="otherLinkColour"
-                    >DrawingItem</a
-                  >
-                  <ul>
-                    <li>
-                      <a
-                        href="{{ site.dce_js_api }}imagedrawingitem.html"
-                        class="otherLinkColour"
-                        >ImageDrawingItem
-                      </a>
-                    </li>
-                    <li>
-                      <a
-                        href="{{ site.dce_js_api }}linedrawingitem.html"
-                        class="otherLinkColour"
-                        >LineDrawingItem</a
-                      >
-                    </li>
-                    <li>
-                      <a
-                        href="{{ site.dce_js_api }}quaddrawingitem.html"
-                        class="otherLinkColour"
-                        >QuadDrawingItem
-                      </a>
-                    </li>
-                    <li>
-                      <a
-                        href="{{ site.dce_js_api }}rectdrawingitem.html"
-                        class="otherLinkColour"
-                        >RectDrawingItem
-                      </a>
-                    </li>
-                    <li>
-                      <a
-                        href="{{ site.dce_js_api }}textdrawingitem.html"
-                        class="otherLinkColour"
-                        >TextDrawingItem</a
-                      >
-                    </li>
-                  </ul>
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dce_js_api }}drawinglayer.html"
-                    class="otherLinkColour"
-                    >DrawingLayer</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dce_js_api }}drawingstylemanager.html"
-                    class="otherLinkColour"
-                    >DrawingStyleManager</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dce_js_api }}feedback.html"
-                    class="otherLinkColour"
-                    >Feedback</a
-                  >
-                </li>
-              </ul>
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}interface/index.html"
-                class="otherLinkColour"
-                >Interfaces</a
-              >
-              <ul>
-                <!--
-                        <li>
-                            <a href="{{ site.dce_js_api }}interface/cameratestresponse.html" class="otherLinkColour">CameraTestResponse</a>
-                        </li>
-                    -->
-                <li>
-                  <a
-                    href="{{ site.dce_js_api }}interface/dceframe.html"
-                    class="otherLinkColour"
-                    >DCEFrame</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dce_js_api }}interface/drawingitemevent.html"
-                    class="otherLinkColour"
-                    >DrawingItemEvent</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dce_js_api }}interface/drawingstyle.html"
-                    class="otherLinkColour"
-                    >DrawingStyle</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dce_js_api }}interface/note.html"
-                    class="otherLinkColour"
-                    >Note</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dce_js_api }}interface/playcallbackinfo.html"
-                    class="otherLinkColour"
-                    >PlayCallbackInfo</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dce_js_api }}interface/resolution.html"
-                    class="otherLinkColour"
-                    >Resolution</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dce_js_api }}interface/tipconfig.html"
-                    class="otherLinkColour"
-                    >TipConfig</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dce_js_api }}interface/videodeviceinfo.html"
-                    class="otherLinkColour"
-                    >VideoDeviceInfo</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dce_js_api }}interface/videoframetag.html"
-                    class="otherLinkColour"
-                    >VideoFrameTag</a
-                  >
-                </li>
-              </ul>
-            </li>
-            <li>
-              <a href="{{ site.dce_js_api }}enum/index.html" class="otherLinkColour"
-                >Enumerations</a
-              >
-              <ul>
-                <li>
-                  <a
-                    href="{{ site.dce_js_api }}enum/enumdrawingitemmediatype.html"
-                    class="otherLinkColour"
-                    >EnumDrawingItemMediaType</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dce_js_api }}enum/enumdrawingitemstate.html"
-                    class="otherLinkColour"
-                    >EnumDrawingItemState</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dce_js_api }}enum/enumenhancedfeatures.html"
-                    class="otherLinkColour"
-                    >EnumEnhancedFeatures</a
-                  >
-                </li>
-              </ul>
-            </li>
-          </ul>
-        </li>
-        <!-- DCP
-        <li>
-          <a
-            href="{{ site.dcp_js_api }}code-parser-module.html"
-            class="otherLinkColour"
-            >DynamsoftCodeParser</a
-          >
-          <ul>
-            <li lang="android"><a href="{{ site.code_types }}" class="otherLinkColour">Supported Code Types</a>
-              <ul>
-                  <li lang="android"><a href="{{ site.code_types }}mrtd.html" class="otherLinkColour">Machine Readable Travel Documents</a></li>
-                  <li lang="android"><a href="{{ site.code_types }}aamva-dl-id.html" class="otherLinkColour">North America DL/ID</a></li>
-                  <li lang="android"><a href="{{ site.code_types }}za-dl.html" class="otherLinkColour">South Africa Driver License</a></li>
-                  <li lang="android"><a href="{{ site.code_types }}aadhaar.html" class="otherLinkColour">Aadhaar</a></li>
-                  <li lang="android"><a href="{{ site.code_types }}vin.html" class="otherLinkColour">Vehicle Identification Number</a></li>
-              </ul>
-            </li>
-            <li>
-              <a
-                href="{{ site.dcp_js_api }}code-parser-module-class.html"
-                class="otherLinkColour"
-                >CodeParserModule</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcp_js_api }}code-parser.html"
-                class="otherLinkColour"
-                >CodeParser</a
-              >
-            </li>
-            <li>
-              <a class="otherLinkColour">Interfaces</a>
-              <ul>
-                <li>
-                  <a
-                    href="{{ site.dcp_js_api }}interfaces/parsed-result.html"
-                    class="otherLinkColour"
-                    >Parsedresult</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcp_js_api }}interfaces/parsed-result-item.html"
-                    class="otherLinkColour"
-                    >ParsedresultItem</a
-                  >
-                </li>
-              </ul>
-            </li>
-            <li>
-              <a class="otherLinkColour">Enumerations</a>
-              <ul>
-                <li>
-                  <a
-                    href="{{ site.dcvb_enums }}code-parser/mapping-status.html"
-                    class="otherLinkColour"
-                    >EnumMappingStatus</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_enums }}code-parser/validation-status.html"
-                    class="otherLinkColour"
-                    >EnumValidationStatus</a
-                  >
-                </li>
-              </ul>
-            </li>
-          </ul>
-        </li>    -->
-        <!-- License -->
-        <li>
-          <a
-            href="{{ site.dcvb_js_api }}license/license-module.html"
-            class="otherLinkColour"
-            >DynamsoftLicense</a
-          >
-          <ul>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}license/license-manager.html"
-                class="otherLinkColour"
-                >LicenseManager</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}license/license-module-class.html"
-                class="otherLinkColour"
-                >LicenseModule</a
-              >
-            </li>
-          </ul>
-        </li>
-        <!-- Utility -->
-        <li>
-          <a
-            href="{{ site.dcvb_js_api }}utility/utility-module.html"
-            class="otherLinkColour"
-            >DynamsoftUtility</a
-          >
-          <ul>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}utility/image-manager.html"
-                class="otherLinkColour"
-                >ImageManager</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}utility/multi-frame-result-cross-filter.html"
-                class="otherLinkColour"
-                >MultiFrameResultCrossFilter</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}utility/utility-module-class.html"
-                class="otherLinkColour"
-                >UtilityModule</a
-              >
-            </li>
-          </ul>
-        </li>
-        <!-- Core -->
-        <li>
-          <a
-            href="{{ site.dcvb_js_api }}core/core-module.html"
-            class="otherLinkColour"
-            >DynamsoftCore</a
-          >
-          <ul>
-            <li>
-              <a>Classes</a>
-              <ul>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/core-module-class.html"
-                    class="otherLinkColour"
-                    >CoreModule</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/image-source-adapter.html"
-                    class="otherLinkColour"
-                    >ImageSourceAdapter</a
-                  >
-                </li>
-              </ul>
-            </li>
-            <li>
-              <a>Interfaces</a>
-              <ul>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/basic-structures/arc.html"
-                    class="otherLinkColour"
-                    >Arc</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/intermediate-results/binary-image-unit.html"
-                    class="otherLinkColour"
-                    >BinaryImageUnit</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/intermediate-results/colour-image-unit.html"
-                    class="otherLinkColour"
-                    >ColourImageUnit</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/basic-structures/captured-result-item.html"
-                    class="otherLinkColour"
-                    >CapturedResultItem</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/basic-structures/contour.html"
-                    class="otherLinkColour"
-                    >Contour</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/intermediate-results/contours-unit.html"
-                    class="otherLinkColour"
-                    >ContoursUnit</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/basic-structures/corner.html"
-                    class="otherLinkColour"
-                    >Corner</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/basic-structures/ds-image-data.html"
-                    class="otherLinkColour"
-                    >DSImageData</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/basic-structures/ds-rect.html"
-                    class="otherLinkColour"
-                    >DSRect</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/basic-structures/edge.html"
-                    class="otherLinkColour"
-                    >Edge</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/intermediate-results/enhanced-grayscale-image-unit.html"
-                    class="otherLinkColour"
-                    >EnhancedGrayscaleImageUnit</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/basic-structures/file-image-tag.html"
-                    class="otherLinkColour"
-                    >FileImageTag</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/intermediate-results/grayscale-image-unit.html"
-                    class="otherLinkColour"
-                    >GrayscaleImageUnit</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/basic-structures/image-source-error-listener.html"
-                    class="otherLinkColour"
-                    >ImageSourceErrorListener</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/basic-structures/image-tag.html"
-                    class="otherLinkColour"
-                    >ImageTag</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/intermediate-results/intermediate-result.html"
-                    class="otherLinkColour"
-                    >IntermediateResult</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/intermediate-results/intermediate-result-extra-info.html"
-                    class="otherLinkColour"
-                    >IntermediateResultExtraInfo</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/intermediate-results/intermediate-result-unit.html"
-                    class="otherLinkColour"
-                    >IntermediateResultUnit</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/intermediate-results/line-segments-unit.html"
-                    class="otherLinkColour"
-                    >LineSegmentsUnit</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/basic-structures/line-segment.html"
-                    class="otherLinkColour"
-                    >LineSegment</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/intermediate-results/observation-parameters.html"
-                    class="otherLinkColour"
-                    >ObservationParameters</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/basic-structures/original-image-result-item.html"
-                    class="otherLinkColour"
-                    >OriginalImageResultItem</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/basic-structures/point.html"
-                    class="otherLinkColour"
-                    >Point</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/intermediate-results/predetected-region-element.html"
-                    class="otherLinkColour"
-                    >PredetectedRegionElement</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/intermediate-results/predetected-regions-unit.html"
-                    class="otherLinkColour"
-                    >PredetectedRegionsUnit</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/basic-structures/polygon.html"
-                    class="otherLinkColour"
-                    >Polygon</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/basic-structures/quadrilateral.html"
-                    class="otherLinkColour"
-                    >Quadrilateral</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/basic-structures/rect.html"
-                    class="otherLinkColour"
-                    >Rect</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/intermediate-results/region-object-element.html"
-                    class="otherLinkColour"
-                    >RegionObjectElement</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/intermediate-results/scaled-down-colour-image-unit.html"
-                    class="otherLinkColour"
-                    >ScaledDownColourImageUnit</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/intermediate-results/text-removed-binary-image-unit.html"
-                    class="otherLinkColour"
-                    >TextRemovedBinaryImageUnit</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/intermediate-results/texture-detection-result-unit.html"
-                    class="otherLinkColour"
-                    >TextureDetectionResultUnit</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/intermediate-results/texture-removed-binary-image-unit.html"
-                    class="otherLinkColour"
-                    >TextureRemovedBinaryImageUnit</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/intermediate-results/texture-removed-grayscale-image-unit.html"
-                    class="otherLinkColour"
-                    >TextureRemovedGrayscaleImageUnit</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/basic-structures/text-zone.html"
-                    class="otherLinkColour"
-                    >TextZone</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/intermediate-results/text-zones-unit.html"
-                    class="otherLinkColour"
-                    >TextZonesUnit</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/intermediate-results/transformed-grayscale-image-unit.html"
-                    class="otherLinkColour"
-                    >TransformedGrayscaleImageUnit</a
-                  >
-                </li>
-              </ul>
-            </li>
-            <li>
-              <a>Enumerations</a>
-              <ul>
-                <li>
-                  <a
-                    href="{{ site.dcvb_enums }}core/buffer-overflow-protection-mode.html?lang=js"
-                    class="otherLinkColour"
-                    >BufferOverflowProtectionMode</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_enums }}core/captured-result-item-type.html?lang=js"
-                    class="otherLinkColour"
-                    >CapturedResultItemType</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_enums }}core/colour-channel-usage-type.html?lang=js"
-                    class="otherLinkColour"
-                    >ColourChannelUsageType</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_enums }}core/corner-type.html?lang=js"
-                    class="otherLinkColour"
-                    >CornerType</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_enums }}core/error-code.html?lang=js"
-                    class="otherLinkColour"
-                    >ErrorCode</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_enums }}core/grayscale-enhancement-mode.html?lang=js"
-                    class="otherLinkColour"
-                    >GrayscaleEnhancementMode</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_enums }}core/grayscale-transformation-mode.html?lang=js"
-                    class="otherLinkColour"
-                    >GrayscaleTransformationMode</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_enums }}core/image-pixel-format.html?lang=js"
-                    class="otherLinkColour"
-                    >ImagePixelFormat</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_enums }}core/image-tag-type.html?lang=js"
-                    class="otherLinkColour"
-                    >ImageTagType</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_enums }}core/intermediate-result-unit-type.html?lang=js"
-                    class="otherLinkColour"
-                    >IntermediateResultUnitType</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_enums }}core/region-object-element-type.html?lang=js"
-                    class="otherLinkColour"
-                    >RegionObjectElementType</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_enums }}core/section-type.html?lang=js"
-                    class="otherLinkColour"
-                    >SectionType</a
-                  >
-                </li>
-                <!-- <li>
-                  <a
-                    href="{{ site.dcvb_enums }}core/transform-matrix-type.html?lang=js"
-                    class="otherLinkColour"
-                    >TransformMatrixType</a
-                  >
-                </li> -->
-              </ul>
-            </li>
-          </ul>
-        </li>    
-      </ul>
-    </li>
-  </ul>
-</li>
-{%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-understanding.html" -%}
-<li lang="javascript" class="category">USEFUL RESOURCES</li>
-<li lang="javascript">
-  <a href="{{ site.js_release_notes }}index.html" class="otherLinkColour"
-    >Release Notes</a
-  >
-  <ul>
-    <li>
-      <a href="{{ site.js_release_notes }}js-10.html" class="otherLinkColour"
-        >Version 10.x</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js_release_notes }}js-9.html" class="otherLinkColour"
-        >Version 9.x</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js_release_notes }}js-8.html" class="otherLinkColour"
-        >Version 8.x</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js_release_notes }}js-7.html" class="otherLinkColour"
-        >Version 7.x</a
-      >
-    </li>
-  </ul>
-</li>
-<li>
-  <a
-    href="{{ site.js }}upgrade-guide/index.html"
-    style="cursor: pointer; color: #3c3c3c"
-    >Upgrade Instructions</a
-  >
-  <ul>
-    <li>
-      <a href="{{ site.js }}upgrade-guide/9to10.html" class="otherLinkColour"
-        >Upgrade v9 to v10</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}upgrade-guide/8to9.html" class="otherLinkColour"
-        >Upgrade v8 to v9</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}upgrade-guide/7to9.html" class="otherLinkColour"
-        >Upgrade v7 to v9</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}upgrade-guide/7-notice.html" class="otherLinkColour"
-        >EOS for v7.x</a
-      >
-    </li>
-  </ul>
-</li>
-
-<li>
-  <a href="{{ site.js }}faq/" class="otherLinkColour">FAQ</a>
-  <ul>
-    <li>
-      <a href="{{ site.js }}faq/ways-to-copy-dbr-js-deployable-files.html"
-        >How to get a copy of Dbr JS deployable files ?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/javascript-sdk-offline-mode-use.html"
-        >How to use the JavaScript SDK in offline mode?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/pros-and-cons-of-cdn.html"
-        >What are the pros and cons of using the CDN?</a
-      >
-    </li>
-    <li>
-      <a
-        href="{{ site.js }}faq/differences-between-full-and-compact-editions.html"
-        >What are the differences between the compact edition and the full
-        edition?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/is-https-required.html"
-        >Is HTTPS absolutely required?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/call-loadWasm-proactively.html"
-        >Do we have to call loadWasm proactively?</a
-      >
-    </li>
-    <li>
-      <a
-        href="{{ site.js }}faq/barcode-reader-docs-js/programming/javascript/faq/differences-between-updateScanSettings-updateVideoSettings-and-updateRuntimeSettings.html"
-        >What are the differences between updateScanSettings/updateVideoSettings/updateRuntimeSettings ?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/different-ways-to-customize-ui.html"
-        >What are the different ways to customize the UI?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/get-sdk-logs.html"
-        >How to get the logs for the JavaScript SDK?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/upgrade-old-to-new.html"
-        >How do you upgrade to a newer version of the SDK?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/change-domain-binding-of-product-key.html"
-        >How to Secure Your License Key by Managing Domain Binding?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/when-singleFrameMode-is-enabled.html"
-        >When is singleFrameMode enabled?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/get-intermediate-result-images.html"
-        >How to get intermediate result images?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/read-inverted-image.html"
-        >How to read an inverted image?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/read-from-existing-files.html"
-        >How to read barcodes from existing files?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/formats-supported-for-existing-files.html"
-        >Formats supported when reading barcodes from files in local memory?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/scan-US-drivers-license.html"
-        >How to scan the barcode on a US Driver"s License and get the first
-        name, last name, DOB, etc.?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/add-remove-beep-sound.html"
-        >How to add/remove a "beep" sound once a barcode is found?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/nodejs-implementation.html"
-        >How do I create a NodeJS application using the SDK?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/check-current-version.html"
-        >How to check the version of the JavaScript SDK I am currently using?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/unable-to-scan-aztec-code.html"
-        >Why am I unable to scan an Aztec code in the helloworld sample?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/stop-camera-to-open-right-away.html"
-        >Enable the camera on the click of a button?</a
-      >
-    </li>
-    <li>
-      <a
-        href="{{ site.js }}faq/difference-between-barcodeReader-and-barcodeScanner.html"
-        >What is the difference between the BarcodeReader class and the
-        BarcodeScanner class?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/newline-character-not-being-rendered.html"
-        >Why are newline characters not being rendered when displaying the
-        barcode results in a textbox?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/resolve-magic-word.html"
-        >How to resolve the expected magic word error that occurs when using the
-        JavaScript SDK?</a
-      >
-    </li>
-    <li>
-      <a
-        href="{{ site.js }}faq/general-troubleshooting-steps-for-decode-failure.html"
-        >What are the general troubleshooting steps if an image fails to decode
-        with the JavaScript SDK?</a
-      >
-    </li>
-    <li>
-      <a
-        href="{{ site.js }}faq/difference-between-bestspeed-and-bestcoverage.html"
-        >What are the differences between the "speed", "coverage", "balance, and
-        "single" runtime templates?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/avoid-incorrect-barcode-results.html"
-        >How to avoid incorrect barcode results?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/how-license-tracking-works.html"
-        >How does the license work - Per Scan, Per Device, Per Concurrent
-        Device?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/new-license-required-per-device-licensing.html"
-        >When is a new license spot taken when using a per-device licensing
-        model?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/delay-when-open-camera.html"
-        >How to get rid of the delay when opening the camera?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/hide-laser-message-ui.html"
-        >How can I hide the laser bar and Dynamsoft message in the default UI of
-        the BarcodeScanner?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/ios-16-incompatible.html"
-        >Why is the Javascript SDK not recognizing any barcodes on iOS 16.4?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/check-camera.html"
-        >How to check the camera permissions programmatically in Dynamsoft
-        Barcode Reader JavaScript SDK?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/ios-17-readability.html"
-        >How do I resolve the issue of the Barcode Reader not recognizing any
-        barcodes via video in iOS 16.7 or 17?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/remove-duplicates.html"
-        >How to Reduce Duplicate Scans and Optimize Scan Usage?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/webcam-support-dense.html"
-        >Why isn't my webcam reading the barcode on my driver's license or ID card?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/system-requirement.html"
-        >What are the system requirements for running the latest version of Dynamsoft Barcode Reader?</a
-      >
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/enable-supported-barcode-format.html"
-        >How to Enable Specific Barcode Formats with Your License?</a>
-    </li>
-    <li>
-      <a href="{{ site.js }}faq/camera-cannot-open-in-pwa.html"
-        >How to Resolve Camera Cannot Open in PWA Using Dynamsoft Barcode Reader on iOS?</a>
-    </li>
-  </ul>
-</li>
-<li lang="javascript"><a href="{{ site.license_activation }}index.html" class="otherLinkColour">License Initialization</a></li>
-<!-- <li class="category">OTHERS</li>
-<li>
-  <a
-    target="_blank"
-    href="{{ site.introduction }}index.html"
-    class="otherLinkColour refreshLink"
-    >Develop for Mobile or Server/Desktop</a
-  >
-</li> -->
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 @@
-<li>
-    <a href="{{ site.js }}" class="otherLinkColour">Introduction</a>
-</li>
-<li class="category">DEVELOPMENT</li>
-<li><a href="{{ site.js }}user-guide/index.html" style="cursor:pointer;color:#3c3c3c">User Guide</a>
-    <ul>
-        <li><a href="{{ site.js }}user-guide/#getting-started---hello-world" class="otherLinkColour">Getting Started</a></li>
-        <li><a href="{{ site.js }}user-guide/basic-customizations.html" class="otherLinkColour">Basic Customizations</a></li>
-        <li><a href="{{ site.js }}user-guide/advanced-customizations.html" class="otherLinkColour">Advanced Customizations</a></li>
-        <li><a href="{{ site.js }}user-guide/deployment-activation.html" class="otherLinkColour">Deployment Activation</a></li>
-        <li><a href="{{ site.js }}user-guide/features-requirements.html" class="otherLinkColour">Features Requirements</a></li>
-        <li><a href="{{ site.js }}user-guide/upgrade.html" class="otherLinkColour">Upgrade</a></li>
-    </ul>
-</li>
-<li><a href="{{ site.js_api }}" class="otherLinkColour">API Reference</a>
-    <ul>
-        <li><a href="{{ site.js_api }}BarcodeReader/" class="otherLinkColour">BarcodeReader</a>
-            <ul>
-                <li><a href="{{ site.js_api }}BarcodeReader/methods/" class="otherLinkColour">Methods</a>
-                    <ul>
-                        <li><a href="{{ site.js_api }}BarcodeReader/methods/initialize-and-destroy.html" class="otherLinkColour">Initialization and Destroy</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeReader/methods/decode.html" class="otherLinkColour">Decode Methods</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeReader/methods/results.html" class="otherLinkColour">Result Methods</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeReader/methods/parameter-and-runtime-settings.html" class="otherLinkColour">Parameter and Runtime Settings Methods</a></li>
-                    </ul>
-                </li>
-                <li><a href="{{ site.js_api }}BarcodeReader/properties.html" class="otherLinkColour">Properties</a></li>
-            </ul>
-        </li>
-        <li><a href="{{ site.js_api }}BarcodeScanner/" class="otherLinkColour">BarcodeScanner</a>
-            <ul>
-                <li><a href="{{ site.js_api }}BarcodeScanner/methods/" class="otherLinkColour">Methods</a>
-                    <ul>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/initialize-and-destroy.html" class="otherLinkColour">Initialization and Destroy</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/camera-controls.html" class="otherLinkColour">Camera Control Methods</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/capture-settings.html" class="otherLinkColour">Capture Settings</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/runtime-settings.html" class="otherLinkColour">Runtime Settings Methods</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/inherited.html" class="otherLinkColour">Inherited Methods from `BarcodeReader`</a></li>
-                    </ul>
-                </li>
-                <li><a href="{{ site.js_api }}BarcodeScanner/properties.html" class="otherLinkColour">Properties</a></li>
-                <li><a href="{{ site.js_api }}BarcodeScanner/interfaces.html" class="otherLinkColour">Interfaces</a></li>
-            </ul>
-        </li>
-        <li><a href="{{ site.js_api }}global-interfaces.html" class="otherLinkColour">Global Interfaces</a></li>
-    </ul>
-</li>
-<li class="category">USEFUL RESOURCES</li>
-<li><a href="{{ site.js_release_notes }}" class="otherLinkColour">Release Notes</a>
-    <ul>
-        <li><a href="{{ site.js_release_notes }}js-8.html" class="otherLinkColour">Version 8.x</a></li>
-        <li><a href="{{ site.js_release_notes }}js-7.html" class="otherLinkColour">Version 7.6 and below</a></li>
-    </ul>
-</li>
\ 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 @@
-<li>
-    <a href="{{ site.js }}" class="otherLinkColour">Introduction</a>
-</li>
-<li class="category">DEVELOPMENT</li>
-<li><a href="{{ site.js }}user-guide/index.html" style="cursor:pointer;color:#3c3c3c">User Guide</a>
-    <ul>
-        <li><a href="{{ site.js }}user-guide/#getting-started---hello-world" class="otherLinkColour">Getting Started</a></li>
-        <li><a href="{{ site.js }}user-guide/basic-customizations.html" class="otherLinkColour">Basic Customizations</a></li>
-        <li><a href="{{ site.js }}user-guide/advanced-customizations.html" class="otherLinkColour">Advanced Customizations</a></li>
-        <li><a href="{{ site.js }}user-guide/deployment-activation.html" class="otherLinkColour">Deployment Activation</a></li>
-        <li><a href="{{ site.js }}user-guide/features-requirements.html" class="otherLinkColour">Features Requirements</a></li>
-        <li><a href="{{ site.js }}user-guide/upgrade.html" class="otherLinkColour">Upgrade</a></li>
-    </ul>
-</li>
-<li><a href="{{ site.js_api }}" class="otherLinkColour">API Reference</a>
-    <ul>
-        <li><a href="{{ site.js_api }}BarcodeReader/" class="otherLinkColour">BarcodeReader</a>
-            <ul>
-                <li><a href="{{ site.js_api }}BarcodeReader/methods/" class="otherLinkColour">Methods</a>
-                    <ul>
-                        <li><a href="{{ site.js_api }}BarcodeReader/methods/initialize-and-destroy.html" class="otherLinkColour">Initialization and Destroy</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeReader/methods/decode.html" class="otherLinkColour">Decode Methods</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeReader/methods/results.html" class="otherLinkColour">Result Methods</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeReader/methods/parameter-and-runtime-settings.html" class="otherLinkColour">Parameter and Runtime Settings Methods</a></li>
-                    </ul>
-                </li>
-                <li><a href="{{ site.js_api }}BarcodeReader/properties.html" class="otherLinkColour">Properties</a></li>
-            </ul>
-        </li>
-        <li><a href="{{ site.js_api }}BarcodeScanner/" class="otherLinkColour">BarcodeScanner</a>
-            <ul>
-                <li><a href="{{ site.js_api }}BarcodeScanner/methods/" class="otherLinkColour">Methods</a>
-                    <ul>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/initialize-and-destroy.html" class="otherLinkColour">Initialization and Destroy</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/camera-controls.html" class="otherLinkColour">Camera Control Methods</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/capture-settings.html" class="otherLinkColour">Capture Settings</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/runtime-settings.html" class="otherLinkColour">Runtime Settings Methods</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/inherited.html" class="otherLinkColour">Inherited Methods from `BarcodeReader`</a></li>
-                    </ul>
-                </li>
-                <li><a href="{{ site.js_api }}BarcodeScanner/properties.html" class="otherLinkColour">Properties</a></li>
-                <li><a href="{{ site.js_api }}BarcodeScanner/interfaces.html" class="otherLinkColour">Interfaces</a></li>
-            </ul>
-        </li>
-        <li><a href="{{ site.js_api }}global-interfaces.html" class="otherLinkColour">Global Interfaces</a></li>
-    </ul>
-</li>
-<li class="category">USEFUL RESOURCES</li>
-<li><a href="{{ site.js_release_notes }}" class="otherLinkColour">Release Notes</a>
-    <ul>
-        <li><a href="{{ site.js_release_notes }}js-8.html" class="otherLinkColour">Version 8.x</a></li>
-        <li><a href="{{ site.js_release_notes }}js-7.html" class="otherLinkColour">Version 7.6 and below</a></li>
-    </ul>
-</li>
\ 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 @@
-<li>
-    <a href="{{ site.js }}" class="otherLinkColour">Introduction</a>
-</li>
-<li class="category">DEVELOPMENT</li>
-<li><a href="{{ site.js }}user-guide/index.html" style="cursor:pointer;color:#3c3c3c">User Guide</a>
-    <ul>
-        <li><a href="{{ site.js }}user-guide/#getting-started---hello-world" class="otherLinkColour">Getting Started</a></li>
-        <li><a href="{{ site.js }}user-guide/basic-customizations.html" class="otherLinkColour">Basic Customizations</a></li>
-        <li><a href="{{ site.js }}user-guide/advanced-customizations.html" class="otherLinkColour">Advanced Customizations</a></li>
-        <li><a href="{{ site.js }}user-guide/deployment-activation.html" class="otherLinkColour">Deployment Activation</a></li>
-        <li><a href="{{ site.js }}user-guide/features-requirements.html" class="otherLinkColour">Features Requirements</a></li>
-        <li><a href="{{ site.js }}user-guide/upgrade.html" class="otherLinkColour">Upgrade</a></li>
-    </ul>
-</li>
-<li><a href="{{ site.js_api }}" class="otherLinkColour">API Reference</a>
-    <ul>
-        <li><a href="{{ site.js_api }}BarcodeReader/" class="otherLinkColour">BarcodeReader</a>
-            <ul>
-                <li><a href="{{ site.js_api }}BarcodeReader/methods/" class="otherLinkColour">Methods</a>
-                    <ul>
-                        <li><a href="{{ site.js_api }}BarcodeReader/methods/initialize-and-destroy.html" class="otherLinkColour">Initialization and Destroy</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeReader/methods/decode.html" class="otherLinkColour">Decode Methods</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeReader/methods/results.html" class="otherLinkColour">Result Methods</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeReader/methods/parameter-and-runtime-settings.html" class="otherLinkColour">Parameter and Runtime Settings Methods</a></li>
-                    </ul>
-                </li>
-                <li><a href="{{ site.js_api }}BarcodeReader/properties.html" class="otherLinkColour">Properties</a></li>
-            </ul>
-        </li>
-        <li><a href="{{ site.js_api }}BarcodeScanner/" class="otherLinkColour">BarcodeScanner</a>
-            <ul>
-                <li><a href="{{ site.js_api }}BarcodeScanner/methods/" class="otherLinkColour">Methods</a>
-                    <ul>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/initialize-and-destroy.html" class="otherLinkColour">Initialization and Destroy</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/camera-controls.html" class="otherLinkColour">Camera Control Methods</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/capture-settings.html" class="otherLinkColour">Capture Settings</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/runtime-settings.html" class="otherLinkColour">Runtime Settings Methods</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/inherited.html" class="otherLinkColour">Inherited Methods from `BarcodeReader`</a></li>
-                    </ul>
-                </li>
-                <li><a href="{{ site.js_api }}BarcodeScanner/properties.html" class="otherLinkColour">Properties</a></li>
-                <li><a href="{{ site.js_api }}BarcodeScanner/interfaces.html" class="otherLinkColour">Interfaces</a></li>
-            </ul>
-        </li>
-        <li><a href="{{ site.js_api }}global-interfaces.html" class="otherLinkColour">Global Interfaces</a></li>
-    </ul>
-</li>
-<li class="category">USEFUL RESOURCES</li>
-<li><a href="{{ site.js_release_notes }}" class="otherLinkColour">Release Notes</a>
-    <ul>
-        <li><a href="{{ site.js_release_notes }}js-8.html" class="otherLinkColour">Version 8.x</a></li>
-        <li><a href="{{ site.js_release_notes }}js-7.html" class="otherLinkColour">Version 7.6 and below</a></li>
-    </ul>
-</li>
\ 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 @@
-<li>
-    <a href="{{ site.js }}" class="otherLinkColour">Introduction</a>
-</li>
-<li class="category">DEVELOPMENT</li>
-<li><a href="{{ site.js }}user-guide/index.html" style="cursor:pointer;color:#3c3c3c">User Guide</a>
-    <ul>
-        <li><a href="{{ site.js }}user-guide/#getting-started---hello-world" class="otherLinkColour">Getting Started</a></li>
-        <li><a href="{{ site.js }}user-guide/basic-customizations.html" class="otherLinkColour">Basic Customizations</a></li>
-        <li><a href="{{ site.js }}user-guide/advanced-customizations.html" class="otherLinkColour">Advanced Customizations</a></li>
-        <li><a href="{{ site.js }}user-guide/deployment-activation.html" class="otherLinkColour">Deployment Activation</a></li>
-        <li><a href="{{ site.js }}user-guide/features-requirements.html" class="otherLinkColour">Features Requirements</a></li>
-        <li><a href="{{ site.js }}user-guide/upgrade.html" class="otherLinkColour">Upgrade</a></li>
-    </ul>
-</li>
-<li><a href="{{ site.js_api }}" class="otherLinkColour">API Reference</a>
-    <ul>
-        <li><a href="{{ site.js_api }}BarcodeReader/" class="otherLinkColour">BarcodeReader</a>
-            <ul>
-                <li><a href="{{ site.js_api }}BarcodeReader/methods/" class="otherLinkColour">Methods</a>
-                    <ul>
-                        <li><a href="{{ site.js_api }}BarcodeReader/methods/initialize-and-destroy.html" class="otherLinkColour">Initialization and Destroy</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeReader/methods/decode.html" class="otherLinkColour">Decode Methods</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeReader/methods/results.html" class="otherLinkColour">Result Methods</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeReader/methods/parameter-and-runtime-settings.html" class="otherLinkColour">Parameter and Runtime Settings Methods</a></li>
-                    </ul>
-                </li>
-                <li><a href="{{ site.js_api }}BarcodeReader/properties.html" class="otherLinkColour">Properties</a></li>
-            </ul>
-        </li>
-        <li><a href="{{ site.js_api }}BarcodeScanner/" class="otherLinkColour">BarcodeScanner</a>
-            <ul>
-                <li><a href="{{ site.js_api }}BarcodeScanner/methods/" class="otherLinkColour">Methods</a>
-                    <ul>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/initialize-and-destroy.html" class="otherLinkColour">Initialization and Destroy</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/camera-controls.html" class="otherLinkColour">Camera Control Methods</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/capture-settings.html" class="otherLinkColour">Capture Settings</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/runtime-settings.html" class="otherLinkColour">Runtime Settings Methods</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/inherited.html" class="otherLinkColour">Inherited Methods from `BarcodeReader`</a></li>
-                    </ul>
-                </li>
-                <li><a href="{{ site.js_api }}BarcodeScanner/properties.html" class="otherLinkColour">Properties</a></li>
-                <li><a href="{{ site.js_api }}BarcodeScanner/interfaces.html" class="otherLinkColour">Interfaces</a></li>
-            </ul>
-        </li>
-        <li><a href="{{ site.js_api }}global-interfaces.html" class="otherLinkColour">Global Interfaces</a></li>
-    </ul>
-</li>
-<li class="category">USEFUL RESOURCES</li>
-<li><a href="{{ site.js_release_notes }}" class="otherLinkColour">Release Notes</a>
-    <ul>
-        <li><a href="{{ site.js_release_notes }}js-8.html" class="otherLinkColour">Version 8.x</a></li>
-        <li><a href="{{ site.js_release_notes }}js-7.html" class="otherLinkColour">Version 7.6 and below</a></li>
-    </ul>
-</li>
\ 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 @@
-<li>
-    <a href="{{ site.js }}" class="otherLinkColour">Introduction</a>
-</li>
-<li class="category">DEVELOPMENT</li>
-<li><a href="{{ site.js }}user-guide/index.html" style="cursor:pointer;color:#3c3c3c">User Guide</a>
-    <ul>
-        <li><a href="{{ site.js }}user-guide/#getting-started---hello-world" class="otherLinkColour">Getting Started</a></li>
-        <li><a href="{{ site.js }}user-guide/basic-customizations.html" class="otherLinkColour">Basic Customizations</a></li>
-        <li><a href="{{ site.js }}user-guide/advanced-customizations.html" class="otherLinkColour">Advanced Customizations</a></li>
-        <li><a href="{{ site.js }}user-guide/deployment-activation.html" class="otherLinkColour">Deployment Activation</a></li>
-        <li><a href="{{ site.js }}user-guide/features-requirements.html" class="otherLinkColour">Features Requirements</a></li>
-        <li><a href="{{ site.js }}user-guide/upgrade.html" class="otherLinkColour">Upgrade</a></li>
-    </ul>
-</li>
-<li><a href="{{ site.js_api }}" class="otherLinkColour">API Reference</a>
-    <ul>
-        <li><a href="{{ site.js_api }}BarcodeReader/" class="otherLinkColour">BarcodeReader</a>
-            <ul>
-                <li><a href="{{ site.js_api }}BarcodeReader/methods/" class="otherLinkColour">Methods</a>
-                    <ul>
-                        <li><a href="{{ site.js_api }}BarcodeReader/methods/initialize-and-destroy.html" class="otherLinkColour">Initialization and Destroy</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeReader/methods/decode.html" class="otherLinkColour">Decode Methods</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeReader/methods/results.html" class="otherLinkColour">Result Methods</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeReader/methods/parameter-and-runtime-settings.html" class="otherLinkColour">Parameter and Runtime Settings Methods</a></li>
-                    </ul>
-                </li>
-                <li><a href="{{ site.js_api }}BarcodeReader/properties.html" class="otherLinkColour">Properties</a></li>
-            </ul>
-        </li>
-        <li><a href="{{ site.js_api }}BarcodeScanner/" class="otherLinkColour">BarcodeScanner</a>
-            <ul>
-                <li><a href="{{ site.js_api }}BarcodeScanner/methods/" class="otherLinkColour">Methods</a>
-                    <ul>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/initialize-and-destroy.html" class="otherLinkColour">Initialization and Destroy</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/camera-controls.html" class="otherLinkColour">Camera Control Methods</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/capture-settings.html" class="otherLinkColour">Capture Settings</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/runtime-settings.html" class="otherLinkColour">Runtime Settings Methods</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/inherited.html" class="otherLinkColour">Inherited Methods from `BarcodeReader`</a></li>
-                    </ul>
-                </li>
-                <li><a href="{{ site.js_api }}BarcodeScanner/properties.html" class="otherLinkColour">Properties</a></li>
-                <li><a href="{{ site.js_api }}BarcodeScanner/interfaces.html" class="otherLinkColour">Interfaces</a></li>
-            </ul>
-        </li>
-        <li><a href="{{ site.js_api }}global-interfaces.html" class="otherLinkColour">Global Interfaces</a></li>
-    </ul>
-</li>
-<li class="category">USEFUL RESOURCES</li>
-<li><a href="{{ site.js_release_notes }}" class="otherLinkColour">Release Notes</a>
-    <ul>
-        <li><a href="{{ site.js_release_notes }}js-8.html" class="otherLinkColour">Version 8.x</a></li>
-        <li><a href="{{ site.js_release_notes }}js-7.html" class="otherLinkColour">Version 7.6 and below</a></li>
-    </ul>
-</li>
\ 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 @@
-<li>
-    <a href="{{ site.js }}" class="otherLinkColour">Introduction</a>
-</li>
-<li class="category">DEVELOPMENT</li>
-<li><a href="{{ site.js }}user-guide/index.html" style="cursor:pointer;color:#3c3c3c">User Guide</a>
-    <ul>
-        <li><a href="{{ site.js }}user-guide/#getting-started---hello-world" class="otherLinkColour">Getting Started</a></li>
-        <li><a href="{{ site.js }}user-guide/basic-customizations.html" class="otherLinkColour">Basic Customizations</a></li>
-        <li><a href="{{ site.js }}user-guide/advanced-customizations.html" class="otherLinkColour">Advanced Customizations</a></li>
-        <li><a href="{{ site.js }}user-guide/deployment-activation.html" class="otherLinkColour">Deployment Activation</a></li>
-        <li><a href="{{ site.js }}user-guide/features-requirements.html" class="otherLinkColour">Features Requirements</a></li>
-        <li><a href="{{ site.js }}user-guide/upgrade.html" class="otherLinkColour">Upgrade</a></li>
-    </ul>
-</li>
-<li><a href="{{ site.js_api }}" class="otherLinkColour">API Reference</a>
-    <ul>
-        <li><a href="{{ site.js_api }}BarcodeReader/" class="otherLinkColour">BarcodeReader</a>
-            <ul>
-                <li><a href="{{ site.js_api }}BarcodeReader/methods/" class="otherLinkColour">Methods</a>
-                    <ul>
-                        <li><a href="{{ site.js_api }}BarcodeReader/methods/initialize-and-destroy.html" class="otherLinkColour">Initialization and Destroy</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeReader/methods/decode.html" class="otherLinkColour">Decode Methods</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeReader/methods/results.html" class="otherLinkColour">Result Methods</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeReader/methods/parameter-and-runtime-settings.html" class="otherLinkColour">Parameter and Runtime Settings Methods</a></li>
-                    </ul>
-                </li>
-                <li><a href="{{ site.js_api }}BarcodeReader/properties.html" class="otherLinkColour">Properties</a></li>
-            </ul>
-        </li>
-        <li><a href="{{ site.js_api }}BarcodeScanner/" class="otherLinkColour">BarcodeScanner</a>
-            <ul>
-                <li><a href="{{ site.js_api }}BarcodeScanner/methods/" class="otherLinkColour">Methods</a>
-                    <ul>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/initialize-and-destroy.html" class="otherLinkColour">Initialization and Destroy</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/camera-controls.html" class="otherLinkColour">Camera Control Methods</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/capture-settings.html" class="otherLinkColour">Capture Settings</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/runtime-settings.html" class="otherLinkColour">Runtime Settings Methods</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/inherited.html" class="otherLinkColour">Inherited Methods from `BarcodeReader`</a></li>
-                    </ul>
-                </li>
-                <li><a href="{{ site.js_api }}BarcodeScanner/properties.html" class="otherLinkColour">Properties</a></li>
-                <li><a href="{{ site.js_api }}BarcodeScanner/interfaces.html" class="otherLinkColour">Interfaces</a></li>
-            </ul>
-        </li>
-        <li><a href="{{ site.js_api }}global-interfaces.html" class="otherLinkColour">Global Interfaces</a></li>
-    </ul>
-</li>
-<li class="category">USEFUL RESOURCES</li>
-<li><a href="{{ site.js_release_notes }}" class="otherLinkColour">Release Notes</a>
-    <ul>
-        <li><a href="{{ site.js_release_notes }}js-8.html" class="otherLinkColour">Version 8.x</a></li>
-        <li><a href="{{ site.js_release_notes }}js-7.html" class="otherLinkColour">Version 7.6 and below</a></li>
-    </ul>
-</li>
\ 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 @@
-<li>
-    <a href="{{ site.js }}" class="otherLinkColour">Introduction</a>
-</li>
-<li class="category">DEVELOPMENT</li>
-<li><a href="{{ site.js }}user-guide/index.html" style="cursor:pointer;color:#3c3c3c">User Guide</a>
-    <ul>
-        <li><a href="{{ site.js }}user-guide/#getting-started---hello-world" class="otherLinkColour">Getting Started</a></li>
-        <li><a href="{{ site.js }}user-guide/basic-customizations.html" class="otherLinkColour">Basic Customizations</a></li>
-        <li><a href="{{ site.js }}user-guide/advanced-customizations.html" class="otherLinkColour">Advanced Customizations</a></li>
-        <li><a href="{{ site.js }}user-guide/deployment-activation.html" class="otherLinkColour">Deployment Activation</a></li>
-        <li><a href="{{ site.js }}user-guide/features-requirements.html" class="otherLinkColour">Features Requirements</a></li>
-        <li><a href="{{ site.js }}user-guide/upgrade.html" class="otherLinkColour">Upgrade</a></li>
-    </ul>
-</li>
-<li><a href="{{ site.js_api }}" class="otherLinkColour">API Reference</a>
-    <ul>
-        <li><a href="{{ site.js_api }}BarcodeReader/" class="otherLinkColour">BarcodeReader</a>
-            <ul>
-                <li><a href="{{ site.js_api }}BarcodeReader/methods/" class="otherLinkColour">Methods</a>
-                    <ul>
-                        <li><a href="{{ site.js_api }}BarcodeReader/methods/initialize-and-destroy.html" class="otherLinkColour">Initialization and Destroy</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeReader/methods/decode.html" class="otherLinkColour">Decode Methods</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeReader/methods/results.html" class="otherLinkColour">Result Methods</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeReader/methods/parameter-and-runtime-settings.html" class="otherLinkColour">Parameter and Runtime Settings Methods</a></li>
-                    </ul>
-                </li>
-                <li><a href="{{ site.js_api }}BarcodeReader/properties.html" class="otherLinkColour">Properties</a></li>
-            </ul>
-        </li>
-        <li><a href="{{ site.js_api }}BarcodeScanner/" class="otherLinkColour">BarcodeScanner</a>
-            <ul>
-                <li><a href="{{ site.js_api }}BarcodeScanner/methods/" class="otherLinkColour">Methods</a>
-                    <ul>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/initialize-and-destroy.html" class="otherLinkColour">Initialization and Destroy</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/camera-controls.html" class="otherLinkColour">Camera Control Methods</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/capture-settings.html" class="otherLinkColour">Capture Settings</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/runtime-settings.html" class="otherLinkColour">Runtime Settings Methods</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/inherited.html" class="otherLinkColour">Inherited Methods from `BarcodeReader`</a></li>
-                    </ul>
-                </li>
-                <li><a href="{{ site.js_api }}BarcodeScanner/properties.html" class="otherLinkColour">Properties</a></li>
-                <li><a href="{{ site.js_api }}BarcodeScanner/interfaces.html" class="otherLinkColour">Interfaces</a></li>
-            </ul>
-        </li>
-        <li><a href="{{ site.js_api }}global-interfaces.html" class="otherLinkColour">Global Interfaces</a></li>
-    </ul>
-</li>
-<li class="category">USEFUL RESOURCES</li>
-<li><a href="{{ site.js_release_notes }}" class="otherLinkColour">Release Notes</a>
-    <ul>
-        <li><a href="{{ site.js_release_notes }}js-8.html" class="otherLinkColour">Version 8.x</a></li>
-        <li><a href="{{ site.js_release_notes }}js-7.html" class="otherLinkColour">Version 7.6 and below</a></li>
-    </ul>
-</li>
\ 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 @@
-<li>
-    <a href="{{ site.js }}" class="otherLinkColour">Introduction</a>
-</li>
-<li class="category">DEVELOPMENT</li>
-<li><a href="{{ site.js }}user-guide/index.html" style="cursor:pointer;color:#3c3c3c">User Guide</a>
-    <ul>
-        <li><a href="{{ site.js }}user-guide/#getting-started---hello-world" class="otherLinkColour">Getting Started</a></li>
-        <li><a href="{{ site.js }}user-guide/basic-customizations.html" class="otherLinkColour">Basic Customizations</a></li>
-        <li><a href="{{ site.js }}user-guide/advanced-customizations.html" class="otherLinkColour">Advanced Customizations</a></li>
-        <li><a href="{{ site.js }}user-guide/deployment-activation.html" class="otherLinkColour">Deployment Activation</a></li>
-        <li><a href="{{ site.js }}user-guide/features-requirements.html" class="otherLinkColour">Features Requirements</a></li>
-        <li><a href="{{ site.js }}user-guide/upgrade.html" class="otherLinkColour">Upgrade</a></li>
-    </ul>
-</li>
-<li><a href="{{ site.js_api }}" class="otherLinkColour">API Reference</a>
-    <ul>
-        <li><a href="{{ site.js_api }}BarcodeReader/" class="otherLinkColour">BarcodeReader</a>
-            <ul>
-                <li><a href="{{ site.js_api }}BarcodeReader/methods/" class="otherLinkColour">Methods</a>
-                    <ul>
-                        <li><a href="{{ site.js_api }}BarcodeReader/methods/initialize-and-destroy.html" class="otherLinkColour">Initialization and Destroy</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeReader/methods/decode.html" class="otherLinkColour">Decode Methods</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeReader/methods/results.html" class="otherLinkColour">Result Methods</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeReader/methods/parameter-and-runtime-settings.html" class="otherLinkColour">Parameter and Runtime Settings Methods</a></li>
-                    </ul>
-                </li>
-                <li><a href="{{ site.js_api }}BarcodeReader/properties.html" class="otherLinkColour">Properties</a></li>
-            </ul>
-        </li>
-        <li><a href="{{ site.js_api }}BarcodeScanner/" class="otherLinkColour">BarcodeScanner</a>
-            <ul>
-                <li><a href="{{ site.js_api }}BarcodeScanner/methods/" class="otherLinkColour">Methods</a>
-                    <ul>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/initialize-and-destroy.html" class="otherLinkColour">Initialization and Destroy</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/camera-controls.html" class="otherLinkColour">Camera Control Methods</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/capture-settings.html" class="otherLinkColour">Capture Settings</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/runtime-settings.html" class="otherLinkColour">Runtime Settings Methods</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/inherited.html" class="otherLinkColour">Inherited Methods from `BarcodeReader`</a></li>
-                    </ul>
-                </li>
-                <li><a href="{{ site.js_api }}BarcodeScanner/properties.html" class="otherLinkColour">Properties</a></li>
-                <li><a href="{{ site.js_api }}BarcodeScanner/interfaces.html" class="otherLinkColour">Interfaces</a></li>
-            </ul>
-        </li>
-        <li><a href="{{ site.js_api }}global-interfaces.html" class="otherLinkColour">Global Interfaces</a></li>
-    </ul>
-</li>
-<li class="category">USEFUL RESOURCES</li>
-<li><a href="{{ site.js_release_notes }}" class="otherLinkColour">Release Notes</a>
-    <ul>
-        <li><a href="{{ site.js_release_notes }}js-8.html" class="otherLinkColour">Version 8.x</a></li>
-        <li><a href="{{ site.js_release_notes }}js-7.html" class="otherLinkColour">Version 7.6 and below</a></li>
-    </ul>
-</li>
\ 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 @@
-<li>
-    <a href="{{ site.js }}" class="otherLinkColour">Introduction</a>
-</li>
-<li class="category">DEVELOPMENT</li>
-<li><a href="{{ site.js }}user-guide/index.html" style="cursor:pointer;color:#3c3c3c">User Guide</a>
-    <ul>
-        <li><a href="{{ site.js }}user-guide/#getting-started---hello-world" class="otherLinkColour">Getting Started</a></li>
-        <li><a href="{{ site.js }}user-guide/basic-customizations.html" class="otherLinkColour">Basic Customizations</a></li>
-        <li><a href="{{ site.js }}user-guide/advanced-customizations.html" class="otherLinkColour">Advanced Customizations</a></li>
-        <li><a href="{{ site.js }}user-guide/deployment-activation.html" class="otherLinkColour">Deployment Activation</a></li>
-        <li><a href="{{ site.js }}user-guide/features-requirements.html" class="otherLinkColour">Features Requirements</a></li>
-        <li><a href="{{ site.js }}user-guide/upgrade.html" class="otherLinkColour">Upgrade</a></li>
-    </ul>
-</li>
-<li><a href="{{ site.js_api }}" class="otherLinkColour">API Reference</a>
-    <ul>
-        <li><a href="{{ site.js_api }}BarcodeReader/" class="otherLinkColour">BarcodeReader</a>
-            <ul>
-                <li><a href="{{ site.js_api }}BarcodeReader/methods/" class="otherLinkColour">Methods</a>
-                    <ul>
-                        <li><a href="{{ site.js_api }}BarcodeReader/methods/initialize-and-destroy.html" class="otherLinkColour">Initialization and Destroy</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeReader/methods/decode.html" class="otherLinkColour">Decode Methods</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeReader/methods/results.html" class="otherLinkColour">Result Methods</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeReader/methods/parameter-and-runtime-settings.html" class="otherLinkColour">Parameter and Runtime Settings Methods</a></li>
-                    </ul>
-                </li>
-                <li><a href="{{ site.js_api }}BarcodeReader/properties.html" class="otherLinkColour">Properties</a></li>
-            </ul>
-        </li>
-        <li><a href="{{ site.js_api }}BarcodeScanner/" class="otherLinkColour">BarcodeScanner</a>
-            <ul>
-                <li><a href="{{ site.js_api }}BarcodeScanner/methods/" class="otherLinkColour">Methods</a>
-                    <ul>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/initialize-and-destroy.html" class="otherLinkColour">Initialization and Destroy</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/camera-controls.html" class="otherLinkColour">Camera Control Methods</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/capture-settings.html" class="otherLinkColour">Capture Settings</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/runtime-settings.html" class="otherLinkColour">Runtime Settings Methods</a></li>
-                        <li><a href="{{ site.js_api }}BarcodeScanner/methods/inherited.html" class="otherLinkColour">Inherited Methods from `BarcodeReader`</a></li>
-                    </ul>
-                </li>
-                <li><a href="{{ site.js_api }}BarcodeScanner/properties.html" class="otherLinkColour">Properties</a></li>
-                <li><a href="{{ site.js_api }}BarcodeScanner/interfaces.html" class="otherLinkColour">Interfaces</a></li>
-            </ul>
-        </li>
-        <li><a href="{{ site.js_api }}global-interfaces.html" class="otherLinkColour">Global Interfaces</a></li>
-    </ul>
-</li>
-<li class="category">USEFUL RESOURCES</li>
-<li><a href="{{ site.js_release_notes }}" class="otherLinkColour">Release Notes</a>
-    <ul>
-        <li><a href="{{ site.js_release_notes }}js-8.html" class="otherLinkColour">Version 8.x</a></li>
-        <li><a href="{{ site.js_release_notes }}js-7.html" class="otherLinkColour">Version 7.6 and below</a></li>
-    </ul>
-</li>
\ 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 @@
-<li>
-    <a href="{{ site.js }}" class="otherLinkColour">Introduction</a>
-</li>
-<li class="category">DEVELOPMENT</li>
-<li><a href="{{ site.js }}user-guide/index.html" style="cursor:pointer;color:#3c3c3c">User Guide</a>
-    <ul>
-        <li><a href="{{ site.js }}user-guide/#getting-started---hello-world" class="otherLinkColour">Getting Started</a></li>
-        <li><a href="{{ site.js }}user-guide/advanced-usage.html" class="otherLinkColour">Advanced Usage</a></li>
-        <li><a href="{{ site.js }}user-guide/upgrade.html" class="otherLinkColour">Upgrade</a></li>
-    </ul>
-</li>
-<li><a href="{{ site.js_api }}" class="otherLinkColour">API Reference</a>
-    <ul>
-        <li><a href="{{ site.js_api }}BarcodeReader.html" class="otherLinkColour">BarcodeReader for Images</a></li>
-        <li><a href="{{ site.js_api }}BarcodeScanner.html" class="otherLinkColour">BarcodeScanner for Video</a></li>
-        <li><a href="{{ site.js_api }}LicenseControl.html" class="otherLinkColour">License Control</a></li>
-        <li><a href="{{ site.js_api }}InitializationControl.html" class="otherLinkColour">Initialization Control</a></li>
-        <li><a href="{{ site.js_api }}InterfacesEnums.html" class="otherLinkColour">Interfaces and Enums</a>
-            <ul>
-                <li><a href="{{ site.js_api }}interface/LocalizationResult.html" class="otherLinkColour">LocalizationResult</a></li>
-                <li><a href="{{ site.js_api }}interface/Region.html" class="otherLinkColour">Region</a></li>
-                <li><a href="{{ site.js_api }}interface/RuntimeSettings.html" class="otherLinkColour">RuntimeSettings</a></li>
-                <li><a href="{{ site.js_api }}interface/ScannerPlayCallbackInfo.html" class="otherLinkColour">ScannerPlayCallbackInfo</a></li>
-                <li><a href="{{ site.js_api }}interface/ScanSettings.html" class="otherLinkColour">ScanSettings</a></li>
-                <li><a href="{{ site.js_api }}interface/TextResult.html" class="otherLinkColour">TextResult</a></li>
-                <li><a href="{{ site.js_api }}interface/VideoDeviceInfo.html" class="otherLinkColour">VideoDeviceInfo</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeColourMode.html" class="otherLinkColour">EnumBarcodeColourMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeComplementMode.html" class="otherLinkColour">EnumBarcodeComplementMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeFormat_2.html" class="otherLinkColour">EnumBarcodeFormat_2</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeFormat.html" class="otherLinkColour">EnumBarcodeFormat</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBinarizationMode.html" class="otherLinkColour">EnumBinarizationMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumClarityCalculationMethod.html" class="otherLinkColour">EnumClarityCalculationMethod</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumClarityFilterMode.html" class="otherLinkColour">EnumClarityFilterMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumColourClusteringMode.html" class="otherLinkColour">EnumColourClusteringMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumColourConversionMode.html" class="otherLinkColour">EnumColourConversionMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumConflictMode.html" class="otherLinkColour">EnumConflictMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumDeblurMode.html" class="otherLinkColour">EnumDeblurMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumDeformationResistingMode.html" class="otherLinkColour">EnumDeformationResistingMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumDPMCodeReadingMode.html" class="otherLinkColour">EnumDPMCodeReadingMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumErrorCode.html" class="otherLinkColour">EnumErrorCode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumGrayscaleTransformationMode.html" class="otherLinkColour">EnumGrayscaleTransformationMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumImagePixelFormat.html" class="otherLinkColour">EnumImagePixelFormat</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumImagePreprocessingMode.html" class="otherLinkColour">EnumImagePreprocessingMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumIMResultDataType.html" class="otherLinkColour">EnumIMResultDataType</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumIntermediateResultSavingMode.html" class="otherLinkColour">EnumIntermediateResultSavingMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumIntermediateResultType.html" class="otherLinkColour">EnumIntermediateResultType</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumLocalizationMode.html" class="otherLinkColour">EnumLocalizationMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumPDFReadingMode.html" class="otherLinkColour">EnumPDFReadingMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumQRCodeErrorCorrectionLevel.html" class="otherLinkColour">EnumQRCodeErrorCorrectionLevel</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumRegionPredetectionMode.html" class="otherLinkColour">EnumRegionPredetectionMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumResultCoordinateType.html" class="otherLinkColour">EnumResultCoordinateType</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumResultType.html" class="otherLinkColour">EnumResultType</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumScaleUpMode.html" class="otherLinkColour">EnumScaleUpMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumTerminatePhase.html" class="otherLinkColour">EnumTerminatePhase</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumTextFilterMode.html" class="otherLinkColour">EnumTextFilterMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumTextResultOrderMode.html" class="otherLinkColour">EnumTextResultOrderMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumTextureDetectionMode.html" class="EnumTextureDetectionMode">EnumTextureDetectionMode</a></li>
-            </ul>
-        </li>
-    </ul>
-</li>
-<li class="category">USEFUL RESOURCES</li>
-<li><a href="{{ site.js_release_notes }}" class="otherLinkColour">Release Notes</a>
-    <ul>
-        <li><a href="{{ site.js_release_notes }}js-8.html" class="otherLinkColour">Version 8.x</a></li>
-        <li><a href="{{ site.js_release_notes }}js-7.html" class="otherLinkColour">Version 7.6 and below</a></li>
-    </ul>
-</li>
\ 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 @@
-<li>
-    <a href="{{ site.js }}" class="otherLinkColour">Introduction</a>
-</li>
-<li class="category">DEVELOPMENT</li>
-<li><a href="{{ site.js }}user-guide/index.html" style="cursor:pointer;color:#3c3c3c">User Guide</a>
-    <ul>
-        <li><a href="{{ site.js }}user-guide/#getting-started---hello-world" class="otherLinkColour">Getting
-                                                Started</a></li>
-        <li><a href="{{ site.js }}user-guide/advanced-usage.html" class="otherLinkColour">Advanced Usage</a>
-        </li>
-    </ul>
-</li>
-<li><a href="{{ site.js }}samples-demos/index.html" class="otherLinkColour">Samples and Demos</a>
-    <ul>
-        <li><a style="cursor:pointer;color:#3c3c3c">Hello World</a>
-            <ul>
-                <li><a href="{{ site.js }}samples-demos/helloworld-minCode.html" class="otherLinkColour">Minimal
-                                                                Code</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-readFile.html" class="otherLinkColour">Read
-                                                                an Image</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-angular.html" class="otherLinkColour">Hello
-                                                                World in Angular</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-reactjs.html" class="otherLinkColour">Hello
-                                                                World in React</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-vuejs.html" class="otherLinkColour">Hello
-                                                                World in Vue</a></li>
-            </ul>
-        </li>
-        <li><a href="{{ site.js }}samples-demos/ui-customization.html" style="cursor:pointer;color:#3c3c3c">UI
-                                                Customization</a>
-        </li>
-        <li><a href="{{ site.js }}samples-demos/parameter-settings.html" style="cursor:pointer;color:#3c3c3c">Parameter Settings</a>
-        </li>
-        <li><a href="{{ site.js }}samples-demos/use-cases.html" style="cursor:pointer;color:#3c3c3c">Use Cases</a>
-        </li>
-        <li><a target="_blank" href="https://demo.dynamsoft.com/barcode-reader-js/" style="cursor:pointer;color:#3c3c3c">Main Demo</a>
-        </li>
-    </ul>
-</li>
-<li><a href="{{ site.js_api }}" class="otherLinkColour">API Reference</a>
-    <ul>
-        <li><a href="{{ site.js_api }}BarcodeReader.html" class="otherLinkColour">BarcodeReader
-                                                for Images</a>
-        </li>
-        <li><a href="{{ site.js_api }}BarcodeScanner.html" class="otherLinkColour">BarcodeScanner for Video</a>
-        </li>
-        <li><a href="{{ site.js_api }}LicenseControl.html" class="otherLinkColour">License
-                                                Control</a></li>
-        <li><a href="{{ site.js_api }}InitializationControl.html" class="otherLinkColour">Initialization
-                                                Control</a></li>
-        <li><a href="{{ site.js_api }}InterfacesEnums.html" class="otherLinkColour">Interfaces
-                                                and Enums</a>
-            <ul>
-                <li><a href="{{ site.js_api }}interface/LocalizationResult.html" class="otherLinkColour">LocalizationResult</a></li>
-                <li><a href="{{ site.js_api }}interface/Region.html" class="otherLinkColour">Region</a></li>
-                <li><a href="{{ site.js_api }}interface/RuntimeSettings.html" class="otherLinkColour">RuntimeSettings</a></li>
-                <li><a href="{{ site.js_api }}interface/ScannerPlayCallbackInfo.html" class="otherLinkColour">ScannerPlayCallbackInfo</a></li>
-                <li><a href="{{ site.js_api }}interface/ScanSettings.html" class="otherLinkColour">ScanSettings</a></li>
-                <li><a href="{{ site.js_api }}interface/TextResult.html" class="otherLinkColour">TextResult</a>
-                </li>
-                <li><a href="{{ site.js_api }}interface/VideoDeviceInfo.html" class="otherLinkColour">VideoDeviceInfo</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeColourMode.html" class="otherLinkColour">EnumBarcodeColourMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeComplementMode.html" class="otherLinkColour">EnumBarcodeComplementMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeFormat_2.html" class="otherLinkColour">EnumBarcodeFormat_2</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeFormat.html" class="otherLinkColour">EnumBarcodeFormat</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBinarizationMode.html" class="otherLinkColour">EnumBinarizationMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumClarityCalculationMethod.html" class="otherLinkColour">EnumClarityCalculationMethod</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumClarityFilterMode.html" class="otherLinkColour">EnumClarityFilterMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumColourClusteringMode.html" class="otherLinkColour">EnumColourClusteringMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumColourConversionMode.html" class="otherLinkColour">EnumColourConversionMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumConflictMode.html" class="otherLinkColour">EnumConflictMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumDeblurMode.html" class="otherLinkColour">EnumDeblurMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumDeformationResistingMode.html" class="otherLinkColour">EnumDeformationResistingMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumDPMCodeReadingMode.html" class="otherLinkColour">EnumDPMCodeReadingMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumErrorCode.html" class="otherLinkColour">EnumErrorCode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumGrayscaleTransformationMode.html" class="otherLinkColour">EnumGrayscaleTransformationMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumImagePixelFormat.html" class="otherLinkColour">EnumImagePixelFormat</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumImagePreprocessingMode.html" class="otherLinkColour">EnumImagePreprocessingMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumIMResultDataType.html" class="otherLinkColour">EnumIMResultDataType</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumIntermediateResultSavingMode.html" class="otherLinkColour">EnumIntermediateResultSavingMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumIntermediateResultType.html" class="otherLinkColour">EnumIntermediateResultType</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumLocalizationMode.html" class="otherLinkColour">EnumLocalizationMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumPDFReadingMode.html" class="otherLinkColour">EnumPDFReadingMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumQRCodeErrorCorrectionLevel.html" class="otherLinkColour">EnumQRCodeErrorCorrectionLevel</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumRegionPredetectionMode.html" class="otherLinkColour">EnumRegionPredetectionMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumResultCoordinateType.html" class="otherLinkColour">EnumResultCoordinateType</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumResultType.html" class="otherLinkColour">EnumResultType</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumScaleUpMode.html" class="otherLinkColour">EnumScaleUpMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumTerminatePhase.html" class="otherLinkColour">EnumTerminatePhase</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumTextFilterMode.html" class="otherLinkColour">EnumTextFilterMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumTextResultOrderMode.html" class="otherLinkColour">EnumTextResultOrderMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumTextureDetectionMode.html" class="EnumTextureDetectionMode">EnumTextureDetectionMode</a>
-                </li>
-            </ul>
-        </li>
-    </ul>
-</li>
-<li class="category">USEFUL RESOURCES</li>
-<li><a href="{{ site.js_release_notes }}" class="otherLinkColour">Release Notes</a>
-    <ul>
-        <li><a href="{{ site.js_release_notes }}js-8.html" class="otherLinkColour">Version
-                                                8.x</a></li>
-        <li><a href="{{ site.js_release_notes }}js-7.html" class="otherLinkColour">Version 7.6
-                                                and below</a>
-        </li>
-    </ul>
-</li>
-<li><a href="{{ site.js }}upgrade-guide/" class="otherLinkColour">Upgrade Instructions</a></li>
\ 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 @@
-<li>
-    <a href="{{ site.js }}" class="otherLinkColour">Introduction</a>
-</li>
-<li class="category">DEVELOPMENT</li>
-<li><a href="{{ site.js }}user-guide/index.html" style="cursor:pointer;color:#3c3c3c">User Guide</a>
-    <ul>
-        <li><a href="{{ site.js }}user-guide/#getting-started---hello-world" class="otherLinkColour">Getting
-                                                Started</a></li>
-        <li><a href="{{ site.js }}user-guide/advanced-usage.html" class="otherLinkColour">Advanced Usage</a>
-        </li>
-    </ul>
-</li>
-<li><a href="{{ site.js }}samples-demos/index.html" class="otherLinkColour">Samples and Demos</a>
-    <ul>
-        <li><a style="cursor:pointer;color:#3c3c3c">Hello World</a>
-            <ul>
-                <li><a href="{{ site.js }}samples-demos/helloworld-minCode.html" class="otherLinkColour">Minimal
-                                                                Code</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-readFile.html" class="otherLinkColour">Read
-                                                                an Image</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-angular.html" class="otherLinkColour">Hello
-                                                                World in Angular</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-reactjs.html" class="otherLinkColour">Hello
-                                                                World in React</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-vuejs.html" class="otherLinkColour">Hello
-                                                                World in Vue</a></li>
-            </ul>
-        </li>
-        <li><a href="{{ site.js }}samples-demos/ui-customization.html" style="cursor:pointer;color:#3c3c3c">UI
-                                                Customization</a>
-        </li>
-        <li><a href="{{ site.js }}samples-demos/parameter-settings.html" style="cursor:pointer;color:#3c3c3c">Parameter Settings</a>
-        </li>
-        <li><a href="{{ site.js }}samples-demos/use-cases.html" style="cursor:pointer;color:#3c3c3c">Use Cases</a>
-        </li>
-        <li><a target="_blank" href="https://demo.dynamsoft.com/barcode-reader-js/" style="cursor:pointer;color:#3c3c3c">Main Demo</a>
-        </li>
-    </ul>
-</li>
-<li><a href="{{ site.js_api }}" class="otherLinkColour">API Reference</a>
-    <ul>
-        <li><a href="{{ site.js_api }}BarcodeReader.html" class="otherLinkColour">BarcodeReader
-                                                for Images</a>
-        </li>
-        <li><a href="{{ site.js_api }}BarcodeScanner.html" class="otherLinkColour">BarcodeScanner for Video</a>
-        </li>
-        <li><a href="{{ site.js_api }}LicenseControl.html" class="otherLinkColour">License
-                                                Control</a></li>
-        <li><a href="{{ site.js_api }}InitializationControl.html" class="otherLinkColour">Initialization
-                                                Control</a></li>
-        <li><a href="{{ site.js_api }}InterfacesEnums.html" class="otherLinkColour">Interfaces
-                                                and Enums</a>
-            <ul>
-                <li><a href="{{ site.js_api }}interface/LocalizationResult.html" class="otherLinkColour">LocalizationResult</a></li>
-                <li><a href="{{ site.js_api }}interface/Region.html" class="otherLinkColour">Region</a></li>
-                <li><a href="{{ site.js_api }}interface/RuntimeSettings.html" class="otherLinkColour">RuntimeSettings</a></li>
-                <li><a href="{{ site.js_api }}interface/ScannerPlayCallbackInfo.html" class="otherLinkColour">ScannerPlayCallbackInfo</a></li>
-                <li><a href="{{ site.js_api }}interface/ScanSettings.html" class="otherLinkColour">ScanSettings</a></li>
-                <li><a href="{{ site.js_api }}interface/TextResult.html" class="otherLinkColour">TextResult</a>
-                </li>
-                <li><a href="{{ site.js_api }}interface/VideoDeviceInfo.html" class="otherLinkColour">VideoDeviceInfo</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeColourMode.html" class="otherLinkColour">EnumBarcodeColourMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeComplementMode.html" class="otherLinkColour">EnumBarcodeComplementMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeFormat_2.html" class="otherLinkColour">EnumBarcodeFormat_2</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeFormat.html" class="otherLinkColour">EnumBarcodeFormat</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBinarizationMode.html" class="otherLinkColour">EnumBinarizationMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumClarityCalculationMethod.html" class="otherLinkColour">EnumClarityCalculationMethod</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumClarityFilterMode.html" class="otherLinkColour">EnumClarityFilterMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumColourClusteringMode.html" class="otherLinkColour">EnumColourClusteringMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumColourConversionMode.html" class="otherLinkColour">EnumColourConversionMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumConflictMode.html" class="otherLinkColour">EnumConflictMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumDeblurMode.html" class="otherLinkColour">EnumDeblurMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumDeformationResistingMode.html" class="otherLinkColour">EnumDeformationResistingMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumDPMCodeReadingMode.html" class="otherLinkColour">EnumDPMCodeReadingMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumErrorCode.html" class="otherLinkColour">EnumErrorCode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumGrayscaleTransformationMode.html" class="otherLinkColour">EnumGrayscaleTransformationMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumImagePixelFormat.html" class="otherLinkColour">EnumImagePixelFormat</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumImagePreprocessingMode.html" class="otherLinkColour">EnumImagePreprocessingMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumIMResultDataType.html" class="otherLinkColour">EnumIMResultDataType</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumIntermediateResultSavingMode.html" class="otherLinkColour">EnumIntermediateResultSavingMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumIntermediateResultType.html" class="otherLinkColour">EnumIntermediateResultType</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumLocalizationMode.html" class="otherLinkColour">EnumLocalizationMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumPDFReadingMode.html" class="otherLinkColour">EnumPDFReadingMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumQRCodeErrorCorrectionLevel.html" class="otherLinkColour">EnumQRCodeErrorCorrectionLevel</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumRegionPredetectionMode.html" class="otherLinkColour">EnumRegionPredetectionMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumResultCoordinateType.html" class="otherLinkColour">EnumResultCoordinateType</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumResultType.html" class="otherLinkColour">EnumResultType</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumScaleUpMode.html" class="otherLinkColour">EnumScaleUpMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumTerminatePhase.html" class="otherLinkColour">EnumTerminatePhase</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumTextFilterMode.html" class="otherLinkColour">EnumTextFilterMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumTextResultOrderMode.html" class="otherLinkColour">EnumTextResultOrderMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumTextureDetectionMode.html" class="EnumTextureDetectionMode">EnumTextureDetectionMode</a>
-                </li>
-            </ul>
-        </li>
-    </ul>
-</li>
-<li class="category">USEFUL RESOURCES</li>
-<li><a href="{{ site.js_release_notes }}" class="otherLinkColour">Release Notes</a>
-    <ul>
-        <li><a href="{{ site.js_release_notes }}js-8.html" class="otherLinkColour">Version
-                                                8.x</a></li>
-        <li><a href="{{ site.js_release_notes }}js-7.html" class="otherLinkColour">Version 7.6
-                                                and below</a>
-        </li>
-    </ul>
-</li>
-<li><a href="{{ site.js }}upgrade-guide/" class="otherLinkColour">Upgrade Instructions</a></li>
\ 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 @@
-<li>
-    <a href="{{ site.js }}" class="otherLinkColour">Introduction</a>
-</li>
-<li class="category">DEVELOPMENT</li>
-<li><a href="{{ site.js }}user-guide/index.html" style="cursor:pointer;color:#3c3c3c">User Guide</a>
-    <ul>
-        <li><a href="{{ site.js }}user-guide/#getting-started---hello-world" class="otherLinkColour">Getting
-                                                Started</a></li>
-        <li><a href="{{ site.js }}user-guide/advanced-usage.html" class="otherLinkColour">Advanced Usage</a>
-        </li>
-    </ul>
-</li>
-<li><a href="{{ site.js }}samples-demos/index.html" class="otherLinkColour">Samples and Demos</a>
-    <ul>
-        <li><a style="cursor:pointer;color:#3c3c3c">Hello World</a>
-            <ul>
-                <li><a href="{{ site.js }}samples-demos/helloworld-minCode.html" class="otherLinkColour">Minimal
-                                                                Code</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-readFile.html" class="otherLinkColour">Read
-                                                                an Image</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-angular.html" class="otherLinkColour">Hello
-                                                                World in Angular</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-reactjs.html" class="otherLinkColour">Hello
-                                                                World in React</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-vuejs.html" class="otherLinkColour">Hello
-                                                                World in Vue</a></li>
-            </ul>
-        </li>
-        <li><a href="{{ site.js }}samples-demos/ui-customization.html" style="cursor:pointer;color:#3c3c3c">UI
-                                                Customization</a>
-        </li>
-        <li><a href="{{ site.js }}samples-demos/parameter-settings.html" style="cursor:pointer;color:#3c3c3c">Parameter Settings</a>
-        </li>
-        <li><a href="{{ site.js }}samples-demos/use-cases.html" style="cursor:pointer;color:#3c3c3c">Use Cases</a>
-        </li>
-        <li><a target="_blank" href="https://demo.dynamsoft.com/barcode-reader-js/" style="cursor:pointer;color:#3c3c3c">Main Demo</a>
-        </li>
-    </ul>
-</li>
-<li><a href="{{ site.js_api }}" class="otherLinkColour">API Reference</a>
-    <ul>
-        <li><a href="{{ site.js_api }}BarcodeReader.html" class="otherLinkColour">BarcodeReader
-                                                for Images</a>
-        </li>
-        <li><a href="{{ site.js_api }}BarcodeScanner.html" class="otherLinkColour">BarcodeScanner for Video</a>
-        </li>
-        <li><a href="{{ site.js_api }}LicenseControl.html" class="otherLinkColour">License
-                                                Control</a></li>
-        <li><a href="{{ site.js_api }}InitializationControl.html" class="otherLinkColour">Initialization
-                                                Control</a></li>
-        <li><a href="{{ site.js_api }}InterfacesEnums.html" class="otherLinkColour">Interfaces
-                                                and Enums</a>
-            <ul>
-                <li><a href="{{ site.js_api }}interface/LocalizationResult.html" class="otherLinkColour">LocalizationResult</a></li>
-                <li><a href="{{ site.js_api }}interface/Region.html" class="otherLinkColour">Region</a></li>
-                <li><a href="{{ site.js_api }}interface/RuntimeSettings.html" class="otherLinkColour">RuntimeSettings</a></li>
-                <li><a href="{{ site.js_api }}interface/ScannerPlayCallbackInfo.html" class="otherLinkColour">ScannerPlayCallbackInfo</a></li>
-                <li><a href="{{ site.js_api }}interface/ScanSettings.html" class="otherLinkColour">ScanSettings</a></li>
-                <li><a href="{{ site.js_api }}interface/TextResult.html" class="otherLinkColour">TextResult</a>
-                </li>
-                <li><a href="{{ site.js_api }}interface/VideoDeviceInfo.html" class="otherLinkColour">VideoDeviceInfo</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeColourMode.html" class="otherLinkColour">EnumBarcodeColourMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeComplementMode.html" class="otherLinkColour">EnumBarcodeComplementMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeFormat_2.html" class="otherLinkColour">EnumBarcodeFormat_2</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeFormat.html" class="otherLinkColour">EnumBarcodeFormat</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBinarizationMode.html" class="otherLinkColour">EnumBinarizationMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumClarityCalculationMethod.html" class="otherLinkColour">EnumClarityCalculationMethod</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumClarityFilterMode.html" class="otherLinkColour">EnumClarityFilterMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumColourClusteringMode.html" class="otherLinkColour">EnumColourClusteringMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumColourConversionMode.html" class="otherLinkColour">EnumColourConversionMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumConflictMode.html" class="otherLinkColour">EnumConflictMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumDeblurMode.html" class="otherLinkColour">EnumDeblurMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumDeformationResistingMode.html" class="otherLinkColour">EnumDeformationResistingMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumDPMCodeReadingMode.html" class="otherLinkColour">EnumDPMCodeReadingMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumErrorCode.html" class="otherLinkColour">EnumErrorCode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumGrayscaleTransformationMode.html" class="otherLinkColour">EnumGrayscaleTransformationMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumImagePixelFormat.html" class="otherLinkColour">EnumImagePixelFormat</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumImagePreprocessingMode.html" class="otherLinkColour">EnumImagePreprocessingMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumIMResultDataType.html" class="otherLinkColour">EnumIMResultDataType</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumIntermediateResultSavingMode.html" class="otherLinkColour">EnumIntermediateResultSavingMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumIntermediateResultType.html" class="otherLinkColour">EnumIntermediateResultType</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumLocalizationMode.html" class="otherLinkColour">EnumLocalizationMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumPDFReadingMode.html" class="otherLinkColour">EnumPDFReadingMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumQRCodeErrorCorrectionLevel.html" class="otherLinkColour">EnumQRCodeErrorCorrectionLevel</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumRegionPredetectionMode.html" class="otherLinkColour">EnumRegionPredetectionMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumResultCoordinateType.html" class="otherLinkColour">EnumResultCoordinateType</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumResultType.html" class="otherLinkColour">EnumResultType</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumScaleUpMode.html" class="otherLinkColour">EnumScaleUpMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumTerminatePhase.html" class="otherLinkColour">EnumTerminatePhase</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumTextFilterMode.html" class="otherLinkColour">EnumTextFilterMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumTextResultOrderMode.html" class="otherLinkColour">EnumTextResultOrderMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumTextureDetectionMode.html" class="EnumTextureDetectionMode">EnumTextureDetectionMode</a>
-                </li>
-            </ul>
-        </li>
-    </ul>
-</li>
-<li class="category">USEFUL RESOURCES</li>
-<li><a href="{{ site.js_release_notes }}" class="otherLinkColour">Release Notes</a>
-    <ul>
-        <li><a href="{{ site.js_release_notes }}js-8.html" class="otherLinkColour">Version
-                                                8.x</a></li>
-        <li><a href="{{ site.js_release_notes }}js-7.html" class="otherLinkColour">Version 7.6
-                                                and below</a>
-        </li>
-    </ul>
-</li>
-<li><a href="{{ site.js }}upgrade-guide/" class="otherLinkColour">Upgrade Instructions</a></li>
\ 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 @@
-<li>
-    <a href="{{ site.js }}" class="otherLinkColour">Introduction</a>
-</li>
-<li class="category">DEVELOPMENT</li>
-<li><a href="{{ site.js }}user-guide/index.html" style="cursor:pointer;color:#3c3c3c">User Guide</a>
-    <ul>
-        <li><a href="{{ site.js }}user-guide/#getting-started---hello-world" class="otherLinkColour">Getting
-                                                Started</a></li>
-        <li><a href="{{ site.js }}user-guide/advanced-usage.html" class="otherLinkColour">Advanced Usage</a>
-        </li>
-    </ul>
-</li>
-<li><a href="{{ site.js }}samples-demos/index.html" class="otherLinkColour">Samples and Demos</a>
-    <ul>
-        <li><a style="cursor:pointer;color:#3c3c3c">Hello World</a>
-            <ul>
-                <li><a href="{{ site.js }}samples-demos/helloworld-minCode.html" class="otherLinkColour">Minimal
-                                                                Code</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-readFile.html" class="otherLinkColour">Read
-                                                                an Image</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-angular.html" class="otherLinkColour">Hello
-                                                                World in Angular</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-reactjs.html" class="otherLinkColour">Hello
-                                                                World in React</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-vuejs.html" class="otherLinkColour">Hello
-                                                                World in Vue</a></li>
-            </ul>
-        </li>
-        <li><a href="{{ site.js }}samples-demos/ui-customization.html" style="cursor:pointer;color:#3c3c3c">UI
-                                                Customization</a>
-        </li>
-        <li><a href="{{ site.js }}samples-demos/parameter-settings.html" style="cursor:pointer;color:#3c3c3c">Parameter Settings</a>
-        </li>
-        <li><a href="{{ site.js }}samples-demos/use-cases.html" style="cursor:pointer;color:#3c3c3c">Use Cases</a>
-        </li>
-        <li><a target="_blank" href="https://demo.dynamsoft.com/barcode-reader-js/" style="cursor:pointer;color:#3c3c3c">Main Demo</a>
-        </li>
-    </ul>
-</li>
-<li><a href="{{ site.js_api }}" class="otherLinkColour">API Reference</a>
-    <ul>
-        <li><a href="{{ site.js_api }}BarcodeReader.html" class="otherLinkColour">BarcodeReader
-                                                for Images</a>
-        </li>
-        <li><a href="{{ site.js_api }}BarcodeScanner.html" class="otherLinkColour">BarcodeScanner for Video</a>
-        </li>
-        <li><a href="{{ site.js_api }}LicenseControl.html" class="otherLinkColour">License
-                                                Control</a></li>
-        <li><a href="{{ site.js_api }}InitializationControl.html" class="otherLinkColour">Initialization
-                                                Control</a></li>
-        <li><a href="{{ site.js_api }}InterfacesEnums.html" class="otherLinkColour">Interfaces
-                                                and Enums</a>
-            <ul>
-                <li><a href="{{ site.js_api }}interface/LocalizationResult.html" class="otherLinkColour">LocalizationResult</a></li>
-                <li><a href="{{ site.js_api }}interface/Region.html" class="otherLinkColour">Region</a></li>
-                <li><a href="{{ site.js_api }}interface/RuntimeSettings.html" class="otherLinkColour">RuntimeSettings</a></li>
-                <li><a href="{{ site.js_api }}interface/ScannerPlayCallbackInfo.html" class="otherLinkColour">ScannerPlayCallbackInfo</a></li>
-                <li><a href="{{ site.js_api }}interface/ScanSettings.html" class="otherLinkColour">ScanSettings</a></li>
-                <li><a href="{{ site.js_api }}interface/TextResult.html" class="otherLinkColour">TextResult</a>
-                </li>
-                <li><a href="{{ site.js_api }}interface/VideoDeviceInfo.html" class="otherLinkColour">VideoDeviceInfo</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeColourMode.html" class="otherLinkColour">EnumBarcodeColourMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeComplementMode.html" class="otherLinkColour">EnumBarcodeComplementMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeFormat_2.html" class="otherLinkColour">EnumBarcodeFormat_2</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeFormat.html" class="otherLinkColour">EnumBarcodeFormat</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBinarizationMode.html" class="otherLinkColour">EnumBinarizationMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumClarityCalculationMethod.html" class="otherLinkColour">EnumClarityCalculationMethod</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumClarityFilterMode.html" class="otherLinkColour">EnumClarityFilterMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumColourClusteringMode.html" class="otherLinkColour">EnumColourClusteringMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumColourConversionMode.html" class="otherLinkColour">EnumColourConversionMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumConflictMode.html" class="otherLinkColour">EnumConflictMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumDeblurMode.html" class="otherLinkColour">EnumDeblurMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumDeformationResistingMode.html" class="otherLinkColour">EnumDeformationResistingMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumDPMCodeReadingMode.html" class="otherLinkColour">EnumDPMCodeReadingMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumErrorCode.html" class="otherLinkColour">EnumErrorCode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumGrayscaleTransformationMode.html" class="otherLinkColour">EnumGrayscaleTransformationMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumImagePixelFormat.html" class="otherLinkColour">EnumImagePixelFormat</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumImagePreprocessingMode.html" class="otherLinkColour">EnumImagePreprocessingMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumIMResultDataType.html" class="otherLinkColour">EnumIMResultDataType</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumIntermediateResultSavingMode.html" class="otherLinkColour">EnumIntermediateResultSavingMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumIntermediateResultType.html" class="otherLinkColour">EnumIntermediateResultType</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumLocalizationMode.html" class="otherLinkColour">EnumLocalizationMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumPDFReadingMode.html" class="otherLinkColour">EnumPDFReadingMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumQRCodeErrorCorrectionLevel.html" class="otherLinkColour">EnumQRCodeErrorCorrectionLevel</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumRegionPredetectionMode.html" class="otherLinkColour">EnumRegionPredetectionMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumResultCoordinateType.html" class="otherLinkColour">EnumResultCoordinateType</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumResultType.html" class="otherLinkColour">EnumResultType</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumScaleUpMode.html" class="otherLinkColour">EnumScaleUpMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumTerminatePhase.html" class="otherLinkColour">EnumTerminatePhase</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumTextFilterMode.html" class="otherLinkColour">EnumTextFilterMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumTextResultOrderMode.html" class="otherLinkColour">EnumTextResultOrderMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumTextureDetectionMode.html" class="EnumTextureDetectionMode">EnumTextureDetectionMode</a>
-                </li>
-            </ul>
-        </li>
-    </ul>
-</li>
-<li class="category">USEFUL RESOURCES</li>
-<li><a href="{{ site.js_release_notes }}" class="otherLinkColour">Release Notes</a>
-    <ul>
-        <li><a href="{{ site.js_release_notes }}js-8.html" class="otherLinkColour">Version
-                                                8.x</a></li>
-        <li><a href="{{ site.js_release_notes }}js-7.html" class="otherLinkColour">Version 7.6
-                                                and below</a>
-        </li>
-    </ul>
-</li>
-<li><a href="{{ site.js }}upgrade-guide/" class="otherLinkColour">Upgrade Instructions</a></li>
\ 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 @@
-<li>
-    <a href="{{ site.js }}" class="otherLinkColour">Introduction</a>
-</li>
-<li class="category">DEVELOPMENT</li>
-<li><a href="{{ site.js }}user-guide/index.html" style="cursor:pointer;color:#3c3c3c">User Guide</a>
-    <ul>
-        <li><a href="{{ site.js }}user-guide/#getting-started---hello-world" class="otherLinkColour">Getting
-                                                Started</a></li>
-        <li><a href="{{ site.js }}user-guide/advanced-usage.html" class="otherLinkColour">Advanced Usage</a>
-        </li>
-    </ul>
-</li>
-<li><a href="{{ site.js }}samples-demos/index.html" class="otherLinkColour">Samples and Demos</a>
-    <ul>
-        <li><a style="cursor:pointer;color:#3c3c3c">Hello World</a>
-            <ul>
-                <li><a href="{{ site.js }}samples-demos/helloworld-minCode.html" class="otherLinkColour">Minimal
-                                                                Code</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-readFile.html" class="otherLinkColour">Read
-                                                                an Image</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-angular.html" class="otherLinkColour">Hello
-                                                                World with Angular</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-reactjs.html" class="otherLinkColour">Hello
-                                                                World with React</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-vuejs.html" class="otherLinkColour">Hello
-                                                                World with Vue 2</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-vuejsv3.html" class="otherLinkColour">Hello
-                                                                World with Vue 3</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-nextjs.html" class="otherLinkColour">Hello
-                                                                World with Next.js</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-nuxtjs.html" class="otherLinkColour">Hello
-                                                                World with NuxtJS</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-electron.html" class="otherLinkColour">Hello
-                                                                World with Electron</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-pwa.html" class="otherLinkColour">Hello
-                                                                World with PWA</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-requirejs.html" class="otherLinkColour">Hello
-                                                                World with RequireJS</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-typescript.html" class="otherLinkColour">Hello
-                                                                World with TypeScript</a></li>
-            </ul>
-        </li>
-        <li><a href="{{ site.js }}samples-demos/ui-customization.html" style="cursor:pointer;color:#3c3c3c">UI
-                                                Customization</a>
-        </li>
-        <li><a href="{{ site.js }}samples-demos/parameter-settings.html" style="cursor:pointer;color:#3c3c3c">Parameter Settings</a>
-        </li>
-        <li><a href="{{ site.js }}samples-demos/use-cases.html" style="cursor:pointer;color:#3c3c3c">Use Cases</a>
-        </li>
-        <li><a style="cursor:pointer;color:#3c3c3c">Other Samples</a>
-            <ul>
-                <li><a href="{{ site.js }}samples-demos/debug.html" class="otherLinkColour">Debug Sample</a></li>
-            </ul>
-        </li>
-        <li><a target="_blank" href="https://demo.dynamsoft.com/barcode-reader-js/" style="cursor:pointer;color:#3c3c3c">Main Demo</a>
-        </li>
-    </ul>
-</li>
-<li><a href="{{ site.js_api }}" class="otherLinkColour">API Reference</a>
-    <ul>
-        <li><a href="{{ site.js_api }}BarcodeReader.html" class="otherLinkColour">BarcodeReader
-                                                for Images</a>
-        </li>
-        <li><a href="{{ site.js_api }}BarcodeScanner.html" class="otherLinkColour">BarcodeScanner for Video</a>
-        </li>
-        <li><a href="{{ site.js_api }}LicenseControl.html" class="otherLinkColour">License
-                                                Control</a></li>
-        <li><a href="{{ site.js_api }}InitializationControl.html" class="otherLinkColour">Initialization
-                                                Control</a></li>
-        <li><a href="{{ site.js_api }}InterfacesEnums.html" class="otherLinkColour">Interfaces
-                                                and Enums</a>
-            <ul>
-                <li><a href="{{ site.js_api }}interface/LocalizationResult.html" class="otherLinkColour">LocalizationResult</a></li>
-                <li><a href="{{ site.js_api }}interface/Region.html" class="otherLinkColour">Region</a></li>
-                <li><a href="{{ site.js_api }}interface/RuntimeSettings.html" class="otherLinkColour">RuntimeSettings</a></li>
-                <li><a href="{{ site.js_api }}interface/ScannerPlayCallbackInfo.html" class="otherLinkColour">ScannerPlayCallbackInfo</a></li>
-                <li><a href="{{ site.js_api }}interface/ScanSettings.html" class="otherLinkColour">ScanSettings</a></li>
-                <li><a href="{{ site.js_api }}interface/TextResult.html" class="otherLinkColour">TextResult</a>
-                </li>
-                <li><a href="{{ site.js_api }}interface/VideoDeviceInfo.html" class="otherLinkColour">VideoDeviceInfo</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeColourMode.html" class="otherLinkColour">EnumBarcodeColourMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeComplementMode.html" class="otherLinkColour">EnumBarcodeComplementMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeFormat_2.html" class="otherLinkColour">EnumBarcodeFormat_2</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeFormat.html" class="otherLinkColour">EnumBarcodeFormat</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBinarizationMode.html" class="otherLinkColour">EnumBinarizationMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumClarityCalculationMethod.html" class="otherLinkColour">EnumClarityCalculationMethod</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumClarityFilterMode.html" class="otherLinkColour">EnumClarityFilterMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumColourClusteringMode.html" class="otherLinkColour">EnumColourClusteringMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumColourConversionMode.html" class="otherLinkColour">EnumColourConversionMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumConflictMode.html" class="otherLinkColour">EnumConflictMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumDeblurMode.html" class="otherLinkColour">EnumDeblurMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumDeformationResistingMode.html" class="otherLinkColour">EnumDeformationResistingMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumDPMCodeReadingMode.html" class="otherLinkColour">EnumDPMCodeReadingMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumErrorCode.html" class="otherLinkColour">EnumErrorCode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumGrayscaleTransformationMode.html" class="otherLinkColour">EnumGrayscaleTransformationMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumImagePixelFormat.html" class="otherLinkColour">EnumImagePixelFormat</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumImagePreprocessingMode.html" class="otherLinkColour">EnumImagePreprocessingMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumIMResultDataType.html" class="otherLinkColour">EnumIMResultDataType</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumIntermediateResultSavingMode.html" class="otherLinkColour">EnumIntermediateResultSavingMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumIntermediateResultType.html" class="otherLinkColour">EnumIntermediateResultType</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumLocalizationMode.html" class="otherLinkColour">EnumLocalizationMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumPDFReadingMode.html" class="otherLinkColour">EnumPDFReadingMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumQRCodeErrorCorrectionLevel.html" class="otherLinkColour">EnumQRCodeErrorCorrectionLevel</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumRegionPredetectionMode.html" class="otherLinkColour">EnumRegionPredetectionMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumResultCoordinateType.html" class="otherLinkColour">EnumResultCoordinateType</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumResultType.html" class="otherLinkColour">EnumResultType</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumScaleUpMode.html" class="otherLinkColour">EnumScaleUpMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumTerminatePhase.html" class="otherLinkColour">EnumTerminatePhase</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumTextFilterMode.html" class="otherLinkColour">EnumTextFilterMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumTextResultOrderMode.html" class="otherLinkColour">EnumTextResultOrderMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumTextureDetectionMode.html" class="EnumTextureDetectionMode">EnumTextureDetectionMode</a>
-                </li>
-            </ul>
-        </li>
-    </ul>
-</li>
-<li class="category">USEFUL RESOURCES</li>
-<li><a href="{{ site.js_release_notes }}" class="otherLinkColour">Release Notes</a>
-    <ul>
-        <li><a href="{{ site.js_release_notes }}js-8.html" class="otherLinkColour">Version
-                                                8.x</a></li>
-        <li><a href="{{ site.js_release_notes }}js-7.html" class="otherLinkColour">Version 7.6
-                                                and below</a>
-        </li>
-    </ul>
-</li>
-<li><a href="{{ site.js }}upgrade-guide/" class="otherLinkColour">Upgrade Instructions</a></li>
\ 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 @@
-<li>
-    <a href="{{ site.js }}" class="otherLinkColour">Introduction</a>
-</li>
-<li class="category">DEVELOPMENT</li>
-<li><a href="{{ site.js }}user-guide/index.html" style="cursor:pointer;color:#3c3c3c">User Guide</a>
-    <ul>
-        <li><a href="{{ site.js }}user-guide/#getting-started---hello-world" class="otherLinkColour">Getting
-                                                Started</a></li>
-        <li><a href="{{ site.js }}user-guide/advanced-usage.html" class="otherLinkColour">Advanced Usage</a>
-        </li>
-    </ul>
-</li>
-<li><a href="{{ site.js }}samples-demos/index.html" class="otherLinkColour">Samples and Demos</a>
-    <ul>
-        <li><a style="cursor:pointer;color:#3c3c3c">Hello World</a>
-            <ul>
-                <li><a href="{{ site.js }}samples-demos/helloworld-minCode.html" class="otherLinkColour">Minimal
-                                                                Code</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-readFile.html" class="otherLinkColour">Read
-                                                                an Image</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-angular.html" class="otherLinkColour">Hello
-                                                                World with Angular</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-reactjs.html" class="otherLinkColour">Hello
-                                                                World with React</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-vuejs.html" class="otherLinkColour">Hello
-                                                                World with Vue 2</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-vuejsv3.html" class="otherLinkColour">Hello
-                                                                World with Vue 3</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-nextjs.html" class="otherLinkColour">Hello
-                                                                World with Next.js</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-nuxtjs.html" class="otherLinkColour">Hello
-                                                                World with NuxtJS</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-electron.html" class="otherLinkColour">Hello
-                                                                World with Electron</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-pwa.html" class="otherLinkColour">Hello
-                                                                World with PWA</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-requirejs.html" class="otherLinkColour">Hello
-                                                                World with RequireJS</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-typescript.html" class="otherLinkColour">Hello
-                                                                World with TypeScript</a></li>
-            </ul>
-        </li>
-        <li><a href="{{ site.js }}samples-demos/ui-customization.html" style="cursor:pointer;color:#3c3c3c">UI
-                                                Customization</a>
-        </li>
-        <li><a href="{{ site.js }}samples-demos/parameter-settings.html" style="cursor:pointer;color:#3c3c3c">Parameter Settings</a>
-        </li>
-        <li><a href="{{ site.js }}samples-demos/use-cases.html" style="cursor:pointer;color:#3c3c3c">Use Cases</a>
-        </li>
-        <li><a style="cursor:pointer;color:#3c3c3c">Other Samples</a>
-            <ul>
-                <li><a href="{{ site.js }}samples-demos/debug.html" class="otherLinkColour">Debug Sample</a></li>
-            </ul>
-        </li>
-        <li><a target="_blank" href="https://demo.dynamsoft.com/barcode-reader-js/" style="cursor:pointer;color:#3c3c3c">Main Demo</a>
-        </li>
-    </ul>
-</li>
-<li><a href="{{ site.js_api }}" class="otherLinkColour">API Reference</a>
-    <ul>
-        <li><a href="{{ site.js_api }}BarcodeReader.html" class="otherLinkColour">BarcodeReader
-                                                for Images</a>
-        </li>
-        <li><a href="{{ site.js_api }}BarcodeScanner.html" class="otherLinkColour">BarcodeScanner for Video</a>
-        </li>
-        <li><a href="{{ site.js_api }}LicenseControl.html" class="otherLinkColour">License
-                                                Control</a></li>
-        <li><a href="{{ site.js_api }}InitializationControl.html" class="otherLinkColour">Initialization
-                                                Control</a></li>
-        <li><a href="{{ site.js_api }}InterfacesEnums.html" class="otherLinkColour">Interfaces
-                                                and Enums</a>
-            <ul>
-                <li><a href="{{ site.js_api }}interface/LocalizationResult.html" class="otherLinkColour">LocalizationResult</a></li>
-                <li><a href="{{ site.js_api }}interface/Region.html" class="otherLinkColour">Region</a></li>
-                <li><a href="{{ site.js_api }}interface/RuntimeSettings.html" class="otherLinkColour">RuntimeSettings</a></li>
-                <li><a href="{{ site.js_api }}interface/ScannerPlayCallbackInfo.html" class="otherLinkColour">ScannerPlayCallbackInfo</a></li>
-                <li><a href="{{ site.js_api }}interface/ScanSettings.html" class="otherLinkColour">ScanSettings</a></li>
-                <li><a href="{{ site.js_api }}interface/TextResult.html" class="otherLinkColour">TextResult</a>
-                </li>
-                <li><a href="{{ site.js_api }}interface/VideoDeviceInfo.html" class="otherLinkColour">VideoDeviceInfo</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeColourMode.html" class="otherLinkColour">EnumBarcodeColourMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeComplementMode.html" class="otherLinkColour">EnumBarcodeComplementMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeFormat_2.html" class="otherLinkColour">EnumBarcodeFormat_2</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeFormat.html" class="otherLinkColour">EnumBarcodeFormat</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBinarizationMode.html" class="otherLinkColour">EnumBinarizationMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumClarityCalculationMethod.html" class="otherLinkColour">EnumClarityCalculationMethod</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumClarityFilterMode.html" class="otherLinkColour">EnumClarityFilterMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumColourClusteringMode.html" class="otherLinkColour">EnumColourClusteringMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumColourConversionMode.html" class="otherLinkColour">EnumColourConversionMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumConflictMode.html" class="otherLinkColour">EnumConflictMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumDeblurMode.html" class="otherLinkColour">EnumDeblurMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumDeformationResistingMode.html" class="otherLinkColour">EnumDeformationResistingMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumDPMCodeReadingMode.html" class="otherLinkColour">EnumDPMCodeReadingMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumErrorCode.html" class="otherLinkColour">EnumErrorCode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumGrayscaleTransformationMode.html" class="otherLinkColour">EnumGrayscaleTransformationMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumImagePixelFormat.html" class="otherLinkColour">EnumImagePixelFormat</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumImagePreprocessingMode.html" class="otherLinkColour">EnumImagePreprocessingMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumIMResultDataType.html" class="otherLinkColour">EnumIMResultDataType</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumIntermediateResultSavingMode.html" class="otherLinkColour">EnumIntermediateResultSavingMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumIntermediateResultType.html" class="otherLinkColour">EnumIntermediateResultType</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumLocalizationMode.html" class="otherLinkColour">EnumLocalizationMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumPDFReadingMode.html" class="otherLinkColour">EnumPDFReadingMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumQRCodeErrorCorrectionLevel.html" class="otherLinkColour">EnumQRCodeErrorCorrectionLevel</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumRegionPredetectionMode.html" class="otherLinkColour">EnumRegionPredetectionMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumResultCoordinateType.html" class="otherLinkColour">EnumResultCoordinateType</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumResultType.html" class="otherLinkColour">EnumResultType</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumScaleUpMode.html" class="otherLinkColour">EnumScaleUpMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumTerminatePhase.html" class="otherLinkColour">EnumTerminatePhase</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumTextFilterMode.html" class="otherLinkColour">EnumTextFilterMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumTextResultOrderMode.html" class="otherLinkColour">EnumTextResultOrderMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumTextureDetectionMode.html" class="EnumTextureDetectionMode">EnumTextureDetectionMode</a>
-                </li>
-            </ul>
-        </li>
-    </ul>
-</li>
-<li class="category">USEFUL RESOURCES</li>
-<li><a href="{{ site.js_release_notes }}" class="otherLinkColour">Release Notes</a>
-    <ul>
-        <li><a href="{{ site.js_release_notes }}js-8.html" class="otherLinkColour">Version
-                                                8.x</a></li>
-        <li><a href="{{ site.js_release_notes }}js-7.html" class="otherLinkColour">Version 7.6
-                                                and below</a>
-        </li>
-    </ul>
-</li>
-<li><a href="{{ site.js }}upgrade-guide/" class="otherLinkColour">Upgrade Instructions</a></li>
\ 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 @@
-<li>
-    <a href="{{ site.js }}" class="otherLinkColour">Introduction</a>
-</li>
-<li class="category">DEVELOPMENT</li>
-<li><a style="cursor:pointer;color:#3c3c3c">User Guide</a>
-    <ul>
-        <li><a href="{{ site.js }}user-guide/#getting-started---hello-world" class="otherLinkColour">Getting
-                                        Started</a></li>
-        <li><a href="{{ site.js }}user-guide/advanced-usage.html" class="otherLinkColour">Advanced Usage</a>
-        </li>
-    </ul>
-</li>
-<li><a href="{{ site.js }}samples-demos/index.html" class="otherLinkColour">Samples and Demos</a>
-    <ul>
-        <li><a style="cursor:pointer;color:#3c3c3c">Hello World</a>
-            <ul>
-                <li><a href="{{ site.js }}samples-demos/helloworld-minCode.html" class="otherLinkColour">Minimal
-                                                        Code</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-readFile.html" class="otherLinkColour">Read
-                                                        an Image</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-angular.html" class="otherLinkColour">Hello
-                                                        World with Angular</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-reactjs.html" class="otherLinkColour">Hello
-                                                        World with React</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-vuejs.html" class="otherLinkColour">Hello
-                                                        World with Vue 2</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-vuejsv3.html" class="otherLinkColour">Hello
-                                                        World with Vue 3</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-nextjs.html" class="otherLinkColour">Hello
-                                                        World with Next.js</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-nuxtjs.html" class="otherLinkColour">Hello
-                                                        World with NuxtJS</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-electron.html" class="otherLinkColour">Hello
-                                                        World with Electron</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-pwa.html" class="otherLinkColour">Hello
-                                                        World with PWA</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-requirejs.html" class="otherLinkColour">Hello
-                                                        World with RequireJS</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-typescript.html" class="otherLinkColour">Hello
-                                                        World with TypeScript</a></li>
-            </ul>
-        </li>
-        <li><a href="{{ site.js }}samples-demos/ui-customization.html" style="cursor:pointer;color:#3c3c3c">UI
-                                        Customization</a>
-        </li>
-        <li><a href="{{ site.js }}samples-demos/parameter-settings.html" style="cursor:pointer;color:#3c3c3c">Parameter Settings</a>
-        </li>
-        <li><a href="{{ site.js }}samples-demos/use-cases.html" style="cursor:pointer;color:#3c3c3c">Use Cases</a>
-        </li>
-        <li><a style="cursor:pointer;color:#3c3c3c">Other Samples</a>
-            <ul>
-                <li><a href="{{ site.js }}samples-demos/debug.html" class="otherLinkColour">Debug Sample</a></li>
-            </ul>
-        </li>
-        <li><a target="_blank" href="https://demo.dynamsoft.com/barcode-reader-js/" style="cursor:pointer;color:#3c3c3c">Main Demo</a>
-        </li>
-    </ul>
-</li>
-<li><a href="{{ site.js_api }}" class="otherLinkColour">API Reference</a>
-    <ul>
-        <li><a href="{{ site.js_api }}BarcodeReader.html" class="otherLinkColour">BarcodeReader
-                                        for Images</a>
-        </li>
-        <li><a href="{{ site.js_api }}BarcodeScanner.html" class="otherLinkColour">BarcodeScanner for Video</a>
-        </li>
-        <li><a href="{{ site.js_api }}LicenseControl.html" class="otherLinkColour">License
-                                        Control</a></li>
-        <li><a href="{{ site.js_api }}InitializationControl.html" class="otherLinkColour">Initialization
-                                        Control</a></li>
-        <li><a href="{{ site.js_api }}InterfacesEnums.html" class="otherLinkColour">Interfaces
-                                        and Enums</a>
-            <ul>
-                <li><a href="{{ site.js_api }}interface/LocalizationResult.html" class="otherLinkColour">LocalizationResult</a></li>
-                <li><a href="{{ site.js_api }}interface/Region.html" class="otherLinkColour">Region</a></li>
-                <li><a href="{{ site.js_api }}interface/RuntimeSettings.html" class="otherLinkColour">RuntimeSettings</a></li>
-                <li><a href="{{ site.js_api }}interface/ScannerPlayCallbackInfo.html" class="otherLinkColour">ScannerPlayCallbackInfo</a></li>
-                <li><a href="{{ site.js_api }}interface/ScanSettings.html" class="otherLinkColour">ScanSettings</a></li>
-                <li><a href="{{ site.js_api }}interface/TextResult.html" class="otherLinkColour">TextResult</a>
-                </li>
-                <li><a href="{{ site.js_api }}interface/VideoDeviceInfo.html" class="otherLinkColour">VideoDeviceInfo</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeColourMode.html" class="otherLinkColour">EnumBarcodeColourMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeComplementMode.html" class="otherLinkColour">EnumBarcodeComplementMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeFormat_2.html" class="otherLinkColour">EnumBarcodeFormat_2</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeFormat.html" class="otherLinkColour">EnumBarcodeFormat</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBinarizationMode.html" class="otherLinkColour">EnumBinarizationMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumClarityCalculationMethod.html" class="otherLinkColour">EnumClarityCalculationMethod</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumClarityFilterMode.html" class="otherLinkColour">EnumClarityFilterMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumColourClusteringMode.html" class="otherLinkColour">EnumColourClusteringMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumColourConversionMode.html" class="otherLinkColour">EnumColourConversionMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumConflictMode.html" class="otherLinkColour">EnumConflictMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumDeblurMode.html" class="otherLinkColour">EnumDeblurMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumDeformationResistingMode.html" class="otherLinkColour">EnumDeformationResistingMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumDPMCodeReadingMode.html" class="otherLinkColour">EnumDPMCodeReadingMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumErrorCode.html" class="otherLinkColour">EnumErrorCode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumGrayscaleTransformationMode.html" class="otherLinkColour">EnumGrayscaleTransformationMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumImagePixelFormat.html" class="otherLinkColour">EnumImagePixelFormat</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumImagePreprocessingMode.html" class="otherLinkColour">EnumImagePreprocessingMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumIMResultDataType.html" class="otherLinkColour">EnumIMResultDataType</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumIntermediateResultSavingMode.html" class="otherLinkColour">EnumIntermediateResultSavingMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumIntermediateResultType.html" class="otherLinkColour">EnumIntermediateResultType</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumLocalizationMode.html" class="otherLinkColour">EnumLocalizationMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumPDFReadingMode.html" class="otherLinkColour">EnumPDFReadingMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumQRCodeErrorCorrectionLevel.html" class="otherLinkColour">EnumQRCodeErrorCorrectionLevel</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumRegionPredetectionMode.html" class="otherLinkColour">EnumRegionPredetectionMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumResultCoordinateType.html" class="otherLinkColour">EnumResultCoordinateType</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumResultType.html" class="otherLinkColour">EnumResultType</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumScaleUpMode.html" class="otherLinkColour">EnumScaleUpMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumTerminatePhase.html" class="otherLinkColour">EnumTerminatePhase</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumTextFilterMode.html" class="otherLinkColour">EnumTextFilterMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumTextResultOrderMode.html" class="otherLinkColour">EnumTextResultOrderMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumTextureDetectionMode.html" class="EnumTextureDetectionMode">EnumTextureDetectionMode</a>
-                </li>
-            </ul>
-        </li>
-    </ul>
-</li>
-<li class="category">USEFUL RESOURCES</li>
-<li><a href="{{ site.js_release_notes }}" class="otherLinkColour">Release Notes</a>
-    <ul>
-        <li><a href="{{ site.js_release_notes }}js-8.html" class="otherLinkColour">Version
-                                        8.x</a></li>
-        <li><a href="{{ site.js_release_notes }}js-7.html" class="otherLinkColour">Version 7.6
-                                        and below</a>
-        </li>
-    </ul>
-</li>
-<li><a href="{{ site.js }}upgrade-guide/" class="otherLinkColour">Upgrade Instructions</a></li>
\ 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 @@
-<li>
-    <a href="{{ site.js }}" class="otherLinkColour">Introduction</a>
-</li>
-<li class="category">DEVELOPMENT</li>
-<li><a href="{{ site.js }}user-guide/index.html" style="cursor:pointer;color:#3c3c3c">User Guide</a>
-    <ul>
-        <li><a href="{{ site.js }}user-guide/" class="otherLinkColour">Get Started</a> </li>
-        <li><a href="{{ site.js }}user-guide/advanced-usage.html" class="otherLinkColour">Advanced Usage</a> </li>
-    </ul>
-</li>
-<li><a href="{{ site.js }}samples-demos/index.html" class="otherLinkColour">Samples and Demos</a>
-    <ul>
-        <li><a style="cursor:pointer;color:#3c3c3c">Hello World</a>
-            <ul>
-                <li><a href="{{ site.js }}samples-demos/helloworld-minCode.html" class="otherLinkColour">Minimal
-                                                                Code</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-readFile.html" class="otherLinkColour">Read
-                                                                an Image</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-angular.html" class="otherLinkColour">Hello
-                                                                World with Angular</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-reactjs.html" class="otherLinkColour">Hello
-                                                                World with React</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-vuejs.html" class="otherLinkColour">Hello
-                                                                World with Vue 2</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-vuejsv3.html" class="otherLinkColour">Hello
-                                                                World with Vue 3</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-nextjs.html" class="otherLinkColour">Hello
-                                                                World with Next.js</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-nuxtjs.html" class="otherLinkColour">Hello
-                                                                World with NuxtJS</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-electron.html" class="otherLinkColour">Hello
-                                                                World with Electron</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-pwa.html" class="otherLinkColour">Hello
-                                                                World with PWA</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-requirejs.html" class="otherLinkColour">Hello
-                                                                World with RequireJS</a></li>
-            </ul>
-        </li>
-        <li><a href="{{ site.js }}samples-demos/ui-customization.html" style="cursor:pointer;color:#3c3c3c">UI
-                                                Customization</a>
-        </li>
-        <li><a href="{{ site.js }}samples-demos/parameter-settings.html" style="cursor:pointer;color:#3c3c3c">Parameter Settings</a>
-        </li>
-        <li><a href="{{ site.js }}samples-demos/use-cases.html" style="cursor:pointer;color:#3c3c3c">Use Cases</a>
-        </li>
-        <li><a style="cursor:pointer;color:#3c3c3c">Other Samples</a>
-            <ul>
-                <li><a href="{{ site.js }}samples-demos/debug.html" class="otherLinkColour">Debug Sample</a></li>
-            </ul>
-        </li>
-        <li><a target="_blank" href="https://demo.dynamsoft.com/barcode-reader-js/" style="cursor:pointer;color:#3c3c3c">Main Demo</a>
-        </li>
-    </ul>
-</li>
-<li><a href="{{ site.js_api }}" class="otherLinkColour">API Reference</a>
-    <ul>
-        <li><a href="{{ site.js_api }}BarcodeReader.html" class="otherLinkColour">BarcodeReader
-                                                for Images</a>
-        </li>
-        <li><a href="{{ site.js_api }}BarcodeScanner.html" class="otherLinkColour">BarcodeScanner for Video</a>
-        </li>
-        <li><a href="{{ site.js_api }}LicenseControl.html" class="otherLinkColour">License
-                                                Control</a></li>
-        <li><a href="{{ site.js_api }}InitializationControl.html" class="otherLinkColour">Initialization
-                                                Control</a></li>
-        <li><a href="{{ site.js_api }}InterfacesEnums.html" class="otherLinkColour">Interfaces
-                                                and Enums</a>
-            <ul>
-                <li><a href="{{ site.js_api }}interface/LocalizationResult.html" class="otherLinkColour">LocalizationResult</a></li>
-                <li><a href="{{ site.js_api }}interface/Region.html" class="otherLinkColour">Region</a></li>
-                <li><a href="{{ site.js_api }}interface/RuntimeSettings.html" class="otherLinkColour">RuntimeSettings</a></li>
-                <li><a href="{{ site.js_api }}interface/furthermodes.html" class="otherLinkColour">FurtherModes</a></li>
-                <li><a href="{{ site.js_api }}interface/ScannerPlayCallbackInfo.html" class="otherLinkColour">ScannerPlayCallbackInfo</a></li>
-                <li><a href="{{ site.js_api }}interface/ScanSettings.html" class="otherLinkColour">ScanSettings</a></li>
-                <li><a href="{{ site.js_api }}interface/TextResult.html" class="otherLinkColour">TextResult</a>
-                </li>
-                <li><a href="{{ site.js_api }}interface/VideoDeviceInfo.html" class="otherLinkColour">VideoDeviceInfo</a></li>
-                <li><a href="{{ site.js_api }}interface/imagesource.html" class="otherLinkColour">ImageSource</a></li>
-                <li><a href="{{ site.js_api }}interface/dsimage.html" class="otherLinkColour">DSImage</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeColourMode.html" class="otherLinkColour">EnumBarcodeColourMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeComplementMode.html" class="otherLinkColour">EnumBarcodeComplementMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeFormat_2.html" class="otherLinkColour">EnumBarcodeFormat_2</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeFormat.html" class="otherLinkColour">EnumBarcodeFormat</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBinarizationMode.html" class="otherLinkColour">EnumBinarizationMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumClarityCalculationMethod.html" class="otherLinkColour">EnumClarityCalculationMethod</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumClarityFilterMode.html" class="otherLinkColour">EnumClarityFilterMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumColourClusteringMode.html" class="otherLinkColour">EnumColourClusteringMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumColourConversionMode.html" class="otherLinkColour">EnumColourConversionMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumConflictMode.html" class="otherLinkColour">EnumConflictMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumDeblurMode.html" class="otherLinkColour">EnumDeblurMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumDeformationResistingMode.html" class="otherLinkColour">EnumDeformationResistingMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumDPMCodeReadingMode.html" class="otherLinkColour">EnumDPMCodeReadingMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumErrorCode.html" class="otherLinkColour">EnumErrorCode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumGrayscaleTransformationMode.html" class="otherLinkColour">EnumGrayscaleTransformationMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumImagePixelFormat.html" class="otherLinkColour">EnumImagePixelFormat</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumImagePreprocessingMode.html" class="otherLinkColour">EnumImagePreprocessingMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumIMResultDataType.html" class="otherLinkColour">EnumIMResultDataType</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumIntermediateResultSavingMode.html" class="otherLinkColour">EnumIntermediateResultSavingMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumIntermediateResultType.html" class="otherLinkColour">EnumIntermediateResultType</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumLocalizationMode.html" class="otherLinkColour">EnumLocalizationMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumPDFReadingMode.html" class="otherLinkColour">EnumPDFReadingMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumQRCodeErrorCorrectionLevel.html" class="otherLinkColour">EnumQRCodeErrorCorrectionLevel</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumRegionPredetectionMode.html" class="otherLinkColour">EnumRegionPredetectionMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumResultCoordinateType.html" class="otherLinkColour">EnumResultCoordinateType</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumResultType.html" class="otherLinkColour">EnumResultType</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumScaleUpMode.html" class="otherLinkColour">EnumScaleUpMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumTerminatePhase.html" class="otherLinkColour">EnumTerminatePhase</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumTextFilterMode.html" class="otherLinkColour">EnumTextFilterMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumTextResultOrderMode.html" class="otherLinkColour">EnumTextResultOrderMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumTextureDetectionMode.html" class="EnumTextureDetectionMode">EnumTextureDetectionMode</a>
-                </li>
-            </ul>
-        </li>
-    </ul>
-</li>
-<li class="category">USEFUL RESOURCES</li>
-<li><a href="{{ site.js_release_notes }}" class="otherLinkColour">Release Notes</a>
-    <ul>
-        <li><a href="{{ site.js_release_notes }}js-9.html" class="otherLinkColour">Version
-                                                9.x</a></li>
-        <li><a href="{{ site.js_release_notes }}js-8.html" class="otherLinkColour">Version
-                                                                8.x</a></li>
-        <li><a href="{{ site.js_release_notes }}js-7.html" class="otherLinkColour">Version 7.6
-                                                and below</a>
-        </li>
-    </ul>
-</li>
-<li><a href="{{ site.js }}upgrade-guide/" class="otherLinkColour">Upgrade Instructions</a></li>
-<li><a href="{{ site.js }}faq/" class="otherLinkColour">FAQ</a></li>
\ 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 @@
-<li>
-    <a href="{{ site.js }}" class="otherLinkColour">Introduction</a>
-</li>
-<li class="category">DEVELOPMENT</li>
-<li><a href="{{ site.js }}user-guide/default.html">User Guide</a>
-    <ul>
-        <li><a href="{{ site.js }}user-guide/index.html" class="otherLinkColour">Get Started</a> </li>
-        <li><a href="{{ site.js }}user-guide/advanced-usage.html" class="otherLinkColour">Advanced Usage</a> </li>
-        <li><a href="{{ site.js }}user-guide/explore-features/index.html" class="otherLinkColour">Explore Features</a>
-            <ul>
-                <li><a class="otherLinkColour">Basic Features</a>
-                    <ul>
-                        <li><a href="{{ site.features }}barcode-formats-and-count.html?lang=js" class="otherLinkColour">Specify barcode formats and count</a></li>
-                        <li><a href="{{ site.features }}barcode-scan-region.html?lang=js" class="otherLinkColour">Read a specific area/region</a></li>
-                        <li><a href="{{ site.features }}customize-the-ui.html?lang=js" class="otherLinkColour">Customize the UI</a></li>
-                    </ul>
-                </li>
-                <li><a class="otherLinkColour">Handle Different Cases</a>
-                    <ul>
-                        <li><a href="{{ site.features }}read-inverted-barcodes.html?lang=js" class="otherLinkColour">Read inverted barcodes</a></li>
-                        <li><a href="{{ site.features }}read-deformed-barcodes.html?lang=js" class="otherLinkColour">Read deformed barcodes</a></li>
-                        <li><a href="{{ site.features }}read-incomplete-barcodes.html?lang=js" class="otherLinkColour">Read incomplete barcodes</a></li>
-                        <li><a href="{{ site.features }}read-dense-barcodes.html?lang=js" class="otherLinkColour">Read dense barcodes</a></li>
-                        <li><a href="{{ site.features }}read-a-large-image.html?lang=js" class="otherLinkColour">Read barcodes from a large image</a></li>
-                        <li><a href="{{ site.features }}read-barcodes-with-small-module-size.html?lang=js" class="otherLinkColour">Read barcodes with small module size</a></li>
-                        <li><a href="{{ site.features }}read-barcodes-with-imbalanced-colour.html?lang=js" class="otherLinkColour">Read images with imbalanced colors</a></li>
-                        <li><a href="{{ site.features }}read-barcodes-with-uneven-lighting.html?lang=js" class="otherLinkColour">Read images with uneven lighting</a></li>
-                        <li><a href="{{ site.features }}read-images-with-texture.html?lang=js" class="otherLinkColour">Read images with texture</a></li>
-                        <li><a href="{{ site.features }}read-images-with-lots-of-text.html?lang=js" class="otherLinkColour">Read images with lots of text</a></li>
-                        <li><a href="{{ site.features }}preprocess-images.html?lang=js" class="otherLinkColour">Preprocess images to read difficult barcodes</a></li>
-                    </ul>
-                </li>
-                <li><a class="otherLinkColour">Barcode Results</a>
-                    <ul>
-                        <li><a href="{{ site.features }}get-confidence-rotation.html?lang=js" class="otherLinkColour">Get barcode confidence and rotation</a></li>
-                        <li><a href="{{ site.features }}get-barcode-location.html?lang=js" class="otherLinkColour">Get barcode location</a></li>
-                        <li><a href="{{ site.features }}get-detailed-info.html?lang=js" class="otherLinkColour">Get detailed barcode information</a></li>
-                        <li><a href="{{ site.features }}filter-and-sort.html?lang=js" class="otherLinkColour">Filter and sort decoding results</a></li>
-                        <li><a href="{{ site.features }}use-intermidiate-results.html?lang=js" class="otherLinkColour">Use intermediate results</a></li>
-                    </ul>
-                </li>
-                <li><a class="otherLinkColour">Advanced Features</a>
-                    <ul>
-                        <li><a href="{{ site.features }}control-terminate-phase.html?lang=js" class="otherLinkColour">Control when to terminate a decoding process</a></li>
-                        <li><a href="{{ site.features }}use-runtimesettings-or-templates.html?lang=js" class="otherLinkColour">Use RuntimeSettings or Templates</a></li>
-                        <li><a href="{{ site.features }}use-format-specific-configuration.html?lang=js" class="otherLinkColour">Use format specific configurations</a></li>
-                    </ul>
-                </li>
-            </ul>
-        </li>
-        <li><a href="{{ site.js }}user-guide/use-cases/index.html" class="otherLinkColour">Check Use Cases</a>
-            <ul>
-                <li><a href="{{ site.usecases }}scan-barcodes-as-input.html?lang=js" class="otherLinkColour">Scan barcodes as input</a></li>
-                <li><a href="{{ site.usecases }}scan-and-parse-AAMVA.html?lang=js" class="otherLinkColour">Scan and parse PDF417 on AAMVA documents</a></li>
-                <li><a href="{{ site.usecases }}read-dpm-codes.html?lang=js" class="otherLinkColour">Read DPM codes</a></li>
-                <li><a href="{{ site.usecases }}read-postal-codes.html?lang=js" class="otherLinkColour">Read Postal codes</a></li>
-            </ul>
-        </li>
-    </ul>
-</li>
-<li><a href="{{ site.js }}samples-demos/index.html" class="otherLinkColour">Samples and Demos</a>
-    <ul>
-        <li><a href="{{ site.js }}samples-demos/helloworld-index.html" class="otherLinkColour">Hello World</a>
-            <ul>
-                <li><a href="{{ site.js }}samples-demos/helloworld-minCode.html" class="otherLinkColour">Minimal
-                                                                Code</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-readFile.html" class="otherLinkColour">Read
-                                                                an Image</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-angular.html" class="otherLinkColour">Hello
-                                                                World with Angular</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-reactjs.html" class="otherLinkColour">Hello
-                                                                World with React</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-vuejs.html" class="otherLinkColour">Hello
-                                                                World with Vue 2</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-vuejsv3.html" class="otherLinkColour">Hello
-                                                                World with Vue 3</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-nextjs.html" class="otherLinkColour">Hello
-                                                                World with Next.js</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-nuxtjs.html" class="otherLinkColour">Hello
-                                                                World with NuxtJS</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-electron.html" class="otherLinkColour">Hello
-                                                                World with Electron</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-pwa.html" class="otherLinkColour">Hello
-                                                                World with PWA</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-requirejs.html" class="otherLinkColour">Hello
-                                                                World with RequireJS</a></li>
-            </ul>
-        </li>
-        <li><a href="{{ site.js }}samples-demos/ui-customization.html">UI
-                                                Customization</a>
-        </li>
-        <li><a href="{{ site.js }}samples-demos/parameter-settings.html">Parameter Settings</a>
-        </li>
-        <li><a href="{{ site.js }}samples-demos/usecases-index.html">Use Cases</a>
-            <ul>
-                <li><a href="{{ site.js }}samples-demos/usecase1-formfill.html">Fill A Form</a></li>
-                <li><a href="{{ site.js }}samples-demos/usecase2-pdf417DL.html">Read Drivers License</a></li>
-            </ul>
-        </li>
-        <li><a href="{{ site.js }}samples-demos/others-index.html">Other Samples</a>
-            <ul>
-                <li><a href="{{ site.js }}samples-demos/debug.html" class="otherLinkColour">Debug Sample</a></li>
-            </ul>
-        </li>
-        <li><a target="_blank" href="https://demo.dynamsoft.com/barcode-reader-js/" class="otherLinkColour refreshLink">Main Demo</a>
-        </li>
-    </ul>
-</li>
-<li><a href="{{ site.js_api }}" class="otherLinkColour">API Reference</a>
-    <ul>
-        <li><a href="{{ site.js_api }}BarcodeReader.html" class="otherLinkColour">BarcodeReader
-                                                for Images</a>
-        </li>
-        <li><a href="{{ site.js_api }}BarcodeScanner.html" class="otherLinkColour">BarcodeScanner for Video</a>
-        </li>
-        <li><a href="{{ site.js_api }}LicenseControl.html" class="otherLinkColour">License
-                                                Control</a></li>
-        <li><a href="{{ site.js_api }}InitializationControl.html" class="otherLinkColour">Initialization
-                                                Control</a></li>
-        <li><a href="{{ site.js_api }}InterfacesEnums.html" class="otherLinkColour">Interfaces
-                                                and Enums</a>
-            <ul>
-                <li><a href="{{ site.js_api }}interface/LocalizationResult.html" class="otherLinkColour">LocalizationResult</a></li>
-                <li><a href="{{ site.js_api }}interface/Region.html" class="otherLinkColour">Region</a></li>
-                <li><a href="{{ site.js_api }}interface/RuntimeSettings.html" class="otherLinkColour">RuntimeSettings</a></li>
-                <li><a href="{{ site.js_api }}interface/furthermodes.html" class="otherLinkColour">FurtherModes</a></li>
-                <li><a href="{{ site.js_api }}interface/ScannerPlayCallbackInfo.html" class="otherLinkColour">ScannerPlayCallbackInfo</a></li>
-                <li><a href="{{ site.js_api }}interface/ScanSettings.html" class="otherLinkColour">ScanSettings</a></li>
-                <li><a href="{{ site.js_api }}interface/TextResult.html" class="otherLinkColour">TextResult</a>
-                </li>
-                <li><a href="{{ site.js_api }}interface/VideoDeviceInfo.html" class="otherLinkColour">VideoDeviceInfo</a></li>
-                <li><a href="{{ site.js_api }}interface/imagesource.html" class="otherLinkColour">ImageSource</a></li>
-                <li><a href="{{ site.js_api }}interface/dsimage.html" class="otherLinkColour">DSImage</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeColourMode.html" class="otherLinkColour">EnumBarcodeColourMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeComplementMode.html" class="otherLinkColour">EnumBarcodeComplementMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeFormat_2.html" class="otherLinkColour">EnumBarcodeFormat_2</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeFormat.html" class="otherLinkColour">EnumBarcodeFormat</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBinarizationMode.html" class="otherLinkColour">EnumBinarizationMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumClarityCalculationMethod.html" class="otherLinkColour">EnumClarityCalculationMethod</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumClarityFilterMode.html" class="otherLinkColour">EnumClarityFilterMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumColourClusteringMode.html" class="otherLinkColour">EnumColourClusteringMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumColourConversionMode.html" class="otherLinkColour">EnumColourConversionMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumConflictMode.html" class="otherLinkColour">EnumConflictMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumDeblurMode.html" class="otherLinkColour">EnumDeblurMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumDeformationResistingMode.html" class="otherLinkColour">EnumDeformationResistingMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumDPMCodeReadingMode.html" class="otherLinkColour">EnumDPMCodeReadingMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumErrorCode.html" class="otherLinkColour">EnumErrorCode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumGrayscaleTransformationMode.html" class="otherLinkColour">EnumGrayscaleTransformationMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumImagePixelFormat.html" class="otherLinkColour">EnumImagePixelFormat</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumImagePreprocessingMode.html" class="otherLinkColour">EnumImagePreprocessingMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumIMResultDataType.html" class="otherLinkColour">EnumIMResultDataType</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumIntermediateResultSavingMode.html" class="otherLinkColour">EnumIntermediateResultSavingMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumIntermediateResultType.html" class="otherLinkColour">EnumIntermediateResultType</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumLocalizationMode.html" class="otherLinkColour">EnumLocalizationMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumPDFReadingMode.html" class="otherLinkColour">EnumPDFReadingMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumQRCodeErrorCorrectionLevel.html" class="otherLinkColour">EnumQRCodeErrorCorrectionLevel</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumRegionPredetectionMode.html" class="otherLinkColour">EnumRegionPredetectionMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumResultCoordinateType.html" class="otherLinkColour">EnumResultCoordinateType</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumResultType.html" class="otherLinkColour">EnumResultType</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumScaleUpMode.html" class="otherLinkColour">EnumScaleUpMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumTerminatePhase.html" class="otherLinkColour">EnumTerminatePhase</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumTextFilterMode.html" class="otherLinkColour">EnumTextFilterMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumTextResultOrderMode.html" class="otherLinkColour">EnumTextResultOrderMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumTextureDetectionMode.html" class="EnumTextureDetectionMode">EnumTextureDetectionMode</a>
-                </li>
-            </ul>
-        </li>
-    </ul>
-</li>
-<li class="category">USEFUL RESOURCES</li>
-<li><a href="{{ site.js_release_notes }}" class="otherLinkColour">Release Notes</a>
-    <ul>
-        <li><a href="{{ site.js_release_notes }}js-9.html" class="otherLinkColour">Version
-                                                9.x</a></li>
-        <li><a href="{{ site.js_release_notes }}js-8.html" class="otherLinkColour">Version
-                                                                8.x</a></li>
-        <li><a href="{{ site.js_release_notes }}js-7.html" class="otherLinkColour">Version 7.6
-                                                and below</a>
-        </li>
-    </ul>
-</li>
-<li><a href="{{ site.js }}upgrade-guide/" class="otherLinkColour">Upgrade Instructions</a></li>
-<li><a href="{{ site.js }}faq/" class="otherLinkColour">FAQ</a>
-    <ul>
-        <li>
-            <a href="{{ site.js }}faq/ways-to-copy-dbr-js-deployable-files.html">How to get a copy of Dbr JS deployable files ?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/javascript-sdk-offline-mode-use.html">How to use the JavaScript SDK in offline mode?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/server-requirements-for-dbr-js-deployment.html">What are the server requirements for Dbr JS deployment?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/pros-and-cons-of-cdn.html">What are the pros and cons of using the CDN?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/differences-between-full-and-compact-editions.html">What are the differences between the compact edition and the full edition?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/is-https-required.html">Is HTTPS absolutely required?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/use-of-onFrameRead-and-onUnduplicateRead.html">When to use onFrameRead and when to use onUnduplicateRead?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/call-loadWasm-proactively.html">Do we have to call loadWasm proactively?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/differences-between-updateScanSettings-updateVideoSettings-and-updateRuntimeSettings.html">Differences between updateScanSettings/updateVideoSettings/updateRuntimeSettings?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/different-ways-to-customize-ui.html">What are the different ways to customize the UI?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/get-sdk-logs.html">How to get the logs for the JavaScript SDK?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/upgrade-old-to-new.html">How to upgrade from an old to new version?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/change-domain-binding-of-product-key.html">How to change the domain binding of your product key?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/when-singleFrameMode-is-enabled.html">When is singleFrameMode enabled?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/get-intermediate-result-images.html">How to get intermediate result images?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/read-inverted-image.html">How to read an inverted image?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/read-from-existing-files.html">How to read barcodes from existing files?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/formats-supported-for-existing-files.html">Formats supported when reading barcodes from files in local memory?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/read-text-from-barcode-image.html">How to read the text info usually located around a barcode image?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/scan-US-drivers-license.html">How to scan the barcode on a US Driver"s License and get the first name, last name, DOB, etc.?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/add-remove-beep-sound.html">How to add/remove a "beep" sound once a barcode is found?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/nodejs-implementation.html">How do I create a NodeJS application using the SDK?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/check-current-version.html">How to check the version of the JavaScript SDK I am currently using?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/unable-to-scan-aztec-code.html">Why am I unable to scan an Aztec code in the helloworld sample?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/stop-camera-to-open-right-away.html">Enable the camera on the click of a button?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/difference-between-barcodeReader-and-barcodeScanner.html">What is the difference between the BarcodeReader class and the BarcodeScanner class?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/newline-character-not-being-rendered.html">Why are newline characters not being rendered when displaying the barcode results in a textbox?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/resolve-magic-word.html">How to resolve the expected magic word error that occurs when using the JavaScript SDK?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/general-troubleshooting-steps-for-decode-failure.html">What are the general troubleshooting steps if an image fails to decode with the JavaScript SDK?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/difference-between-bestspeed-and-bestcoverage.html">What are the differences between the "speed", "coverage", "balance, and "single" runtime templates?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/avoid-incorrect-barcode-results.html">How to avoid incorrect barcode results?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/how-license-tracking-works.html">How does the license work - Per Scan, Per Device, Per Concurrent Device?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/new-license-required-per-device-licensing.html">When is a new license required in per-device licensing model?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/delay-when-open-camera.html">How to get rid of the delay when opening the camera?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/hide-laser-message-ui.html">How can I hide the laser bar and Dynamsoft message in the default UI of the BarcodeScanner?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/ios-16-incompatible.html">Why is the Javascript SDK not recognizing any barcodes on iOS 16.4?</a>
-        </li>
-    </ul>
-</li>
-<li class="category">OTHERS</li>
-<li><a target="_blank" href="{{ site.introduction }}index.html" class="otherLinkColour refreshLink">Develop for Mobile or Server/Desktop</a></li>
\ 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 @@
-<li>
-    <a href="{{ site.js }}" class="otherLinkColour">Introduction</a>
-</li>
-<li class="category">DEVELOPMENT</li>
-<li><a href="{{ site.js }}user-guide/default.html">User Guide</a>
-    <ul>
-        <li><a href="{{ site.js }}user-guide/index.html" class="otherLinkColour">Get Started</a> </li>
-        <li><a href="{{ site.js }}user-guide/advanced-usage.html" class="otherLinkColour">Advanced Usage</a>
-        </li>
-        <li><a href="{{ site.js }}user-guide/explore-features/index.html" class="otherLinkColour">Explore
-                                Features</a>
-            <ul>
-                <li><a class="otherLinkColour">Basic Features</a>
-                    <ul>
-                        <li><a href="{{ site.features }}barcode-formats-and-count.html?lang=js" class="otherLinkColour">Specify barcode formats and
-                                                                count</a></li>
-                        <li><a href="{{ site.features }}barcode-scan-region.html?lang=js" class="otherLinkColour">Read a
-                                                                specific area/region</a></li>
-                        <li><a href="{{ site.features }}customize-the-ui.html?lang=js" class="otherLinkColour">Customize
-                                                                the UI</a></li>
-                    </ul>
-                </li>
-                <li><a class="otherLinkColour">Handle Different Cases</a>
-                    <ul>
-                        <li><a href="{{ site.features }}read-inverted-barcodes.html?lang=js" class="otherLinkColour">Read inverted barcodes</a></li>
-                        <li><a href="{{ site.features }}read-deformed-barcodes.html?lang=js" class="otherLinkColour">Read deformed barcodes</a></li>
-                        <li><a href="{{ site.features }}read-incomplete-barcodes.html?lang=js" class="otherLinkColour">Read incomplete barcodes</a>
-                        </li>
-                        <li><a href="{{ site.features }}read-dense-barcodes.html?lang=js" class="otherLinkColour">Read
-                                                                dense barcodes</a></li>
-                        <li><a href="{{ site.features }}read-a-large-image.html?lang=js" class="otherLinkColour">Read
-                                                                barcodes from a large image</a></li>
-                        <li><a href="{{ site.features }}read-barcodes-with-small-module-size.html?lang=js" class="otherLinkColour">Read barcodes with small module
-                                                                size</a></li>
-                        <li><a href="{{ site.features }}read-barcodes-with-imbalanced-colour.html?lang=js" class="otherLinkColour">Read images with imbalanced
-                                                                colors</a></li>
-                        <li><a href="{{ site.features }}read-barcodes-with-uneven-lighting.html?lang=js" class="otherLinkColour">Read images with uneven
-                                                                lighting</a></li>
-                        <li><a href="{{ site.features }}read-images-with-texture.html?lang=js" class="otherLinkColour">Read images with texture</a>
-                        </li>
-                        <li><a href="{{ site.features }}read-images-with-lots-of-text.html?lang=js" class="otherLinkColour">Read images with lots of
-                                                                text</a></li>
-                        <li><a href="{{ site.features }}preprocess-images.html?lang=js" class="otherLinkColour">Preprocess images to read
-                                                                difficult barcodes</a></li>
-                    </ul>
-                </li>
-                <li><a class="otherLinkColour">Barcode Results</a>
-                    <ul>
-                        <li><a href="{{ site.features }}get-confidence-rotation.html?lang=js" class="otherLinkColour">Get barcode confidence and
-                                                                rotation</a></li>
-                        <li><a href="{{ site.features }}get-barcode-location.html?lang=js" class="otherLinkColour">Get
-                                                                barcode location</a></li>
-                        <li><a href="{{ site.features }}get-detailed-info.html?lang=js" class="otherLinkColour">Get
-                                                                detailed barcode information</a></li>
-                        <li><a href="{{ site.features }}filter-and-sort.html?lang=js" class="otherLinkColour">Filter and
-                                                                sort decoding results</a></li>
-                        <li><a href="{{ site.features }}use-intermidiate-results.html?lang=js" class="otherLinkColour">Use intermediate results</a>
-                        </li>
-                    </ul>
-                </li>
-                <li><a class="otherLinkColour">Advanced Features</a>
-                    <ul>
-                        <li><a href="{{ site.features }}control-terminate-phase.html?lang=js" class="otherLinkColour">Control when to terminate a
-                                                                decoding process</a></li>
-                        <li><a href="{{ site.features }}use-runtimesettings-or-templates.html?lang=js" class="otherLinkColour">Use RuntimeSettings or
-                                                                Templates</a></li>
-                        <li><a href="{{ site.features }}use-format-specific-configuration.html?lang=js" class="otherLinkColour">Use format specific
-                                                                configurations</a></li>
-                    </ul>
-                </li>
-            </ul>
-        </li>
-        <li><a href="{{ site.js }}user-guide/use-cases/index.html" class="otherLinkColour">Check Use Cases</a>
-            <ul>
-                <li><a href="{{ site.usecases }}scan-barcodes-as-input.html?lang=js" class="otherLinkColour">Scan
-                                                barcodes as input</a></li>
-                <li><a href="{{ site.usecases }}scan-and-parse-AAMVA.html?lang=js" class="otherLinkColour">Scan and
-                                                parse PDF417 on AAMVA documents</a></li>
-                <li><a href="{{ site.usecases }}read-dpm-codes.html?lang=js" class="otherLinkColour">Read DPM codes</a>
-                </li>
-                <li><a href="{{ site.usecases }}read-postal-codes.html?lang=js" class="otherLinkColour">Read Postal
-                                                codes</a></li>
-            </ul>
-        </li>
-         </ul>
-</li>
-<li><a href="{{ site.js }}samples-demos/index.html" class="otherLinkColour">Samples and Demos</a>
-    <ul>
-        <li><a href="{{ site.js }}samples-demos/helloworld-index.html" class="otherLinkColour">Hello World</a>
-            <ul>
-                <li><a href="{{ site.js }}samples-demos/helloworld-minCode.html" class="otherLinkColour">Minimal
-                                                Code</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-angular.html" class="otherLinkColour">Hello
-                                                World with Angular</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-reactjs.html" class="otherLinkColour">Hello
-                                                World with React</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-vuejs.html" class="otherLinkColour">Hello
-                                                World with Vue 2</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-vuejsv3.html" class="otherLinkColour">Hello
-                                                World with Vue 3</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-nextjs.html" class="otherLinkColour">Hello
-                                                World with Next.js</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-nuxtjs.html" class="otherLinkColour">Hello
-                                                World with NuxtJS</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-electron.html" class="otherLinkColour">Hello
-                                                World with Electron</a></li>
-                <li><a href="{{ site.js }}samples-demos/helloworld-pwa.html" class="otherLinkColour">Hello
-                                                World with PWA</a></li>
-            </ul>
-        </li>
-        <li><a href="{{ site.js }}samples-demos/ui-customization.html">UI
-                                Customization</a>
-        </li>
-        <li><a href="{{ site.js }}samples-demos/parameter-settings.html">Parameter Settings</a>
-        </li>
-        <li><a href="{{ site.js }}samples-demos/use-cases.html">Use Cases</a> </li>
-        <li><a href="{{ site.js }}samples-demos/debug.html">Debug Sample</a></li>
-        <li><a target="_blank" href="https://demo.dynamsoft.com/barcode-reader-js/" class="otherLinkColour refreshLink">Main Demo &nearrow;</a>
-        </li>
-    </ul>
-</li>
-<li><a href="{{ site.js_api }}" class="otherLinkColour">API Reference</a>
-    <ul>
-        <li><a href="{{ site.js_api }}BarcodeReader.html" class="otherLinkColour">BarcodeReader
-                                for Images</a>
-        </li>
-        <li><a href="{{ site.js_api }}BarcodeScanner.html" class="otherLinkColour">BarcodeScanner for Video</a>
-        </li>
-        <li><a href="{{ site.js_api }}LicenseControl.html" class="otherLinkColour">License
-                                Control</a></li>
-        <li><a href="{{ site.js_api }}InitializationControl.html" class="otherLinkColour">Initialization
-                                Control</a></li>
-        <li><a href="{{ site.js_api }}InterfacesEnums.html" class="otherLinkColour">Interfaces
-                                and Enums</a>
-            <ul>
-                <li><a href="{{ site.js_api }}interface/LocalizationResult.html" class="otherLinkColour">LocalizationResult</a></li>
-                <li><a href="{{ site.js_api }}interface/Region.html" class="otherLinkColour">Region</a>
-                </li>
-                <li><a href="{{ site.js_api }}interface/RuntimeSettings.html" class="otherLinkColour">RuntimeSettings</a></li>
-                <li><a href="{{ site.js_api }}interface/furthermodes.html" class="otherLinkColour">FurtherModes</a></li>
-                <li><a href="{{ site.js_api }}interface/ScannerPlayCallbackInfo.html" class="otherLinkColour">ScannerPlayCallbackInfo</a></li>
-                <li><a href="{{ site.js_api }}interface/ScanSettings.html" class="otherLinkColour">ScanSettings</a></li>
-                <li><a href="{{ site.js_api }}interface/TextResult.html" class="otherLinkColour">TextResult</a>
-                </li>
-                <li><a href="{{ site.js_api }}interface/VideoDeviceInfo.html" class="otherLinkColour">VideoDeviceInfo</a></li>
-                <li><a href="{{ site.js_api }}interface/imagesource.html" class="otherLinkColour">ImageSource</a></li>
-                <li><a href="{{ site.js_api }}interface/dsimage.html" class="otherLinkColour">DSImage</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeColourMode.html" class="otherLinkColour">EnumBarcodeColourMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeComplementMode.html" class="otherLinkColour">EnumBarcodeComplementMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeFormat_2.html" class="otherLinkColour">EnumBarcodeFormat_2</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumBarcodeFormat.html" class="otherLinkColour">EnumBarcodeFormat</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumBinarizationMode.html" class="otherLinkColour">EnumBinarizationMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumClarityCalculationMethod.html" class="otherLinkColour">EnumClarityCalculationMethod</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumClarityFilterMode.html" class="otherLinkColour">EnumClarityFilterMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumColourClusteringMode.html" class="otherLinkColour">EnumColourClusteringMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumColourConversionMode.html" class="otherLinkColour">EnumColourConversionMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumConflictMode.html" class="otherLinkColour">EnumConflictMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumDeblurMode.html" class="otherLinkColour">EnumDeblurMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumDeformationResistingMode.html" class="otherLinkColour">EnumDeformationResistingMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumDPMCodeReadingMode.html" class="otherLinkColour">EnumDPMCodeReadingMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumErrorCode.html" class="otherLinkColour">EnumErrorCode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumGrayscaleTransformationMode.html" class="otherLinkColour">EnumGrayscaleTransformationMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumImagePixelFormat.html" class="otherLinkColour">EnumImagePixelFormat</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumImagePreprocessingMode.html" class="otherLinkColour">EnumImagePreprocessingMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumIMResultDataType.html" class="otherLinkColour">EnumIMResultDataType</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumIntermediateResultSavingMode.html" class="otherLinkColour">EnumIntermediateResultSavingMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumIntermediateResultType.html" class="otherLinkColour">EnumIntermediateResultType</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumLocalizationMode.html" class="otherLinkColour">EnumLocalizationMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumPDFReadingMode.html" class="otherLinkColour">EnumPDFReadingMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumQRCodeErrorCorrectionLevel.html" class="otherLinkColour">EnumQRCodeErrorCorrectionLevel</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumRegionPredetectionMode.html" class="otherLinkColour">EnumRegionPredetectionMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumResultCoordinateType.html" class="otherLinkColour">EnumResultCoordinateType</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumResultType.html" class="otherLinkColour">EnumResultType</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumScaleUpMode.html" class="otherLinkColour">EnumScaleUpMode</a>
-                </li>
-                <li><a href="{{ site.js_api }}enum/EnumTerminatePhase.html" class="otherLinkColour">EnumTerminatePhase</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumTextFilterMode.html" class="otherLinkColour">EnumTextFilterMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumTextResultOrderMode.html" class="otherLinkColour">EnumTextResultOrderMode</a></li>
-                <li><a href="{{ site.js_api }}enum/EnumTextureDetectionMode.html" class="EnumTextureDetectionMode">EnumTextureDetectionMode</a>
-                </li>
-            </ul>
-        </li>
-    </ul>
-</li>
-<li class="category">USEFUL RESOURCES</li>
-<li><a href="{{ site.js_release_notes }}" class="otherLinkColour">Release Notes</a>
-    <ul>
-        <li><a href="{{ site.js_release_notes }}js-9.html" class="otherLinkColour">Version
-                                9.x</a></li>
-        <li><a href="{{ site.js_release_notes }}js-8.html" class="otherLinkColour">Version
-                                8.x</a></li>
-        <li><a href="{{ site.js_release_notes }}js-7.html" class="otherLinkColour">Version 7.6
-                                and below</a>
-        </li>
-    </ul>
-</li>
-<li><a href="{{ site.js }}upgrade-guide/index.html" style="cursor:pointer;color:#3c3c3c">Upgrade Instructions</a>
-    <ul>
-        <li><a href="{{ site.js }}upgrade-guide/7-notice.html" class="otherLinkColour">EOS for v7.x</a></li>
-        <li><a href="{{ site.js }}upgrade-guide/8to9.html" class="otherLinkColour">Upgrade v8 to v9</a></li>
-        <li><a href="{{ site.js }}upgrade-guide/7to9.html" class="otherLinkColour">Upgrade v7 to v9</a></li>
-    </ul>
-</li>
-<li><a href="{{ site.js }}faq/" class="otherLinkColour">FAQ</a>
-    <ul>
-        <li>
-            <a href="{{ site.js }}faq/ways-to-copy-dbr-js-deployable-files.html">How to get a copy of Dbr JS
-                                deployable
-                                files ?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/javascript-sdk-offline-mode-use.html">How to use the JavaScript SDK in
-                                offline
-                                mode?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/server-requirements-for-dbr-js-deployment.html">What are the server
-                                requirements
-                                for Dbr JS deployment?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/pros-and-cons-of-cdn.html">What are the pros and cons of using the
-                                CDN?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/differences-between-full-and-compact-editions.html">What are the
-                                differences
-                                between the compact edition and the full edition?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/is-https-required.html">Is HTTPS absolutely required?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/use-of-onFrameRead-and-onUnduplicateRead.html">When to use onFrameRead
-                                and when to
-                                use onUniqueRead?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/call-loadWasm-proactively.html">Do we have to call loadWasm
-                                proactively?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/differences-between-updateScanSettings-updateVideoSettings-and-updateRuntimeSettings.html">Differences
-                                between updateScanSettings/updateVideoSettings/updateRuntimeSettings?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/different-ways-to-customize-ui.html">What are the different ways to
-                                customize the
-                                UI?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/get-sdk-logs.html">How to get the logs for the JavaScript SDK?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/upgrade-old-to-new.html">How do you upgrade to a newer version of the SDK?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/change-domain-binding-of-product-key.html">How to change the domain
-                                binding of
-                                your product key?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/when-singleFrameMode-is-enabled.html">When is singleFrameMode
-                                enabled?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/get-intermediate-result-images.html">How to get intermediate result
-                                images?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/read-inverted-image.html">How to read an inverted image?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/read-from-existing-files.html">How to read barcodes from existing
-                                files?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/formats-supported-for-existing-files.html">Formats supported when
-                                reading barcodes
-                                from files in local memory?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/read-text-from-barcode-image.html">How to read the text info usually
-                                located
-                                around a barcode image?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/scan-US-drivers-license.html">How to scan the barcode on a US Driver"s
-                                License and
-                                get the first name, last name, DOB, etc.?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/add-remove-beep-sound.html">How to add/remove a "beep" sound once a
-                                barcode is
-                                found?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/nodejs-implementation.html">How do I create a NodeJS application using
-                                the
-                                SDK?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/check-current-version.html">How to check the version of the JavaScript
-                                SDK I am
-                                currently using?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/unable-to-scan-aztec-code.html">Why am I unable to scan an Aztec code
-                                in the
-                                helloworld sample?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/stop-camera-to-open-right-away.html">Enable the camera on the click of
-                                a
-                                button?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/difference-between-barcodeReader-and-barcodeScanner.html">What is the
-                                difference
-                                between the BarcodeReader class and the BarcodeScanner class?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/newline-character-not-being-rendered.html">Why are newline characters
-                                not being
-                                rendered when displaying the barcode results in a textbox?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/resolve-magic-word.html">How to resolve the expected magic word error
-                                that occurs
-                                when using the JavaScript SDK?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/general-troubleshooting-steps-for-decode-failure.html">What are the
-                                general
-                                troubleshooting steps if an image fails to decode with the JavaScript SDK?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/difference-between-bestspeed-and-bestcoverage.html">What are the
-                                differences
-                                between the "speed", "coverage", "balance, and "single" runtime templates?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/avoid-incorrect-barcode-results.html">How to avoid incorrect barcode
-                                results?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/how-license-tracking-works.html">How does the license work - Per Scan,
-                                Per Device,
-                                Per Concurrent Device?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/new-license-required-per-device-licensing.html">When is a new license spot taken when using a per-device licensing model?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/delay-when-open-camera.html">How to get rid of the delay when opening
-                                the
-                                camera?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/hide-laser-message-ui.html">How can I hide the laser bar and Dynamsoft
-                                message in
-                                the default UI of the BarcodeScanner?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/ios-16-incompatible.html">Why is the Javascript SDK not recognizing
-                                any barcodes
-                                on iOS 16.4?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/check-camera.html">How to check the camera permissions programmatically in Dynamsoft Barcode Reader JavaScript SDK?</a>
-        </li>
-        <li>
-            <a href="{{ site.js }}faq/ios-17-readability.html">How do I resolve the issue of the Barcode Reader not recognizing any barcodes via video in iOS 16.7 or 17?</a>
-        </li>
-    </ul>
-</li>
-<li class="category">OTHERS</li>
-<li><a target="_blank" href="{{ site.introduction }}index.html" class="otherLinkColour refreshLink">Develop
-                for Mobile or Server/Desktop</a></li>
\ No newline at end of file
diff --git a/_includes/sidelist-programming/programming-javascript.html b/_includes/sidelist-programming/programming-javascript.html
index ba15d3af..53f3b3fe 100644
--- a/_includes/sidelist-programming/programming-javascript.html
+++ b/_includes/sidelist-programming/programming-javascript.html
@@ -359,25 +359,11 @@
               <ul>
                 <li>
                   <a
-                    href="{{ site.dcvb_js_api }}capture-vision-router/enum-capture-state.html?lang=js"
-                    class="otherLinkColour"
-                    >EnumCaptureState</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}capture-vision-router/enum-image-source-state.html?lang=js"
+                    href="{{ site.dcvb_enums }}core/image-source-state.html?lang=js"
                     class="otherLinkColour"
                     >EnumImageSourceState</a
                   >
                 </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}capture-vision-router/enum-preset-template.html?lang=js"
-                    class="otherLinkColour"
-                    >EnumPresetTemplate</a
-                  >
-                </li>
               </ul>
             </li>
           </ul>
@@ -547,35 +533,35 @@
               <ul>
                 <li>
                   <a
-                    href="{{ site.djs_api }}enum-barcode-format.html?lang=js"
+                    href="{{ site.dcvb_enums }}barcode-reader/barcode-format.html?lang=js"
                     class="otherLinkColour"
                     >EnumBarcodeFormat</a
                   >
                 </li>
                 <li>
                   <a
-                    href="{{ site.js_api }}enum-deblur-mode.html?lang=js"
+                    href="{{ site.dcvb_enums }}barcode-reader/deblur-mode.html?lang=js"
                     class="otherLinkColour"
                     >EnumDeblurMode</a
                   >
                 </li>
                 <li>
                   <a
-                    href="{{ site.js_api }}enum-extended-barcode-result-type.html?lang=js"
+                    href="{{ site.dcvb_enums }}barcode-reader/extended-barcode-result-type.html?lang=js"
                     class="otherLinkColour"
                     >EnumExtendedBarcodeResultType</a
                   >
                 </li>
                 <li>
                   <a
-                    href="{{ site.js_api }}enum-localization-mode.html?lang=js"
+                    href="{{ site.dcvb_enums }}barcode-reader/localization-mode.html?lang=js"
                     class="otherLinkColour"
                     >EnumLocalizationMode</a
                   >
                 </li>
                 <li>
                   <a
-                    href="{{ site.js_api }}enum-qr-code-error-correction-level.html?lang=js"
+                    href="{{ site.dcvb_enums }}barcode-reader/qr-code-error-correction-level.html?lang=js"
                     class="otherLinkColour"
                     >EnumQRCodeErrorCorrectionLevel</a
                   >
@@ -831,7 +817,7 @@
             </li>
           </ul>
         </li>
-        <!-- DCP -->
+        <!-- DCP
         <li>
           <a
             href="{{ site.dcp_js_api }}code-parser-module.html"
@@ -839,14 +825,13 @@
             >DynamsoftCodeParser</a
           >
           <ul>
-            <li lang="javascript"><a href="{{ site.code_types }}" class="otherLinkColour">Supported Code Types</a>
+            <li lang="android"><a href="{{ site.code_types }}" class="otherLinkColour">Supported Code Types</a>
               <ul>
-                  <li lang="javascript"><a href="{{ site.code_types }}mrtd.html" class="otherLinkColour">Machine Readable Travel Documents</a></li>
-                  <li lang="javascript"><a href="{{ site.code_types }}aamva-dl-id.html" class="otherLinkColour">North America DL/ID</a></li>
-                  <li lang="javascript"><a href="{{ site.code_types }}za-dl.html" class="otherLinkColour">South Africa Driver License</a></li>
-                  <li lang="javascript"><a href="{{ site.code_types }}aadhaar.html" class="otherLinkColour">Aadhaar</a></li>
-                  <li lang="javascript"><a href="{{ site.code_types }}vin.html" class="otherLinkColour">Vehicle Identification Number</a></li>
-                  <li lang="javascript"><a href="{{ site.code_types }}gs1-ai.html" class="otherLinkColour">GS1 Application Identifiers (AI)</a></li>
+                  <li lang="android"><a href="{{ site.code_types }}mrtd.html" class="otherLinkColour">Machine Readable Travel Documents</a></li>
+                  <li lang="android"><a href="{{ site.code_types }}aamva-dl-id.html" class="otherLinkColour">North America DL/ID</a></li>
+                  <li lang="android"><a href="{{ site.code_types }}za-dl.html" class="otherLinkColour">South Africa Driver License</a></li>
+                  <li lang="android"><a href="{{ site.code_types }}aadhaar.html" class="otherLinkColour">Aadhaar</a></li>
+                  <li lang="android"><a href="{{ site.code_types }}vin.html" class="otherLinkColour">Vehicle Identification Number</a></li>
               </ul>
             </li>
             <li>
@@ -887,14 +872,14 @@
               <ul>
                 <li>
                   <a
-                    href="{{ site.dcp_js_api }}enum-mapping-status.html"
+                    href="{{ site.dcvb_enums }}code-parser/mapping-status.html"
                     class="otherLinkColour"
                     >EnumMappingStatus</a
                   >
                 </li>
                 <li>
                   <a
-                    href="{{ site.dcp_js_api }}enum-validation-status.html"
+                    href="{{ site.dcvb_enums }}code-parser/validation-status.html"
                     class="otherLinkColour"
                     >EnumValidationStatus</a
                   >
@@ -902,7 +887,7 @@
               </ul>
             </li>
           </ul>
-        </li>   
+        </li>    -->
         <!-- License -->
         <li>
           <a
@@ -930,10 +915,18 @@
         <!-- Utility -->
         <li>
           <a
+            href="{{ site.dcvb_js_api }}utility/utility-module.html"
             class="otherLinkColour"
             >DynamsoftUtility</a
           >
           <ul>
+            <li>
+              <a
+                href="{{ site.dcvb_js_api }}utility/image-manager.html"
+                class="otherLinkColour"
+                >ImageManager</a
+              >
+            </li>
             <li>
               <a
                 href="{{ site.dcvb_js_api }}utility/multi-frame-result-cross-filter.html"
@@ -1001,13 +994,6 @@
                     >ColourImageUnit</a
                   >
                 </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/basic-structures/captured-result-base.html"
-                    class="otherLinkColour"
-                    >CapturedResultBase</a
-                  >
-                </li>
                 <li>
                   <a
                     href="{{ site.dcvb_js_api }}core/basic-structures/captured-result-item.html"
@@ -1057,13 +1043,6 @@
                     >Edge</a
                   >
                 </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/basic-structures/error-info.html"
-                    class="otherLinkColour"
-                    >ErrorInfo</a
-                  >
-                </li>
                 <li>
                   <a
                     href="{{ site.dcvb_js_api }}core/intermediate-results/enhanced-grayscale-image-unit.html"
@@ -1199,9 +1178,9 @@
                 </li>
                 <li>
                   <a
-                    href="{{ site.dcvb_js_api }}core/intermediate-results/scaled-colour-image-unit.html"
+                    href="{{ site.dcvb_js_api }}core/intermediate-results/scaled-down-colour-image-unit.html"
                     class="otherLinkColour"
-                    >ScaledColourImageUnit</a
+                    >ScaledDownColourImageUnit</a
                   >
                 </li>
                 <li>
@@ -1260,112 +1239,91 @@
               <ul>
                 <li>
                   <a
-                    href="{{ site.dcvb_js_api }}core/enum-buffer-overflow-protection-mode.html?lang=js"
+                    href="{{ site.dcvb_enums }}core/buffer-overflow-protection-mode.html?lang=js"
                     class="otherLinkColour"
                     >BufferOverflowProtectionMode</a
                   >
                 </li>
                 <li>
                   <a
-                    href="{{ site.dcvb_js_api }}core/enum-captured-result-item-type.html?lang=js"
+                    href="{{ site.dcvb_enums }}core/captured-result-item-type.html?lang=js"
                     class="otherLinkColour"
                     >CapturedResultItemType</a
                   >
                 </li>
                 <li>
                   <a
-                    href="{{ site.dcvb_js_api }}core/enum-colour-channel-usage-type.html?lang=js"
+                    href="{{ site.dcvb_enums }}core/colour-channel-usage-type.html?lang=js"
                     class="otherLinkColour"
                     >ColourChannelUsageType</a
                   >
                 </li>
                 <li>
                   <a
-                    href="{{ site.dcvb_js_api }}core/enum-corner-type.html?lang=js"
+                    href="{{ site.dcvb_enums }}core/corner-type.html?lang=js"
                     class="otherLinkColour"
                     >CornerType</a
                   >
                 </li>
                 <li>
                   <a
-                    href="{{ site.dcvb_js_api }}core/enum-cross-verification-status.html?lang=js"
-                    class="otherLinkColour"
-                    >CrossVerificationStatus</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/enum-error-code.html?lang=js"
+                    href="{{ site.dcvb_enums }}core/error-code.html?lang=js"
                     class="otherLinkColour"
                     >ErrorCode</a
                   >
                 </li>
                 <li>
                   <a
-                    href="{{ site.dcvb_js_api }}core/enum-grayscale-enhancement-mode.html?lang=js"
+                    href="{{ site.dcvb_enums }}core/grayscale-enhancement-mode.html?lang=js"
                     class="otherLinkColour"
                     >GrayscaleEnhancementMode</a
                   >
                 </li>
                 <li>
                   <a
-                    href="{{ site.dcvb_js_api }}core/enum-grayscale-transformation-mode.html?lang=js"
+                    href="{{ site.dcvb_enums }}core/grayscale-transformation-mode.html?lang=js"
                     class="otherLinkColour"
                     >GrayscaleTransformationMode</a
                   >
                 </li>
                 <li>
                   <a
-                    href="{{ site.dcvb_js_api }}core/enum-image-file-format.html?lang=js"
-                    class="otherLinkColour"
-                    >ImageFileFormat</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/enum-image-pixel-format.html?lang=js"
+                    href="{{ site.dcvb_enums }}core/image-pixel-format.html?lang=js"
                     class="otherLinkColour"
                     >ImagePixelFormat</a
                   >
                 </li>
                 <li>
                   <a
-                    href="{{ site.dcvb_js_api }}core/enum-image-tag-type.html?lang=js"
+                    href="{{ site.dcvb_enums }}core/image-tag-type.html?lang=js"
                     class="otherLinkColour"
                     >ImageTagType</a
                   >
                 </li>
                 <li>
                   <a
-                    href="{{ site.dcvb_js_api }}core/enum-intermediate-result-unit-type.html?lang=js"
+                    href="{{ site.dcvb_enums }}core/intermediate-result-unit-type.html?lang=js"
                     class="otherLinkColour"
                     >IntermediateResultUnitType</a
                   >
                 </li>
                 <li>
                   <a
-                    href="{{ site.dcvb_js_api }}core/enum-module-name.html?lang=js"
-                    class="otherLinkColour"
-                    >ModuleName</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dcvb_js_api }}core/enum-region-object-element-type.html?lang=js"
+                    href="{{ site.dcvb_enums }}core/region-object-element-type.html?lang=js"
                     class="otherLinkColour"
                     >RegionObjectElementType</a
                   >
                 </li>
                 <li>
                   <a
-                    href="{{ site.dcvb_js_api }}core/enum-section-type.html?lang=js"
+                    href="{{ site.dcvb_enums }}core/section-type.html?lang=js"
                     class="otherLinkColour"
                     >SectionType</a
                   >
                 </li>
                 <!-- <li>
                   <a
-                    href="{{ site.dcvb_js_api }}enum-transform-matrix-type.html?lang=js"
+                    href="{{ site.dcvb_enums }}core/transform-matrix-type.html?lang=js"
                     class="otherLinkColour"
                     >TransformMatrixType</a
                   >
@@ -1380,44 +1338,46 @@
 </li>
 {%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-understanding.html" -%}
 <li lang="javascript" class="category">USEFUL RESOURCES</li>
-<li><a href="{{ site.js_release_notes }}index.html" class="otherLinkColour">Release Notes</a>
-    <ul>
-        <li><a href="{{ site.js_release_notes }}js-11.html" class="otherLinkColour">Version
-                                11.x</a></li>
-        <li><a href="{{ site.js_release_notes }}js-10.html" class="otherLinkColour">Version
-                                10.x</a></li>
-        <li><a href="{{ site.js_release_notes }}js-9.html" class="otherLinkColour">Version
-                                9.x</a></li>
-    </ul>
-</li>
-<li>
-  <a
-    href="{{ site.js }}upgrade-guide/10to11.html"
-    style="cursor: pointer; color: #3c3c3c"
-    >Upgrade Instructions</a
+<li lang="javascript">
+  <a href="{{ site.js_release_notes }}index.html" class="otherLinkColour"
+    >Release Notes</a
   >
-  <!-- <ul>
+  <ul>
     <li>
-      <a href="{{ site.js }}upgrade-guide/9to10.html" class="otherLinkColour"
-        >Upgrade v9 to v10</a
+      <a href="{{ site.js_release_notes }}js-10.html" class="otherLinkColour"
+        >Version 10.x</a
       >
     </li>
     <li>
-      <a href="{{ site.js }}upgrade-guide/8to9.html" class="otherLinkColour"
-        >Upgrade v8 to v9</a
+      <a href="{{ site.js_release_notes }}js-9.html" class="otherLinkColour"
+        >Version 9.x</a
       >
     </li>
     <li>
-      <a href="{{ site.js }}upgrade-guide/7to9.html" class="otherLinkColour"
-        >Upgrade v7 to v9</a
+      <a href="{{ site.js_release_notes }}js-8.html" class="otherLinkColour"
+        >Version 8.x</a
       >
     </li>
     <li>
-      <a href="{{ site.js }}upgrade-guide/7-notice.html" class="otherLinkColour"
-        >EOS for v7.x</a
+      <a href="{{ site.js_release_notes }}js-7.html" class="otherLinkColour"
+        >Version 7.6.0 and below</a
       >
     </li>
-  </ul> -->
+  </ul>
+</li>
+<li>
+  <a
+    href="{{ site.js }}upgrade-guide/index.html"
+    style="cursor: pointer; color: #3c3c3c"
+    >Upgrade Instructions</a
+  >
+  <ul>
+    <li>
+      <a href="{{ site.js }}upgrade-guide/9to10.html" class="otherLinkColour"
+        >Upgrade v9 to v10</a
+      >
+    </li>
+  </ul>
 </li>
 
 <li>
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 @@
-<li lang="javascript" class="category">DEVELOPMENT</li>
-<li lang="javascript">
-  <a
-    href="{{ site.dcvb_js }}user-guide/index.html"
-    style="cursor: pointer; color: #3c3c3c"
-    >User Guide</a
-  >
-  <ul lang="javascript">
-    <li lang="javascript">
-      <a target="_blank"
-        href="{{ site.dbr_js }}user-guide/barcode-scanner.html"
-        style="cursor: pointer; color: #3c3c3c"
-        >Read Barcodes</a
-      >
-    </li>
-    <li lang="javascript">
-      <a target="_blank"
-        href="https://www.dynamsoft.com/mrz-scanner/docs/web/guides/mrz-scanner.html"
-        style="cursor: pointer; color: #3c3c3c"
-        >Scan MRZ</a
-      >
-    </li>
-    <li lang="javascript">
-      <a target="_blank"
-        href="https://www.dynamsoft.com/mobile-web-capture/docs/guides/document-scanner.html"
-        style="cursor: pointer; color: #3c3c3c"
-        >Detect & Normalize Documents</a
-      >
-    </li>
-    <!-- <li>
-      <a class="otherLinkColour">Explore Features</a>
-      <ul>
-        <li lang="javascript">
-          <a
-            href="{{ site.dce_js }}user-guide/index.html"
-            class="otherLinkColour"
-            >Handle Cameras</a
-          >
-        </li>
-        <li lang="javascript">
-          <a
-            href="{{ site.dcp_js }}user-guide/index.html"
-            class="otherLinkColour"
-            >Parse Data</a
-          >
-        </li>
-      </ul>
-    </li> -->
-  </ul>
-</li>
-<li lang="javascript">
-  <a href="{{ site.dcvb_js_api }}index.html" class="otherLinkColour"
-    >API Reference</a
-  >
-  <ul lang="javascript">
-    <!-- CVR -->
-    <li>
-      <a
-        href="{{ site.dcvb_js_api }}capture-vision-router/capture-vision-router-module.html"
-        class="otherLinkColour"
-        >DynamsoftCaptureVisionRouter</a
-      >
-      <ul>
-        <li>
-          <a class="otherLinkColour">CaptureVisionRouter</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}capture-vision-router/instantiate.html"
-                class="otherLinkColour"
-                >Create and Destroy Instances</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}capture-vision-router/single-image-processing.html"
-                class="otherLinkColour"
-                >Single-Image Processing</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}capture-vision-router/multiple-image-processing.html"
-                class="otherLinkColour"
-                >Multiple-Image Processing</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}capture-vision-router/settings.html"
-                class="otherLinkColour"
-                >Settings</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}capture-vision-router/preset-templates.html"
-                class="otherLinkColour"
-                >Preset Templates</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}capture-vision-router/intermediate-result.html"
-                class="otherLinkColour"
-                >Intermediate Result</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}capture-vision-router/auxiliary.html"
-                class="otherLinkColour"
-                >Auxiliaries</a
-              >
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a>Classes</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}capture-vision-router/buffered-items-manager.html"
-                class="otherLinkColour"
-                >BufferedItemsManager</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}capture-vision-router/capture-vision-router-module-class.html"
-                class="otherLinkColour"
-                >CaptureVisionRouterModule</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}capture-vision-router/captured-result-receiver.html"
-                class="otherLinkColour"
-                >CapturedResultReceiver</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}capture-vision-router/intermediate-result-manager.html"
-                class="otherLinkColour"
-                >IntermediateResultManager</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}capture-vision-router/intermediate-result-receiver.html"
-                class="otherLinkColour"
-                >IntermediateResultReceiver</a
-              >
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a class="otherLinkColour">Interfaces</a>
-          <ul>
-            <!-- <li>
-              <a
-                href="{{ site.dcvb_js_api }}capture-vision-router/interfaces/image-source-state-listener.html"
-                class="otherLinkColour"
-                >ImageSourceStateListener</a
-              >
-            </li> -->
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}capture-vision-router/interfaces/captured-result.html"
-                class="otherLinkColour"
-                >CapturedResult</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}capture-vision-router/interfaces/simplified-capture-vision-settings.html"
-                class="otherLinkColour"
-                >SimplifiedCaptureVisionSettings</a
-              >
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a class="otherLinkColour">Enumerations</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}capture-vision-router/enum-capture-state.html?lang=js"
-                class="otherLinkColour"
-                >EnumCaptureState</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}capture-vision-router/enum-image-source-state.html?lang=js"
-                class="otherLinkColour"
-                >EnumImageSourceState</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}capture-vision-router/enum-preset-template.html?lang=js"
-                class="otherLinkColour"
-                >EnumPresetTemplate</a
-              >
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-    <!-- DBR -->
-    <li lang="javascript">
-      <a
-        href="{{ site.dbr_js_api }}barcode-reader-module.html"
-        class="otherLinkColour"
-        >DynamsoftBarcodeReader</a
-      >
-      <ul>
-        <li>
-          <a
-            href="{{ site.dbr_js_api }}barcode-reader-module-class.html"
-            class="otherLinkColour"
-            >BarcodeReaderModule</a
-          >
-        </li>
-        <li>
-          <a class="otherLinkColour">Interfaces</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.dbr_js_api }}interfaces/aztec-details.html"
-                class="otherLinkColour"
-                >AztecDetails</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dbr_js_api }}interfaces/barcode-details.html"
-                class="otherLinkColour"
-                >BarcodeDetails</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dbr_js_api }}interfaces/barcode-result-item.html"
-                class="otherLinkColour"
-                >BarcodeResultItem</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dbr_js_api }}interfaces/candidate-barcode-zone.html"
-                class="otherLinkColour"
-                >CandidateBarcodeZone</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dbr_js_api }}interfaces/candidate-barcode-zones-unit.html"
-                class="otherLinkColour"
-                >CandidateBarcodeZonesUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dbr_js_api }}interfaces/complemented-barcode-image-unit.html"
-                class="otherLinkColour"
-                >ComplementedBarcodeImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dbr_js_api }}interfaces/datamatrix-details.html"
-                class="otherLinkColour"
-                >DataMatrixDetails</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dbr_js_api }}interfaces/decoded-barcode-element.html"
-                class="otherLinkColour"
-                >DecodedBarcodeElement</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dbr_js_api }}interfaces/decoded-barcodes-result.html"
-                class="otherLinkColour"
-                >DecodedBarcodesResult</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dbr_js_api }}interfaces/decoded-barcodes-unit.html"
-                class="otherLinkColour"
-                >DecodedBarcodesUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dbr_js_api }}interfaces/deformation-resisted-barcode.html"
-                class="otherLinkColour"
-                >DeformationResistedBarcode</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dbr_js_api }}interfaces/deformation-resisted-barcode-image-unit.html"
-                class="otherLinkColour"
-                >DeformationResistedBarcodeImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dbr_js_api }}interfaces/extended-barcode-result.html"
-                class="otherLinkColour"
-                >ExtendedBarcodeResult</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dbr_js_api }}interfaces/localized-barcode-element.html"
-                class="otherLinkColour"
-                >LocalizedBarcodeElement</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dbr_js_api }}interfaces/localized-barcodes-unit.html"
-                class="otherLinkColour"
-                >LocalizedBarcodesUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dbr_js_api }}interfaces/oned-code-details.html"
-                class="otherLinkColour"
-                >OneDCodeDetails</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dbr_js_api }}interfaces/pdf417-details.html"
-                class="otherLinkColour"
-                >PDF417Details</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dbr_js_api }}interfaces/qr-code-details.html"
-                class="otherLinkColour"
-                >QRCodeDetails</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dbr_js_api }}interfaces/scaled-barcode-image-unit.html"
-                class="otherLinkColour"
-                >ScaledBarcodeImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dbr_js_api }}interfaces/simplified-barcode-reader-settings.html"
-                class="otherLinkColour"
-                >SimplifiedBarcodeReaderSettings</a
-              >
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a class="otherLinkColour">Enumerations</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.dbr_js_api }}enum-barcode-format.html?lang=js"
-                class="otherLinkColour"
-                >EnumBarcodeFormat</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dbr_js_api }}enum-deblur-mode.html?lang=js"
-                class="otherLinkColour"
-                >EnumDeblurMode</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dbr_js_api }}enum-extended-barcode-result-type.html?lang=js"
-                class="otherLinkColour"
-                >EnumExtendedBarcodeResultType</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dbr_js_api }}enum-localization-mode.html?lang=js"
-                class="otherLinkColour"
-                >EnumLocalizationMode</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dbr_js_api }}enum-qr-code-error-correction-level.html?lang=js"
-                class="otherLinkColour"
-                >EnumQRCodeErrorCorrectionLevel</a
-              >
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-    <!-- DLR -->
-    <li lang="javascript">
-      <a
-        href="{{ site.dlr_js_api }}label-recognizer-module.html"
-        class="otherLinkColour"
-        >DynamsoftLabelRecognizer</a
-      >
-      <ul>
-        <li>
-          <a
-            href="{{ site.dlr_js_api }}label-recognizer-module-class.html"
-            class="otherLinkColour"
-            >LabelRecognizerModule</a
-          >
-        </li>
-        <li>
-          <a class="otherLinkColour">Interfaces</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.dlr_js_api }}interfaces/simplified-label-recognizer-settings.html"
-                class="otherLinkColour"
-                >SimplifiedLabelRecognizerSettings</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dlr_js_api }}interfaces/buffered-character-item.html"
-                class="otherLinkColour"
-                >BufferedCharacterItem</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dlr_js_api }}interfaces/buffered-character-item-set.html"
-                class="otherLinkColour"
-                >BufferedCharacterItemSet</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dlr_js_api }}interfaces/character-cluster.html"
-                class="otherLinkColour"
-                >CharacterCluster</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dlr_js_api }}interfaces/character-result.html"
-                class="otherLinkColour"
-                >CharacterResult</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dlr_js_api }}interfaces/localized-textline-element.html"
-                class="otherLinkColour"
-                >LocalizedTextLineElement</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dlr_js_api }}interfaces/recognized-textline-element.html"
-                class="otherLinkColour"
-                >RecognizedTextLineElement</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dlr_js_api }}interfaces/localized-textlines-unit.html"
-                class="otherLinkColour"
-                >LocalizedTextLinesUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dlr_js_api }}interfaces/recognized-textlines-unit.html"
-                class="otherLinkColour"
-                >RecognizedTextLinesUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dlr_js_api }}interfaces/textline-result-item.html"
-                class="otherLinkColour"
-                >TextLineResultItem</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dlr_js_api }}interfaces/recognized-textlines-result.html"
-                class="otherLinkColour"
-                >RecognizedTextLinesResult</a
-              >
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a class="otherLinkColour">Enumerations</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.dlr_js_api }}enum-raw-text-line-status.html?lang=js"
-                class="otherLinkColour"
-                >EnumRawTextLineStatus</a
-              >
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-    <!-- DDN -->
-    <li lang="javascript">
-      <a
-        href="{{ site.ddn_js_api }}document-normalizer-module.html"
-        class="otherLinkColour"
-        >DynamsoftDocumentNormalizer</a
-      >
-      <ul>
-        <li>
-          <a
-            href="{{ site.ddn_js_api }}document-normalizer-module-class.html"
-            class="otherLinkColour"
-            >DocumentNormalizerModule</a
-          >
-        </li>
-        <li>
-          <a class="otherLinkColour">Interfaces</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.ddn_js_api }}interfaces/candidate-quad-edges-unit.html"
-                class="otherLinkColour"
-                >CandidateQuadEdgesUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.ddn_js_api }}interfaces/corners-unit.html"
-                class="otherLinkColour"
-                >CornersUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.ddn_js_api }}interfaces/detected-quad-element.html"
-                class="otherLinkColour"
-                >DetectedQuadElement</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.ddn_js_api }}interfaces/detected-quad-result-item.html"
-                class="otherLinkColour"
-                >DetectedQuadResultItem</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.ddn_js_api }}interfaces/detected-quads-result.html"
-                class="otherLinkColour"
-                >DetectedQuadsResult</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.ddn_js_api }}interfaces/detected-quads-unit.html"
-                class="otherLinkColour"
-                >DetectedQuadsUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.ddn_js_api }}interfaces/deskewed-image-element.html"
-                class="otherLinkColour"
-                >DeskewedImageElement</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.ddn_js_api }}interfaces/deskewed-image-result-item.html"
-                class="otherLinkColour"
-                >DeskewedImageResultItem</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.ddn_js_api }}interfaces/deskewed-images-unit.html"
-                class="otherLinkColour"
-                >DeskewedImagesUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.ddn_js_api }}interfaces/enhanced-image-element.html"
-                class="otherLinkColour"
-                >EnhancedImageElement</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.ddn_js_api }}interfaces/enhanced-image-result-item.html"
-                class="otherLinkColour"
-                >EnhancedImageResultItem</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.ddn_js_api }}interfaces/enhanced-images-unit.html"
-                class="otherLinkColour"
-                >EnhancedImagesUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.ddn_js_api }}interfaces/logic-lines-unit.html"
-                class="otherLinkColour"
-                >LogicLinesUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.ddn_js_api }}interfaces/long-lines-unit.html"
-                class="otherLinkColour"
-                >LongLinesUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.ddn_js_api }}interfaces/processed-document-result.html"
-                class="otherLinkColour"
-                >ProcessedDocumentResult</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.ddn_js_api }}interfaces/short-lines-unit.html"
-                class="otherLinkColour"
-                >ShortLinesUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.ddn_js_api }}interfaces/simplified-document-normalizer-settings.html"
-                class="otherLinkColour"
-                >SimplifiedDocumentNormalizerSettings</a
-              >
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a class="otherLinkColour">Enumerations</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.ddn_js_api }}enum-image-colour-mode.html?lang=js"
-                class="otherLinkColour"
-                >EnumImageColourMode</a
-              >
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-    <!-- DCE -->
-    <li>
-      <a href="{{ site.dce_js_api }}index.html" class="otherLinkColour"
-        >DynamsoftCameraEnhancer</a
-      >
-      <ul>
-        <li>
-          <a class="otherLinkColour">CameraEnhancer</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}instantiate.html"
-                class="otherLinkColour"
-                >Instantiate</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}camera-control.html"
-                class="otherLinkColour"
-                >Camera Control</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}acquisition.html"
-                class="otherLinkColour"
-                >Frame Acquisition</a
-              >
-            </li>
-            <li>
-              <a href="{{ site.dce_js_api }}ui.html" class="otherLinkColour"
-                >UI</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}auxiliary.html"
-                class="otherLinkColour"
-                >Auxiliary</a
-              >
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a class="otherLinkColour">View Classes</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}cameraview.html"
-                class="otherLinkColour"
-                >CameraView</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}imageeditorview.html"
-                class="otherLinkColour"
-                >ImageEditorView</a
-              >
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a class="otherLinkColour">Auxiliary Classes</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}cameraenhancermodule.html"
-                class="otherLinkColour"
-                >CameraEnhancerModule</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}drawingitem.html"
-                class="otherLinkColour"
-                >DrawingItem</a
-              >
-              <ul>
-                <li>
-                  <a
-                    href="{{ site.dce_js_api }}imagedrawingitem.html"
-                    class="otherLinkColour"
-                    >ImageDrawingItem
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dce_js_api }}linedrawingitem.html"
-                    class="otherLinkColour"
-                    >LineDrawingItem</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dce_js_api }}quaddrawingitem.html"
-                    class="otherLinkColour"
-                    >QuadDrawingItem
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dce_js_api }}rectdrawingitem.html"
-                    class="otherLinkColour"
-                    >RectDrawingItem
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="{{ site.dce_js_api }}textdrawingitem.html"
-                    class="otherLinkColour"
-                    >TextDrawingItem</a
-                  >
-                </li>
-              </ul>
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}drawinglayer.html"
-                class="otherLinkColour"
-                >DrawingLayer</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}drawingstylemanager.html"
-                class="otherLinkColour"
-                >DrawingStyleManager</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}feedback.html"
-                class="otherLinkColour"
-                >Feedback</a
-              >
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a
-            href="{{ site.dce_js_api }}interface/index.html"
-            class="otherLinkColour"
-            >Interfaces</a
-          >
-          <ul>
-            <!--
-                    <li>
-                        <a href="{{ site.dce_js_api }}interface/cameratestresponse.html" class="otherLinkColour">CameraTestResponse</a>
-                    </li>
-                -->
-            <li>
-              <a
-                href="{{ site.dce_js_api }}interface/dceframe.html"
-                class="otherLinkColour"
-                >DCEFrame</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}interface/drawingitemevent.html"
-                class="otherLinkColour"
-                >DrawingItemEvent</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}interface/drawingstyle.html"
-                class="otherLinkColour"
-                >DrawingStyle</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}interface/note.html"
-                class="otherLinkColour"
-                >Note</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}interface/playcallbackinfo.html"
-                class="otherLinkColour"
-                >PlayCallbackInfo</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}interface/resolution.html"
-                class="otherLinkColour"
-                >Resolution</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}interface/tipconfig.html"
-                class="otherLinkColour"
-                >TipConfig</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}interface/videodeviceinfo.html"
-                class="otherLinkColour"
-                >VideoDeviceInfo</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}interface/videoframetag.html"
-                class="otherLinkColour"
-                >VideoFrameTag</a
-              >
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a href="{{ site.dce_js_api }}enum/index.html" class="otherLinkColour"
-            >Enumerations</a
-          >
-          <ul>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}enum/enumdrawingitemmediatype.html"
-                class="otherLinkColour"
-                >EnumDrawingItemMediaType</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}enum/enumdrawingitemstate.html"
-                class="otherLinkColour"
-                >EnumDrawingItemState</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dce_js_api }}enum/enumenhancedfeatures.html"
-                class="otherLinkColour"
-                >EnumEnhancedFeatures</a
-              >
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-    <!-- DCP -->
-    <li>
-      <a
-        href="{{ site.dcp_js_api }}code-parser-module.html"
-        class="otherLinkColour"
-        >DynamsoftCodeParser</a
-      >
-      <ul>
-        <li lang="android"><a href="{{ site.code_types }}" class="otherLinkColour">Supported Code Types</a>
-          <ul>
-              <li lang="android"><a href="{{ site.code_types }}mrtd.html" class="otherLinkColour">Machine Readable Travel Documents</a></li>
-              <li lang="android"><a href="{{ site.code_types }}aamva-dl-id.html" class="otherLinkColour">North America DL/ID</a></li>
-              <li lang="android"><a href="{{ site.code_types }}za-dl.html" class="otherLinkColour">South Africa Driver License</a></li>
-              <li lang="android"><a href="{{ site.code_types }}aadhaar.html" class="otherLinkColour">Aadhaar</a></li>
-              <li lang="android"><a href="{{ site.code_types }}vin.html" class="otherLinkColour">Vehicle Identification Number</a></li>
-          </ul>
-        </li>
-        <li>
-          <a
-            href="{{ site.dcp_js_api }}code-parser-module-class.html"
-            class="otherLinkColour"
-            >CodeParserModule</a
-          >
-        </li>
-        <li>
-          <a
-            href="{{ site.dcp_js_api }}code-parser.html"
-            class="otherLinkColour"
-            >CodeParser</a
-          >
-        </li>
-        <li>
-          <a class="otherLinkColour">Interfaces</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.dcp_js_api }}interfaces/parsed-result.html"
-                class="otherLinkColour"
-                >Parsedresult</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcp_js_api }}interfaces/parsed-result-item.html"
-                class="otherLinkColour"
-                >ParsedresultItem</a
-              >
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a class="otherLinkColour">Enumerations</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.dcp_js_api }}enum-mapping-status.html"
-                class="otherLinkColour"
-                >EnumMappingStatus</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcp_js_api }}enum-validation-status.html"
-                class="otherLinkColour"
-                >EnumValidationStatus</a
-              >
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </li>    
-    <!-- License -->
-    <li>
-      <a
-        href="{{ site.dcvb_js_api }}license/license-module.html"
-        class="otherLinkColour"
-        >DynamsoftLicense</a
-      >
-      <ul>
-        <li>
-          <a
-            href="{{ site.dcvb_js_api }}license/license-manager.html"
-            class="otherLinkColour"
-            >LicenseManager</a
-          >
-        </li>
-        <li>
-          <a
-            href="{{ site.dcvb_js_api }}license/license-module-class.html"
-            class="otherLinkColour"
-            >LicenseModule</a
-          >
-        </li>
-      </ul>
-    </li>
-    <!-- Utility -->
-    <li>
-      <a
-        href="{{ site.dcvb_js_api }}utility/utility-module.html"
-        class="otherLinkColour"
-        >DynamsoftUtility</a
-      >
-      <ul>
-        <li>
-          <a
-            href="{{ site.dcvb_js_api }}utility/image-drawer.html"
-            class="otherLinkColour"
-            >ImageDrawer</a
-          >
-        </li>
-        <li>
-          <a
-            href="{{ site.dcvb_js_api }}utility/image-io.html"
-            class="otherLinkColour"
-            >ImageIO</a
-          >
-        </li>
-        <li>
-          <a
-            href="{{ site.dcvb_js_api }}utility/image-processor.html"
-            class="otherLinkColour"
-            >ImageProcessor</a
-          >
-        </li>
-        <li>
-          <a
-            href="{{ site.dcvb_js_api }}utility/multi-frame-result-cross-filter.html"
-            class="otherLinkColour"
-            >MultiFrameResultCrossFilter</a
-          >
-        </li>
-        <li>
-          <a
-            href="{{ site.dcvb_js_api }}utility/utility-module-class.html"
-            class="otherLinkColour"
-            >UtilityModule</a
-          >
-        </li>
-      </ul>
-    </li>
-    <!-- Core -->
-    <li>
-      <a
-        href="{{ site.dcvb_js_api }}core/core-module.html"
-        class="otherLinkColour"
-        >DynamsoftCore</a
-      >
-      <ul>
-        <li>
-          <a>Classes</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/core-module-class.html"
-                class="otherLinkColour"
-                >CoreModule</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/image-source-adapter.html"
-                class="otherLinkColour"
-                >ImageSourceAdapter</a
-              >
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a>Interfaces</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/basic-structures/arc.html"
-                class="otherLinkColour"
-                >Arc</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/intermediate-results/binary-image-unit.html"
-                class="otherLinkColour"
-                >BinaryImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/intermediate-results/colour-image-unit.html"
-                class="otherLinkColour"
-                >ColourImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/basic-structures/captured-result-base.html"
-                class="otherLinkColour"
-                >CapturedResultBase</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/basic-structures/captured-result-item.html"
-                class="otherLinkColour"
-                >CapturedResultItem</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/basic-structures/contour.html"
-                class="otherLinkColour"
-                >Contour</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/intermediate-results/contours-unit.html"
-                class="otherLinkColour"
-                >ContoursUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/basic-structures/corner.html"
-                class="otherLinkColour"
-                >Corner</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/basic-structures/ds-image-data.html"
-                class="otherLinkColour"
-                >DSImageData</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/basic-structures/ds-rect.html"
-                class="otherLinkColour"
-                >DSRect</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/basic-structures/edge.html"
-                class="otherLinkColour"
-                >Edge</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/intermediate-results/enhanced-grayscale-image-unit.html"
-                class="otherLinkColour"
-                >EnhancedGrayscaleImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/basic-structures/file-image-tag.html"
-                class="otherLinkColour"
-                >FileImageTag</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/intermediate-results/grayscale-image-unit.html"
-                class="otherLinkColour"
-                >GrayscaleImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/basic-structures/image-source-error-listener.html"
-                class="otherLinkColour"
-                >ImageSourceErrorListener</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/basic-structures/image-tag.html"
-                class="otherLinkColour"
-                >ImageTag</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/intermediate-results/intermediate-result.html"
-                class="otherLinkColour"
-                >IntermediateResult</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/intermediate-results/intermediate-result-extra-info.html"
-                class="otherLinkColour"
-                >IntermediateResultExtraInfo</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/intermediate-results/intermediate-result-unit.html"
-                class="otherLinkColour"
-                >IntermediateResultUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/intermediate-results/line-segments-unit.html"
-                class="otherLinkColour"
-                >LineSegmentsUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/basic-structures/line-segment.html"
-                class="otherLinkColour"
-                >LineSegment</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/intermediate-results/observation-parameters.html"
-                class="otherLinkColour"
-                >ObservationParameters</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/basic-structures/original-image-result-item.html"
-                class="otherLinkColour"
-                >OriginalImageResultItem</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/basic-structures/point.html"
-                class="otherLinkColour"
-                >Point</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/intermediate-results/predetected-region-element.html"
-                class="otherLinkColour"
-                >PredetectedRegionElement</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/intermediate-results/predetected-regions-unit.html"
-                class="otherLinkColour"
-                >PredetectedRegionsUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/basic-structures/polygon.html"
-                class="otherLinkColour"
-                >Polygon</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/basic-structures/quadrilateral.html"
-                class="otherLinkColour"
-                >Quadrilateral</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/basic-structures/rect.html"
-                class="otherLinkColour"
-                >Rect</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/intermediate-results/region-object-element.html"
-                class="otherLinkColour"
-                >RegionObjectElement</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/intermediate-results/scaled-colour-image-unit.html"
-                class="otherLinkColour"
-                >ScaledColourImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/intermediate-results/text-removed-binary-image-unit.html"
-                class="otherLinkColour"
-                >TextRemovedBinaryImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/intermediate-results/texture-detection-result-unit.html"
-                class="otherLinkColour"
-                >TextureDetectionResultUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/intermediate-results/texture-removed-binary-image-unit.html"
-                class="otherLinkColour"
-                >TextureRemovedBinaryImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/intermediate-results/texture-removed-grayscale-image-unit.html"
-                class="otherLinkColour"
-                >TextureRemovedGrayscaleImageUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/basic-structures/text-zone.html"
-                class="otherLinkColour"
-                >TextZone</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/intermediate-results/text-zones-unit.html"
-                class="otherLinkColour"
-                >TextZonesUnit</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/intermediate-results/transformed-grayscale-image-unit.html"
-                class="otherLinkColour"
-                >TransformedGrayscaleImageUnit</a
-              >
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a>Enumerations</a>
-          <ul>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/enum-buffer-overflow-protection-mode.html?lang=js"
-                class="otherLinkColour"
-                >BufferOverflowProtectionMode</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/enum-captured-result-item-type.html?lang=js"
-                class="otherLinkColour"
-                >CapturedResultItemType</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/enum-colour-channel-usage-type.html?lang=js"
-                class="otherLinkColour"
-                >ColourChannelUsageType</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/enum-corner-type.html?lang=js"
-                class="otherLinkColour"
-                >CornerType</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/enum-cross-verification-status.html?lang=js"
-                class="otherLinkColour"
-                >CrossVerificationStatus</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/enum-error-code.html?lang=js"
-                class="otherLinkColour"
-                >ErrorCode</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/enum-grayscale-enhancement-mode.html?lang=js"
-                class="otherLinkColour"
-                >GrayscaleEnhancementMode</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/enum-grayscale-transformation-mode.html?lang=js"
-                class="otherLinkColour"
-                >GrayscaleTransformationMode</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/enum-image-file-format.html?lang=js"
-                class="otherLinkColour"
-                >ImageFileFormat</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/enum-image-pixel-format.html?lang=js"
-                class="otherLinkColour"
-                >ImagePixelFormat</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/enum-image-tag-type.html?lang=js"
-                class="otherLinkColour"
-                >ImageTagType</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/enum-intermediate-result-unit-type.html?lang=js"
-                class="otherLinkColour"
-                >IntermediateResultUnitType</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/enum-module-name.html?lang=js"
-                class="otherLinkColour"
-                >ModuleName</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/enum-region-object-element-type.html?lang=js"
-                class="otherLinkColour"
-                >RegionObjectElementType</a
-              >
-            </li>
-            <li>
-              <a
-                href="{{ site.dcvb_js_api }}core/enum-section-type.html?lang=js"
-                class="otherLinkColour"
-                >SectionType</a
-              >
-            </li>
-            <!-- <li>
-              <a
-                href="{{ site.dcvb_js_api }}enum-transform-matrix-type.html?lang=js"
-                class="otherLinkColour"
-                >TransformMatrixType</a
-              >
-            </li> -->
-          </ul>
-        </li>
-      </ul>
-    </li>
-  </ul>
-</li>
-{%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-understanding.html" -%}
-<li lang="javascript" class="category">USEFUL RESOURCES</li>
-<li lang="javascript">
-  <a href="{{ site.dcvb_js }}release-notes/" class="otherLinkColour"
-    >Release Notes</a
-  >
-  <ul lang="javascript">
-    <li lang="javascript">
-      <a href="{{ site.dcvb_js }}release-notes/dcvb-3.html" class="otherLinkColour"
-        >Version 3.x</a
-      >
-    </li>
-    <li lang="javascript">
-      <a href="{{ site.dcvb_js }}release-notes/dcvb.html" class="otherLinkColour"
-        >Version 2.x</a
-      >
-    </li>
-    <!-- <li lang="javascript">
-      <a href="{{ site.dcvb_js }}release-notes/cvr.html" class="otherLinkColour"
-        >DynamsoftCaptureVisionRouter</a
-      >
-    </li>
-    <li lang="javascript">
-      <a href="{{ site.dcvb_js }}release-notes/core.html" class="otherLinkColour"
-        >DynamsoftCore</a
-      >
-    </li>
-    <li lang="javascript">
-      <a href="{{ site.dcvb_js }}release-notes/dbr.html" class="otherLinkColour"
-        >DynamsoftBarcodeReader</a
-      >
-    </li>
-    <li lang="javascript">
-      <a href="{{ site.dcvb_js }}release-notes/dlr.html" class="otherLinkColour"
-        >DynamsoftLabelRecognizer</a
-      >
-    </li>
-    <li lang="javascript">
-      <a href="{{ site.dcvb_js }}release-notes/ddn.html" class="otherLinkColour"
-        >DynamsoftDocumentNormalizer</a
-      >
-    </li>
-    <li lang="javascript">
-      <a href="{{ site.dcvb_js }}release-notes/dce.html" class="otherLinkColour"
-        >DynamsoftCameraEnhancer</a
-      >
-    </li>
-    <li lang="javascript">
-      <a href="{{ site.dcvb_js }}release-notes/dcp.html" class="otherLinkColour"
-        >DynamsoftCodeParser</a
-      >
-    </li>
-    <li lang="javascript">
-      <a href="{{ site.dcvb_js }}release-notes/dip.html" class="otherLinkColour"
-        >DynamsoftImageProcessing</a
-      >
-    </li>
-    <li lang="javascript">
-      <a href="{{ site.dcvb_js }}release-notes/license.html" class="otherLinkColour"
-        >DynamsoftLicense</a
-      >
-    </li>
-    <li lang="javascript">
-      <a href="{{ site.dcvb_js }}release-notes/utility.html" class="otherLinkColour"
-        >DynamsoftUtility</a
-      >
-    </li>
-    <li lang="javascript">
-      <a href="{{ site.dcvb_js }}release-notes/dlrData.html" class="otherLinkColour"
-        >DynamsoftLabelRecognizerData</a
-      >
-    </li>
-    <li lang="javascript">
-      <a href="{{ site.dcvb_js }}release-notes/dnn.html" class="otherLinkColour"
-        >DynamsoftNeuralNetwork</a
-      >
-    </li> -->
-  </ul>
-</li>
-<li lang="javascript"><a href="{{ site.license_activation }}index.html" class="otherLinkColour">License Initialization</a></li>
\ 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 @@
-<li lang="javascript">
-    <a href="{{ site.dcvb_architecture }}" class="otherLinkColour">Architecture</a>
-    <ul>
-      <li>
-        <a href="{{ site.dcvb_architecture }}input.html" class="otherLinkColour"
-          >Input</a
-        >
-      </li>
-      <li>
-        <a
-          href="{{ site.dcvb_architecture }}image-processing/index.html"
-          class="otherLinkColour"
-          >Image Processing</a
-        >
-        <ul>
-          <li>
-            <a
-              href="{{ site.dcvb_architecture }}image-processing/region-predetection.html"
-              class="otherLinkColour"
-              >Region Pre-detection</a
-            >
-          </li>
-          <li>
-            <a
-              href="{{ site.dcvb_architecture }}image-processing/shared-detection.html"
-              class="otherLinkColour"
-              >Shared Detection</a
-            >
-          </li>
-          <li>
-            <a
-              href="{{ site.dcvb_architecture }}image-processing/barcode-localization.html"
-              class="otherLinkColour"
-              >Barcode Localization</a
-            >
-          </li>
-          <li>
-            <a
-              href="{{ site.dcvb_architecture }}image-processing/barcode-decoding.html"
-              class="otherLinkColour"
-              >Barcode Decoding</a
-            >
-          </li>
-          <!-- <li>
-            <a
-              href="{{ site.dcvb_architecture }}image-processing/textline-localization.html"
-              class="otherLinkColour"
-              >Text-line Localization</a
-            >
-          </li>
-          <li>
-            <a
-              href="{{ site.dcvb_architecture }}image-processing/textline-recognition.html"
-              class="otherLinkColour"
-              >Text-line Recognition</a
-            >
-          </li>
-          <li>
-            <a
-              href="{{ site.dcvb_architecture }}image-processing/document-detection.html"
-              class="otherLinkColour"
-              >Document Detection</a
-            >
-          </li>
-          <li>
-            <a
-              href="{{ site.dcvb_architecture }}image-processing/document-normalization.html"
-              class="otherLinkColour"
-              >Document Normalization</a
-            >
-          </li> -->
-        </ul>
-      </li>
-      <li>
-        <a
-          href="{{ site.dcvb_architecture }}semantic-processing.html"
-          class="otherLinkColour"
-          >Semantic Processing</a
-        >
-      </li>
-      <li>
-        <a href="{{ site.dcvb_architecture }}output.html" class="otherLinkColour"
-          >Output</a
-        >
-      </li>
-    </ul>
-</li>
\ No newline at end of file
diff --git a/_includes/sidelist-programming/sidelist-architecture.html b/_includes/sidelist-programming/sidelist-architecture.html
index 586ded8e..295c5c28 100644
--- a/_includes/sidelist-programming/sidelist-architecture.html
+++ b/_includes/sidelist-programming/sidelist-architecture.html
@@ -1,9 +1,87 @@
 <li lang="javascript">
     <a href="{{ site.dcvb_architecture }}" class="otherLinkColour">Architecture</a>
     <ul>
-        <li><a href="{{ site.dcvb_architecture }}input.html" class="otherLinkColour">Input</a></li>
-        <li><a href="{{ site.dcvb_architecture }}image-processing/index.html" class="otherLinkColour">Image Processing</a></li>
-        <li><a href="{{ site.dcvb_architecture }}semantic-processing.html" class="otherLinkColour">Semantic Processing</a></li>
-        <li><a href="{{ site.dcvb_architecture }}output.html" class="otherLinkColour">Output</a></li>
+      <li>
+        <a href="{{ site.dcvb_architecture }}input.html" class="otherLinkColour"
+          >Input</a
+        >
+      </li>
+      <li>
+        <a
+          href="{{ site.dcvb_architecture }}image-processing/index.html"
+          class="otherLinkColour"
+          >Image Processing</a
+        >
+        <ul>
+          <li>
+            <a
+              href="{{ site.dcvb_architecture }}image-processing/region-predetection.html"
+              class="otherLinkColour"
+              >Region Pre-detection</a
+            >
+          </li>
+          <li>
+            <a
+              href="{{ site.dcvb_architecture }}image-processing/shared-detection.html"
+              class="otherLinkColour"
+              >Shared Detection</a
+            >
+          </li>
+          <li>
+            <a
+              href="{{ site.dcvb_architecture }}image-processing/barcode-localization.html"
+              class="otherLinkColour"
+              >Barcode Localization</a
+            >
+          </li>
+          <li>
+            <a
+              href="{{ site.dcvb_architecture }}image-processing/barcode-decoding.html"
+              class="otherLinkColour"
+              >Barcode Decoding</a
+            >
+          </li>
+          <!-- <li>
+            <a
+              href="{{ site.dcvb_architecture }}image-processing/textline-localization.html"
+              class="otherLinkColour"
+              >Text-line Localization</a
+            >
+          </li>
+          <li>
+            <a
+              href="{{ site.dcvb_architecture }}image-processing/textline-recognition.html"
+              class="otherLinkColour"
+              >Text-line Recognition</a
+            >
+          </li>
+          <li>
+            <a
+              href="{{ site.dcvb_architecture }}image-processing/document-detection.html"
+              class="otherLinkColour"
+              >Document Detection</a
+            >
+          </li>
+          <li>
+            <a
+              href="{{ site.dcvb_architecture }}image-processing/document-normalization.html"
+              class="otherLinkColour"
+              >Document Normalization</a
+            >
+          </li> -->
+        </ul>
+      </li>
+      <li>
+        <a
+          href="{{ site.dcvb_architecture }}semantic-processing.html"
+          class="otherLinkColour"
+          >Semantic Processing</a
+        >
+      </li>
+      <li>
+        <a href="{{ site.dcvb_architecture }}output.html" class="otherLinkColour"
+          >Output</a
+        >
+      </li>
     </ul>
 </li>
\ 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 @@
-<li lang="javascript">
-    <a href="{{ site.parameters }}reference/index.html" class="otherLinkColour"
-      >Parameter Reference</a
-    >
-    <ul>
-      <li><a href="{{ site.dcvb_parameters }}capture-vision-template/" class="otherLinkColour">Capture Vision Template</a>
-          <ul>
-              <li><a href="{{ site.dcvb_parameters }}capture-vision-template/image-roi-processing-name-array.html" class="otherLinkColour">ImageROIProcessingNameArray</a></li>
-              <li><a href="{{ site.dcvb_parameters }}capture-vision-template/image-source-name.html" class="otherLinkColour">ImageSourceName</a></li>
-              <li><a href="{{ site.dcvb_parameters }}capture-vision-template/max-parallel-tasks.html" class="otherLinkColour">MaxParallelTasks</a></li>
-              <li><a href="{{ site.dcvb_parameters }}capture-vision-template/min-image-capture-interval.html" class="otherLinkColour">MinImageCaptureInterval</a></li>
-              <li><a href="{{ site.dcvb_parameters }}capture-vision-template/name.html" class="otherLinkColour">Name</a></li>
-              <li><a href="{{ site.dcvb_parameters }}capture-vision-template/output-original-image.html" class="otherLinkColour">OutputOriginalImage</a></li>
-              <li><a href="{{ site.dcvb_parameters }}capture-vision-template/semantic-processing-name-array.html" class="otherLinkColour">SemanticProcessingNameArray</a></li>
-              <li><a href="{{ site.dcvb_parameters }}capture-vision-template/timeout.html" class="otherLinkColour">Timeout</a></li>
-          </ul>
-      </li>
-      <li><a href="{{ site.dcvb_parameters }}target-roi-def/" class="otherLinkColour">Target ROI Def</a>
-          <ul>
-              <li><a href="{{ site.dcvb_parameters }}target-roi-def/base-target-roidef-name.html" class="otherLinkColour">BaseTargetROIDefName</a></li>
-              <li><a href="{{ site.dcvb_parameters }}target-roi-def/location.html" class="otherLinkColour">Location</a></li>
-              <li><a href="{{ site.dcvb_parameters }}target-roi-def/name.html" class="otherLinkColour">Name</a></li>
-              <li><a href="{{ site.dcvb_parameters }}target-roi-def/pause-flag.html" class="otherLinkColour">PauseFlag</a></li>
-              <li><a href="{{ site.dcvb_parameters }}target-roi-def/task-setting-name-array.html" class="otherLinkColour">TaskSettingNameArray</a></li>
-          </ul>
-      </li>
-      <!-- <li><a href="{{ site.dcvb_parameters }}semantic-processing/" class="otherLinkColour">Semantic Processing</a>
-          <ul>
-              <li><a href="{{ site.dcvb_parameters }}semantic-processing/name.html" class="otherLinkColour">Name</a></li>
-              <li><a href="{{ site.dcvb_parameters }}semantic-processing/reference-object-filter.html" class="otherLinkColour">ReferenceObjectFilter</a></li>
-              <li><a href="{{ site.dcvb_parameters }}semantic-processing/task-setting-name-array.html" class="otherLinkColour">TaskSettingNameArray</a></li>
-          </ul>
-      </li> -->
-      <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/" class="otherLinkColour ">Barcode Reader Task Settings</a>
-          <ul>
-              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/barcode-colour-modes.html" class="otherLinkColour">BarcodeColourModes</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/barcode-complement-modes.html" class="otherLinkColour">BarcodeComplementModes</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/barcode-format-ids.html" class="otherLinkColour">BarcodeFormatIds</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/base-barcode-reader-task-setting-name.html" class="otherLinkColour">BaseBarcodeReaderTaskSettingName</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/deblur-modes.html" class="otherLinkColour">DeblurModes</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/deformation-resisting-modes.html" class="otherLinkColour">DeformationResistingModes</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/dpm-code-reading-modes.html" class="otherLinkColour">DPMCodeReadingModes</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/expected-barcodes-count.html" class="otherLinkColour">ExpectedBarcodesCount</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/localization-modes.html" class="otherLinkColour">LocalizationModes</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/max-threads-in-one-task.html" class="otherLinkColour">MaxThreadsInOneTask</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/name.html" class="otherLinkColour">Name</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/return-barcode-zone-clarity.html" class="otherLinkColour">ReturnBarcodeZoneClarity</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/section-image-parameter-array.html" class="otherLinkColour">SectionImageParameterArray</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/start-section.html" class="otherLinkColour">StartSection</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/terminate-setting.html" class="otherLinkColour">TerminateSetting</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/text-result-order-modes.html" class="otherLinkColour">TextResultOrderModes</a></li>
-          </ul>
-      </li>
-      <!-- <li><a href="{{ site.dcvb_parameters }}label-recognizer-task-settings/" class="otherLinkColour ">Label Recognizer Task Settings</a>
-          <ul>
-              <li><a href="{{ site.dcvb_parameters }}label-recognizer-task-settings/base-label-recognizer-task-setting-name.html" class="otherLinkColour">BaseLabelRecognizerTaskSettingName</a></li>
-              <li><a href="{{ site.dcvb_parameters }}label-recognizer-task-settings/dictionary-correction-thresholds.html" class="otherLinkColour">DictionaryCorrectionThresholds</a></li>
-              <li><a href="{{ site.dcvb_parameters }}label-recognizer-task-settings/dictionary-path.html" class="otherLinkColour">DictionaryPath</a></li>
-              <li><a href="{{ site.dcvb_parameters }}label-recognizer-task-settings/max-threads-in-one-task.html" class="otherLinkColour">MaxThreadsInOneTask</a></li>
-              <li><a href="{{ site.dcvb_parameters }}label-recognizer-task-settings/name.html" class="otherLinkColour">Name</a></li>
-              <li><a href="{{ site.dcvb_parameters }}label-recognizer-task-settings/section-image-parameter-array.html" class="otherLinkColour">SectionImageParameterArray</a></li>
-              <li><a href="{{ site.dcvb_parameters }}label-recognizer-task-settings/start-section.html" class="otherLinkColour">StartSection</a></li>
-              <li><a href="{{ site.dcvb_parameters }}label-recognizer-task-settings/string-length-range.html" class="otherLinkColour">StringLengthRange</a></li>
-              <li><a href="{{ site.dcvb_parameters }}label-recognizer-task-settings/string-regex-pattern.html" class="otherLinkColour">StringRegExPattern</a></li>
-              <li><a href="{{ site.dcvb_parameters }}label-recognizer-task-settings/terminate-setting.html" class="otherLinkColour">TerminateSetting</a></li>
-              <li><a href="{{ site.dcvb_parameters }}label-recognizer-task-settings/text-line-specification-name-array.html" class="otherLinkColour">TextLineSpecificationNameArray</a></li>
-              <li><a href="{{ site.dcvb_parameters }}label-recognizer-task-settings/confusable-characters-path.html" class="otherLinkColour">ConfusableCharactersPath</a></li>
-              <li><a href="{{ site.dcvb_parameters }}label-recognizer-task-settings/cluster-samples-count-threshold.html" class="otherLinkColour">ClusterSamplesCountThreshold</a></li>
-          </ul>
-      </li>
-      <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/" class="otherLinkColour ">Document Normalizer Task Settings</a>
-          <ul>
-              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/base-document-normalizer-task-setting-name.html" class="otherLinkColour">BaseDocumentNormalizerTaskSettingName</a></li>
-              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/brightness.html" class="otherLinkColour">Brightness</a></li>
-              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/colour-mode.html" class="otherLinkColour">ColourMode</a></li>
-              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/content-type.html" class="otherLinkColour">ContentType</a></li>
-              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/contrast.html" class="otherLinkColour">Contrast</a></li>
-              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/corner-angle-range.html" class="otherLinkColour">CornerAngleRange</a></li>
-              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/deskew-mode.html" class="otherLinkColour">DeskewMode</a></li>
-              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/expected-documents-count.html" class="otherLinkColour">ExpectedDocumentsCount</a></li>
-              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/line-extraction-modes.html" class="otherLinkColour">LineExtractionModes</a></li>
-              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/max-threads-in-one-task.html" class="otherLinkColour">MaxThreadsInOneTask</a></li>
-              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/name.html" class="otherLinkColour">Name</a></li>
-              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/page-size.html" class="otherLinkColour">PageSize</a></li>
-              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/quadrilateral-detection-modes.html" class="otherLinkColour">QuadrilateralDetectionModes</a></li>
-              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/section-image-parameter-array.html" class="otherLinkColour">SectionImageParameterArray</a></li>
-              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/start-section.html" class="otherLinkColour">StartSection</a></li>
-              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/terminate-setting.html" class="otherLinkColour">TerminateSetting</a></li>
-          </ul>
-      </li> -->
-      <li><a href="{{ site.dcvb_parameters }}image-parameter/" class="otherLinkColour ">Image Parameter</a>
-          <ul>
-              <li><a href="{{ site.dcvb_parameters }}image-parameter/base-image-parameter-name.html" class="otherLinkColour">BaseImageParameterName</a></li>
-              <li><a href="{{ site.dcvb_parameters }}image-parameter/binarization-modes.html" class="otherLinkColour">BinarizationModes</a></li>
-              <li><a href="{{ site.dcvb_parameters }}image-parameter/colour-conversion-modes.html" class="otherLinkColour">ColourConversionModes</a></li>
-              <li><a href="{{ site.dcvb_parameters }}image-parameter/grayscale-enhancement-modes.html" class="otherLinkColour">GrayscaleEnhancementModes</a></li>
-              <li><a href="{{ site.dcvb_parameters }}image-parameter/grayscale-transformation-modes.html" class="otherLinkColour">GrayscaleTransformationModes</a></li>
-              <li><a href="{{ site.dcvb_parameters }}image-parameter/if-erase-text-zone.html" class="otherLinkColour">IfEraseTextZone</a></li>
-              <li><a href="{{ site.dcvb_parameters }}image-parameter/name.html" class="otherLinkColour">Name</a></li>
-              <li><a href="{{ site.dcvb_parameters }}image-parameter/region-predetection-modes.html" class="otherLinkColour">RegionPredetectionModes</a></li>
-              <li><a href="{{ site.dcvb_parameters }}image-parameter/scale-down-threshold.html" class="otherLinkColour">ScaleDownThreshold</a></li>
-              <li><a href="{{ site.dcvb_parameters }}image-parameter/scale-up-modes.html" class="otherLinkColour">ScaleUpModes</a></li>
-              <li><a href="{{ site.dcvb_parameters }}image-parameter/text-detection-mode.html" class="otherLinkColour">TextDetectionMode</a></li>
-              <li><a href="{{ site.dcvb_parameters }}image-parameter/texture-detection-modes.html" class="otherLinkColour">TextureDetectionModes</a></li>
-          </ul>
-      </li>
-      <!-- <li><a href="{{ site.dcvb_parameters }}text-line-specification/" class="otherLinkColour ">TextLine Specification</a>
-          <ul>
-              <li><a href="{{ site.dcvb_parameters }}text-line-specification/applicable-text-line-numbers.html" class="otherLinkColour">ApplicableTextLineNumbers</a></li>
-              <li><a href="{{ site.dcvb_parameters }}text-line-specification/base-text-line-specification-name.html" class="otherLinkColour">BaseTextLineSpecificationName</a></li>
-              <li><a href="{{ site.dcvb_parameters }}text-line-specification/binarization-modes.html" class="otherLinkColour">BinarizationModes</a></li>
-              <li><a href="{{ site.dcvb_parameters }}text-line-specification/char-height-range.html" class="otherLinkColour">CharHeightRange</a></li>
-              <li><a href="{{ site.dcvb_parameters }}text-line-specification/character-model-name.html" class="otherLinkColour">CharacterModelName</a></li>
-              <li><a href="{{ site.dcvb_parameters }}text-line-specification/character-normalization-modes.html" class="otherLinkColour">CharacterNormalizationModes</a></li>
-              <li><a href="{{ site.dcvb_parameters }}text-line-specification/grayscale-enhancement-modes.html" class="otherLinkColour">GrayscaleEnhancementModes</a></li>
-              <li><a href="{{ site.dcvb_parameters }}text-line-specification/name.html" class="otherLinkColour">Name</a></li>
-              <li><a href="{{ site.dcvb_parameters }}text-line-specification/string-length-range.html" class="otherLinkColour">StringLengthRange</a></li>
-              <li><a href="{{ site.dcvb_parameters }}text-line-specification/string-regex-pattern.html" class="otherLinkColour">StringRegExPattern</a></li>
-              <li><a href="{{ site.dcvb_parameters }}text-line-specification/position.html" class="otherLinkColour">Text line position parameters</a></li>
-              <li><a href="{{ site.dcvb_parameters }}text-line-specification/concat-string-length-range.html" class="otherLinkColour">ConcatStringLengthRange</a></li>
-              <li><a href="{{ site.dcvb_parameters }}text-line-specification/concat-string-regex-pattern.html" class="otherLinkColour">ConcatStringRegExPattern</a></li>
-              <li><a href="{{ site.dcvb_parameters }}text-line-specification/concat-separator.html" class="otherLinkColour">ConcatSeparator</a></li>
-              <li><a href="{{ site.dcvb_parameters }}text-line-specification/concat-results.html" class="otherLinkColour">ConcatResults</a></li>
-              <li><a href="{{ site.dcvb_parameters }}text-line-specification/output-results.html" class="otherLinkColour">OutputResults</a></li>
-              <li><a href="{{ site.dcvb_parameters }}text-line-specification/sub-groups.html" class="otherLinkColour">SubGroups</a></li>
-              <li><a href="{{ site.dcvb_parameters }}text-line-specification/reference-group-name.html" class="otherLinkColour">ReferenceGroupName</a></li>
-              <li><a href="{{ site.dcvb_parameters }}text-line-specification/text-lines-count.html" class="otherLinkColour">TextLinesCount</a></li>
-              <li><a href="{{ site.dcvb_parameters }}text-line-specification/confusable-characters-correction.html" class="otherLinkColour">ConfusableCharactersCorrection</a></li>
-              <li><a href="{{ site.dcvb_parameters }}text-line-specification/expected-groups-count.html" class="otherLinkColour">ExpectedGroupsCount</a></li>
-          </ul>
-      </li>
-      <li><a href="{{ site.dcvb_parameters }}character-model/" class="otherLinkColour ">Character Model</a>
-          <ul>
-              <li><a href="{{ site.dcvb_parameters }}character-model/char-set.html" class="otherLinkColour">CharSet</a></li>
-              <li><a href="{{ site.dcvb_parameters }}character-model/directory-path.html" class="otherLinkColour">DirectoryPath</a></li>
-              <li><a href="{{ site.dcvb_parameters }}character-model/filter-file-path.html" class="otherLinkColour">FilterFilePath</a></li>
-              <li><a href="{{ site.dcvb_parameters }}character-model/name.html" class="otherLinkColour">Name</a></li>
-          </ul>
-      </li> -->
-      <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/" class="otherLinkColour ">Barcode Format Specification</a>
-          <ul>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/all-module-deviation.html" class="otherLinkColour">AllModuleDeviation</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/australian-post-encoding-table.html" class="otherLinkColour">AustralianPostEncodingTable</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/barcode-angle-range-array.html" class="otherLinkColour">BarcodeAngleRangeArray</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/barcode-bytes-length-range-array.html" class="otherLinkColour">BarcodeBytesLengthRangeArray</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/barcode-height-range-array.html" class="otherLinkColour">BarcodeHeightRangeArray</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/barcode-text-length-range-array.html" class="otherLinkColour">BarcodeTextLengthRangeArray</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/barcode-text-regex-pattern.html" class="otherLinkColour">BarcodeTextRegExPattern</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/barcode-width-range-array.html" class="otherLinkColour">BarcodeWidthRangeArray</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/barcode-zone-bar-count-range-array.html" class="otherLinkColour">BarcodeZoneBarCountRangeArray</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/barcode-zone-min-distance-to-image-borders.html" class="otherLinkColour">BarcodeZoneMinDistanceToImageBorders</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/code128-subset.html" class="otherLinkColour">Code128Subset</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/enable-addon-code.html" class="otherLinkColour">EnableAddOnCode</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/enable-data-matrix-ecc000-140.html" class="otherLinkColour">EnableDataMatrixECC000-140</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/enable-qr-code-model-1.html" class="otherLinkColour">EnableQRCodeModel1</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/find-uneven-module-barcode.html" class="otherLinkColour">FindUnevenModuleBarcode</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/head-module-ratio.html" class="otherLinkColour">HeadModuleRatio</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/min-quiet-zone-width.html" class="otherLinkColour">MinQuietZoneWidth</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/min-ratio-of-barcode-zone-width-to-height.html" class="otherLinkColour">MinRatioOfBarcodeZoneWidthToHeight</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/min-result-confidence.html" class="otherLinkColour">MinResultConfidence</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/mirror-mode.html" class="otherLinkColour">MirrorMode</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/module-size-range-array.html" class="otherLinkColour">ModuleSizeRangeArray</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/msi-code-check-digit-calculation.html" class="otherLinkColour">MSICodeCheckDigitCalculation</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/name.html" class="otherLinkColour">Name</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/partition-modes.html" class="otherLinkColour">PartitionModes</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/patch-code-searching-margins.html" class="otherLinkColour">PatchCodeSearchingMargins</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/require-start-stop-chars.html" class="otherLinkColour">RequireStartStopChars</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/return-partial-barcode-value.html" class="otherLinkColour">ReturnPartialBarcodeValue</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/standard-format.html" class="otherLinkColour">StandardFormat</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/tail-module-ratio.html" class="otherLinkColour">TailModuleRatio</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/verify-check-digit.html" class="otherLinkColour">VerifyCheckDigit</a></li>
-          </ul>
-      </li>
-      <!-- <li><a href="{{ site.dcvb_parameters }}code-parser-task-settings/" class="otherLinkColour ">Code Parser Task Settings</a>
-          <ul>
-              <li><a href="{{ site.dcvb_parameters }}code-parser-task-settings/code-specifications.html" class="otherLinkColour">CodeSpecifications</a></li>
-              <li><a href="{{ site.dcvb_parameters }}code-parser-task-settings/name.html" class="otherLinkColour">Name</a></li>
-              <li><a href="{{ site.dcvb_parameters }}code-parser-task-settings/resources-path.html" class="otherLinkColour">ResourcesPath</a></li>
-          </ul>
-      </li> -->
-      <li><a href="{{ site.dcvb_parameters }}image-source-options/" class="otherLinkColour ">Image Source</a>
-          <ul>
-              <li><a href="{{ site.dcvb_parameters }}image-source-options/directory-path.html" class="otherLinkColour">DirectoryPath</a></li>
-              <li><a href="{{ site.dcvb_parameters }}image-source-options/file-filter.html" class="otherLinkColour">FileFilter</a></li>
-              <li><a href="{{ site.dcvb_parameters }}image-source-options/name.html" class="otherLinkColour">Name</a></li>
-              <li><a href="{{ site.dcvb_parameters }}image-source-options/pages.html" class="otherLinkColour">Pages</a></li>
-              <li><a href="{{ site.dcvb_parameters }}image-source-options/pdf-reading-mode.html" class="otherLinkColour">PDFReadingMode</a></li>
-              <li><a href="{{ site.dcvb_parameters }}image-source-options/recursive.html" class="otherLinkColour">Recursive</a></li>
-              <li><a href="{{ site.dcvb_parameters }}image-source-options/type.html" class="otherLinkColour">Type</a></li>
-          </ul>
-      </li>
-      <li><a href="{{ site.dcvb_parameters }}global-parameter/" class="otherLinkColour ">Global Parameter</a>
-          <ul>
-              <li><a href="{{ site.dcvb_parameters }}global-parameter/max-total-image-dimension.html" class="otherLinkColour">MaxTotalImageDimension</a></li>
-          </ul>
-      </li>
-      <li><a href="{{ site.dcvb_parameters }}output-task-setting/" class="otherLinkColour ">Output Task Settings</a>
-          <ul>
-              <li><a href="{{ site.dcvb_parameters }}output-task-setting/name.html" class="otherLinkColour">Name</a></li>
-              <li><a href="{{ site.dcvb_parameters }}output-task-setting/output-condition.html" class="otherLinkColour">OutputCondition</a></li>
-          </ul>
-      </li>
-    </ul>
-</li>
\ 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 @@
-<li lang="javascript">
-    <a href="{{ site.parameters }}reference/index.html" class="otherLinkColour"
-      >Parameters</a
-    >
-    <ul>
-      <li><a href="{{ site.dcvb_parameter_file }}capture-vision-template.html" class="otherLinkColour">Capture Vision Template Object</a>
-          <ul>
-              <li><a href="{{ site.dcvb_parameters }}capture-vision-template/image-roi-processing-name-array.html" class="otherLinkColour">ImageROIProcessingNameArray</a></li>
-              <li><a href="{{ site.dcvb_parameters }}capture-vision-template/image-source-name.html" class="otherLinkColour">ImageSourceName</a></li>
-              <li><a href="{{ site.dcvb_parameters }}capture-vision-template/max-parallel-tasks.html" class="otherLinkColour">MaxParallelTasks</a></li>
-              <li><a href="{{ site.dcvb_parameters }}capture-vision-template/min-image-capture-interval.html" class="otherLinkColour">MinImageCaptureInterval</a></li>
-              <li><a href="{{ site.dcvb_parameters }}capture-vision-template/name.html" class="otherLinkColour">Name</a></li>
-              <li><a href="{{ site.dcvb_parameters }}capture-vision-template/output-original-image.html" class="otherLinkColour">OutputOriginalImage</a></li>
-              <li><a href="{{ site.dcvb_parameters }}capture-vision-template/semantic-processing-name-array.html" class="otherLinkColour">SemanticProcessingNameArray</a></li>
-              <li><a href="{{ site.dcvb_parameters }}capture-vision-template/timeout.html" class="otherLinkColour">Timeout</a></li>
-          </ul>
-      </li>
-      <li><a href="{{ site.dcvb_parameter_file }}target-roi-definition/index.html" class="otherLinkColour">TargetROIDef Object</a>
-          <ul>
-              <li><a href="{{ site.dcvb_parameters }}target-roi-def/base-target-roidef-name.html" class="otherLinkColour">BaseTargetROIDefName</a></li>
-              <li><a href="{{ site.dcvb_parameters }}target-roi-def/location.html" class="otherLinkColour">Location</a></li>
-              <li><a href="{{ site.dcvb_parameters }}target-roi-def/name.html" class="otherLinkColour">Name</a></li>
-              <li><a href="{{ site.dcvb_parameters }}target-roi-def/pause-flag.html" class="otherLinkColour">PauseFlag</a></li>
-              <li><a href="{{ site.dcvb_parameters }}target-roi-def/task-setting-name-array.html" class="otherLinkColour">TaskSettingNameArray</a></li>
-          </ul>
-      </li>
-      <!-- <li><a href="{{ site.dcvb_parameter_file }}semantic-processing/index.html" class="otherLinkColour">SemanticProcessing Object</a>
-          <ul>
-              <li><a href="{{ site.dcvb_parameters }}semantic-processing/name.html" class="otherLinkColour">Name</a></li>
-              <li><a href="{{ site.dcvb_parameters }}semantic-processing/reference-object-filter.html" class="otherLinkColour">ReferenceObjectFilter</a></li>
-              <li><a href="{{ site.dcvb_parameters }}semantic-processing/task-setting-name-array.html" class="otherLinkColour">TaskSettingNameArray</a></li>
-          </ul>
-      </li> -->
-      <li><a href="{{ site.dcvb_parameter_file }}task-settings/barcode-reader-task-settings.html" class="otherLinkColour ">BarcodeReaderTaskSetting Object</a>
-          <ul>
-              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/barcode-colour-modes.html" class="otherLinkColour">BarcodeColourModes</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/barcode-complement-modes.html" class="otherLinkColour">BarcodeComplementModes</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/barcode-format-ids.html" class="otherLinkColour">BarcodeFormatIds</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/base-barcode-reader-task-setting-name.html" class="otherLinkColour">BaseBarcodeReaderTaskSettingName</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/deblur-modes.html" class="otherLinkColour">DeblurModes</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/deformation-resisting-modes.html" class="otherLinkColour">DeformationResistingModes</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/dpm-code-reading-modes.html" class="otherLinkColour">DPMCodeReadingModes</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/expected-barcodes-count.html" class="otherLinkColour">ExpectedBarcodesCount</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/line-assembly-mode.html" class="otherLinkColour">LineAssemblyMode</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/localization-modes.html" class="otherLinkColour">LocalizationModes</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/max-threads-in-one-task.html" class="otherLinkColour">MaxThreadsInOneTask</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/name.html" class="otherLinkColour">Name</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/return-barcode-zone-clarity.html" class="otherLinkColour">ReturnBarcodeZoneClarity</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/section-image-parameter-array.html" class="otherLinkColour">SectionImageParameterArray</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/short-line-detection-mode.html" class="otherLinkColour">ShortlineDetectionMode</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/start-section.html" class="otherLinkColour">StartSection</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/terminate-setting.html" class="otherLinkColour">TerminateSetting</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/text-result-order-modes.html" class="otherLinkColour">TextResultOrderModes</a></li>
-          </ul>
-      </li>
-      <!-- <li><a href="{{ site.dcvb_parameter_file }}task-settings/label-recognizer-task-settings.html" class="otherLinkColour ">LabelRecognizerTaskSetting Object</a>
-          <ul>
-              <li><a href="{{ site.dcvb_parameters }}label-recognizer-task-settings/base-label-recognizer-task-setting-name.html" class="otherLinkColour">BaseLabelRecognizerTaskSettingName</a></li>
-              <li><a href="{{ site.dcvb_parameters }}label-recognizer-task-settings/dictionary-correction-thresholds.html" class="otherLinkColour">DictionaryCorrectionThresholds</a></li>
-              <li><a href="{{ site.dcvb_parameters }}label-recognizer-task-settings/dictionary-path.html" class="otherLinkColour">DictionaryPath</a></li>
-              <li><a href="{{ site.dcvb_parameters }}label-recognizer-task-settings/max-threads-in-one-task.html" class="otherLinkColour">MaxThreadsInOneTask</a></li>
-              <li><a href="{{ site.dcvb_parameters }}label-recognizer-task-settings/name.html" class="otherLinkColour">Name</a></li>
-              <li><a href="{{ site.dcvb_parameters }}label-recognizer-task-settings/section-image-parameter-array.html" class="otherLinkColour">SectionImageParameterArray</a></li>
-              <li><a href="{{ site.dcvb_parameters }}label-recognizer-task-settings/start-section.html" class="otherLinkColour">StartSection</a></li>
-              <li><a href="{{ site.dcvb_parameters }}label-recognizer-task-settings/string-length-range.html" class="otherLinkColour">StringLengthRange</a></li>
-              <li><a href="{{ site.dcvb_parameters }}label-recognizer-task-settings/string-regex-pattern.html" class="otherLinkColour">StringRegExPattern</a></li>
-              <li><a href="{{ site.dcvb_parameters }}label-recognizer-task-settings/terminate-setting.html" class="otherLinkColour">TerminateSetting</a></li>
-              <li><a href="{{ site.dcvb_parameters }}label-recognizer-task-settings/text-line-specification-name-array.html" class="otherLinkColour">TextLineSpecificationNameArray</a></li>
-              <li><a href="{{ site.dcvb_parameters }}label-recognizer-task-settings/confusable-characters-path.html" class="otherLinkColour">ConfusableCharactersPath</a></li>
-              <li><a href="{{ site.dcvb_parameters }}label-recognizer-task-settings/cluster-samples-count-threshold.html" class="otherLinkColour">ClusterSamplesCountThreshold</a></li>
-          </ul>
-      </li>
-      <li><a href="{{ site.dcvb_parameter_file }}task-settings/document-normalizer-task-settings.html" class="otherLinkColour ">DocumentNormalizerTaskSetting Object</a>
-          <ul>
-              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/base-document-normalizer-task-setting-name.html" class="otherLinkColour">BaseDocumentNormalizerTaskSettingName</a></li>
-              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/brightness.html" class="otherLinkColour">Brightness</a></li>
-              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/colour-mode.html" class="otherLinkColour">ColourMode</a></li>
-              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/content-type.html" class="otherLinkColour">ContentType</a></li>
-              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/contrast.html" class="otherLinkColour">Contrast</a></li>
-              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/corner-angle-range.html" class="otherLinkColour">CornerAngleRange</a></li>
-              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/deskew-mode.html" class="otherLinkColour">DeskewMode</a></li>
-              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/expected-documents-count.html" class="otherLinkColour">ExpectedDocumentsCount</a></li>
-              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/line-assembly-mode.html" class="otherLinkColour">LineAssemblyMode</a></li>
-              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/max-threads-in-one-task.html" class="otherLinkColour">MaxThreadsInOneTask</a></li>
-              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/name.html" class="otherLinkColour">Name</a></li>
-              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/page-size.html" class="otherLinkColour">PageSize</a></li>
-              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/quadrilateral-detection-modes.html" class="otherLinkColour">QuadrilateralDetectionModes</a></li>
-              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/section-image-parameter-array.html" class="otherLinkColour">SectionImageParameterArray</a></li>
-              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/short-line-detection-mode.html" class="otherLinkColour">ShortlineDetectionMode</a></li>
-              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/start-section.html" class="otherLinkColour">StartSection</a></li>
-              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/terminate-setting.html" class="otherLinkColour">TerminateSetting</a></li>
-          </ul>
-      </li> -->
-      <li><a href="{{ site.dcvb_parameter_file }}image-parameter.html" class="otherLinkColour ">ImageParameter Object</a>
-          <ul>
-              <li><a href="{{ site.dcvb_parameters }}image-parameter/base-image-parameter-name.html" class="otherLinkColour">BaseImageParameterName</a></li>
-              <li><a href="{{ site.dcvb_parameters }}image-parameter/binarization-modes.html" class="otherLinkColour">BinarizationModes</a></li>
-              <li><a href="{{ site.dcvb_parameters }}image-parameter/colour-conversion-modes.html" class="otherLinkColour">ColourConversionModes</a></li>
-              <li><a href="{{ site.dcvb_parameters }}image-parameter/grayscale-enhancement-modes.html" class="otherLinkColour">GrayscaleEnhancementModes</a></li>
-              <li><a href="{{ site.dcvb_parameters }}image-parameter/grayscale-transformation-modes.html" class="otherLinkColour">GrayscaleTransformationModes</a></li>
-              <li><a href="{{ site.dcvb_parameters }}image-parameter/if-erase-text-zone.html" class="otherLinkColour">IfEraseTextZone</a></li>
-              <li><a href="{{ site.dcvb_parameters }}image-parameter/name.html" class="otherLinkColour">Name</a></li>
-              <li><a href="{{ site.dcvb_parameters }}image-parameter/region-predetection-modes.html" class="otherLinkColour">RegionPredetectionModes</a></li>
-              <li><a href="{{ site.dcvb_parameters }}image-parameter/scale-down-threshold.html" class="otherLinkColour">ScaleDownThreshold</a></li>
-              <li><a href="{{ site.dcvb_parameters }}image-parameter/scale-up-modes.html" class="otherLinkColour">ScaleUpModes</a></li>
-              <li><a href="{{ site.dcvb_parameters }}image-parameter/text-detection-mode.html" class="otherLinkColour">TextDetectionMode</a></li>
-              <li><a href="{{ site.dcvb_parameters }}image-parameter/texture-detection-modes.html" class="otherLinkColour">TextureDetectionModes</a></li>
-          </ul>
-      </li>
-      <!-- <li><a href="{{ site.dcvb_parameter_file }}auxiliary/textline-specification.html" class="otherLinkColour ">TextLineSpecification Object</a>
-          <ul>
-              <li><a href="{{ site.dcvb_parameters }}text-line-specification/applicable-text-line-numbers.html" class="otherLinkColour">ApplicableTextLineNumbers</a></li>
-              <li><a href="{{ site.dcvb_parameters }}text-line-specification/base-text-line-specification-name.html" class="otherLinkColour">BaseTextLineSpecificationName</a></li>
-              <li><a href="{{ site.dcvb_parameters }}text-line-specification/binarization-modes.html" class="otherLinkColour">BinarizationModes</a></li>
-              <li><a href="{{ site.dcvb_parameters }}text-line-specification/char-height-range.html" class="otherLinkColour">CharHeightRange</a></li>
-              <li><a href="{{ site.dcvb_parameters }}text-line-specification/character-model-name.html" class="otherLinkColour">CharacterModelName</a></li>
-              <li><a href="{{ site.dcvb_parameters }}text-line-specification/character-normalization-modes.html" class="otherLinkColour">CharacterNormalizationModes</a></li>
-              <li><a href="{{ site.dcvb_parameters }}text-line-specification/grayscale-enhancement-modes.html" class="otherLinkColour">GrayscaleEnhancementModes</a></li>
-              <li><a href="{{ site.dcvb_parameters }}text-line-specification/name.html" class="otherLinkColour">Name</a></li>
-              <li><a href="{{ site.dcvb_parameters }}text-line-specification/string-length-range.html" class="otherLinkColour">StringLengthRange</a></li>
-              <li><a href="{{ site.dcvb_parameters }}text-line-specification/string-regex-pattern.html" class="otherLinkColour">StringRegExPattern</a></li>
-              <li><a href="{{ site.dcvb_parameters }}text-line-specification/position.html" class="otherLinkColour">Text line position parameters</a></li>
-              <li><a href="{{ site.dcvb_parameters }}text-line-specification/concat-string-length-range.html" class="otherLinkColour">ConcatStringLengthRange</a></li>
-              <li><a href="{{ site.dcvb_parameters }}text-line-specification/concat-string-regex-pattern.html" class="otherLinkColour">ConcatStringRegExPattern</a></li>
-              <li><a href="{{ site.dcvb_parameters }}text-line-specification/concat-separator.html" class="otherLinkColour">ConcatSeparator</a></li>
-              <li><a href="{{ site.dcvb_parameters }}text-line-specification/concat-results.html" class="otherLinkColour">ConcatResults</a></li>
-              <li><a href="{{ site.dcvb_parameters }}text-line-specification/output-results.html" class="otherLinkColour">OutputResults</a></li>
-              <li><a href="{{ site.dcvb_parameters }}text-line-specification/sub-groups.html" class="otherLinkColour">SubGroups</a></li>
-              <li><a href="{{ site.dcvb_parameters }}text-line-specification/reference-group-name.html" class="otherLinkColour">ReferenceGroupName</a></li>
-              <li><a href="{{ site.dcvb_parameters }}text-line-specification/text-lines-count.html" class="otherLinkColour">TextLinesCount</a></li>
-              <li><a href="{{ site.dcvb_parameters }}text-line-specification/confusable-characters-correction.html" class="otherLinkColour">ConfusableCharactersCorrection</a></li>
-              <li><a href="{{ site.dcvb_parameters }}text-line-specification/expected-groups-count.html" class="otherLinkColour">ExpectedGroupsCount</a></li>
-          </ul>
-      </li>
-      <li><a href="{{ site.dcvb_parameter_file }}auxiliary/character-model.html" class="otherLinkColour ">CharacterModel Object</a>
-          <ul>
-              <li><a href="{{ site.dcvb_parameters }}character-model/char-set.html" class="otherLinkColour">CharSet</a></li>
-              <li><a href="{{ site.dcvb_parameters }}character-model/directory-path.html" class="otherLinkColour">DirectoryPath</a></li>
-              <li><a href="{{ site.dcvb_parameters }}character-model/filter-file-path.html" class="otherLinkColour">FilterFilePath</a></li>
-              <li><a href="{{ site.dcvb_parameters }}character-model/name.html" class="otherLinkColour">Name</a></li>
-          </ul>
-      </li> -->
-      <li><a href="{{ site.dcvb_parameter_file }}auxiliary/barcode-format-specification.html" class="otherLinkColour ">BarcodeFormatSpecification Object</a>
-          <ul>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/all-module-deviation.html" class="otherLinkColour">AllModuleDeviation</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/australian-post-encoding-table.html" class="otherLinkColour">AustralianPostEncodingTable</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/barcode-angle-range-array.html" class="otherLinkColour">BarcodeAngleRangeArray</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/barcode-bytes-length-range-array.html" class="otherLinkColour">BarcodeBytesLengthRangeArray</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/barcode-height-range-array.html" class="otherLinkColour">BarcodeHeightRangeArray</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/barcode-text-length-range-array.html" class="otherLinkColour">BarcodeTextLengthRangeArray</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/barcode-text-regex-pattern.html" class="otherLinkColour">BarcodeTextRegExPattern</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/barcode-width-range-array.html" class="otherLinkColour">BarcodeWidthRangeArray</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/barcode-zone-bar-count-range-array.html" class="otherLinkColour">BarcodeZoneBarCountRangeArray</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/barcode-zone-min-distance-to-image-borders.html" class="otherLinkColour">BarcodeZoneMinDistanceToImageBorders</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/code128-subset.html" class="otherLinkColour">Code128Subset</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/enable-addon-code.html" class="otherLinkColour">EnableAddOnCode</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/enable-data-matrix-ecc000-140.html" class="otherLinkColour">EnableDataMatrixECC000-140</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/enable-qr-code-model-1.html" class="otherLinkColour">EnableQRCodeModel1</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/find-uneven-module-barcode.html" class="otherLinkColour">FindUnevenModuleBarcode</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/head-module-ratio.html" class="otherLinkColour">HeadModuleRatio</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/min-quiet-zone-width.html" class="otherLinkColour">MinQuietZoneWidth</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/min-ratio-of-barcode-zone-width-to-height.html" class="otherLinkColour">MinRatioOfBarcodeZoneWidthToHeight</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/min-result-confidence.html" class="otherLinkColour">MinResultConfidence</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/mirror-mode.html" class="otherLinkColour">MirrorMode</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/module-size-range-array.html" class="otherLinkColour">ModuleSizeRangeArray</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/msi-code-check-digit-calculation.html" class="otherLinkColour">MSICodeCheckDigitCalculation</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/name.html" class="otherLinkColour">Name</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/partition-modes.html" class="otherLinkColour">PartitionModes</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/patch-code-searching-margins.html" class="otherLinkColour">PatchCodeSearchingMargins</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/require-start-stop-chars.html" class="otherLinkColour">RequireStartStopChars</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/return-partial-barcode-value.html" class="otherLinkColour">ReturnPartialBarcodeValue</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/standard-format.html" class="otherLinkColour">StandardFormat</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/tail-module-ratio.html" class="otherLinkColour">TailModuleRatio</a></li>
-              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/verify-check-digit.html" class="otherLinkColour">VerifyCheckDigit</a></li>
-          </ul>
-      </li>
-      <!-- <li><a href="{{ site.dcvb_parameter_file }}task-settings/code-parser-task-settings.html" class="otherLinkColour ">CodeParserTaskSetting Object</a>
-          <ul>
-              <li><a href="{{ site.dcvb_parameters }}code-parser-task-settings/code-specifications.html" class="otherLinkColour">CodeSpecifications</a></li>
-              <li><a href="{{ site.dcvb_parameters }}code-parser-task-settings/name.html" class="otherLinkColour">Name</a></li>
-              <li><a href="{{ site.dcvb_parameters }}code-parser-task-settings/resources-path.html" class="otherLinkColour">ResourcesPath</a></li>
-          </ul>
-      </li>
-      <li><a href="{{ site.dcvb_parameter_file }}image-source.html" class="otherLinkColour ">ImageSource Object</a>
-          <ul>
-              <li><a href="{{ site.dcvb_parameters }}image-source-options/directory-path.html" class="otherLinkColour">DirectoryPath</a></li>
-              <li><a href="{{ site.dcvb_parameters }}image-source-options/file-filter.html" class="otherLinkColour">FileFilter</a></li>
-              <li><a href="{{ site.dcvb_parameters }}image-source-options/name.html" class="otherLinkColour">Name</a></li>
-              <li><a href="{{ site.dcvb_parameters }}image-source-options/pages.html" class="otherLinkColour">Pages</a></li>
-              <li><a href="{{ site.dcvb_parameters }}image-source-options/pdf-reading-mode.html" class="otherLinkColour">PDFReadingMode</a></li>
-              <li><a href="{{ site.dcvb_parameters }}image-source-options/recursive.html" class="otherLinkColour">Recursive</a></li>
-              <li><a href="{{ site.dcvb_parameters }}image-source-options/type.html" class="otherLinkColour">Type</a></li>
-          </ul>
-      </li> -->
-      <li><a href="{{ site.dcvb_parameter_file }}auxiliary/global-parameter.html" class="otherLinkColour ">Global Parameter</a>
-          <ul>
-              <li><a href="{{ site.dcvb_parameters }}global-parameter/max-total-image-dimension.html" class="otherLinkColour">MaxTotalImageDimension</a></li>
-          </ul>
-      </li>
-      <li><a href="{{ site.dcvb_parameter_file }}task-settings/output-task-setting.html" class="otherLinkColour ">OutputTaskSetting Object</a>
-          <ul>
-              <li><a href="{{ site.dcvb_parameters }}output-task-setting/name.html" class="otherLinkColour">Name</a></li>
-              <li><a href="{{ site.dcvb_parameters }}output-task-setting/output-condition.html" class="otherLinkColour">OutputCondition</a></li>
-          </ul>
-      </li>
-    </ul>
-</li>
\ No newline at end of file
diff --git a/_includes/sidelist-programming/sidelist-parameters.html b/_includes/sidelist-programming/sidelist-parameters.html
index e879f37f..6720abbf 100644
--- a/_includes/sidelist-programming/sidelist-parameters.html
+++ b/_includes/sidelist-programming/sidelist-parameters.html
@@ -1,313 +1,207 @@
-<li lang="javascript"><a href="{{ site.dcvb_parameters }}index.html" class="otherLinkColour">Parameters</a>
+<li lang="javascript">
+    <a href="{{ site.parameters }}reference/index.html" class="otherLinkColour"
+      >Parameters</a
+    >
     <ul>
-        <li><a href="{{ site.dcvb_parameter_file }}capture-vision-template.html" class="otherLinkColour">CaptureVisionTemplate Object</a>
-            <ul>
-                <li><a href="{{ site.dcvb_parameters }}capture-vision-template/image-roi-processing-name-array.html" class="otherLinkColour">ImageROIProcessingNameArray</a></li>
-                <li><a href="{{ site.dcvb_parameters }}capture-vision-template/image-source-name.html" class="otherLinkColour">ImageSourceName</a></li>
-                <li><a href="{{ site.dcvb_parameters }}capture-vision-template/max-parallel-tasks.html" class="otherLinkColour">MaxParallelTasks</a></li>
-                <li><a href="{{ site.dcvb_parameters }}capture-vision-template/min-image-capture-interval.html" class="otherLinkColour">MinImageCaptureInterval</a></li>
-                <li><a href="{{ site.dcvb_parameters }}capture-vision-template/name.html" class="otherLinkColour">Name</a></li>
-                <li><a href="{{ site.dcvb_parameters }}capture-vision-template/output-original-image.html" class="otherLinkColour">OutputOriginalImage</a></li>
-                <li><a href="{{ site.dcvb_parameters }}capture-vision-template/semantic-processing-name-array.html" class="otherLinkColour">SemanticProcessingNameArray</a></li>
-                <li><a href="{{ site.dcvb_parameters }}capture-vision-template/timeout.html" class="otherLinkColour">Timeout</a></li>
-            </ul>
-        </li>
-        <!-- <li><a href="{{ site.dcvb_parameter_file }}image-source.html" class="otherLinkColour">ImageSource Object</a>
-            <ul>
-                <li><a href="{{ site.dcvb_parameters }}image-source-options/directory-path.html" class="otherLinkColour">DirectoryPath</a></li>
-                <li><a href="{{ site.dcvb_parameters }}image-source-options/file-filter.html" class="otherLinkColour">FileFilter</a></li>
-                <li><a href="{{ site.dcvb_parameters }}image-source-options/name.html" class="otherLinkColour">Name</a></li>
-                <li><a href="{{ site.dcvb_parameters }}image-source-options/pages.html" class="otherLinkColour">Pages</a></li>
-                <li><a href="{{ site.dcvb_parameters }}image-source-options/pdf-reading-mode.html" class="otherLinkColour">PDFReadingMode</a></li>
-                <li><a href="{{ site.dcvb_parameters }}image-source-options/recursive.html" class="otherLinkColour">Recursive</a></li>
-                <li><a href="{{ site.dcvb_parameters }}image-source-options/type.html" class="otherLinkColour">Type</a></li>
-            </ul>
-        </li> -->
-        <li><a href="{{ site.dcvb_parameter_file }}target-roi-definition/index.html" class="otherLinkColour">TargetROIDef Object</a>
-            <ul>
-                <li><a href="{{ site.dcvb_parameters }}target-roi-def/base-target-roidef-name.html" class="otherLinkColour">BaseTargetROIDefName</a></li>
-                <li><a href="{{ site.dcvb_parameters }}target-roi-def/enable-results-deduplication.html" class="otherLinkColour">EnableResultsDeduplication</a></li>
-                <li><a href="{{ site.dcvb_parameters }}target-roi-def/location.html" class="otherLinkColour">Location</a>
-                    <ul>
-                        <li><a href="{{ site.dcvb_parameters }}target-roi-def/location/reference-object-filter/index.html" class="otherLinkColour">ReferenceObjectFilter</a>
-                            <ul>
-                                <li><a href="{{ site.dcvb_parameters }}target-roi-def/location/reference-object-filter/reference-object-filter-parameter-details.html#atomicresulttypearray" class="otherLinkColour">AtomicResultTypeArray</a></li>
-                                <li><a href="{{ site.dcvb_parameters }}target-roi-def/location/reference-object-filter/reference-object-filter-parameter-details.html#referencetargetroidefnamearray" class="otherLinkColour">ReferenceTargetROIDefNameArray</a></li>
-                                <li><a href="{{ site.dcvb_parameters }}target-roi-def/location/reference-object-filter/reference-object-filter-parameter-details.html#referencetasknamearray" class="otherLinkColour">ReferenceTaskNameArray</a></li>
-                                <li><a href="{{ site.dcvb_parameters }}target-roi-def/location/reference-object-filter/barcode-filtering-condition.html" class="otherLinkColour">BarcodeFilteringCondition</a></li>
-                                <li><a href="{{ site.dcvb_parameters }}target-roi-def/location/reference-object-filter/frame-filtering-condition.html" class="otherLinkColour">FrameFilteringCondition</a></li>
-                                <li><a href="{{ site.dcvb_parameters }}target-roi-def/location/reference-object-filter/textLine-filtering-condition.html" class="otherLinkColour">TextLineFilteringCondition</a></li>
-                                <li><a href="{{ site.dcvb_parameters }}target-roi-def/location/reference-object-filter/region-filtering-condition.html" class="otherLinkColour">RegionFilteringCondition</a></li>
-                            </ul>
-                        </li>
-                        <li><a href="{{ site.dcvb_parameters }}target-roi-def/location/offset/" class="otherLinkColour">Offset</a>
-                            <ul>
-                                <li><a href="{{ site.dcvb_parameters }}target-roi-def/location/offset/offset-parameter-details.html#referenceobjectoriginindex" class="otherLinkColour">ReferenceObjectOriginIndex</a></li>
-                                <li><a href="{{ site.dcvb_parameters }}target-roi-def/location/offset/offset-parameter-details.html#referenceobjecttype" class="otherLinkColour">ReferenceObjectType</a></li>
-                                <li><a href="{{ site.dcvb_parameters }}target-roi-def/location/offset/offset-parameter-details.html#measuredbypercentage" class="otherLinkColour">MeasureByPercentage</a></li>
-                                <li><a href="{{ site.dcvb_parameters }}target-roi-def/location/offset/offset-parameter-details.html#firstpoint" class="otherLinkColour">FirstPoint</a></li>
-                                <li><a href="{{ site.dcvb_parameters }}target-roi-def/location/offset/offset-parameter-details.html#secondpoint" class="otherLinkColour">SecondPoint</a></li>
-                                <li><a href="{{ site.dcvb_parameters }}target-roi-def/location/offset/offset-parameter-details.html#thirdpoint" class="otherLinkColour">ThirdPoint</a></li>
-                                <li><a href="{{ site.dcvb_parameters }}target-roi-def/location/offset/offset-parameter-details.html#fourthpoint" class="otherLinkColour">FourthPoint</a></li>
-                                <li><a href="{{ site.dcvb_parameters }}target-roi-def/location/offset/reference-x-axis.html" class="otherLinkColour">ReferenceXAxis</a></li>
-                                <li><a href="{{ site.dcvb_parameters }}target-roi-def/location/offset/reference-y-axis.html" class="otherLinkColour">ReferenceYAxis</a></li>
-                            </ul>
-                        </li>
-                    </ul>
-                </li>
-                <li><a href="{{ site.dcvb_parameters }}target-roi-def/name.html" class="otherLinkColour">Name</a></li>
-                <li><a href="{{ site.dcvb_parameters }}target-roi-def/pause-flag.html" class="otherLinkColour">PauseFlag</a></li>
-                <li><a href="{{ site.dcvb_parameters }}target-roi-def/task-setting-name-array.html" class="otherLinkColour">TaskSettingNameArray</a></li>
-            </ul>
-        </li>
-        <li><a href="{{ site.dcvb_parameter_file }}task-settings/barcode-reader-task-settings.html" class="otherLinkColour">BarcodeReaderTaskSetting Object</a>
-            <ul>
-                <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/barcode-format-ids.html" class="otherLinkColour">BarcodeFormatIds</a></li>
-                <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/barcode-format-specification-name-array.html" class="otherLinkColour">BarcodeFormatSpecificationNameArray</a></li>
-                <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/base-barcode-reader-task-setting-name.html" class="otherLinkColour">BaseBarcodeReaderTaskSettingName</a></li>
-                <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/dpm-code-reading-modes.html" class="otherLinkColour">DPMCodeReadingModes</a></li>
-                <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/expected-barcodes-count.html" class="otherLinkColour">ExpectedBarcodesCount</a></li>
-                <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/max-threads-in-one-task.html" class="otherLinkColour">MaxThreadsInOneTask</a></li>
-                <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/name.html" class="otherLinkColour">Name</a></li>
-                <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/return-barcode-zone-clarity.html" class="otherLinkColour">ReturnBarcodeZoneClarity</a></li>
-                <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/text-result-order-modes.html" class="otherLinkColour">TextResultOrderModes</a></li>
-                <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/section-array.html" class="otherLinkColour">SectionArray</a>
-                    <ul>
-                        <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/section-region-predetection.html" class="otherLinkColour">RegionPredetectionSection Object</a>
-                            <ul>
-                                <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/section-region-predetection.html#section" class="otherLinkColour">Section</a></li>
-                                <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/section-region-predetection.html#imageparametername" class="otherLinkColour">ImageParameterName</a></li>
-                                <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/section-region-predetection.html#stagearray" class="otherLinkColour">StageArray</a>
-                                    <ul>
-                                        <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/stage-predetect-regions.html" class="otherLinkColour">PredetectRegionsStage Object</a>
-                                            <ul>
-                                                <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/stage-predetect-regions.html#stage" class="otherLinkColour">Stage</a></li>
-                                                <li><a href="{{ site.dcvb_parameters }}image-parameter/region-predetection-modes.html" class="otherLinkColour">RegionPredetectionModes</a></li>
-                                            </ul>
-                                        </li>
-                                    </ul>
-                                </li>
-                            </ul>
-                        </li>
-                        <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/section-barcode-localization.html" class="otherLinkColour">BarcodeLocalizationSection Object</a>
-                            <ul>
-                                <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/section-barcode-localization.html#section" class="otherLinkColour">Section</a></li>
-                                <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/section-barcode-localization.html#imageparametername" class="otherLinkColour">ImageParameterName</a></li>
-                                <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/section-barcode-localization.html#stagearray" class="otherLinkColour">StageArray</a>
-                                    <ul>
-                                        <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/stage-localize-candidate-barcodes.html" class="otherLinkColour">LocalizeCandidateBarcodesStage Object</a>
-                                            <ul>
-                                                <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/stage-localize-candidate-barcodes.html#stage" class="otherLinkColour">Stage</a></li>
-                                                <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/localization-modes.html" class="otherLinkColour">LocalizationModes</a></li>
-                                            </ul>
-                                        </li>
-                                        <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/stage-localize-barcodes.html" class="otherLinkColour">LocalizeBarcodesStage Object</a>
-                                            <ul>
-                                                <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/stage-candidate-barcodes.html#stage" class="otherLinkColour">Stage</a></li>
-                                            </ul>
-                                        </li>
-                                    </ul>
-                                </li>   
-                            </ul>                      
-                        </li>
-                        <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/section-barcode-decoding.html" class="otherLinkColour">BarcodeDecodingSection Object</a>
-                            <ul>
-                                <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/section-barcode-decoding.html#section" class="otherLinkColour">Section</a></li>
-                                <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/section-barcode-decoding.html#imageparametername" class="otherLinkColour">ImageParameterName</a></li>
-                                <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/section-barcode-decoding.html#stagearray" class="otherLinkColour">StageArray</a>
-                                    <ul>
-                                        <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/stage-resist-deformation.html" class="otherLinkColour">ResistDeformationStage Object</a>
-                                            <ul>
-                                                <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/stage-resist-deformation.html#stage" class="otherLinkColour">Stage</a></li>
-                                                <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/deformation-resisting-modes.html" class="otherLinkColour">DeformationResistingModes</a></li>
-                                            </ul>
-                                        </li>
-                                        <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/stage-complement-barcode.html" class="otherLinkColour">ComplementBarcodeStage Object</a>
-                                            <ul>
-                                                <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/stage-complement-barcode.html#stage" class="otherLinkColour">Stage</a></li>
-                                                <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/barcode-complement-modes.html" class="otherLinkColour">BarcodeComplementModes</a></li>
-                                            </ul>
-                                        </li>
-                                        <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/stage-scale-barcode-image.html" class="otherLinkColour">ScaleBarcodeImageStage Object</a>
-                                            <ul>
-                                                <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/stage-scale-barcode-image.html#stage" class="otherLinkColour">Stage</a></li>
-                                                <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/barcode-scale-modes.html" class="otherLinkColour">BarcodeScaleModes</a></li>
-                                            </ul>
-                                        </li>
-                                        <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/stage-decode-barcodes.html" class="otherLinkColour">DecodeBarcodesStage Object</a>
-                                            <ul>
-                                                <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/stage-decode-barcodes.html#stage" class="otherLinkColour">Stage</a></li>
-                                                <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/deblur-modes.html" class="otherLinkColour">DeblurModes</a></li>
-                                            </ul>
-                                        </li>
-                                    </ul>
-                                </li>
-                            </ul>
-                        </li>
-                    </ul>
-                </li>
-            </ul>
-        </li>
-        <li><a href="{{ site.dcvb_parameter_file }}task-settings/code-parser-task-settings.html" class="otherLinkColour">CodeParserTaskSetting Object</a>
-            <ul>
-                <li><a href="{{ site.dcvb_parameters }}code-parser-task-settings/code-specifications.html" class="otherLinkColour">CodeSpecifications</a></li>
-                <li><a href="{{ site.dcvb_parameters }}code-parser-task-settings/name.html" class="otherLinkColour">Name</a></li>
-                <li><a href="{{ site.dcvb_parameters }}code-parser-task-settings/resources-path.html" class="otherLinkColour">ResourcesPath</a></li>
-            </ul>
-        </li>
-        <li><a href="{{ site.dcvb_parameter_file }}task-settings/output-task-setting.html" class="otherLinkColour">OutputTaskSetting Object</a>
-            <ul>
-                <li><a href="{{ site.dcvb_parameters }}output-task-setting/name.html" class="otherLinkColour">Name</a></li>
-                <li><a href="{{ site.dcvb_parameters }}output-task-setting/output-condition.html" class="otherLinkColour">OutputCondition</a></li>
-            </ul>
-        </li>
-        <li><a href="{{ site.dcvb_parameter_file }}image-parameter.html" class="otherLinkColour">ImageParameter Object</a>
-            <ul>
-                <li><a href="{{ site.dcvb_parameters }}image-parameter/base-image-parameter-name.html" class="otherLinkColour">BaseImageParameterName</a></li>
-                <li><a href="{{ site.dcvb_parameters }}image-parameter/name.html" class="otherLinkColour">Name</a></li>
-                <li><a href="{{ site.dcvb_parameters }}image-parameter/applicable-stages.html" class="otherLinkColour">ApplicableStages</a>
-                    <ul>
-                        <li><a href="{{ site.dcvb_parameters }}image-parameter/stage-assemble-lines.html" class="otherLinkColour">Assemble Lines Stage</a>
-                            <ul>
-                                <li><a href="{{ site.dcvb_parameters }}image-parameter/stage-assemble-lines.html#stage" class="otherLinkColour">Stage</a></li>
-                                <li><a href="{{ site.dcvb_parameters }}image-parameter/line-assembly-mode.html" class="otherLinkColour">LineAssemblyMode</a></li>
-                            </ul>
-                        </li>
-                        <li><a href="{{ site.dcvb_parameters }}image-parameter/stage-binarize-image.html" class="otherLinkColour">Binarize Image Stage</a>
-                            <ul>
-                                <li><a href="{{ site.dcvb_parameters }}image-parameter/stage-binarize-image.html#stage" class="otherLinkColour">Stage</a></li>
-                                <li><a href="{{ site.dcvb_parameters }}image-parameter/binarization-modes.html" class="otherLinkColour">BinarizationModes</a></li>
-                            </ul>
-                        </li>
-                        <li><a href="{{ site.dcvb_parameters }}image-parameter/stage-binarize-texture-removed-grayscale.html" class="otherLinkColour">Binarize Texture Removed Grayscale Stage</a>
-                            <ul>
-                                <li><a href="{{ site.dcvb_parameters }}image-parameter/stage-binarize-texture-removed-grayscale.html#stage" class="otherLinkColour">Stage</a></li>
-                                <li><a href="{{ site.dcvb_parameters }}image-parameter/binarization-modes.html" class="otherLinkColour">BinarizationModes</a></li>
-                            </ul>
-                        </li>
-                        <li><a href="{{ site.dcvb_parameters }}image-parameter/stage-convert-to-grayscale.html" class="otherLinkColour">Convert to Grayscale Stage</a>
-                            <ul>
-                                <li><a href="{{ site.dcvb_parameters }}image-parameter/stage-convert-to-grayscale.html#stage" class="otherLinkColour">Stage</a></li>
-                                <li><a href="{{ site.dcvb_parameters }}image-parameter/colour-conversion-modes.html" class="otherLinkColour">ColourConversionModes</a></li>
-                            </ul>
-                        </li>
-                        <li><a href="{{ site.dcvb_parameters }}image-parameter/stage-detect-shortlines.html" class="otherLinkColour">Detect Shortlines Stage</a>
-                            <ul>
-                                <li><a href="{{ site.dcvb_parameters }}image-parameter/stage-detect-shortlines.html#stage" class="otherLinkColour">Stage</a></li>
-                                <li><a href="{{ site.dcvb_parameters }}image-parameter/shortlines-detection-mode.html" class="otherLinkColour">ShortlinesDetectionMode</a></li>
-                            </ul>
-                        </li>
-                        <li><a href="{{ site.dcvb_parameters }}image-parameter/stage-detect-text-zones.html" class="otherLinkColour">Detect Text Zones Stage</a>
-                            <ul>
-                                <li><a href="{{ site.dcvb_parameters }}image-parameter/stage-detect-text-zones.html#stage" class="otherLinkColour">Stage</a></li>
-                                <li><a href="{{ site.dcvb_parameters }}image-parameter/text-detection-mode.html" class="otherLinkColour">TextDetectionMode</a></li>
-                            </ul>
-                        </li>
-                        <li><a href="{{ site.dcvb_parameters }}image-parameter/stage-detect-texture.html" class="otherLinkColour">Detect Texture Stage</a>
-                            <ul>
-                                <li><a href="{{ site.dcvb_parameters }}image-parameter/stage-detect-texture.html#stage" class="otherLinkColour">Stage</a></li>
-                                <li><a href="{{ site.dcvb_parameters }}image-parameter/texture-detection-modes.html" class="otherLinkColour">TextureDetectionModes</a></li>
-                            </ul>
-                        </li>
-                        <li><a href="{{ site.dcvb_parameters }}image-parameter/stage-enhance-grayscale.html" class="otherLinkColour">Enhance Grayscale Stage</a>
-                            <ul>
-                                <li><a href="{{ site.dcvb_parameters }}image-parameter/stage-enhance-grayscale.html#stage" class="otherLinkColour">Stage</a></li>
-                                <li><a href="{{ site.dcvb_parameters }}image-parameter/grayscale-enhancement-modes.html" class="otherLinkColour">GrayscaleEnhancementModes</a></li>
-                            </ul>
-                        </li>
-                        <li><a href="{{ site.dcvb_parameters }}image-parameter/stage-find-contours.html" class="otherLinkColour">Find Contours Stage</a>
-                            <ul>
-                                <li><a href="{{ site.dcvb_parameters }}image-parameter/stage-find-contours.html#stage" class="otherLinkColour">Stage</a></li>
-                            </ul>
-                        </li>
-                        <li><a href="{{ site.dcvb_parameters }}image-parameter/stage-remove-text-zones-from-binary.html" class="otherLinkColour">Remove Text Zones from Binary Stage</a>
-                            <ul>
-                                <li><a href="{{ site.dcvb_parameters }}image-parameter/stage-remove-text-zones-from-binary.html#stage" class="otherLinkColour">Stage</a></li>
-                                <li><a href="{{ site.dcvb_parameters }}image-parameter/if-erase-text-zone.html" class="otherLinkColour">IfEraseTextZone</a></li>
-                            </ul>
-                        </li>
-                        <li><a href="{{ site.dcvb_parameters }}image-parameter/stage-remove-texture-from-grayscale.html" class="otherLinkColour">Remove Texture from Grayscale Stage</a>
-                            <ul>
-                                <li><a href="{{ site.dcvb_parameters }}image-parameter/stage-remove-texture-from-grayscale.html#stage" class="otherLinkColour">Stage</a></li>
-                                <li><a href="{{ site.dcvb_parameters }}image-parameter/stage-remove-texture-from-grayscale.html#textureremovalstrength" class="otherLinkColour">Stage</a></li>
-                            </ul>
-                        </li>
-                        <li><a href="{{ site.dcvb_parameters }}image-parameter/stage-scale-image.html" class="otherLinkColour">Scale Image Stage</a>
-                            <ul>
-                                <li><a href="{{ site.dcvb_parameters }}image-parameter/stage-scale-image.html#stage" class="otherLinkColour">Stage</a></li>
-                                <li><a href="{{ site.dcvb_parameters }}image-parameter/image-scale-settings.html" class="otherLinkColour">ImageScaleSettings</a></li>
-                            </ul>
-                        </li>
-                        <li><a href="{{ site.dcvb_parameters }}image-parameter/stage-transform-grayscale.html" class="otherLinkColour">Transform Grayscale Stage</a>
-                            <ul>
-                                <li><a href="{{ site.dcvb_parameters }}image-parameter/stage-transform-grayscale.html#stage" class="otherLinkColour">Stage</a></li>
-                                <li><a href="{{ site.dcvb_parameters }}image-parameter/grayscale-transformation-modes.html" class="otherLinkColour">GrayscaleTransformationModes</a></li>
-                            </ul>
-                        </li>
-                    </ul>
-                </li>
-            </ul>
-        </li>
-        <li><a href="{{ site.dcvb_parameter_file }}auxiliary/barcode-format-specification.html" class="otherLinkColour">BarcodeFormatSpecification Object</a>
-            <ul>
-                <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/all-module-deviation.html" class="otherLinkColour">AllModuleDeviation</a></li>
-                <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/australian-post-encoding-table.html" class="otherLinkColour">AustralianPostEncodingTable</a></li>
-                <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/barcode-angle-range-array.html" class="otherLinkColour">BarcodeAngleRangeArray</a></li>
-                <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/barcode-bytes-length-range-array.html" class="otherLinkColour">BarcodeBytesLengthRangeArray</a></li>
-                <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/barcode-height-range-array.html" class="otherLinkColour">BarcodeHeightRangeArray</a></li>
-                <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/barcode-text-length-range-array.html" class="otherLinkColour">BarcodeTextLengthRangeArray</a></li>
-                <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/barcode-text-regex-pattern.html" class="otherLinkColour">BarcodeTextRegExPattern</a></li>
-                <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/barcode-width-range-array.html" class="otherLinkColour">BarcodeWidthRangeArray</a></li>
-                <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/barcode-zone-bar-count-range-array.html" class="otherLinkColour">BarcodeZoneBarCountRangeArray</a></li>
-                <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/barcode-zone-min-distance-to-image-borders.html" class="otherLinkColour">BarcodeZoneMinDistanceToImageBorders</a></li>
-                <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/code128-subset.html" class="otherLinkColour">Code128Subset</a></li>
-                <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/data-matrix-module-isotropic.html" class="otherLinkColour">DataMatrixModuleIsotropic</a></li>
-                <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/data-matrix-size-options.html" class="otherLinkColour">DataMatrixSizeOptions</a></li>
-                <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/enable-addon-code.html" class="otherLinkColour">EnableAddOnCode</a></li>
-                <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/enable-data-matrix-ecc000-140.html" class="otherLinkColour">EnableDataMatrixECC000-140</a></li>
-                <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/enable-qr-code-model-1.html" class="otherLinkColour">EnableQRCodeModel1</a></li>
-                <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/find-uneven-module-barcode.html" class="otherLinkColour">FindUnevenModuleBarcode</a></li>
-                <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/head-module-ratio.html" class="otherLinkColour">HeadModuleRatio</a></li>
-                <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/include-implied-ai01.html" class="otherLinkColour">IncludeImpliedAI01</a></li>
-                <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/include-trailing-check-digit.html" class="otherLinkColour">IncludeTrailingCheckDigit</a></li>
-                <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/min-quiet-zone-width.html" class="otherLinkColour">MinQuietZoneWidth</a></li>
-                <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/min-ratio-of-barcode-zone-width-to-height.html" class="otherLinkColour">MinRatioOfBarcodeZoneWidthToHeight</a></li>
-                <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/min-result-confidence.html" class="otherLinkColour">MinResultConfidence</a></li>
-                <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/mirror-mode.html" class="otherLinkColour">MirrorMode</a></li>
-                <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/module-size-range-array.html" class="otherLinkColour">ModuleSizeRangeArray</a></li>
-                <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/msi-code-check-digit-calculation.html" class="otherLinkColour">MSICodeCheckDigitCalculation</a></li>
-                <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/name.html" class="otherLinkColour">Name</a></li>
-                <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/partition-modes.html" class="otherLinkColour">PartitionModes</a></li>
-                <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/patch-code-searching-margins.html" class="otherLinkColour">PatchCodeSearchingMargins</a></li>
-                <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/require-start-stop-chars.html" class="otherLinkColour">RequireStartStopChars</a></li>
-                <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/return-partial-barcode-value.html" class="otherLinkColour">ReturnPartialBarcodeValue</a></li>
-                <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/standard-format.html" class="otherLinkColour">StandardFormat</a></li>
-                <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/tail-module-ratio.html" class="otherLinkColour">TailModuleRatio</a></li>
-                <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/verify-check-digit.html" class="otherLinkColour">VerifyCheckDigit</a></li>
-            </ul>
-        </li>
-        <li><a href="{{ site.dcvb_parameter_file }}auxiliary/capture-vision-model.html" class="otherLinkColour">CaptureVisionModel Object</a>
-            <ul>
-                <li><a href="{{ site.dcvb_parameter_file }}auxiliary/capture-vision-model.html#directorypath" class="otherLinkColour">DirectoryPath</a></li>
-                <li><a href="{{ site.dcvb_parameter_file }}auxiliary/capture-vision-model.html#maxmodelinstances" class="otherLinkColour">MaxModelInstances</a></li>
-                <li><a href="{{ site.dcvb_parameter_file }}auxiliary/capture-vision-model.html#modelargs" class="otherLinkColour">ModelArgs</a></li>
-                    <ul>
-                        <li><a href="{{ site.dcvb_parameter_file }}auxiliary/char-set.html#" class="otherLinkColour">CharSet Object</a></li>
-                    </ul>
-                <li><a href="{{ site.dcvb_parameter_file }}auxiliary/capture-vision-model.html#name" class="otherLinkColour">Name</a></li>
-            </ul>
-        </li>
-        <li><a href="{{ site.dcvb_parameter_file }}auxiliary/global-parameter.html" class="otherLinkColour">Global Parameter</a>
-            <ul>
-                <li><a href="{{ site.dcvb_parameters }}global-parameter/max-total-image-dimension.html" class="otherLinkColour">MaxTotalImageDimension</a></li>
-            </ul>
-        </li>
-        <li><a href="{{ site.dcvb_parameter_file }}semantic-processing/index.html" class="otherLinkColour">SemanticProcessing Object</a>
-            <ul>
-                <li><a href="{{ site.dcvb_parameters }}semantic-processing/name.html" class="otherLinkColour">Name</a></li>
-                <li><a href="{{ site.dcvb_parameters }}semantic-processing/reference-object-filter.html" class="otherLinkColour">ReferenceObjectFilter</a></li>
-                <li><a href="{{ site.dcvb_parameters }}semantic-processing/task-setting-name-array.html" class="otherLinkColour">TaskSettingNameArray</a></li>
-            </ul>
-        </li>
+      <li><a href="{{ site.dcvb_parameter_file }}capture-vision-template.html" class="otherLinkColour">Capture Vision Template Object</a>
+          <ul>
+              <li><a href="{{ site.dcvb_parameters }}capture-vision-template/image-roi-processing-name-array.html" class="otherLinkColour">ImageROIProcessingNameArray</a></li>
+              <li><a href="{{ site.dcvb_parameters }}capture-vision-template/image-source-name.html" class="otherLinkColour">ImageSourceName</a></li>
+              <li><a href="{{ site.dcvb_parameters }}capture-vision-template/max-parallel-tasks.html" class="otherLinkColour">MaxParallelTasks</a></li>
+              <li><a href="{{ site.dcvb_parameters }}capture-vision-template/min-image-capture-interval.html" class="otherLinkColour">MinImageCaptureInterval</a></li>
+              <li><a href="{{ site.dcvb_parameters }}capture-vision-template/name.html" class="otherLinkColour">Name</a></li>
+              <li><a href="{{ site.dcvb_parameters }}capture-vision-template/output-original-image.html" class="otherLinkColour">OutputOriginalImage</a></li>
+              <li><a href="{{ site.dcvb_parameters }}capture-vision-template/semantic-processing-name-array.html" class="otherLinkColour">SemanticProcessingNameArray</a></li>
+              <li><a href="{{ site.dcvb_parameters }}capture-vision-template/timeout.html" class="otherLinkColour">Timeout</a></li>
+          </ul>
+      </li>
+      <li><a href="{{ site.dcvb_parameter_file }}target-roi-definition/index.html" class="otherLinkColour">TargetROIDef Object</a>
+          <ul>
+              <li><a href="{{ site.dcvb_parameters }}target-roi-def/base-target-roidef-name.html" class="otherLinkColour">BaseTargetROIDefName</a></li>
+              <li><a href="{{ site.dcvb_parameters }}target-roi-def/location.html" class="otherLinkColour">Location</a></li>
+              <li><a href="{{ site.dcvb_parameters }}target-roi-def/name.html" class="otherLinkColour">Name</a></li>
+              <li><a href="{{ site.dcvb_parameters }}target-roi-def/pause-flag.html" class="otherLinkColour">PauseFlag</a></li>
+              <li><a href="{{ site.dcvb_parameters }}target-roi-def/task-setting-name-array.html" class="otherLinkColour">TaskSettingNameArray</a></li>
+          </ul>
+      </li>
+      <!-- <li><a href="{{ site.dcvb_parameter_file }}semantic-processing/index.html" class="otherLinkColour">SemanticProcessing Object</a>
+          <ul>
+              <li><a href="{{ site.dcvb_parameters }}semantic-processing/name.html" class="otherLinkColour">Name</a></li>
+              <li><a href="{{ site.dcvb_parameters }}semantic-processing/reference-object-filter.html" class="otherLinkColour">ReferenceObjectFilter</a></li>
+              <li><a href="{{ site.dcvb_parameters }}semantic-processing/task-setting-name-array.html" class="otherLinkColour">TaskSettingNameArray</a></li>
+          </ul>
+      </li> -->
+      <li><a href="{{ site.dcvb_parameter_file }}task-settings/barcode-reader-task-settings.html" class="otherLinkColour ">BarcodeReaderTaskSetting Object</a>
+          <ul>
+              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/barcode-colour-modes.html" class="otherLinkColour">BarcodeColourModes</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/barcode-complement-modes.html" class="otherLinkColour">BarcodeComplementModes</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/barcode-format-ids.html" class="otherLinkColour">BarcodeFormatIds</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/base-barcode-reader-task-setting-name.html" class="otherLinkColour">BaseBarcodeReaderTaskSettingName</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/deblur-modes.html" class="otherLinkColour">DeblurModes</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/deformation-resisting-modes.html" class="otherLinkColour">DeformationResistingModes</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/dpm-code-reading-modes.html" class="otherLinkColour">DPMCodeReadingModes</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/expected-barcodes-count.html" class="otherLinkColour">ExpectedBarcodesCount</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/line-assembly-mode.html" class="otherLinkColour">LineAssemblyMode</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/localization-modes.html" class="otherLinkColour">LocalizationModes</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/max-threads-in-one-task.html" class="otherLinkColour">MaxThreadsInOneTask</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/name.html" class="otherLinkColour">Name</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/return-barcode-zone-clarity.html" class="otherLinkColour">ReturnBarcodeZoneClarity</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/section-image-parameter-array.html" class="otherLinkColour">SectionImageParameterArray</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/short-line-detection-mode.html" class="otherLinkColour">ShortlineDetectionMode</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/start-section.html" class="otherLinkColour">StartSection</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/terminate-setting.html" class="otherLinkColour">TerminateSetting</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-reader-task-settings/text-result-order-modes.html" class="otherLinkColour">TextResultOrderModes</a></li>
+          </ul>
+      </li>
+      <!-- <li><a href="{{ site.dcvb_parameter_file }}task-settings/label-recognizer-task-settings.html" class="otherLinkColour ">LabelRecognizerTaskSetting Object</a>
+          <ul>
+              <li><a href="{{ site.dcvb_parameters }}label-recognizer-task-settings/base-label-recognizer-task-setting-name.html" class="otherLinkColour">BaseLabelRecognizerTaskSettingName</a></li>
+              <li><a href="{{ site.dcvb_parameters }}label-recognizer-task-settings/dictionary-correction-thresholds.html" class="otherLinkColour">DictionaryCorrectionThresholds</a></li>
+              <li><a href="{{ site.dcvb_parameters }}label-recognizer-task-settings/dictionary-path.html" class="otherLinkColour">DictionaryPath</a></li>
+              <li><a href="{{ site.dcvb_parameters }}label-recognizer-task-settings/max-threads-in-one-task.html" class="otherLinkColour">MaxThreadsInOneTask</a></li>
+              <li><a href="{{ site.dcvb_parameters }}label-recognizer-task-settings/name.html" class="otherLinkColour">Name</a></li>
+              <li><a href="{{ site.dcvb_parameters }}label-recognizer-task-settings/section-image-parameter-array.html" class="otherLinkColour">SectionImageParameterArray</a></li>
+              <li><a href="{{ site.dcvb_parameters }}label-recognizer-task-settings/start-section.html" class="otherLinkColour">StartSection</a></li>
+              <li><a href="{{ site.dcvb_parameters }}label-recognizer-task-settings/string-length-range.html" class="otherLinkColour">StringLengthRange</a></li>
+              <li><a href="{{ site.dcvb_parameters }}label-recognizer-task-settings/string-regex-pattern.html" class="otherLinkColour">StringRegExPattern</a></li>
+              <li><a href="{{ site.dcvb_parameters }}label-recognizer-task-settings/terminate-setting.html" class="otherLinkColour">TerminateSetting</a></li>
+              <li><a href="{{ site.dcvb_parameters }}label-recognizer-task-settings/text-line-specification-name-array.html" class="otherLinkColour">TextLineSpecificationNameArray</a></li>
+              <li><a href="{{ site.dcvb_parameters }}label-recognizer-task-settings/confusable-characters-path.html" class="otherLinkColour">ConfusableCharactersPath</a></li>
+              <li><a href="{{ site.dcvb_parameters }}label-recognizer-task-settings/cluster-samples-count-threshold.html" class="otherLinkColour">ClusterSamplesCountThreshold</a></li>
+          </ul>
+      </li>
+      <li><a href="{{ site.dcvb_parameter_file }}task-settings/document-normalizer-task-settings.html" class="otherLinkColour ">DocumentNormalizerTaskSetting Object</a>
+          <ul>
+              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/base-document-normalizer-task-setting-name.html" class="otherLinkColour">BaseDocumentNormalizerTaskSettingName</a></li>
+              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/brightness.html" class="otherLinkColour">Brightness</a></li>
+              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/colour-mode.html" class="otherLinkColour">ColourMode</a></li>
+              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/content-type.html" class="otherLinkColour">ContentType</a></li>
+              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/contrast.html" class="otherLinkColour">Contrast</a></li>
+              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/corner-angle-range.html" class="otherLinkColour">CornerAngleRange</a></li>
+              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/deskew-mode.html" class="otherLinkColour">DeskewMode</a></li>
+              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/expected-documents-count.html" class="otherLinkColour">ExpectedDocumentsCount</a></li>
+              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/line-assembly-mode.html" class="otherLinkColour">LineAssemblyMode</a></li>
+              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/max-threads-in-one-task.html" class="otherLinkColour">MaxThreadsInOneTask</a></li>
+              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/name.html" class="otherLinkColour">Name</a></li>
+              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/page-size.html" class="otherLinkColour">PageSize</a></li>
+              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/quadrilateral-detection-modes.html" class="otherLinkColour">QuadrilateralDetectionModes</a></li>
+              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/section-image-parameter-array.html" class="otherLinkColour">SectionImageParameterArray</a></li>
+              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/short-line-detection-mode.html" class="otherLinkColour">ShortlineDetectionMode</a></li>
+              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/start-section.html" class="otherLinkColour">StartSection</a></li>
+              <li><a href="{{ site.dcvb_parameters }}document-normalizer-task-settings/terminate-setting.html" class="otherLinkColour">TerminateSetting</a></li>
+          </ul>
+      </li> -->
+      <li><a href="{{ site.dcvb_parameter_file }}image-parameter.html" class="otherLinkColour ">ImageParameter Object</a>
+          <ul>
+              <li><a href="{{ site.dcvb_parameters }}image-parameter/base-image-parameter-name.html" class="otherLinkColour">BaseImageParameterName</a></li>
+              <li><a href="{{ site.dcvb_parameters }}image-parameter/binarization-modes.html" class="otherLinkColour">BinarizationModes</a></li>
+              <li><a href="{{ site.dcvb_parameters }}image-parameter/colour-conversion-modes.html" class="otherLinkColour">ColourConversionModes</a></li>
+              <li><a href="{{ site.dcvb_parameters }}image-parameter/grayscale-enhancement-modes.html" class="otherLinkColour">GrayscaleEnhancementModes</a></li>
+              <li><a href="{{ site.dcvb_parameters }}image-parameter/grayscale-transformation-modes.html" class="otherLinkColour">GrayscaleTransformationModes</a></li>
+              <li><a href="{{ site.dcvb_parameters }}image-parameter/if-erase-text-zone.html" class="otherLinkColour">IfEraseTextZone</a></li>
+              <li><a href="{{ site.dcvb_parameters }}image-parameter/name.html" class="otherLinkColour">Name</a></li>
+              <li><a href="{{ site.dcvb_parameters }}image-parameter/region-predetection-modes.html" class="otherLinkColour">RegionPredetectionModes</a></li>
+              <li><a href="{{ site.dcvb_parameters }}image-parameter/scale-down-threshold.html" class="otherLinkColour">ScaleDownThreshold</a></li>
+              <li><a href="{{ site.dcvb_parameters }}image-parameter/scale-up-modes.html" class="otherLinkColour">ScaleUpModes</a></li>
+              <li><a href="{{ site.dcvb_parameters }}image-parameter/text-detection-mode.html" class="otherLinkColour">TextDetectionMode</a></li>
+              <li><a href="{{ site.dcvb_parameters }}image-parameter/texture-detection-modes.html" class="otherLinkColour">TextureDetectionModes</a></li>
+          </ul>
+      </li>
+      <!-- <li><a href="{{ site.dcvb_parameter_file }}auxiliary/textline-specification.html" class="otherLinkColour ">TextLineSpecification Object</a>
+          <ul>
+              <li><a href="{{ site.dcvb_parameters }}text-line-specification/applicable-text-line-numbers.html" class="otherLinkColour">ApplicableTextLineNumbers</a></li>
+              <li><a href="{{ site.dcvb_parameters }}text-line-specification/base-text-line-specification-name.html" class="otherLinkColour">BaseTextLineSpecificationName</a></li>
+              <li><a href="{{ site.dcvb_parameters }}text-line-specification/binarization-modes.html" class="otherLinkColour">BinarizationModes</a></li>
+              <li><a href="{{ site.dcvb_parameters }}text-line-specification/char-height-range.html" class="otherLinkColour">CharHeightRange</a></li>
+              <li><a href="{{ site.dcvb_parameters }}text-line-specification/character-model-name.html" class="otherLinkColour">CharacterModelName</a></li>
+              <li><a href="{{ site.dcvb_parameters }}text-line-specification/character-normalization-modes.html" class="otherLinkColour">CharacterNormalizationModes</a></li>
+              <li><a href="{{ site.dcvb_parameters }}text-line-specification/grayscale-enhancement-modes.html" class="otherLinkColour">GrayscaleEnhancementModes</a></li>
+              <li><a href="{{ site.dcvb_parameters }}text-line-specification/name.html" class="otherLinkColour">Name</a></li>
+              <li><a href="{{ site.dcvb_parameters }}text-line-specification/string-length-range.html" class="otherLinkColour">StringLengthRange</a></li>
+              <li><a href="{{ site.dcvb_parameters }}text-line-specification/string-regex-pattern.html" class="otherLinkColour">StringRegExPattern</a></li>
+              <li><a href="{{ site.dcvb_parameters }}text-line-specification/position.html" class="otherLinkColour">Text line position parameters</a></li>
+              <li><a href="{{ site.dcvb_parameters }}text-line-specification/concat-string-length-range.html" class="otherLinkColour">ConcatStringLengthRange</a></li>
+              <li><a href="{{ site.dcvb_parameters }}text-line-specification/concat-string-regex-pattern.html" class="otherLinkColour">ConcatStringRegExPattern</a></li>
+              <li><a href="{{ site.dcvb_parameters }}text-line-specification/concat-separator.html" class="otherLinkColour">ConcatSeparator</a></li>
+              <li><a href="{{ site.dcvb_parameters }}text-line-specification/concat-results.html" class="otherLinkColour">ConcatResults</a></li>
+              <li><a href="{{ site.dcvb_parameters }}text-line-specification/output-results.html" class="otherLinkColour">OutputResults</a></li>
+              <li><a href="{{ site.dcvb_parameters }}text-line-specification/sub-groups.html" class="otherLinkColour">SubGroups</a></li>
+              <li><a href="{{ site.dcvb_parameters }}text-line-specification/reference-group-name.html" class="otherLinkColour">ReferenceGroupName</a></li>
+              <li><a href="{{ site.dcvb_parameters }}text-line-specification/text-lines-count.html" class="otherLinkColour">TextLinesCount</a></li>
+              <li><a href="{{ site.dcvb_parameters }}text-line-specification/confusable-characters-correction.html" class="otherLinkColour">ConfusableCharactersCorrection</a></li>
+              <li><a href="{{ site.dcvb_parameters }}text-line-specification/expected-groups-count.html" class="otherLinkColour">ExpectedGroupsCount</a></li>
+          </ul>
+      </li>
+      <li><a href="{{ site.dcvb_parameter_file }}auxiliary/character-model.html" class="otherLinkColour ">CharacterModel Object</a>
+          <ul>
+              <li><a href="{{ site.dcvb_parameters }}character-model/char-set.html" class="otherLinkColour">CharSet</a></li>
+              <li><a href="{{ site.dcvb_parameters }}character-model/directory-path.html" class="otherLinkColour">DirectoryPath</a></li>
+              <li><a href="{{ site.dcvb_parameters }}character-model/filter-file-path.html" class="otherLinkColour">FilterFilePath</a></li>
+              <li><a href="{{ site.dcvb_parameters }}character-model/name.html" class="otherLinkColour">Name</a></li>
+          </ul>
+      </li> -->
+      <li><a href="{{ site.dcvb_parameter_file }}auxiliary/barcode-format-specification.html" class="otherLinkColour ">BarcodeFormatSpecification Object</a>
+          <ul>
+              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/all-module-deviation.html" class="otherLinkColour">AllModuleDeviation</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/australian-post-encoding-table.html" class="otherLinkColour">AustralianPostEncodingTable</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/barcode-angle-range-array.html" class="otherLinkColour">BarcodeAngleRangeArray</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/barcode-bytes-length-range-array.html" class="otherLinkColour">BarcodeBytesLengthRangeArray</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/barcode-height-range-array.html" class="otherLinkColour">BarcodeHeightRangeArray</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/barcode-text-length-range-array.html" class="otherLinkColour">BarcodeTextLengthRangeArray</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/barcode-text-regex-pattern.html" class="otherLinkColour">BarcodeTextRegExPattern</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/barcode-width-range-array.html" class="otherLinkColour">BarcodeWidthRangeArray</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/barcode-zone-bar-count-range-array.html" class="otherLinkColour">BarcodeZoneBarCountRangeArray</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/barcode-zone-min-distance-to-image-borders.html" class="otherLinkColour">BarcodeZoneMinDistanceToImageBorders</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/code128-subset.html" class="otherLinkColour">Code128Subset</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/enable-addon-code.html" class="otherLinkColour">EnableAddOnCode</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/enable-data-matrix-ecc000-140.html" class="otherLinkColour">EnableDataMatrixECC000-140</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/enable-qr-code-model-1.html" class="otherLinkColour">EnableQRCodeModel1</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/find-uneven-module-barcode.html" class="otherLinkColour">FindUnevenModuleBarcode</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/head-module-ratio.html" class="otherLinkColour">HeadModuleRatio</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/min-quiet-zone-width.html" class="otherLinkColour">MinQuietZoneWidth</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/min-ratio-of-barcode-zone-width-to-height.html" class="otherLinkColour">MinRatioOfBarcodeZoneWidthToHeight</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/min-result-confidence.html" class="otherLinkColour">MinResultConfidence</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/mirror-mode.html" class="otherLinkColour">MirrorMode</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/module-size-range-array.html" class="otherLinkColour">ModuleSizeRangeArray</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/msi-code-check-digit-calculation.html" class="otherLinkColour">MSICodeCheckDigitCalculation</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/name.html" class="otherLinkColour">Name</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/partition-modes.html" class="otherLinkColour">PartitionModes</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/patch-code-searching-margins.html" class="otherLinkColour">PatchCodeSearchingMargins</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/require-start-stop-chars.html" class="otherLinkColour">RequireStartStopChars</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/return-partial-barcode-value.html" class="otherLinkColour">ReturnPartialBarcodeValue</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/standard-format.html" class="otherLinkColour">StandardFormat</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/tail-module-ratio.html" class="otherLinkColour">TailModuleRatio</a></li>
+              <li><a href="{{ site.dcvb_parameters }}barcode-format-specification/verify-check-digit.html" class="otherLinkColour">VerifyCheckDigit</a></li>
+          </ul>
+      </li>
+      <!-- <li><a href="{{ site.dcvb_parameter_file }}task-settings/code-parser-task-settings.html" class="otherLinkColour ">CodeParserTaskSetting Object</a>
+          <ul>
+              <li><a href="{{ site.dcvb_parameters }}code-parser-task-settings/code-specifications.html" class="otherLinkColour">CodeSpecifications</a></li>
+              <li><a href="{{ site.dcvb_parameters }}code-parser-task-settings/name.html" class="otherLinkColour">Name</a></li>
+              <li><a href="{{ site.dcvb_parameters }}code-parser-task-settings/resources-path.html" class="otherLinkColour">ResourcesPath</a></li>
+          </ul>
+      </li>
+      <li><a href="{{ site.dcvb_parameter_file }}image-source.html" class="otherLinkColour ">ImageSource Object</a>
+          <ul>
+              <li><a href="{{ site.dcvb_parameters }}image-source-options/directory-path.html" class="otherLinkColour">DirectoryPath</a></li>
+              <li><a href="{{ site.dcvb_parameters }}image-source-options/file-filter.html" class="otherLinkColour">FileFilter</a></li>
+              <li><a href="{{ site.dcvb_parameters }}image-source-options/name.html" class="otherLinkColour">Name</a></li>
+              <li><a href="{{ site.dcvb_parameters }}image-source-options/pages.html" class="otherLinkColour">Pages</a></li>
+              <li><a href="{{ site.dcvb_parameters }}image-source-options/pdf-reading-mode.html" class="otherLinkColour">PDFReadingMode</a></li>
+              <li><a href="{{ site.dcvb_parameters }}image-source-options/recursive.html" class="otherLinkColour">Recursive</a></li>
+              <li><a href="{{ site.dcvb_parameters }}image-source-options/type.html" class="otherLinkColour">Type</a></li>
+          </ul>
+      </li> -->
+      <li><a href="{{ site.dcvb_parameter_file }}auxiliary/global-parameter.html" class="otherLinkColour ">Global Parameter</a>
+          <ul>
+              <li><a href="{{ site.dcvb_parameters }}global-parameter/max-total-image-dimension.html" class="otherLinkColour">MaxTotalImageDimension</a></li>
+          </ul>
+      </li>
+      <li><a href="{{ site.dcvb_parameter_file }}task-settings/output-task-setting.html" class="otherLinkColour ">OutputTaskSetting Object</a>
+          <ul>
+              <li><a href="{{ site.dcvb_parameters }}output-task-setting/name.html" class="otherLinkColour">Name</a></li>
+              <li><a href="{{ site.dcvb_parameters }}output-task-setting/output-condition.html" class="otherLinkColour">OutputCondition</a></li>
+          </ul>
+      </li>
     </ul>
 </li>
\ 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 @@
-<li lang="javascript" class="category">UNDERSTANDING DBR</li>
-<li lang="javascript"><a href="{{ site.dcvb_introduction }}index.html" class="otherLinkColour">Overview of DCV</a></li>
-{%- 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 @@
-<li lang="javascript" class="category">UNDERSTANDING DBR</li>
-<li lang="javascript"><a href="{{ site.dcvb_introduction }}index.html" class="otherLinkColour">Overview of DCV</a></li>
-{%- 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. |
-
-<br />
-
-[**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. |
-
-<br />
-
-[**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. |
-
-<br />
-
-[**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. |
-
-<br />
-
-[**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. |
-
-<br />
-
-[**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();
-  ```
-
-<br />
-
-### _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).
-
-<br />
-
-### isLoaded
-
-* `static` isLoaded&#40;&#41;: *boolean*
-
-  Checks if the decoding module is loaded.
-
-<br />
-
-### loadWasm
-
-* `static` loadWasm&#40;&#41;: *Promise&lt;void&gt;*
-
-  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();
-   });
-  ```
-
-<br />
-
-## Create and Destroy Instance
-
-### bDestroyed
-
-* bDestroyed: *boolean*
-
-  Indicates whether the instance has been destroyed.
-
-<br />
-
-### createInstance
-
-* `static` createInstance&#40;&#41;: *Promise&lt;[BarcodeReader](#barcodereader)&gt;*
-
-  Create a `BarcodeReader` instance.
-
-   ```js
-   let reader = await Dynamsoft.DBR.BarcodeReader.createInstance();
-   ```
-
-<br />
-
-### destroy
-
-* destroy&#40;&#41;: *Promise&lt;void&gt;*
-
-  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.
-
-<br />
-
-## Decode Barcode
-
-### decode
-
-* decode &#40;source: *[Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob) &#124; [Buffer](https://nodejs.org/api/buffer.html#buffer_class_buffer) &#124; [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) &#124; [Uint8Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) &#124; [Uint8ClampedArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray)*<br />
-  
-  *&#124; [HTMLImageElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement) &#124; [HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) &#124; [HTMLVideoElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement)*<br />
-  
-  *&#124; string*&#41;: *Promise&lt;[TextResult](./interface/TextResult.md)&#91;&#93;&gt;*
-
-  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)
-
-<br />
-
-### decodeBase64String
-
-* decodeBase64String&#40;base64: *string*&#41;: *Promise&lt;[TextResult](./interface/TextResult.md)&#91;&#93;&gt;*
-
-  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);
-  }
-  ```
-
-<br />
-
-### decodeUrl
-
-* decodeUrl&#40;url: *string*&#41;: *Promise&lt;[TextResult](./interface/TextResult.md)&#91;&#93;&gt;*
-
-  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);
-  }
-  ```
-
-<br />
-
-### decodeBuffer
-
-* decodeBuffer&#40;<br />
-  &nbsp;&nbsp;&nbsp;&nbsp;buffer: *[Uint8Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) &#124; [Uint8ClampedArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray) &#124; [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) &#124; [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob) &#124; [Buffer](https://nodejs.org/api/buffer.html#buffer_class_buffer)*,<br />
-  &nbsp;&nbsp;&nbsp;&nbsp;width: *number*, height: *number*, stride: *number*,<br />
-  &nbsp;&nbsp;&nbsp;&nbsp;format: *[EnumImagePixelFormat](./enum/EnumImagePixelFormat.md)*<br />
-  &#41;: *Promise&lt;[TextResult](./interface/TextResult.md)&#91;&#93;&gt;*
-
-  Decodes barcodes from raw image data.
-
-<br />
-
-## Decoding Settings
-
-### getRuntimeSettings
-
-* getRuntimeSettings&#40;&#41;: *Promise&lt;[RuntimeSettings](./interface/RuntimeSettings.md)&gt;*
-
-  Gets current runtime settings.
-  
-  ```js
-  let settings = await reader.getRuntimeSettings();
-  settings.deblurLevel = 5;
-  await reader.updateRuntimeSettings(settings);
-  ```
-
-<br />
-
-### updateRuntimeSettings
-
-* updateRuntimeSettings&#40;settings: *[RuntimeSettings](./interface/RuntimeSettings.md) &#124; string*&#41;: *Promise&lt;void&gt;*
-
-  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);
-  ```
-
-<br />
-
-### resetRuntimeSettings
-
-* resetRuntimeSettings&#40;&#41;: *Promise&lt;void&gt;*
-
-  Resets all parameters to default values.
-  
-  ```js
-  await reader.resetRuntimeSettings();
-  ```
-
-<br />
-
-### getModeArgument
-
-* getModeArgument&#40;modeName: *string*, index: *number*, argumentName: *string*&#41;: *Promise&lt;string&gt;*
-
-  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)
-
-<br />
-
-### setModeArgument
-
-* setModeArgument&#40;modeName: *string*, index: *number*, argumentName: *string*, argumentValue: *string*&#41;: *Promise&lt;string&gt;*
-
-  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)
-
-<br />
-
-## 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
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.2.5/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-  ```
-
-<br />
-
-### licenseServer
-
-* `static` licenseServer: *string&#91;&#93; &#124; string*
-
-  Specifies the license server URL.
-
-<br />
-
-### 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
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.2.5/dist/dbr.js" data-handshakeCode="123****-mytest"></script>
-  ```
-
-<br />
-
-### 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
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.2.5/dist/dbr.js" data-organizationID="123****"></script>
-  ```
-
-<br />
-
-### 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
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.2.5/dist/dbr.js" data-handshakeCode="123****-mytest" data-sessionPassword="@#$%****"></script>
-  ```
-
-<br />
-
-## 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);
-  ```
-
-<br />
-
-### oriCanvas
-
-* `readonly` oriCanvas: *[HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) &#124; [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);
-  ```
-
-<br />
-
-### 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)"
-  ```
-
-<br />
-
-### detectEnvironment
-
-* `static` detectEnvironment&#40;&#41;: *Promise&lt;any&gt;*
-
-  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"}
-  ```
-
-<br />
-
-
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 &lt;canvas&gt; element. |
-| [oriCanvas](#oricanvas) | An `HTMLCanvasElement` that holds the original image. |
-
-
-
-## createInstance
-
-Creates a `BarcodeReader` instance.
-
-```typescript
-static createInstance(): Promise<BarcodeReader>
-```
-
-**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<void>
-```
-
-**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<TextResult[]>
-```
-
-**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<TextResult[]>
-```
-
-**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<TextResult[]>
-```
-
-**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<TextResult[]>
-```
-
-**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<RuntimeSettings>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**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<string>
-```
-
-**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<void>
-```
-
-**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 &lt;canvas&gt; 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 &lt;canvas&gt; element. |
-| [getOriginalImageInACanvas()](#getoriginalimageinacanvas) | Returns an `HTMLCanvasElement` that holds the original image. |
-
-## createInstance
-
-Creates a `BarcodeReader` instance.
-
-```typescript
-static createInstance(): Promise<BarcodeReader>
-```
-
-**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<TextResult[]>
-```
-
-**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<TextResult[]>
-```
-
-**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<TextResult[]>
-```
-
-**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<TextResult[]>
-```
-
-**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<RuntimeSettings>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**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<string>
-```
-
-**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<void>
-```
-
-**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 &lt;canvas&gt; 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 &lt;canvas&gt; element. |
-| [getOriginalImageInACanvas()](#getoriginalimageinacanvas) | Returns an `HTMLCanvasElement` that holds the original image. |
-
-## createInstance
-
-Creates a `BarcodeReader` instance.
-
-```typescript
-static createInstance(): Promise<BarcodeReader>
-```
-
-### 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<TextResult[]>
-```
-
-### 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<TextResult[]>
-```
-
-### 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<TextResult[]>
-```
-
-### 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<TextResult[]>
-```
-
-### 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<RuntimeSettings>
-```
-
-### 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<void>
-```
-
-### 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<void>
-```
-
-### 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<string>
-```
-
-### 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<string>
-```
-
-### 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<void>
-```
-
-### 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 &lt;canvas&gt; 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<PlayCallbackInfo>;
-```
-
-### 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<ScanSettings>
-```
-
-### 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<void>
-```
-
-**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 &lt; canvas&gt; element. |
-| [getOriginalImageInACanvas()](#getoriginalimageinacanvas) | Returns an `HTMLCanvasElement` that holds the original image. |
-
-## createInstance
-
-Creates a `BarcodeReader` instance.
-
-```typescript
-static createInstance(): Promise<BarcodeReader>
-```
-
-### 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<TextResult[]>
-```
-
-> 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<TextResult[]>
-```
-
-### 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<TextResult[]>
-```
-
-### 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<TextResult[]>
-```
-
-### 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<RuntimeSettings>
-```
-
-### 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<void>
-```
-
-### 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<void>
-```
-
-### 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<void>
-```
-
-### 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<string>
-```
-
-### 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<string>
-```
-
-### 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<void>
-```
-
-### 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 &lt; canvas&gt; 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<void>;
-```
-
-### 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<PlayCallbackInfo>;
-```
-
-### 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<ScanSettings>
-```
-
-### 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<void>
-```
-
-**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 &lt; canvas&gt; element. |
-| [getOriginalImageInACanvas()](#getoriginalimageinacanvas) | Returns an `HTMLCanvasElement` that holds the original image. |
-
-## createInstance
-
-Creates a `BarcodeReader` instance.
-
-```typescript
-static createInstance(): Promise<BarcodeReader>
-```
-
-### 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<TextResult[]>
-```
-
-> 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<TextResult[]>
-```
-
-### 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<TextResult[]>
-```
-
-### 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<TextResult[]>
-```
-
-### 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<RuntimeSettings>
-```
-
-### 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<void>
-```
-
-### 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<void>
-```
-
-### 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<void>
-```
-
-### 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<string>
-```
-
-### 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<string>
-```
-
-### 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<void>
-```
-
-### 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 &lt; canvas&gt; 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<void>;
-```
-
-### 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<PlayCallbackInfo>;
-```
-
-### 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<ScanSettings>
-```
-
-### 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<void>
-```
-
-**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 &lt; canvas&gt; element. |
-| [getOriginalImageInACanvas()](#getoriginalimageinacanvas) | Returns an `HTMLCanvasElement` that holds the original image. |
-
-## createInstance
-
-Creates a `BarcodeReader` instance.
-
-```typescript
-static createInstance(): Promise<BarcodeReader>
-```
-
-### 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<TextResult[]>
-```
-
-> 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<TextResult[]>
-```
-
-### 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<TextResult[]>
-```
-
-### 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<TextResult[]>
-```
-
-### 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<RuntimeSettings>
-```
-
-### 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<void>
-```
-
-### 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<void>
-```
-
-### 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<void>
-```
-
-### 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<string>
-```
-
-### 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<string>
-```
-
-### 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<void>
-```
-
-### 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 &lt;canvas&gt; 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<void>;
-```
-
-### 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<ScannerPlayCallbackInfo>;
-```
-
-### 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<ScanSettings>
-```
-
-### 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<void>
-```
-
-### 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
----
-<!--NOTE, This page is used until version 8.2.3-->
-
-> 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
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@7.4.0-v1/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-```
-
-## 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
----
-<!--NOTE, This page is used until version 8.2.3-->
-
-> 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
----
-
-<!--NOTE, This page is used until version 8.2.3-->
-
-> 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`<sub>optional</sub> *any*  
-
-### Return Value
-
-`Promise<any>`
-
-### 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
----
-<!--NOTE, This page is used until version 8.2.3-->
-
-> 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
----
-<!--NOTE, This page is used until version 8.2.3-->
-
-> 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
-
-<code>Promise<<a href="../#barcodereader">BarcodeReader</a>></code>
-
-### 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<any>`
-
-## detectEnvironment
-
-Detect the current device environment.
-
-```javascript
-detectEnvironment() returns Promise
-```
-
-### Return Value
-
-`Promise<any>`
-
-### 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<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/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
----
-<!--NOTE, This page is used until version 8.2.3-->
-
-> 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<string>`
-
-### 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<void>`
-
-### 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<void>`
-
-### 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<void>`
-
-### 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
----
-<!--NOTE, This page is used until version 8.2.3-->
-
-> 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<any>`
-
-### 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
----
-<!--NOTE, This page is used until version 8.2.3-->
-
-> 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();
-> ```
-
-<br />
-
-## 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. |
-
-<br />
-
-> [**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. |
-
-<br />
-
-> [**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. |
-
-<br />
-
-> [**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.|
-
-<br />
-
-> [**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.|
-
-<br />
-
-> [**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.|
-
-<br />
-
-> [**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.|
-
-<br />
-
-> [**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. |
-
-<br />
-
-> [**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. |
-
-<br />
-
-> [**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. |
-
-<br />
-
-## Create and Destroy Instance
-
-### bDestroyed
-
-* bDestroyed: *boolean*
-
-> Indicates whether the instance has been destroyed.
-
-<br />
-
-### createInstance
-
-* `static` createInstance&#40;&#41;: *Promise&lt;[BarcodeScanner](#barcodescanner)&gt;*
-
-> Create a `BarcodeScanner` instance.
->
-> ```js
-> let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-> ```
-
-<br />
-
-### destroy
-
-* destroy&#40;&#41;: *Promise&lt;void&gt;*
-
-> 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.
-
-<br />
-
-## Decode Barcode
-
-### onUnduplicatedRead
-
-* `event` onUnduplicatedRead?: *&#40;txt: string, result: [TextResult](interface/TextResult.md)&#41; => 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);
-> }
-> ```
-
-<br />
-
-### onFrameRead
-
-* `event` onFrameRead?: *&#40;results: [TextResult](interface/TextResult.md)&#91;&#93;&#41; => 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);
->     }
-> };
-> ```
-
-<br />
-
-### decodeCurrentFrame
-
-* decodeCurrentFrame&#40;&#41;: *Promise&lt;[TextResult](interface/TextResult.md)&#91;&#93;&gt;*
-
-> Decode barcodes from the current frame of the video.
->
-> ```js
-> await scanner.showVideo();
-> console.log(await scanner.decodeCurrentFrame());
-> ```
-
-## Open and Close
-
-### open
-
-* open&#40;&#41;: *Promise&lt;[ScannerPlayCallbackInfo](interface/ScannerPlayCallbackInfo.md)&gt;*
-
-> 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)
-
-<br />
-
-### close
-
-* close&#40;&#41;: *Promise&lt;void&gt;*
-
-> Stop decoding, release camera, unbind UI.
->
-> ```js
-> await scanner.open();
-> await scanner.close();
-> 
-> await scanner.openVideo();
-> await scanner.close();
-> ```
-
-<br />
-
-### show
-
-* show&#40;&#41;: *Promise&lt;[ScannerPlayCallbackInfo](interface/ScannerPlayCallbackInfo.md)&gt;*
-
-> 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();
-> ```
-
-<br />
-
-### hide
-
-* hide&#40;&#41;: *Promise&lt;void&gt;*
-
-> Stop decoding, release camera, unbind UI.
->
-> ```js
-> await scanner.open();
-> await scanner.hide();
-> 
-> await scanner.openVideo();
-> await scanner.hide();
-> ```
-
-<br />
-
-### openVideo
-
-* openVideo&#40;&#41;: *Promise&lt;[ScannerPlayCallbackInfo](interface/ScannerPlayCallbackInfo.md)&gt;*
-
-> 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());
-> ```
-
-<br />
-
-### showVideo
-
-* showVideo&#40;&#41;: *Promise&lt;[ScannerPlayCallbackInfo](interface/ScannerPlayCallbackInfo.md)&gt;*
-
-> 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());
-> ```
-
-<br />
-
-### isOpen
-
-* isOpen&#40;&#41;: *boolean*
-
-> Check if the scanner is open.
-
-<br />
-
-## Play and Pause
-
-### onPlayed
-
-* `event` onPlayed?: *&#40;info: [ScannerPlayCallbackInfo](interface/ScannerPlayCallbackInfo.md)&#41; => 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.
-> ```
-
-<br />
-
-### play
-
-* play&#40;deviceId?: *string*, width?: *number*, height?: *number*&#41;: *Promise&lt;[ScannerPlayCallbackInfo](interface/ScannerPlayCallbackInfo.md)&gt;*
-
-> Continue the video.
->
-> ```js
-> scanner.pause();
-> \\*** a lot of work ***
-> await scanner.play();
-> ```
-
-<br />
-
-### pause
-
-* pause&#40;&#41;: *void*
-
-> Pause the video. Do not release the camera.
-
-<br />
-
-### stop
-
-* stop&#40;&#41;: *void*
-
-> Stop the video, and release the camera.
-
-<br />
-
-### pauseScan
-
-* pauseScan&#40;&#41;: *void*
-
-> Pause the decoding process.
-
-<br />
-
-### resumeScan
-
-* resumeScan&#40;&#41;: *void*
-
-> Resume the decoding process.
-
-<br />
-
-## 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();
-> ```
-
-<br />
-
-### regionMaskFillStyle
-
-* regionMaskFillStyle: *string = "rgba(0,0,0,0.5)"*
-
-> Set the style used when filling the mask beyond the region.
-
-<br />
-
-### regionMaskStrokeStyle
-
-* regionMaskStrokeStyle: *string = "rgb(254,142,20)"*
-
-> Set the style of the region border.
-
-<br />
-
-### regionMaskLineWidth
-
-* regionMaskLineWidth: *number = 2*
-
-> Set the style used when filling in located barcode.
-
-<br />
-
-### barcodeFillStyle
-
-* barcodeFillStyle: *string = "rgba(254,180,32,0.3)"*
-
-> Set the style used when filling in located barcode.
-
-<br />
-
-### barcodeStrokeStyle
-
-* barcodeStrokeStyle: *string = "rgba(254,180,32,0.9)"*
-
-> Set the style of the located barcode border.
-
-<br />
-
-### barcodeLineWidth
-
-* barcodeLineWidth: *number = 1*
-
-> Set the width of the located barcode border.
-
-<br />
-
-### getUIElement
-
-* getUIElement&#40;&#41;: *HTMLElement*
-
-> Get HTML element containing the [BarcodeScanner](#barcodescanner) instance.
-
-<br />
-
-### setUIElement
-
-* setUIElement&#40;elementOrUrl: *HTMLElement &#124; string*&#41;: *Promise&lt;void&gt;*
-
-> Set html element containing the `BarcodeScanner` instance.
->
-> ```html
-> <video class="dbrScanner-video" playsinline="true"></video>
-> <script>
->   let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
->   await scanner.setUIElement(document.getElementsByClassName("dbrScanner-video")[0]);
->   await scanner.open();
-> </script>
-> ```
->
-> ```html
-> <!-- <video class="dbrScanner-video" playsinline="true"></video> -->
-> <script>
->   let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
->   await scanner.setUIElement("https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.2.5/dist/dbr.scanner.html");
->   await scanner.show();
-> </script>
-> ```
-
-<br />
-
-## Camera Settings
-
-### getAllCameras
-
-* getAllCameras&#40;&#41;: *Promise&lt;[VideoDeviceInfo](interface/VideoDeviceInfo.md)&#91;&#93;&gt;*
-
-> Get infomation of all available cameras on the device.
->
-> ```js
-> let cameras = await scanner.getAllCameras();
-> if(cameras.length){
->   await scanner.setCurrentCamera(cameras[0]);
-> }
-> ```
-
-<br />
-
-### getCurrentCamera
-
-* getCurrentCamera&#40;&#41;: *Promise&lt;[VideoDeviceInfo](interface/VideoDeviceInfo.md) &#124; null&gt;*
-
-> Get information about the currently used camera.
->
-> ```js
-> let camera = await scanner.getCurrentCamera();
-> ```
-
-<br />
-
-### setCurrentCamera
-
-* setCurrentCamera&#40;cameraInfoOrDeviceId: *any*&#41;: *Promise&lt;[ScannerPlayCallbackInfo](interface/ScannerPlayCallbackInfo.md)&gt;*
-
-> 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]);
-> }
-> ```
-
-<br />
-
-### getResolution
-
-* getResolution&#40;&#41;: *number&#91;&#93;*
-
-> Get current camera resolution.
->
-> ```js
-> let rsl = await scanner.getResolution();
-> console.log(rsl.width + " x " + rsl.height);
-> ```
-
-<br />
-
-### setResolution
-
-* setResolution&#40;width: *number &#124; number&#91;&#93;*, height: *number*&#41;
-
-> Set current camera resolution.
-> ```js
-> await scanner.setResolution(width, height);
-> ```
-
-<br />
-
-### getVideoSettings
-
-* getVideoSettings&#40;&#41;: *[MediaStreamConstraints](https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints)*
-
-> Get current video settings.
-
-<br />
-
-### updateVideoSettings
-
-* updateVideoSettings&#40;[MediaStreamConstraints](https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints): *any*&#41;: *Promise&lt;[ScannerPlayCallbackInfo](interface/ScannerPlayCallbackInfo.md) &#124; void&gt;*
-
-> Modify and update video settings.
->
-> ```js
-> await scanner.updateVideoSettings({ video: {width: {ideal: 1280}, height: {ideal: 720}, facingMode: {ideal: 'environment'}} });
-> ```
-
-<br />
-
-### getCapabilities
-
-* getCapabilities&#40;&#41;: *[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}
-> }
-> ```
-
-<br />
-
-### turnOnTorch
-
-* turnOnTorch&#40;&#41;: *Promise&lt;void&gt;*
-
-> 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)
-
-<br />
-
-### turnOffTorch
-
-* turnOffTorch&#40;&#41;: *Promise&lt;void&gt;*
-
-> 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)
-
-<br />
-
-### setColorTemperature
-
-* setColorTemperature&#40;value: *number*&#41;: *Promise&lt;void&gt;*
-
-> 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)
-
-<br />
-
-### setExposureCompensation
-
-* setExposureCompensation&#40;value: *number*&#41;: *Promise&lt;void&gt;*
-
-> 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)
-
-<br />
-
-### setZoom
-
-* setZoom&#40;value: *number*&#41;: *Promise&lt;void&gt;*
-
-> 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)
-
-<br />
-
-### setFrameRate
-
-* setFrameRate&#40;value: *number*&#41;: *Promise&lt;void&gt;*
-
-> 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)
-
-<br />
-
-## Decoding Settings
-
-### getRuntimeSettings
-
-* getRuntimeSettings&#40;&#41;: *Promise&lt;[RuntimeSettings](interface/RuntimeSettings.md)&gt;*
-
-> Gets current runtime settings.
-> ```js
-> let settings = await scanner.getRuntimeSettings();
-> settings.deblurLevel = 5;
-> await scanner.updateRuntimeSettings(settings);
-> ```
-
-<br />
-
-### updateRuntimeSettings
-
-* updateRuntimeSettings&#40;settings: *[RuntimeSettings](interface/RuntimeSettings.md) &#124; string*&#41;: *Promise&lt;void&gt;*
-
-> 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)
-
-<br />
-
-### resetRuntimeSettings
-
-* resetRuntimeSettings&#40;&#41;: *Promise&lt;void&gt;*
-
-> Resets all parameters to default values.
-> ```js
-> await scanner.resetRuntimeSettings();
-> ```
-
-<br />
-
-### getModeArgument
-
-* getModeArgument&#40;modeName: *string*, index: *number*, argumentName: *string*&#41;: *Promise&lt;string&gt;*
-
-> 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)
-
-<br />
-
-### setModeArgument
-
-* setModeArgument&#40;modeName: *string*, index: *number*, argumentName: *string*, argumentValue: *string*&#41;: *Promise&lt;string&gt;*
-
-> 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)
-
-<br />
-
-## 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);
-> ```
-
-<br />
-
-### oriCanvas
-
-* `readonly` oriCanvas: *[HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) &#124; [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);
-> ```
-
-<br />
-
-### bPlaySoundOnSuccessfulRead
-
-* bPlaySoundOnSuccessfulRead: *(boolean &#124; 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
-
-<br />
-
-### 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");
-> ```
-
-<br />
-
-### bVibrateOnSuccessfulRead
-
-* bVibrateOnSuccessfulRead: *(boolean &#124; 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;
-> });
-> ```
-
-<br />
-
-### vibrateDuration
-
-* vibrateDuration: *number = 300*
-
-> Get or set how long (ms) the vibration lasts.
->
-> *@see* [bVibrateOnSuccessfulRead](#bvibrateonsuccessfulread)
-
-<br />
-
-### getScanSettings
-
-* getScanSettings&#40;&#41;: *Promise&lt;[ScanSettings](interface/ScanSettings.md)&gt;*
-
-> Get current scan settings.
-> ```js
-> let scanSettings = await scanner.getScanSettings();
-> scanSettings.intervalTime = 50;
-> scanSettings.duplicateForgetTime = 1000;
-> await scanner.updateScanSettings(scanSettings);
-> ```
-
-<br />
-
-### updateScanSettings
-
-* updateScanSettings&#40;settings: *[ScanSettings](interface/ScanSettings.md)*&#41;: *Promise&lt;void&gt;*
-
-> Modify and update scan settings.
-> ```js
-> let scanSettings = await scanner.getScanSettings();
-> scanSettings.intervalTime = 50;
-> scanSettings.duplicateForgetTime = 1000;
-> await scanner.updateScanSettings(scanSettings);
-> ```
-
-<br />
-
-
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 &lt; canvas&gt; element. |
-| [oriCanvas](./BarcodeReader.md#oricanvas) | An `HTMLCanvasElement` that holds the original image. |
-
-
-
-## createInstance
-
-Creates a `BarcodeScanner` instance.
-
-```typescript
-static createInstance(): Promise<BarcodeScanner>
-```
-
-**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<void>
-```
-
-**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<TextResult[]>
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<void>
-```
-
-**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; <!--never-->
-* `true`: play sound when one or multiple barcodes are found on a frame; <!--always-->
-* `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; <!--never-->
-* `true`: vibrate when one or multiple barcodes are found on a frame; <!--always-->
-* `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<ScanSettings>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**Parameters**
-
-`elementOrURL` : specifies the element.
-
-**Return value**
-
-A promise that resolves when the operation succeeds.
-
-**Code Snippet**
-
-```html
-<!-- Define an element that shows only the video input -->
-<video class="dbrScanner-video" playsinline="true"></video>
-<script>
-    let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-    await scanner.setUIElement(document.getElementsByClassName("dbrScanner-video")[0]);
-    await scanner.open();
-</script>
-```
-
-```html
-<!-- Use the default official UI element definition -->
-<script>
-    let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-    await scanner.setUIElement("https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.4.0/dist/dbr.scanner.html");
-    await scanner.show();
-</script>
-```
-
-
-
-## 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<VideoDeviceInfo[]>
-```
-
-**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<VideoDeviceInfo | null>
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<ScannerPlayCallbackInfo | void>
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**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 &lt; canvas&gt; element. |
-| [oriCanvas](./BarcodeReader.md#oricanvas) | An `HTMLCanvasElement` that holds the original image. |
-
-
-
-## createInstance
-
-Creates a `BarcodeScanner` instance.
-
-```typescript
-static createInstance(): Promise<BarcodeScanner>
-```
-
-**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<void>
-```
-
-**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<TextResult[]>
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<void>
-```
-
-**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; <!--never-->
-* `frame`: play sound when one or multiple barcodes are found on a frame; <!--always-->
-* `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; <!--never-->
-* `frame`: vibrate when one or multiple barcodes are found on a frame; <!--always-->
-* `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<ScanSettings>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**Parameters**
-
-`elementOrURL` : specifies the element.
-
-**Return value**
-
-A promise that resolves when the operation succeeds.
-
-**Code Snippet**
-
-```html
-<!-- Define an element that shows only the video input -->
-<video class="dbrScanner-video" playsinline="true"></video>
-<script>
-    let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-    await scanner.setUIElement(document.getElementsByClassName("dbrScanner-video")[0]);
-    await scanner.open();
-</script>
-```
-
-```html
-<!-- Use the default official UI element definition -->
-<script>
-    let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-    await scanner.setUIElement("https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.6.0/dist/dbr.scanner.html");
-    await scanner.show();
-</script>
-```
-
-
-
-## 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<VideoDeviceInfo[]>
-```
-
-**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<VideoDeviceInfo | null>
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<ScannerPlayCallbackInfo | void>
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**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 &lt; canvas&gt; element. |
-| [oriCanvas](./BarcodeReader.md#oricanvas) | An `HTMLCanvasElement` that holds the original image. |
-
-
-
-## createInstance
-
-Creates a `BarcodeScanner` instance.
-
-```typescript
-static createInstance(): Promise<BarcodeScanner>
-```
-
-**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<void>
-```
-
-**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<TextResult[]>
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<void>
-```
-
-**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; <!--never-->
-* `frame`: play sound when one or multiple barcodes are found on a frame; <!--always-->
-* `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; <!--never-->
-* `frame`: vibrate when one or multiple barcodes are found on a frame; <!--always-->
-* `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<ScanSettings>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**Parameters**
-
-`elementOrURL` : specifies the element.
-
-**Return value**
-
-A promise that resolves when the operation succeeds.
-
-**Code Snippet**
-
-```html
-<!-- Define an element that shows only the video input -->
-<video class="dbrScanner-video" playsinline="true"></video>
-<script>
-    let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-    await scanner.setUIElement(document.getElementsByClassName("dbrScanner-video")[0]);
-    await scanner.open();
-</script>
-```
-
-```html
-<!-- Use the default official UI element definition -->
-<script>
-    let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-    await scanner.setUIElement("https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.7/dist/dbr.scanner.html");
-    await scanner.show();
-</script>
-```
-
-
-
-## 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<VideoDeviceInfo[]>
-```
-
-**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<VideoDeviceInfo | null>
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<ScannerPlayCallbackInfo | void>
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**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 &lt;canvas&gt; element. |
-| [getOriginalImageInACanvas()](./BarcodeReader.md#getoriginalimageinacanvas) | Returns an `HTMLCanvasElement` that holds the original image. |
-
-## createInstance
-
-Creates a `BarcodeScanner` instance.
-
-```typescript
-static createInstance(): Promise<BarcodeScanner>
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<void>
-```
-
-**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<ScanSettings>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**Parameters**
-
-`elementOrURL` : specifies the element.
-
-**Return value**
-
-A promise that resolves when the operation succeeds.
-
-**Code Snippet**
-
-```html
-<!-- Define an element that shows only the video input -->
-<!-- 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. -->
-<div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-<script>
-    let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-    await scanner.setUIElement(document.getElementsByClassName("dce-video-container")[0]);
-    await scanner.open();
-</script>
-```
-
-```html
-<!-- Use the default official UI element definition -->
-<script>
-    let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-    await scanner.setUIElement("https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.0.0/dist/dbr.ui.html");
-    await scanner.show();
-</script>
-```
-
-## 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<VideoDeviceInfo[]>
-```
-
-**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<VideoDeviceInfo | null>
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<ScannerPlayCallbackInfo | void>
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**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<void>;
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**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 &lt;canvas&gt; element. |
-| [getOriginalImageInACanvas()](./BarcodeReader.md#getoriginalimageinacanvas) | Returns an `HTMLCanvasElement` that holds the original image. |
-
-## createInstance
-
-Creates a `BarcodeScanner` instance.
-
-```typescript
-static createInstance(): Promise<BarcodeScanner>
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<void>
-```
-
-**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<ScanSettings>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**Parameters**
-
-`elementOrURL` : specifies the element.
-
-**Return value**
-
-A promise that resolves when the operation succeeds.
-
-**Code Snippet**
-
-```html
-<!-- Define an element that shows only the video input -->
-<video class="dbrScanner-video" playsinline="true"></video>
-<script>
-    let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-    await scanner.setUIElement(document.getElementsByClassName("dbrScanner-video")[0]);
-    await scanner.open();
-</script>
-```
-
-```html
-<!-- Use the default official UI element definition -->
-<script>
-    let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-    await scanner.setUIElement("https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.0.2/dist/dbr.ui.html");
-    await scanner.show();
-</script>
-```
-
-## 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<VideoDeviceInfo[]>
-```
-
-**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<VideoDeviceInfo | null>
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<ScannerPlayCallbackInfo | void>
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**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<void>;
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**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 &lt;canvas&gt; element. |
-| [getOriginalImageInACanvas()](./BarcodeReader.md#getoriginalimageinacanvas) | Returns an `HTMLCanvasElement` that holds the original image. |
-
-## createInstance
-
-Creates a `BarcodeScanner` instance.
-
-```typescript
-static createInstance(): Promise<BarcodeScanner>
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<void>
-```
-
-**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<ScanSettings>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**Parameters**
-
-`elementOrURL` : specifies the element or the element url.
-
-**Return value**
-
-A promise that resolves when the operation succeeds.
-
-**Code Snippet**
-
-```html
-<!-- Define an element that shows only the video input -->
-<!-- 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'. -->
-<div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-<script>
-    (async () => {
-        let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-        await scanner.setUIElement(document.getElementsByClassName("dce-video-container")[0]);
-        await scanner.open();
-    })();
-</script>
-```
-
-```html
-<!-- Use a UI element defined in a HTML file. -->
-<script>
-    (async () => {
-        let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-        await scanner.setUIElement("https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.2.13/dist/dbr.ui.html");
-        await scanner.show();
-    })();
-</script>
-```
-
-## 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<VideoDeviceInfo[]>
-```
-
-**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<VideoDeviceInfo | null>
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<ScannerPlayCallbackInfo | void>
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**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<void>;
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**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 (&lt; 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 &lt;canvas&gt; element. |
-| [getOriginalImageInACanvas()](./BarcodeReader.md#getoriginalimageinacanvas) | Returns an `HTMLCanvasElement` that holds the original image. |
-
-## createInstance
-
-Creates a `BarcodeScanner` instance.
-
-```typescript
-static createInstance(): Promise<BarcodeScanner>
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<void>
-```
-
-**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<ScanSettings>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**Parameters**
-
-`elementOrURL` : specifies the element or the element url.
-
-**Return value**
-
-A promise that resolves when the operation succeeds.
-
-**Code Snippet**
-
-```html
-<!-- Define an element that shows only the video input -->
-<!-- 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'. -->
-<div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-<script>
-    (async () => {
-        let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-        await scanner.setUIElement(document.getElementsByClassName("dce-video-container")[0]);
-        await scanner.open();
-    })();
-</script>
-```
-
-```html
-<!-- Use a UI element defined in a HTML file. -->
-<script>
-    (async () => {
-        let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-        await scanner.setUIElement("https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.3.1/dist/dbr.ui.html");
-        await scanner.show();
-    })();
-</script>
-```
-
-## 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<VideoDeviceInfo[]>
-```
-
-**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<VideoDeviceInfo | null>
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<ScannerPlayCallbackInfo | void>
-```
-
-**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 (&lt; 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<ScannerPlayCallbackInfo>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**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<void>;
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**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 (&lt; 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 &lt;canvas&gt; element. |
-| [getOriginalImageInACanvas()](./BarcodeReader.md#getoriginalimageinacanvas)     | Returns an `HTMLCanvasElement` that holds the original image.     |
-
-## createInstance
-
-Creates a `BarcodeScanner` instance.
-
-```typescript
-static createInstance(): Promise<BarcodeScanner>
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<void>
-```
-
-**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<ScanSettings>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**Parameters**
-
-`elementOrURL` : specifies the element or the element url.
-
-**Return value**
-
-A promise that resolves when the operation succeeds.
-
-**Code Snippet**
-
-```html
-<!-- Define an element that shows only the video input -->
-<!-- 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'. -->
-<div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-<script>
-    (async () => {
-        let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-        await scanner.setUIElement(document.getElementsByClassName("dce-video-container")[0]);
-        await scanner.open();
-    })();
-</script>
-```
-
-```html
-<!-- Use a UI element defined in a HTML file. -->
-<script>
-    (async () => {
-        let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-        await scanner.setUIElement("https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.10/dist/dbr.ui.html");
-        await scanner.show();
-    })();
-</script>
-```
-
-## 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<VideoDeviceInfo[]>
-```
-
-**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<VideoDeviceInfo | null>
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<ScannerPlayCallbackInfo | void>
-```
-
-**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 (&lt; 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<CameraTestResponse>;
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**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<void>;
-```
-
-**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<void>
-```
-
-**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<void>;
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**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 (&lt; 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 &lt;canvas&gt; element. |
-| [getOriginalImageInACanvas()](./BarcodeReader.md#getoriginalimageinacanvas)     | Returns an `HTMLCanvasElement` that holds the original image.     |
-
-## createInstance
-
-Creates a `BarcodeScanner` instance.
-
-```typescript
-static createInstance(): Promise<BarcodeScanner>
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<void>
-```
-
-**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<ScanSettings>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**Parameters**
-
-`elementOrURL` : specifies the element or the element url.
-
-**Return value**
-
-A promise that resolves when the operation succeeds.
-
-**Code Snippet**
-
-```html
-<!-- Define an element that shows only the video input -->
-<!-- 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'. -->
-<div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-<script>
-    (async () => {
-        let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-        await scanner.setUIElement(document.getElementsByClassName("dce-video-container")[0]);
-        await scanner.open();
-    })();
-</script>
-```
-
-```html
-<!-- Use a UI element defined in a HTML file. -->
-<script>
-    (async () => {
-        let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-        await scanner.setUIElement("https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.21/dist/dbr.ui.html");
-        await scanner.show();
-    })();
-</script>
-```
-
-### 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<VideoDeviceInfo[]>
-```
-
-**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<VideoDeviceInfo>
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<ScannerPlayCallbackInfo | void>
-```
-
-**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 (&lt; 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<CameraTestResponse>;
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**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<void>;
-```
-
-**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<void>
-```
-
-**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<void>;
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**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 (&lt; 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 &lt;canvas&gt; element. |
-| [getOriginalImageInACanvas()](./BarcodeReader.md#getoriginalimageinacanvas)     | Returns an `HTMLCanvasElement` that holds the original image.     |
-
-## createInstance
-
-Creates a `BarcodeScanner` instance.
-
-```typescript
-static createInstance(): Promise<BarcodeScanner>
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<void>
-```
-
-**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<ScanSettings>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**Parameters**
-
-`elementOrURL` : specifies the element or the element url.
-
-**Return value**
-
-A promise that resolves when the operation succeeds.
-
-**Code Snippet**
-
-```html
-<!-- Define an element that shows only the video input -->
-<!-- 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'. -->
-<div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-<script>
-    (async () => {
-        let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-        await scanner.setUIElement(document.getElementsByClassName("dce-video-container")[0]);
-        await scanner.open();
-    })();
-</script>
-```
-
-```html
-<!-- Use a UI element defined in a HTML file. -->
-<script>
-    (async () => {
-        let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-        await scanner.setUIElement("https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.42/dist/dbr.ui.html");
-        await scanner.show();
-    })();
-</script>
-```
-
-**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<VideoDeviceInfo[]>
-```
-
-**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<VideoDeviceInfo>
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<ScannerPlayCallbackInfo | void>
-```
-
-**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 (&lt; 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<CameraTestResponse>;
-```
-
-**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<ScannerPlayCallbackInfo>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**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<void>;
-```
-
-**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<void>
-```
-
-**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<void>;
-```
-
-**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<void>
-```
-
-**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<void>
-```
-
-**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
----
-<!--NOTE, This page is used until version 8.2.3-->
-
-> 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
----
-<!--NOTE, This page is used until version 8.2.3-->
-
-> 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
----
-<!--NOTE, This page is used until version 8.2.3-->
-
-> 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. | 
-
----
-
-<!--
-## FrameFilter
-
-Filter and discard video frames that are out of focus during the scanning operation.
-
-### Properties
-
-| Property         | Type | Default Value | Description |
-|------------------|------|---------------|-------------|
-| region<sub>optional</sub> | [Region](#region) | <pre>{ regionLeft = 0, <br/>regionRight = 100, <br/>regionTop = 0, <br/>regionBottom = 100, <br/>regionMeasuredByPercentage = true }</pre> | Detecting area of a frame. | 
-| threshold<sub>optional</sub> | *number* | `0.1` | Threshold used for filtering images. <br>Value range: [0, 1]. <br>An indicator is calculated for each frame from `AppendFrame()`. If the change rate of the indicators between the current frame and historic frames is larger than this threshold, the current frame will be discarded. |
--->
-
-## 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 |
-|------------------|------|---------------|-------------|
-| duplicateForgetTime<sub>optional</sub> | *number* | `3000` | Ignore duplicated results found in the specified time period. Measured in ms. | 
-| frameFilter<sub>optional</sub> | [FrameFilter](#framefilter) |  | Filter and discard video frames that are out of focus. |
-| intervalTime<sub>optional</sub> | *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
-
-<code>Promise<<a href="../interfaces.html#videodeviceinfo">VideoDeviceInfo</a>[]></code>
-
-### 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
-
-<code>Promise<<a href="../interfaces.html#videodeviceinfo">VideoDeviceInfo</a>[] | null></code>
-
-## setCurrentCamera
-
-Set camera by its information or device ID.
-
-```javascript
-setCurrentCamera(cameraInfoOrDeviceId) returns Promise
-```
-
-### Parameters
-
-`cameraInfoOrDeviceId` *any*
-
-### Return Value
-
-<code>Promise<<a href="../interfaces.html#scannerplaycallbackinfo">ScannerPlayCallbackInfo</a>></code>
-
-### 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
-
-<code>Promise<<a href="../interfaces.html#scannerplaycallbackinfo">ScannerPlayCallbackInfo</a>></code>
-
-### 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
-
-<code>Promise<<a href="../interfaces.html#scannerplaycallbackinfo">ScannerPlayCallbackInfo</a>></code>
-
-### 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
-
-<code>Promise<<a href="../interfaces.html#scannerplaycallbackinfo">ScannerPlayCallbackInfo</a>></code>
-
-### 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
----
-<!--NOTE, This page is used until version 8.2.3-->
-
-> 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
-
-<code>Promise<<a href="../interfaces.html#videodeviceinfo">VideoDeviceInfo</a>[]></code>
-
-### 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
-
-<code>Promise<<a href="../interfaces.html#videodeviceinfo">VideoDeviceInfo</a>[] | null></code>
-
-## setCurrentCamera
-
-Set camera by its information or device ID.
-
-```javascript
-setCurrentCamera(cameraInfoOrDeviceId) returns Promise
-```
-
-### Parameters
-
-`cameraInfoOrDeviceId` *any*
-
-### Return Value
-
-<code>Promise<<a href="../interfaces.html#scannerplaycallbackinfo">ScannerPlayCallbackInfo</a>></code>
-
-### 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
-
-<code>Promise<<a href="../interfaces.html#scannerplaycallbackinfo">ScannerPlayCallbackInfo</a>></code>
-
-### 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
-
-<code>Promise<<a href="../interfaces.html#scannerplaycallbackinfo">ScannerPlayCallbackInfo</a>></code>
-
-### 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
-
-<code>Promise<<a href="../interfaces.html#scannerplaycallbackinfo">ScannerPlayCallbackInfo</a>></code>
-
-### 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
----
-<!--NOTE, This page is used until version 8.2.3-->
-
-> 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
-
-<code>Promise<<a href="../interfaces.html#scannerplaycallbackinfo">ScannerPlayCallbackInfo</a>></code>
-
-### 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
-
-<code>Promise<<a href="../interfaces.html#scansettings">ScanSettings</a>></code>
-
-### 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<void>`
-
-### 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
-
-<code>Promise<<a href="../interfaces.html#scannerplaycallbackinfo">ScannerPlayCallbackInfo</a> | void></code>
-
-### 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<void>`
-
-### 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<void>`
-
-### 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<void>`
-
-### 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<void>`
-
-### 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<void>`
-
-### 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<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/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
----
-<!--NOTE, This page is used until version 8.2.3-->
-
-> 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
----
-<!--NOTE, This page is used until version 8.2.3-->
-
-> 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
----
-<!--NOTE, This page is used until version 8.2.3-->
-
-> 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`<sub>optional</sub> *any*  
-
-### Return Value
-
-<code>Promise<<a href="../#barcodescanner">BarcodeScanner</a>></code>
-
-[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<any>`
-
-## 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<void>`
-
-### Sample
-
-```html
-<!-- Define an element that shows only the video input -->
-<!-- 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. -->
-<div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-<script>
-    let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-    await scanner.setUIElement(document.getElementsByClassName("dce-video-container")[0]);
-    await scanner.open();
-</script>
-```
-
-[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
----
-<!--NOTE, This page is used until version 8.2.3-->
-
-> 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<void>`
-
-### 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
----
-<!--NOTE, This page is used until version 8.2.3-->
-
-> 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<void>
-```
-
-**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<any>
-```
-
-**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<void>
-```
-
-**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<any>
-```
-
-**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<void>
-```
-
-**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<any>
-```
-
-**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<void>
-```
-
-**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<any>
-```
-
-**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<void>
-```
-
-**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<any>
-```
-
-**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<void>
-```
-
-### 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<any>
-```
-
-**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)
-
-
-<!--
-## _bUseFullFeature
-
-Whether to use the full engine or the compact engine. The property needs to be set before [loadWasm](#loadwasm) or `createInstance`.
-
-```typescript
-static _bUseFullFeature: boolean
-```
-
-**Default value**
-
-`true`
-
-**Code Snippet**
-
-```js
-Dynamsoft.DBR.BarcodeReader._bUseFullFeature = true;
-await Dynamsoft.DBR.BarcodeReader.loadWasm();
-```
-
-**See Also**
-
-[What are the differences between the compact edition and the full edition?](../faq/differences-between-full-and-compact-editions.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
-<script src="/dist/dbr.js" data-license=
-  "YOUR-ORGANIZATION-ID or YOUR-HANDSHAKECODE or AN-OFFLINE-LICENSE or ANY-OTHER-TYPE-OF-SUPPORTED-LICENSE-STRING"></script>
-```
-
-> 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
-<script src="/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-```
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
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.42/dist/dbr.js" data-license="YOUR-LICENSE-KEY"></script>
-```
-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 <a href="https://www.dynamsoft.com/license-server/docs/common/errorlist.html?ver=latest" target="_blank">DLS Error List</a> 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`<sub>optional</sub> | [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`<sub>optional</sub> | *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. <br/>`0` by coordinate <br/>`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`<sup>[1](#1-tips-and-tricks)</sup> | *number* | `BarcodeReader`: `9` <br/>`BarcodeScanner`: `0` | The degree of blurriness of the barcode. <br/>Value range: `[0, 9]`|
-| `expectedBarcodesCount`<sup>[2](#1-tips-and-tricks)</sup> | *number* | `BarcodeReader`: `512` <br/>`BarcodeScanner`: `0` | The number of barcodes expected to be detected for each image. <br/>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]`<br/>`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`<sup>[3](#1-tips-and-tricks)</sup> | *number* | `0` | The range of barcode text length for barcodes search. <br/>Value range: `[0, 0x7fffffff]`|
-| `minResultConfidence`<sup>[4](#1-tips-and-tricks)</sup> | *number* | `0` | The minimum confidence of the result. <br/>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. <br/>Value range: `[0, 1]`|
-| `scaleDownThreshold`<sup>[5](#1-tips-and-tricks)</sup> | *number* | `BarcodeReader`: `100000`<br/>`BarcodeScanner`: `2300` | The threshold for the image shrinking. <br/>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`<sup>[6](#1-tips-and-tricks)</sup> | [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` <br/>`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. <br/>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
----
-
-<!--NOTE, This page is used until version 8.2.3-->
-
-# 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`<sub>optional</sub> | [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`<sub>optional</sub> | *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. <br/>`0` by coordinate <br/>`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` <br/>`BarcodeScanner`: `0` | Sets the minimum distance (in pixels) between the barcode zone and image borders. <br/>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`<sup>[1](#1-tips-and-tricks)</sup> | *number* | `BarcodeReader`: `9` <br/>`BarcodeScanner`: `0` | **deprecated** The degree of blurriness of the barcode. <br/>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`<sup>[2](#1-tips-and-tricks)</sup> | *number* | `BarcodeReader`: `512` <br/>`BarcodeScanner`: `0` | The number of barcodes expected to be detected for each image. <br/>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]`<br/>`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`<sup>[3](#1-tips-and-tricks)</sup> | *number* | `0` | The range of barcode text length for barcodes search. <br/>Value range: `[0, 0x7fffffff]`|
-| `minResultConfidence`<sup>[4](#1-tips-and-tricks)</sup> | *number* | `0` | The minimum confidence of the result. <br/>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. <br/>Value range: `[0, 1]`|
-| `scaleDownThreshold`<sup>[5](#1-tips-and-tricks)</sup> | *number* | `BarcodeReader`: `100000`<br/>`BarcodeScanner`: `2300` | The threshold for the image shrinking. <br/>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`<sup>[6](#1-tips-and-tricks)</sup> | [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` <br/>`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. <br/>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. |
-
-<!--
-| `detailedResult` | [DetailedResult](#detailedResult) | Extra details of the result. | -->
-
-## 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 &lt;canvas&gt; element. |
-| [oriCanvas]({{ site.js }}api-reference/BarcodeReader-v8.4.0.html#oricanvas) | An `HTMLCanvasElement` that holds the original image. |
-
-<br />
-
-## 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 &lt;canvas&gt; element. |
-| [getOriginalImageInACanvas()](BarcodeReader.md#getoriginalimageinacanvas) | Returns an `HTMLCanvasElement` that holds the original image. |
-
-<br />
-
-## 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 &lt;canvas&gt; element. |
-| [getOriginalImageInACanvas()](BarcodeReader.md#getoriginalimageinacanvas) | Returns an `HTMLCanvasElement` that holds the original image. |
-
-<br />
-
-## 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 &lt;canvas&gt; element. |
-| [getOriginalImageInACanvas()](BarcodeReader.md#getoriginalimageinacanvas) | Returns an `HTMLCanvasElement` that holds the original image. |
-
-<br />
-
-## 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 &lt;canvas&gt; element. |
-| [getOriginalImageInACanvas()](BarcodeReader.md#getoriginalimageinacanvas) | Returns an `HTMLCanvasElement` that holds the original image. |
-
-<br />
-
-## 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 &lt;canvas&gt; element. |
-| [getOriginalImageInACanvas()](BarcodeReader.md#getoriginalimageinacanvas)     | Returns an `HTMLCanvasElement` that holds the original image.     |
-
-<br />
-
-## 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 &lt;canvas&gt; element. |
-| [getOriginalImageInACanvas()](BarcodeReader.md#getoriginalimageinacanvas)     | Returns an `HTMLCanvasElement` that holds the original image.     |
-
-<br />
-
-## 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 &#124; [EnumColourConversionMode](../enum/EnumColourConversionMode.md)* |
-| [grayscaleTransformationModes](#grayscaletransformationmodes) | *number &#124; [EnumGrayscaleTransformationMode](../enum/EnumGrayscaleTransformationMode.md)* |
-| [regionPredetectionModes](#regionpredetectionmodes) | *number &#124; [EnumRegionPredetectionMode](../enum/EnumRegionPredetectionMode.md)* |
-| [imagePreprocessingModes](#imagepreprocessingmodes) | *number &#124; [EnumImagePreprocessingMode](../enum/EnumImagePreprocessingMode.md)* |
-| [textureDetectionModes](#texturedetectionmodes) | *number &#124; [EnumTextureDetectionMode](../enum/EnumTextureDetectionMode.md)* |
-| [dpmCodeReadingModes](#dpmcodereadingmodes) | *number &#124; [EnumDPMCodeReadingMode](../enum/EnumDPMCodeReadingMode.md)* |
-| [deformationResistingModes](#deformationresistingmodes) | *number &#124; [EnumDeformationResistingMode](../enum/EnumDeformationResistingMode.md)*  |
-| [barcodeComplementModes](#barcodecolourmodes) | *number &#124; [EnumBarcodeComplementMode](../enum/EnumBarcodeComplementMode.md)* |
-| [barcodeColourModes](#barcodecolourmodes) | *number &#124; [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<number>*
-
-  > 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 &#124; 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 &#124; [EnumBarcodeFormat](../enum/EnumBarcodeFormat.md)* |
-| [barcodeFormatIds_2](#barcodeformatids_2) | *number &#124; [EnumBarcodeFormat_2](../enum/EnumBarcodeFormat_2.md)* |
-| [expectedBarcodesCount](#expectedbarcodescount) | *number* |
-| [deblurLevel](#deblurlevel) | *number* |
-| [scaleDownThreshold](#scaledownthreshold) | *number* |
-| [localizationModes](#localizationmodes) | *number &#124; [EnumLocalizationMode](../enum/EnumLocalizationMode.md)* |
-| [binarizationModes](#binarizationmodes) | *number &#124; [EnumResultCoordinateType](../enum/EnumResultCoordinateType.md)*  |
-| [region](#region) | [*`Region`*](Region.md) |
-| [minBarcodeTextLength](#minbarcodetextlength) | *number* |
-| [minResultConfidence](#minresultconfidence) | *number* |
-| [resultCoordinateType](#resultcoordinatetype) | *number &#124; [EnumResultCoordinateType](../enum/EnumResultCoordinateType.md)*  |
-| [intermediateResultTypes](#intermediateresulttypes) | *number &#124; [EnumIntermediateResultType](../enum/EnumIntermediateResultType.md)* |
-| [intermediateResultSavingMode](#intermediateresultsavingmode) | *number &#124; [EnumIntermediateResultSavingMode](../enum/EnumIntermediateResultSavingMode.md)* |
-| [deblurModes](#deblurmodes) | *number &#124; [EnumDeblurMode](../enum/EnumDeblurMode.md)* |
-| [scaleUpModes](#scaleupmodes) | *number &#124; [EnumScaleUpMode](../enum/EnumScaleUpMode.md)* |
-| [terminatePhase](#terminatephase) | *number &#124; [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);
-```
-
-<!--
-### pdfRasterDPI
-
-Sets the output image resolution.
-
-**Value Range** [100, 600]
-
-**Default Value** 300
-
-**Remarks** When decoding barcodes from a PDF file using the DecodeFile method, the library will convert the PDF file to image(s) first, then perform barcode recognition.
-
-```js
-let runtimeSettings = await reader.getRuntimeSettings();
-runtimeSettings.pdfRasterDPI = 100;
-await reader.updateRuntimeSettings(runtimeSettings);
-```
-
-### pdfReadingMode
-
-Sets the way to detect barcodes from a PDF file when using the DecodeFile method.
-
-**Value Range** Any one of the [EnumPDFReadingMode](../enum/EnumPDFReadingMode.md) Enumeration items. 
-
-**Default Value** `PDFRM_AUTO`  
-
-```js
-let runtimeSettings = await reader.getRuntimeSettings();
-runtimeSettings.pdfReadingMode = Dynamsoft.DBR.EnumPDFReadingMode.PDFRM_VECTOR;
-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 &#124; [EnumBarcodeFormat](../enum/EnumBarcodeFormat.md)*
-
-  > The barcode format.
-
-* barcodeFormatString: *string*
-
-  > Barcode type in string.
-
-* barcodeBytes: *number&#91;&#93;*
-
-  > 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> | 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
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.2.5/dist/dbr.js"></script>
-<script>
-    let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-    scanner.onUnduplicatedRead = (txt, result) => {
-        // Do somthing with the "txt" found in the barcode
-    };
-    await scanner.show();
-</script>
-```
-
-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. 
-
-<!--TODO
-
-add more info (APIs, etc.) on how we achieve better 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. The library handles all these cases with its rich image processing algorithms through various adjustable settings.
-
-<!--TODO
-
-add more info (APIs, etc.) on how we handle these tough codes
-
--->
-
-### 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 <a href="https://www.dynamsoft.com/store/dynamsoft-barcode-reader/#JavaScript" target="_blank">Online Store</a>.
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
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.4.0/dist/dbr.js"></script>
-<script>
-    let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-    scanner.onUnduplicatedRead = (txt, result) => {
-        // Do somthing with the "txt" found in the barcode
-    };
-    await scanner.show();
-</script>
-```
-
-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. 
-
-<!--TODO
-
-add more info (APIs, etc.) on how we achieve better 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. The library handles all these cases with its rich image processing algorithms through various adjustable settings.
-
-<!--TODO
-
-add more info (APIs, etc.) on how we handle these tough codes
-
--->
-
-### 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 <a href="https://www.dynamsoft.com/store/dynamsoft-barcode-reader/#JavaScript" target="_blank">Online Store</a>.
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
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.6.0/dist/dbr.js"></script>
-<script>
-    (async()=>{
-        let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-        scanner.onUnduplicatedRead = (txt, result) => {
-        // Do somthing with the "txt" found in the barcode
-        };
-        await scanner.show();
-    })();
-</script>
-```
-
-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. 
-
-<!--TODO
-
-add more info (APIs, etc.) on how we achieve better 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. The library handles all these cases with its rich image processing algorithms through various adjustable settings.
-
-<!--TODO
-
-add more info (APIs, etc.) on how we handle these tough codes
-
--->
-
-### 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 <a href="https://www.dynamsoft.com/store/dynamsoft-barcode-reader/#JavaScript" target="_blank">Online Store</a>.
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
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.6.3/dist/dbr.js"></script>
-<script>
-    (async()=>{
-        let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-        scanner.onUnduplicatedRead = (txt, result) => {
-        // Do somthing with the "txt" found in the barcode
-        };
-        await scanner.show();
-    })();
-</script>
-```
-
-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. 
-
-<!--TODO
-
-add more info (APIs, etc.) on how we achieve better 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. The library handles all these cases with its rich image processing algorithms through various adjustable settings.
-
-<!--TODO
-
-add more info (APIs, etc.) on how we handle these tough codes
-
--->
-
-### 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 <a href="https://www.dynamsoft.com/store/dynamsoft-barcode-reader/#JavaScript" target="_blank">Online Store</a>.
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
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.0/dist/dbr.js"></script>
-<script>
-    (async()=>{
-        let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-        scanner.onUnduplicatedRead = (txt, result) => {
-        // Do somthing with the "txt" found in the barcode
-        };
-        await scanner.show();
-    })();
-</script>
-```
-
-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. 
-
-<!--TODO
-
-add more info (APIs, etc.) on how we achieve better 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. The library handles all these cases with its rich image processing algorithms through various adjustable settings.
-
-<!--TODO
-
-add more info (APIs, etc.) on how we handle these tough codes
-
--->
-
-### 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 <a href="https://www.dynamsoft.com/store/dynamsoft-barcode-reader/#JavaScript" target="_blank">Online Store</a>.
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
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.3/dist/dbr.js"></script>
-<script>
-    (async()=>{
-        let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-        scanner.onUnduplicatedRead = (txt, result) => {
-        // Do somthing with the "txt" found in the barcode
-        };
-        await scanner.show();
-    })();
-</script>
-```
-
-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. 
-
-<!--TODO
-
-add more info (APIs, etc.) on how we achieve better 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. The library handles all these cases with its rich image processing algorithms through various adjustable settings.
-
-<!--TODO
-
-add more info (APIs, etc.) on how we handle these tough codes
-
--->
-
-### 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 <a href="https://www.dynamsoft.com/store/dynamsoft-barcode-reader/#JavaScript" target="_blank">Online Store</a>.
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
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.5/dist/dbr.js"></script>
-<script>
-    (async()=>{
-        let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-        scanner.onUnduplicatedRead = (txt, result) => {
-        // Do somthing with the "txt" found in the barcode
-        };
-        await scanner.show();
-    })();
-</script>
-```
-
-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. 
-
-<!--TODO
-
-add more info (APIs, etc.) on how we achieve better 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. The library handles all these cases with its rich image processing algorithms through various adjustable settings.
-
-<!--TODO
-
-add more info (APIs, etc.) on how we handle these tough codes
-
--->
-
-### 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 <a href="https://www.dynamsoft.com/store/dynamsoft-barcode-reader/#JavaScript" target="_blank">Online Store</a>.
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
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.7/dist/dbr.js"></script>
-<script>
-  (async()=>{
-    let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-    scanner.onUnduplicatedRead = (txt, result) => {
-      // Do somthing with the "txt" found in the barcode
-    };
-    await scanner.show();
-  })();
-</script>
-```
-
-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. 
-
-<!--TODO
-
-add more info (APIs, etc.) on how we achieve better 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. The library handles all these cases with its rich image processing algorithms through various adjustable settings.
-
-<!--TODO
-
-add more info (APIs, etc.) on how we handle these tough codes
-
--->
-
-### 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 <a href="https://www.dynamsoft.com/store/dynamsoft-barcode-reader/#JavaScript" target="_blank">Online Store</a>.
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
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.0.0/dist/dbr.js"></script>
-<script>
-  // specify a license, you can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=intro&product=dbr&package=js to get your own trial license good for 30 days. 
-  Dynamsoft.DBR.BarcodeScanner.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
-  (async()=>{
-    let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-    scanner.onUniqueRead = (txt, result) => {
-      // Do somthing with the "txt" found in the barcode
-    };
-    await scanner.show();
-  })();
-</script>
-```
-
-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.
-
-<!--TODO
-
-add more info (APIs, etc.) on how we achieve better 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. The library handles all these cases with its rich image processing algorithms through various adjustable settings.
-
-<!--TODO
-
-add more info (APIs, etc.) on how we handle these tough codes
-
--->
-
-### 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 <a href="https://www.dynamsoft.com/store/dynamsoft-barcode-reader/#JavaScript" target="_blank">Online Store</a>.
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
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.0.1/dist/dbr.js"></script>
-<script>
-  // specify a license, you can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=intro&product=dbr&package=js to get your own trial license good for 30 days. 
-  Dynamsoft.DBR.BarcodeScanner.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
-  (async()=>{
-    let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-    scanner.onUniqueRead = (txt, result) => {
-      // Do somthing with the "txt" found in the barcode
-    };
-    await scanner.show();
-  })();
-</script>
-```
-
-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.
-
-<!--TODO
-
-add more info (APIs, etc.) on how we achieve better 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. The library handles all these cases with its rich image processing algorithms through various adjustable settings.
-
-<!--TODO
-
-add more info (APIs, etc.) on how we handle these tough codes
-
--->
-
-### 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 <a href="https://www.dynamsoft.com/store/dynamsoft-barcode-reader/#JavaScript" target="_blank">Online Store</a>.
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
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.0.2/dist/dbr.js"></script>
-<script>
-  // specify a license, you can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=intro&product=dbr&package=js to get your own trial license good for 30 days. 
-  Dynamsoft.DBR.BarcodeScanner.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
-  (async()=>{
-    let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-    scanner.onUniqueRead = (txt, result) => {
-      // Do something with the "txt" found in the barcode
-    };
-    await scanner.show();
-  })();
-</script>
-```
-
-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
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.2.12/dist/dbr.js"></script>
-<script>
-  // specify a license, you can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=intro&product=dbr&package=js to get your own trial license good for 30 days. 
-  Dynamsoft.DBR.BarcodeScanner.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
-  (async()=>{
-    let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-    scanner.onUniqueRead = (txt, result) => {
-      // Do something with the "txt" found in the barcode
-    };
-    await scanner.show();
-  })();
-</script>
-```
-
-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
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.2.13/dist/dbr.js"></script>
-<script>
-  // specify a license, you can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=intro&product=dbr&package=js to get your own trial license good for 30 days. 
-  Dynamsoft.DBR.BarcodeScanner.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
-  (async()=>{
-    let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-    scanner.onUniqueRead = (txt, result) => {
-      // Do something with the "txt" found in the barcode
-    };
-    await scanner.show();
-  })();
-</script>
-```
-
-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
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.3.0/dist/dbr.js"></script>
-<script>
-  // specify a license, you can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=intro&product=dbr&package=js to get your own trial license good for 30 days. 
-  Dynamsoft.DBR.BarcodeScanner.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
-  (async()=>{
-    let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-    scanner.onUniqueRead = (txt, result) => {
-      // Do something with the "txt" found in the barcode
-    };
-    await scanner.show();
-  })();
-</script>
-```
-
-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
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.32/dist/dbr.js"></script>
-<script>
-  // specify a license, you can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=intro&product=dbr&package=js to get your own trial license good for 30 days. 
-  Dynamsoft.DBR.BarcodeScanner.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
-  (async()=>{
-    let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-    scanner.onUniqueRead = (txt, result) => {
-      // Do something with the "txt" found in the barcode
-    };
-    await scanner.show();
-  })();
-</script>
-```
-
-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
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.33/dist/dbr.js"></script>
-<script>
-  // specify a license, you can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=intro&product=dbr&package=js to get your own trial license good for 30 days. 
-  Dynamsoft.DBR.BarcodeScanner.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
-  (async()=>{
-    let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-    scanner.onUniqueRead = (txt, result) => {
-      // Do something with the "txt" found in the barcode
-    };
-    await scanner.show();
-  })();
-</script>
-```
-
-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
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.40/dist/dbr.js"></script>
-<script>
-  // specify a license, you can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=intro&product=dbr&package=js to get your own trial license good for 30 days. 
-  Dynamsoft.DBR.BarcodeScanner.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
-  (async()=>{
-    let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-    scanner.onUniqueRead = (txt, result) => {
-      // Do something with the "txt" found in the barcode
-    };
-    await scanner.show();
-  })();
-</script>
-```
-
-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
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.42/dist/dbr.js"></script>
-<script>
-  // specify a license, you can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=intro&product=dbr&package=js to get your own trial license good for 30 days. 
-  Dynamsoft.DBR.BarcodeScanner.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
-  (async()=>{
-    let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-    scanner.onUniqueRead = (txt, result) => {
-      // Do something with the "txt" found in the barcode
-    };
-    await scanner.show();
-  })();
-</script>
-```
-
-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
-
-<a target_="blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/9.x/5.others/debug" alt="Debug Sample on GitHub">Debug Sample on GitHub</a>
-
-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
-
-* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/9.x/1.hello-world/3.read-video-angular">Hello World in Angular - Source Code</a>
-
-## 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<BarcodeScanner> | null = null;
-
-  async ngOnInit(): Promise<void> {
-    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
-<div class="ImgDecode"><input type="file" (change)="decodeImg($event)"/></div>
-```
-
-* 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<BarcodeReader> | null = null;
-
-  async ngOnInit(): Promise<void> { }
-
-  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
-<div class="helloWorld">
-    <h1>Hello World for Angular<img style="height: 25px;" alt="logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
-        />
-    </h1>
-    <div>
-        <button [ngStyle]="{'margin-right': '10px', 'background-color': bShowScanner ? 'rgb(255,174,55)' : 'white'}" (click)="showScanner()">Video Decode</button>
-        <button [ngStyle]="{'background-color': !bShowScanner ? 'rgb(255,174,55)' : 'white'}" (click)="showImgDecode()">Image Decode</button>
-    </div>
-    <div class="container">
-        <app-video-decode *ngIf="bShowScanner"></app-video-decode>
-        <app-img-decode *ngIf="bShowImgDecode"></app-img-decode>
-    </div>
-</div>
-```
-
-* 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<void> {
-    // 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
-<app-hello-world></app-hello-world>
-```
-
-* 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
-
-* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/9.x/1.hello-world/9.read-video-electron">Read Barcodes from Camera - Source Code</a>
-
-## 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
-<!DOCTYPE html>
-<html>
-
-<head>
-    <meta charset="UTF-8">
-    <title>Read barcodes from a video input in Electron!</title>
-    <link href="style.css" rel="stylesheet">
-</head>
-
-<body>
-    <h1>Read barcodes from a video input</h1>
-    <button id='readBarcode'>Read Barcode via Camera</button>
-    <div id="UIElement">
-        <div id="barcodeScannerUI"></div>
-    </div>
-    <input id="resultText" type="text" readonly="true">
-    <script src="./node_modules/dynamsoft-javascript-barcode/dist/dbr.js"></script>
-    <script src="action.js"></script>
-</body>
-
-</html>
-```
-
-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
----
-
-<div class="filetree">
-    <div class="ds-logo"></div>
-    <div class="file">
-        <h3>HelloWorld Samples - DBR JavaScript Edition</h3>
-    </div>
-    <div class="children">
-        <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Minimum necessary JavaScript code to get
-            the BarcodeScanner (video) up and running." class="button title"
-                    href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.42/1.hello-world/1.hello-world.html">Hello World</a>
-        </div>
-        <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Decode video stream in an Angular
-            Application from a USB-connected or built-in camera (mobile or desktop)." class="button title"
-                    href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.42/1.hello-world/3.read-video-angular">Hello World in
-                Angular (<img alt="Angular logo"
-                    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==" />)</a> 
-                    </div>
-        <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Decode video stream in a React
-            Application from a USB-connected or built-in camera (mobile or desktop)." class="button title"
-                    href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.42/1.hello-world/4.read-video-react">
-                Hello World in
-                React (<img alt="React logo"
-                    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4NDEuOSA1OTUuMyI+PGcgZmlsbD0iIzYxREFGQiI+PHBhdGggZD0iTTY2Ni4zIDI5Ni41YzAtMzIuNS00MC43LTYzLjMtMTAzLjEtODIuNCAxNC40LTYzLjYgOC0xMTQuMi0yMC4yLTEzMC40LTYuNS0zLjgtMTQuMS01LjYtMjIuNC01LjZ2MjIuM2M0LjYgMCA4LjMuOSAxMS40IDIuNiAxMy42IDcuOCAxOS41IDM3LjUgMTQuOSA3NS43LTEuMSA5LjQtMi45IDE5LjMtNS4xIDI5LjQtMTkuNi00LjgtNDEtOC41LTYzLjUtMTAuOS0xMy41LTE4LjUtMjcuNS0zNS4zLTQxLjYtNTAgMzIuNi0zMC4zIDYzLjItNDYuOSA4NC00Ni45Vjc4Yy0yNy41IDAtNjMuNSAxOS42LTk5LjkgNTMuNi0zNi40LTMzLjgtNzIuNC01My4yLTk5LjktNTMuMnYyMi4zYzIwLjcgMCA1MS40IDE2LjUgODQgNDYuNi0xNCAxNC43LTI4IDMxLjQtNDEuMyA0OS45LTIyLjYgMi40LTQ0IDYuMS02My42IDExLTIuMy0xMC00LTE5LjctNS4yLTI5LTQuNy0zOC4yIDEuMS02Ny45IDE0LjYtNzUuOCAzLTEuOCA2LjktMi42IDExLjUtMi42Vjc4LjVjLTguNCAwLTE2IDEuOC0yMi42IDUuNi0yOC4xIDE2LjItMzQuNCA2Ni43LTE5LjkgMTMwLjEtNjIuMiAxOS4yLTEwMi43IDQ5LjktMTAyLjcgODIuMyAwIDMyLjUgNDAuNyA2My4zIDEwMy4xIDgyLjQtMTQuNCA2My42LTggMTE0LjIgMjAuMiAxMzAuNCA2LjUgMy44IDE0LjEgNS42IDIyLjUgNS42IDI3LjUgMCA2My41LTE5LjYgOTkuOS01My42IDM2LjQgMzMuOCA3Mi40IDUzLjIgOTkuOSA1My4yIDguNCAwIDE2LTEuOCAyMi42LTUuNiAyOC4xLTE2LjIgMzQuNC02Ni43IDE5LjktMTMwLjEgNjItMTkuMSAxMDIuNS00OS45IDEwMi41LTgyLjN6bS0xMzAuMi02Ni43Yy0zLjcgMTIuOS04LjMgMjYuMi0xMy41IDM5LjUtNC4xLTgtOC40LTE2LTEzLjEtMjQtNC42LTgtOS41LTE1LjgtMTQuNC0yMy40IDE0LjIgMi4xIDI3LjkgNC43IDQxIDcuOXptLTQ1LjggMTA2LjVjLTcuOCAxMy41LTE1LjggMjYuMy0yNC4xIDM4LjItMTQuOSAxLjMtMzAgMi00NS4yIDItMTUuMSAwLTMwLjItLjctNDUtMS45LTguMy0xMS45LTE2LjQtMjQuNi0yNC4yLTM4LTcuNi0xMy4xLTE0LjUtMjYuNC0yMC44LTM5LjggNi4yLTEzLjQgMTMuMi0yNi44IDIwLjctMzkuOSA3LjgtMTMuNSAxNS44LTI2LjMgMjQuMS0zOC4yIDE0LjktMS4zIDMwLTIgNDUuMi0yIDE1LjEgMCAzMC4yLjcgNDUgMS45IDguMyAxMS45IDE2LjQgMjQuNiAyNC4yIDM4IDcuNiAxMy4xIDE0LjUgMjYuNCAyMC44IDM5LjgtNi4zIDEzLjQtMTMuMiAyNi44LTIwLjcgMzkuOXptMzIuMy0xM2M1LjQgMTMuNCAxMCAyNi44IDEzLjggMzkuOC0xMy4xIDMuMi0yNi45IDUuOS00MS4yIDggNC45LTcuNyA5LjgtMTUuNiAxNC40LTIzLjcgNC42LTggOC45LTE2LjEgMTMtMjQuMXpNNDIxLjIgNDMwYy05LjMtOS42LTE4LjYtMjAuMy0yNy44LTMyIDkgLjQgMTguMi43IDI3LjUuNyA5LjQgMCAxOC43LS4yIDI3LjgtLjctOSAxMS43LTE4LjMgMjIuNC0yNy41IDMyem0tNzQuNC01OC45Yy0xNC4yLTIuMS0yNy45LTQuNy00MS03LjkgMy43LTEyLjkgOC4zLTI2LjIgMTMuNS0zOS41IDQuMSA4IDguNCAxNiAxMy4xIDI0IDQuNyA4IDkuNSAxNS44IDE0LjQgMjMuNHpNNDIwLjcgMTYzYzkuMyA5LjYgMTguNiAyMC4zIDI3LjggMzItOS0uNC0xOC4yLS43LTI3LjUtLjctOS40IDAtMTguNy4yLTI3LjguNyA5LTExLjcgMTguMy0yMi40IDI3LjUtMzJ6bS03NCA1OC45Yy00LjkgNy43LTkuOCAxNS42LTE0LjQgMjMuNy00LjYgOC04LjkgMTYtMTMgMjQtNS40LTEzLjQtMTAtMjYuOC0xMy44LTM5LjggMTMuMS0zLjEgMjYuOS01LjggNDEuMi03Ljl6bS05MC41IDEyNS4yYy0zNS40LTE1LjEtNTguMy0zNC45LTU4LjMtNTAuNiAwLTE1LjcgMjIuOS0zNS42IDU4LjMtNTAuNiA4LjYtMy43IDE4LTcgMjcuNy0xMC4xIDUuNyAxOS42IDEzLjIgNDAgMjIuNSA2MC45LTkuMiAyMC44LTE2LjYgNDEuMS0yMi4yIDYwLjYtOS45LTMuMS0xOS4zLTYuNS0yOC0xMC4yek0zMTAgNDkwYy0xMy42LTcuOC0xOS41LTM3LjUtMTQuOS03NS43IDEuMS05LjQgMi45LTE5LjMgNS4xLTI5LjQgMTkuNiA0LjggNDEgOC41IDYzLjUgMTAuOSAxMy41IDE4LjUgMjcuNSAzNS4zIDQxLjYgNTAtMzIuNiAzMC4zLTYzLjIgNDYuOS04NCA0Ni45LTQuNS0uMS04LjMtMS0xMS4zLTIuN3ptMjM3LjItNzYuMmM0LjcgMzguMi0xLjEgNjcuOS0xNC42IDc1LjgtMyAxLjgtNi45IDIuNi0xMS41IDIuNi0yMC43IDAtNTEuNC0xNi41LTg0LTQ2LjYgMTQtMTQuNyAyOC0zMS40IDQxLjMtNDkuOSAyMi42LTIuNCA0NC02LjEgNjMuNi0xMSAyLjMgMTAuMSA0LjEgMTkuOCA1LjIgMjkuMXptMzguNS02Ni43Yy04LjYgMy43LTE4IDctMjcuNyAxMC4xLTUuNy0xOS42LTEzLjItNDAtMjIuNS02MC45IDkuMi0yMC44IDE2LjYtNDEuMSAyMi4yLTYwLjYgOS45IDMuMSAxOS4zIDYuNSAyOC4xIDEwLjIgMzUuNCAxNS4xIDU4LjMgMzQuOSA1OC4zIDUwLjYtLjEgMTUuNy0yMyAzNS42LTU4LjQgNTAuNnpNMzIwLjggNzguNHoiLz48Y2lyY2xlIGN4PSI0MjAuOSIgY3k9IjI5Ni41IiByPSI0NS43Ii8+PHBhdGggZD0iTTUyMC41IDc4LjF6Ii8+PC9nPjwvc3ZnPg==" />)</a>
-                    </div>
-        <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Decode video stream in a Vue
-            Application from a USB-connected or built-in camera (mobile or desktop)." class="button title"
-                    href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.42/1.hello-world/5.read-video-vue">
-                Hello World in
-                Vue 2 (<img alt="Vue logo"
-                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTk2QkI4RkE3NjE2MTFFNUE4NEU4RkIxNjQ5MTYyRDgiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTk2QkI4Rjk3NjE2MTFFNUE4NEU4RkIxNjQ5MTYyRDgiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjU2QTEyNzk3NjkyMTFFMzkxODk4RDkwQkY4Q0U0NzYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjU2QTEyN0E3NjkyMTFFMzkxODk4RDkwQkY4Q0U0NzYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5WHowqAAAXNElEQVR42uxda4xd1XVe53XvvD2eGQ/lXQcKuDwc2eFlCAGnUn7kT6T86J/+aNTgsWPchJJYciEOCQ8hF+G0hFCIHRSEqAuJBCqRaUEIEbmBppAIBGnESwZje8COZ+y587j3PLq+ffadGJix53HvPevcuz60xPjec89ZZ+39nf04+9vLSZKEFArFzHA1BAqFEkShUIIoFEoQhUIJolAoQRQKJYhCoQRRKJQgCoUSRKFQKEEUCiWIQrFo+Gv/8/YH+f/nsMWSHHMChyhxqPTTdyncWyJ3ScD/ztipiB3wXSqu6P17avN+TyFC5ggv4tRnmoxWTP1+5F+Mz17GPvPl49EKBWd3UsfXllPiso8VcYtmPba3fNuKrBVXrGFCbrdPwXndFL49ltI367roOpSUI4pGypv9s7q+ltj6JxqOQ07Bo/DgxGb2/a8cX0CnAWXJ5etz2TqdHiXHKlKj9w6i9XX8Ic41DmI8FVHhmmXk85MmRhCzJoiTWnig9LfJRHihgydxzAxJhBr7Bh/hK3yu+p9568FliTJF2aKMZfVd/kQOcKP6OBmS9+Rjm4zJ6faoeN0gOUn61MncLX4CJ+MRhe+P/dRxhfew2Df4CF/hs4jWg8vQYUKYMuWyRRkLjeHQ8YP0Z9mekVjA8Qj3VVcuoeDiXu63lkUE0ym6FA5PXBaNVr7qtPumGyPR4Bt8hK/wWUR5chn6XJYoU5StUHL8l+XEx2axhkS6yk+chJuP4rXLyOkIKJkS0B67adcqfL/0Y4pixxSysK6V8Yl9Mz7i3272NRFlhzJsu24Z5l9E9Ahmwfrpoj7uw3fZtktsRZKjIXnndlLxin7+W8ZTBwPf6I+Tg9HwxK2Ob8citbCoBoaxBxMCvsFH+CqjHCtUvLzflKWUcpwB91gupG5f9/Rtx39ZZBtmWyJtphKzHTQW0diP36b4aJmcLj/zGaSkHJPb4SWFi/tOJd8bTqd9s48VBRh4RKeUX/vjgXg8cpyCmz05xkJylxSoa8M5RF0eJaVIIkGOsg2yTc3UgpD94psiWxEOqDNYoOIXuHnGwE5AXUTFi46FTnRw4l/dwEm7/pSxcYnCF/gE3zInh52RRJkVP7/MlKFQcgCbjifHTAQBfsb2qsgBO3e1Cpf3UXBej3nRJKKrxU/rcH/pKzz4vNIQuRJTEmZklbg6EL4SPsE3GQPzinmfhbJDGQolB+r8w58abs5y8DqRt4ABeptLRR7koY9NleybEYw/MPisvF/ayT1/SvDewcnIcG32wfiCAbEvoCZyGaGsitdyz6XdTctQJq6fcT5mloNfYvu5yFZkpEz+RT0UrFoqpxVBV+vQxIrkaPnrbqdvXs6hcjbU+Jq4Nvvwd/BFRNeq2npwWfkX95iyE9p6PM72P/MhCPANTBSKu5WITHcC074Y9CUTkYglKBgcV/aVtlM5Kpp/RHFjDdfka7MP/2wG6m72661QNigjlBXKTGBtsjWKNs5atCf44Uds3xc5YD8Wknd2BxWuGjCzIxLWQzlFj+IjU108OL7bafM5sm5DDdfka/8T+9AJXyTMpqFsUEYoK5SZ0NbjVlvX500Q4Ha2A+JuCcEvhVS8qp/8MzspHhMSfO7mVPaP35BMRp9JsCQldbX+hmvxNfnamzJfqVvtWnGZoGxQRigroYs6UbfvOGHn4ORVkTaIbEWwtqg3MNO+Zql0JGCdVuCayhDuG9uJB7vp+oR17FbZc+NauCauLWLmKkqXr6NsUEYoK6GtxwY6CXXnEs0n2faIHLCPhhR8bikFKwRN+xZddHWu5a7Ol9yCZ2ZwHKdOxufGNeKRqS/hmnLWW1VMmQSrl5oyEkqOPbZu02IJAsic9sU7B+5uF9cOmqUfeLOdOaAZYb/CA+M/Ic9NxUoYMNfD/PT84f7xB807EAnrrbgMUBZt1w1SEpCIqfjF1Om5EuQNth0iu1r8tPLP76LCpX2yWpHDk2dGH018p6brtD5hOHf04cR3okOTZ0lqPVAW3gVdlMhdrfsTW6drRhDgRrYJcbeKZQxTkenvegNt6YBQwrQvOxG+P3ZHEia9TuClS9Br1XKge8XnxLlxjelzZ/2w4tijDMxyoHIsVQg1zvYPcy7KeZx4jG2zyFakFJF7Whu1XT2QvhfJeryeVNdplYPo4Pi9hKd7VVxVC8O5cH4+N65hXgoKuGfEHmWAskjGxI49Ntu6XHOCAD9ie1PcLSepjDNY00fB8m6KpSyJx/jgg9LfJEfLK40818w+LXY5e5zKaMfKl+DcIlSCZp0cd3U59igDI4+WOa2LunvfvDoD9RrcNLqAjDy3yzfrtKqbAkggSDIZmSlYxzz9a8BaJ101zF2rh3BuSTJaCKGMDEGujHbedXch0X2ebbdEkkDC6a9cQoWVguS53P0JP5xcHY1W/tppD9KxgrdAw5QxnwPn4nOukrPeqkzBJb0m9oJltLtt3a07QYD1IkMAeS7/hw0BXMhzJwXJc/eV7kuiyIN8OOGuUhLP06JUeoxz4FxiZLRouTsDM9WO2OdBRtsIgrzHtk3kgH00JO+cTipc2S9jqyCaluf2xwcnfuB6LndHuEsSzdP4N/gtzoFzSZHRIsaQQiPmidyXgttsnW0YQYDvsh2ROGBPxkMqXjNA/qlCFsnZ8UdlX+kfk0pymlnMWH2JOBfz0sWI+C3OMS1dzPphhPVWHOPC5wdMzIUOzFFHb1lwB2ARF+ZOPt0gshWBPLe/wCRZlu6CIkSei/cE0fD4g2ZbVWceyxH5WPwGvzXrrSTJaDnG7oBoGS3qaCULggCPsv1W5IAd8tzLllJwvpx1WthMIfyg9OVotHy1WVQ4V37wsfgNfkuSZLQcW8Q4lruU/RVbRykrggDXiwwN3uQWnXTa1xMkz2W/on2lndNajpNtAGePw2/MOicBMlqs+8K7GBNbjrFgGe2iX0nUgiAvs+0S2YpgndaFPVRc3SdmVanZlfGjifOiw5PrT/oGvPpG/vDkEH4jZ70Vt86rl5rYimmdP41/s3Uzc4Isup9XNxwvz+0tyNAlONPrtO6hctR+QnluKqNt52O3pxvtClhvxTH0egtmEwbBMlrUxU21OFGtCHKYbavIATv3j90z26kIea4QZRtahfhIuT0anrjH7O3rpjNVHzPIaLG3Lh8Tj5TbRQihjlNyehxTwTLarbZOiiEIcBfbPnGhMtroChXW9JN/VqeYdyPEY4nwwPj6ZCL8C1T+T61JhDqRv8MxZgwlJG2BxzEsrBmgeEzseqt9ti6SNIIA8t6wm901eFDZ66d7M4UkQ56LVgTTvvtKaRqFqoTWymjxGb6LpUzrImYcuzaOIWKJmAptPWpaB2sd+V+yvSB1wB6s7qXgwiUyBpbJdBqFq6MjU18mKCKhRsTyEbx558/wnRmYJzLiV+DYBat6JQ/MX7B1UCxBAKHy3IQrH6W7MhY9MWkUMNAN948/8Mm35/jMDIKlpC3gmBWQtsAjifkE61b36kGQP7DdL7KrVZXnXiYpjYKZxj09Gh7f4kB4yIa/8ZmU1brIIYiYIXaJ3Nbjflv3xBME+DZbSVwIzfIIK89dJkSea18Ihu+XflD9yPztCJnW5Ri5VRntpNh8giVb5ygvBIHu9yaRrchYRO6fFU0CSTPQlDLte6zshx9O3g3D3yJajySd4EDaAsQMsRPaetxk61zty+YTCXRqjf9jO19cOLnyYV+p8QffpcreMXJ7BeRgh77Ds6SIYhGbMBgB2tld1DW0nGL4VxbZfKBbdUHdhol1dl7mOi0MOjttGgWT11lAwU9r1mMSsX0oxwSxgYyWOvKXtiAvBPkV239I7GqZdVqX9FDw2V5+UoYipn2nt/WRMK3LMQlW9poYCZ7WfcrWsdwSBNggMrRYdcLdhjas0+q28lzJOc8bOU7jWLh2AwzEyLxclYm6Z2ZuBEE+YLtTZEVA9tzPdBh5biJ3q5rGD8yRjXbNAPkcm0RuyjTUqf3NQBDge2yHJFaGeDyi4tUD5J3WIXmzs8Y9NDgG3un80OCYIDZCHxqHbJ2iZiEIGmnB8twgzYIkd7vMxiBON59GLJyBQLKMdiM1qOPXyMn2f2f7X5EDdshzkUbhAtED0oZMXCAGiIXgtAW/YXusURdr9NsoufLcgmP20zKy2ErrNSNGRuunMUAshL7zABq61q/RBPkd2yNSn57+X3ZTQZA8t7H3H5p7RwwEt6KP2DrUtAQBIIUsiwt99Kf+tydFntuocVhVRltNWyBTRlumGslopRNkhO1mkRVlLCT3jHYzqyU48WSN+1ZWRou0BZDRyp3Ju9nWnaYnCHA3216JlQWy0gKy557dJSaNQn0nKNL1VrhnwTLavbbOUKsQBBApzzVpFHqsPFdIGoW6AfeG7cMwrcv3TC0io80LQZ5me07kU3WkYqSlhYvkpFGoz8C8bO7RyGjlpi14ztaVliMIIFOeizQKbpI+WdsDGfLcWvcmsaK53b4gdUW3lENZXjxrgrzNdq/IAftohbzzOql4eV/zjUUcu96K7w33KFhGi7rxVisTBEBSxWPiiqYqz71mGfmDQuS5tSIHstHyPZnd7+XKaI+RgKSxEggySWmKaXkVaSwi5xSbRmGiSdZpxVZGy/eEexMso73R1o2WJwiwk+11kQNZrNO6oo+Cc7vz39Wy07q4l+CKfnNvQu/ndVsnSAkifcCOAXq7R8W1y9JdRvI87QvfnTRtgdPeujLavBLkv9meEPnUHS2Tf1EPFT67lOKRnE77munrsrkH/+IeydPXqAO/VoLMDMhz5T2irTzXpFHoKeRPnluV0XYX0mlduTLamIRJtKUR5CDbbSIrGPfX/eUdVFyTQ3luku6OaNIW/HmH5LQFt9k6oAQ5Ab7PNiyxkmGndUhRvTNyJM9F1wrZaM9IZbQmG63MocewxIejRIKg+DaKbEXGI3KWBtT2hUFKyonUZeEfB3xkX4vsM3wXvIx/IwmMqCu0WH/B9qLIpzG6Wp/rpWBFj/x1WnaCAb4G7LPgad0XbZmTEmTukDnti0yzgZvKcwNPtDzXyGjZR5ONFincVEbbVAR5je0hkU/lkTL5F3TZzQ2EvjysJr1hH/0LuiVPTz9ky1oJsgB8iwQsN5hplISns5Hn9hXl9eurMlr2zUzrVsQuk5m0ZUxKkIXhKNsWkQN2yHNPhzx3WbqQMRZGYCOjXWZ8FDzjtsWWsRJkEfgh2zvyOvhWnovsucu75GTPtdlo4RN8i+W+s3nHli0pQRaPIXEeVeW53V46YJciz2Uf4IvxiX0juW/9h/JQ8fJCkGfZnpE5YK9QsHIJBZcIkOdW141d3Gt8EiyjfcaWqRKk6Z84kOc6duODjmzluUZGyz4g6Q18UhltaxHkXbbtIgfsRyvknQt5bobZc6dltP3Gl0SudmW7LUslSJ1mPUbFeWVUepDnDpB3SgazRtW0BXxt+ABfhE7rypyVbCKCTLF9U2QrgjQKg3b7zskGv3eI0+XsuDZ8EJy2YJMtQyVIHfEztldFDtghz728j4LzGphGoZq2gK9ZMDuwiH3ngTJ7OG+VLY8EAeTKc9ts9lwk42zEOi2st+JrYZIA1xYso12Xx4qWV4K8xPZzka3ISCrPDVY1YJ1WtfVYZWW0ctdbPW7LTAnSQHyDJCoykEYhTNdpuUsK6YDZqQ85cG5cw6y3CsWmLYBXG/NayfJMkI8oVR/KG7AfC8k7u4MKVw2kM1r1eB2RpDNXuAauJVhGe6stKyVIBrid7YA4r6o5N5BG4cxOI3mtaeWtymj53LiG4FwmKJs78lzB8k4QVIsN4ryqynN7AzP1ShXIc2tYg3GuSpJO6/aKltHK3KWmhQgCPMm2R+SAfTSkANlzV9Rw2rc6MDcyWtHZaPfYsiElSPaQOYVYiSnxiIprB8kpeGn+v8U2mZD8FjxzTpybKjqtqwQ5Od5g2yGyq4Xsued3UeHSvsW3IlUZLZ8L5xSctmCHLRMliCBgN/AJcV7F6SpbjBe8gUWkUaimLeBzmOUsU2JltOMkcbd+JQiNkYB8ErNVbPe0Nmq72i4kXMiwNUnfe+AcOJfgfCWbbVkoQQTiR2xvivPKynODNX0ULF9AGoVq2gL+Lc4hWEaL2N/XTBWq2Qgic3BYled2+ekeVfOV51az0WKNF59DsIx2XbNVpmYkyPNsuyWSBBJYf+USKsxHnlvNRsu/8WXLaHfb2CtBcoD1Ir2CPJf/wxSt2xmkupGT9c6QtoCPNdO66FfJldGub8aK1KwEeY9tm8gB+2hI3jmdVLii/+RbBdktfHAsfpPIfSm4zcZcCZIjfJftiMQBO1IQQBrrn3qCRYZ20SOOMTLacbHrrRDjW5q1EjUzQbiTTzeIbEUgz+232XNne59RfX+CbLT9omW0iHFFCZJPPMr2W5EDdshzL1tKwfkzrNOqrrfi73CMYBntKzbGpATJL64X6RXWZRVtxlnP+VgaBZO2wEu/wzGatkAJUk+8zLZLZCuCdVoXciux+rhVuXYVMD7Dd7Hc9Va7bGyVIE0Amf3kaXnuIHm9qTwXhr/xmWAZbUXk+E4JsmAcZtsqcsAOee6Z7VS08lwY/sZngmW0W21MlSBNhLvY9onzCqtIxipUuKqf3L6iMfyNz4RO6+6zsWwJ+NRawNvep8S1IhMxucie+8VT0o+6PIqPiB17rG+lCtNqBPkl2wts14gbsCONwqVLzT8Fr7d6wcawZeBS60Hm1GSSTu+a6d5EY6cEyQ5/YLtf4oCd4iQ1ma3H/TZ2SpAWwLfZSqSYK0o2ZqQEaQ1AN32T1vs54yYbMyVIC+GBVuwyLLBL+kCr3rzb4oV/vdZ/jZESZHb8iqS9F5GFp2yMlCAtjCENgcZGCTI79rPdqWH4FO60sVGCKOh7bIc0DNM4ZGNCShAFEFKOsyDVARttTJQgGoJpPMb2Gw2DicFjGgYlyExYpyHQGChBZsfv2B5p4ft/xMZAoQSZFZso3TKo1VC2965QgpwQI2w3t+B932zvXaEEOSnuZtvbQve7196zQgkyZ6zXe1UoQWbH02zPtcB9PmfvVaEEmTeG9B6VIIrZ8RbbvU18f/fae1QoQRYMJKU81oT3dYwkJj1VguQOk9REaY2Pw4323hRKkEVjJ9vrTXQ/r9t7UihBaobr9V6UIIrZ8Wu2J5rgPp6w96JQgtQcG2jmhGl5QWzvQaEEqQsOst2WY/9vs/egUILUtZIN59Dv4ZyTWwmSEyDnUx7luRtJar4qJUjT4RdsL+bI3xetzwolSMOwTn1Vgihmx2tsD+XAz4esrwolSMPxLZK9XGPS+qhQgmSCo2xbBPu3xfqoUIJkhh+yvSPQr3esbwolSOYYUp+UIIrZ8SzbM4L8ecb6pFCC6BNbWw8lSB7wLtt2AX5st74olCDikPWskfRZNSVIi2OKst2+c5P1QaEEEYuH2V7N4Lqv2msrlCDisa5FrqkEUSwIL7E93sDrPW6vqVCC5AaN0l/kVZ+iBGlxfMR2awOuc6u9lkIJkjvcwXagjuc/YK+hUILkEgnVdxeRDfYaCiVIbvEk2546nHePPbdCCZJ7rMvJORVKkEzwBtuOGp5vhz2nQgnSNMBu6uM1OM84Nedu80qQFscY1SYfx2Z7LoUSpOlwH9ubi/j9m/YcCiWIDth1YK4EaUU8z7Z7Ab/bbX+rUII0PdY36DcKJUgu8R7btnkcv83+RqEEaRncwnZkDscdsccqlCAthQrbDXM47gZ7rEIJ0nJ4lO2VE3z/ij1GoQRpWaxb4HcKJUhL4GW2XTN8vst+p1CCtDw+Oc6Y6/hEoQRpCRxm23rcv7fazxRKEIXFXZRuwBDZvxUC4GsIREHflguDkyQqaVYotIulUChBFAoliEKhBFEolCAKhRJEoVCCKBRKEIVCCaJQKJQgCoUSRKFQgigUShCFIhP8vwADACog5YM65zugAAAAAElFTkSuQmCC" />)</a>
-            </div> 
-            <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Decode video stream in a Vue 3
-            Application from a USB-connected or built-in camera (mobile or desktop)." class="button title"
-                    href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.42/1.hello-world/6.read-video-vue3">
-                Hello World in
-                Vue 3 (<img alt="Vue3 logo"
-                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTk2QkI4RkE3NjE2MTFFNUE4NEU4RkIxNjQ5MTYyRDgiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTk2QkI4Rjk3NjE2MTFFNUE4NEU4RkIxNjQ5MTYyRDgiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjU2QTEyNzk3NjkyMTFFMzkxODk4RDkwQkY4Q0U0NzYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjU2QTEyN0E3NjkyMTFFMzkxODk4RDkwQkY4Q0U0NzYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5WHowqAAAXNElEQVR42uxda4xd1XVe53XvvD2eGQ/lXQcKuDwc2eFlCAGnUn7kT6T86J/+aNTgsWPchJJYciEOCQ8hF+G0hFCIHRSEqAuJBCqRaUEIEbmBppAIBGnESwZje8COZ+y587j3PLq+ffadGJix53HvPevcuz60xPjec89ZZ+39nf04+9vLSZKEFArFzHA1BAqFEkShUIIoFEoQhUIJolAoQRQKJYhCoQRRKJQgCoUSRKFQKEEUCiWIQrFo+Gv/8/YH+f/nsMWSHHMChyhxqPTTdyncWyJ3ScD/ztipiB3wXSqu6P17avN+TyFC5ggv4tRnmoxWTP1+5F+Mz17GPvPl49EKBWd3UsfXllPiso8VcYtmPba3fNuKrBVXrGFCbrdPwXndFL49ltI367roOpSUI4pGypv9s7q+ltj6JxqOQ07Bo/DgxGb2/a8cX0CnAWXJ5etz2TqdHiXHKlKj9w6i9XX8Ic41DmI8FVHhmmXk85MmRhCzJoiTWnig9LfJRHihgydxzAxJhBr7Bh/hK3yu+p9568FliTJF2aKMZfVd/kQOcKP6OBmS9+Rjm4zJ6faoeN0gOUn61MncLX4CJ+MRhe+P/dRxhfew2Df4CF/hs4jWg8vQYUKYMuWyRRkLjeHQ8YP0Z9mekVjA8Qj3VVcuoeDiXu63lkUE0ym6FA5PXBaNVr7qtPumGyPR4Bt8hK/wWUR5chn6XJYoU5StUHL8l+XEx2axhkS6yk+chJuP4rXLyOkIKJkS0B67adcqfL/0Y4pixxSysK6V8Yl9Mz7i3272NRFlhzJsu24Z5l9E9Ahmwfrpoj7uw3fZtktsRZKjIXnndlLxin7+W8ZTBwPf6I+Tg9HwxK2Ob8citbCoBoaxBxMCvsFH+CqjHCtUvLzflKWUcpwB91gupG5f9/Rtx39ZZBtmWyJtphKzHTQW0diP36b4aJmcLj/zGaSkHJPb4SWFi/tOJd8bTqd9s48VBRh4RKeUX/vjgXg8cpyCmz05xkJylxSoa8M5RF0eJaVIIkGOsg2yTc3UgpD94psiWxEOqDNYoOIXuHnGwE5AXUTFi46FTnRw4l/dwEm7/pSxcYnCF/gE3zInh52RRJkVP7/MlKFQcgCbjifHTAQBfsb2qsgBO3e1Cpf3UXBej3nRJKKrxU/rcH/pKzz4vNIQuRJTEmZklbg6EL4SPsE3GQPzinmfhbJDGQolB+r8w58abs5y8DqRt4ABeptLRR7koY9NleybEYw/MPisvF/ayT1/SvDewcnIcG32wfiCAbEvoCZyGaGsitdyz6XdTctQJq6fcT5mloNfYvu5yFZkpEz+RT0UrFoqpxVBV+vQxIrkaPnrbqdvXs6hcjbU+Jq4Nvvwd/BFRNeq2npwWfkX95iyE9p6PM72P/MhCPANTBSKu5WITHcC074Y9CUTkYglKBgcV/aVtlM5Kpp/RHFjDdfka7MP/2wG6m72661QNigjlBXKTGBtsjWKNs5atCf44Uds3xc5YD8Wknd2BxWuGjCzIxLWQzlFj+IjU108OL7bafM5sm5DDdfka/8T+9AJXyTMpqFsUEYoK5SZ0NbjVlvX500Q4Ha2A+JuCcEvhVS8qp/8MzspHhMSfO7mVPaP35BMRp9JsCQldbX+hmvxNfnamzJfqVvtWnGZoGxQRigroYs6UbfvOGHn4ORVkTaIbEWwtqg3MNO+Zql0JGCdVuCayhDuG9uJB7vp+oR17FbZc+NauCauLWLmKkqXr6NsUEYoK6GtxwY6CXXnEs0n2faIHLCPhhR8bikFKwRN+xZddHWu5a7Ol9yCZ2ZwHKdOxufGNeKRqS/hmnLWW1VMmQSrl5oyEkqOPbZu02IJAsic9sU7B+5uF9cOmqUfeLOdOaAZYb/CA+M/Ic9NxUoYMNfD/PT84f7xB807EAnrrbgMUBZt1w1SEpCIqfjF1Om5EuQNth0iu1r8tPLP76LCpX2yWpHDk2dGH018p6brtD5hOHf04cR3okOTZ0lqPVAW3gVdlMhdrfsTW6drRhDgRrYJcbeKZQxTkenvegNt6YBQwrQvOxG+P3ZHEia9TuClS9Br1XKge8XnxLlxjelzZ/2w4tijDMxyoHIsVQg1zvYPcy7KeZx4jG2zyFakFJF7Whu1XT2QvhfJeryeVNdplYPo4Pi9hKd7VVxVC8O5cH4+N65hXgoKuGfEHmWAskjGxI49Ntu6XHOCAD9ie1PcLSepjDNY00fB8m6KpSyJx/jgg9LfJEfLK40818w+LXY5e5zKaMfKl+DcIlSCZp0cd3U59igDI4+WOa2LunvfvDoD9RrcNLqAjDy3yzfrtKqbAkggSDIZmSlYxzz9a8BaJ101zF2rh3BuSTJaCKGMDEGujHbedXch0X2ebbdEkkDC6a9cQoWVguS53P0JP5xcHY1W/tppD9KxgrdAw5QxnwPn4nOukrPeqkzBJb0m9oJltLtt3a07QYD1IkMAeS7/hw0BXMhzJwXJc/eV7kuiyIN8OOGuUhLP06JUeoxz4FxiZLRouTsDM9WO2OdBRtsIgrzHtk3kgH00JO+cTipc2S9jqyCaluf2xwcnfuB6LndHuEsSzdP4N/gtzoFzSZHRIsaQQiPmidyXgttsnW0YQYDvsh2ROGBPxkMqXjNA/qlCFsnZ8UdlX+kfk0pymlnMWH2JOBfz0sWI+C3OMS1dzPphhPVWHOPC5wdMzIUOzFFHb1lwB2ARF+ZOPt0gshWBPLe/wCRZlu6CIkSei/cE0fD4g2ZbVWceyxH5WPwGvzXrrSTJaDnG7oBoGS3qaCULggCPsv1W5IAd8tzLllJwvpx1WthMIfyg9OVotHy1WVQ4V37wsfgNfkuSZLQcW8Q4lruU/RVbRykrggDXiwwN3uQWnXTa1xMkz2W/on2lndNajpNtAGePw2/MOicBMlqs+8K7GBNbjrFgGe2iX0nUgiAvs+0S2YpgndaFPVRc3SdmVanZlfGjifOiw5PrT/oGvPpG/vDkEH4jZ70Vt86rl5rYimmdP41/s3Uzc4Isup9XNxwvz+0tyNAlONPrtO6hctR+QnluKqNt52O3pxvtClhvxTH0egtmEwbBMlrUxU21OFGtCHKYbavIATv3j90z26kIea4QZRtahfhIuT0anrjH7O3rpjNVHzPIaLG3Lh8Tj5TbRQihjlNyehxTwTLarbZOiiEIcBfbPnGhMtroChXW9JN/VqeYdyPEY4nwwPj6ZCL8C1T+T61JhDqRv8MxZgwlJG2BxzEsrBmgeEzseqt9ti6SNIIA8t6wm901eFDZ66d7M4UkQ56LVgTTvvtKaRqFqoTWymjxGb6LpUzrImYcuzaOIWKJmAptPWpaB2sd+V+yvSB1wB6s7qXgwiUyBpbJdBqFq6MjU18mKCKhRsTyEbx558/wnRmYJzLiV+DYBat6JQ/MX7B1UCxBAKHy3IQrH6W7MhY9MWkUMNAN948/8Mm35/jMDIKlpC3gmBWQtsAjifkE61b36kGQP7DdL7KrVZXnXiYpjYKZxj09Gh7f4kB4yIa/8ZmU1brIIYiYIXaJ3Nbjflv3xBME+DZbSVwIzfIIK89dJkSea18Ihu+XflD9yPztCJnW5Ri5VRntpNh8giVb5ygvBIHu9yaRrchYRO6fFU0CSTPQlDLte6zshx9O3g3D3yJajySd4EDaAsQMsRPaetxk61zty+YTCXRqjf9jO19cOLnyYV+p8QffpcreMXJ7BeRgh77Ds6SIYhGbMBgB2tld1DW0nGL4VxbZfKBbdUHdhol1dl7mOi0MOjttGgWT11lAwU9r1mMSsX0oxwSxgYyWOvKXtiAvBPkV239I7GqZdVqX9FDw2V5+UoYipn2nt/WRMK3LMQlW9poYCZ7WfcrWsdwSBNggMrRYdcLdhjas0+q28lzJOc8bOU7jWLh2AwzEyLxclYm6Z2ZuBEE+YLtTZEVA9tzPdBh5biJ3q5rGD8yRjXbNAPkcm0RuyjTUqf3NQBDge2yHJFaGeDyi4tUD5J3WIXmzs8Y9NDgG3un80OCYIDZCHxqHbJ2iZiEIGmnB8twgzYIkd7vMxiBON59GLJyBQLKMdiM1qOPXyMn2f2f7X5EDdshzkUbhAtED0oZMXCAGiIXgtAW/YXusURdr9NsoufLcgmP20zKy2ErrNSNGRuunMUAshL7zABq61q/RBPkd2yNSn57+X3ZTQZA8t7H3H5p7RwwEt6KP2DrUtAQBIIUsiwt99Kf+tydFntuocVhVRltNWyBTRlumGslopRNkhO1mkRVlLCT3jHYzqyU48WSN+1ZWRou0BZDRyp3Ju9nWnaYnCHA3216JlQWy0gKy557dJSaNQn0nKNL1VrhnwTLavbbOUKsQBBApzzVpFHqsPFdIGoW6AfeG7cMwrcv3TC0io80LQZ5me07kU3WkYqSlhYvkpFGoz8C8bO7RyGjlpi14ztaVliMIIFOeizQKbpI+WdsDGfLcWvcmsaK53b4gdUW3lENZXjxrgrzNdq/IAftohbzzOql4eV/zjUUcu96K7w33KFhGi7rxVisTBEBSxWPiiqYqz71mGfmDQuS5tSIHstHyPZnd7+XKaI+RgKSxEggySWmKaXkVaSwi5xSbRmGiSdZpxVZGy/eEexMso73R1o2WJwiwk+11kQNZrNO6oo+Cc7vz39Wy07q4l+CKfnNvQu/ndVsnSAkifcCOAXq7R8W1y9JdRvI87QvfnTRtgdPeujLavBLkv9meEPnUHS2Tf1EPFT67lOKRnE77munrsrkH/+IeydPXqAO/VoLMDMhz5T2irTzXpFHoKeRPnluV0XYX0mlduTLamIRJtKUR5CDbbSIrGPfX/eUdVFyTQ3luku6OaNIW/HmH5LQFt9k6oAQ5Ab7PNiyxkmGndUhRvTNyJM9F1wrZaM9IZbQmG63MocewxIejRIKg+DaKbEXGI3KWBtT2hUFKyonUZeEfB3xkX4vsM3wXvIx/IwmMqCu0WH/B9qLIpzG6Wp/rpWBFj/x1WnaCAb4G7LPgad0XbZmTEmTukDnti0yzgZvKcwNPtDzXyGjZR5ONFincVEbbVAR5je0hkU/lkTL5F3TZzQ2EvjysJr1hH/0LuiVPTz9ky1oJsgB8iwQsN5hplISns5Hn9hXl9eurMlr2zUzrVsQuk5m0ZUxKkIXhKNsWkQN2yHNPhzx3WbqQMRZGYCOjXWZ8FDzjtsWWsRJkEfgh2zvyOvhWnovsucu75GTPtdlo4RN8i+W+s3nHli0pQRaPIXEeVeW53V46YJciz2Uf4IvxiX0juW/9h/JQ8fJCkGfZnpE5YK9QsHIJBZcIkOdW141d3Gt8EiyjfcaWqRKk6Z84kOc6duODjmzluUZGyz4g6Q18UhltaxHkXbbtIgfsRyvknQt5bobZc6dltP3Gl0SudmW7LUslSJ1mPUbFeWVUepDnDpB3SgazRtW0BXxt+ABfhE7rypyVbCKCTLF9U2QrgjQKg3b7zskGv3eI0+XsuDZ8EJy2YJMtQyVIHfEztldFDtghz728j4LzGphGoZq2gK9ZMDuwiH3ngTJ7OG+VLY8EAeTKc9ts9lwk42zEOi2st+JrYZIA1xYso12Xx4qWV4K8xPZzka3ISCrPDVY1YJ1WtfVYZWW0ctdbPW7LTAnSQHyDJCoykEYhTNdpuUsK6YDZqQ85cG5cw6y3CsWmLYBXG/NayfJMkI8oVR/KG7AfC8k7u4MKVw2kM1r1eB2RpDNXuAauJVhGe6stKyVIBrid7YA4r6o5N5BG4cxOI3mtaeWtymj53LiG4FwmKJs78lzB8k4QVIsN4ryqynN7AzP1ShXIc2tYg3GuSpJO6/aKltHK3KWmhQgCPMm2R+SAfTSkANlzV9Rw2rc6MDcyWtHZaPfYsiElSPaQOYVYiSnxiIprB8kpeGn+v8U2mZD8FjxzTpybKjqtqwQ5Od5g2yGyq4Xsued3UeHSvsW3IlUZLZ8L5xSctmCHLRMliCBgN/AJcV7F6SpbjBe8gUWkUaimLeBzmOUsU2JltOMkcbd+JQiNkYB8ErNVbPe0Nmq72i4kXMiwNUnfe+AcOJfgfCWbbVkoQQTiR2xvivPKynODNX0ULF9AGoVq2gL+Lc4hWEaL2N/XTBWq2Qgic3BYled2+ekeVfOV51az0WKNF59DsIx2XbNVpmYkyPNsuyWSBBJYf+USKsxHnlvNRsu/8WXLaHfb2CtBcoD1Ir2CPJf/wxSt2xmkupGT9c6QtoCPNdO66FfJldGub8aK1KwEeY9tm8gB+2hI3jmdVLii/+RbBdktfHAsfpPIfSm4zcZcCZIjfJftiMQBO1IQQBrrn3qCRYZ20SOOMTLacbHrrRDjW5q1EjUzQbiTTzeIbEUgz+232XNne59RfX+CbLT9omW0iHFFCZJPPMr2W5EDdshzL1tKwfkzrNOqrrfi73CMYBntKzbGpATJL64X6RXWZRVtxlnP+VgaBZO2wEu/wzGatkAJUk+8zLZLZCuCdVoXciux+rhVuXYVMD7Dd7Hc9Va7bGyVIE0Amf3kaXnuIHm9qTwXhr/xmWAZbUXk+E4JsmAcZtsqcsAOee6Z7VS08lwY/sZngmW0W21MlSBNhLvY9onzCqtIxipUuKqf3L6iMfyNz4RO6+6zsWwJ+NRawNvep8S1IhMxucie+8VT0o+6PIqPiB17rG+lCtNqBPkl2wts14gbsCONwqVLzT8Fr7d6wcawZeBS60Hm1GSSTu+a6d5EY6cEyQ5/YLtf4oCd4iQ1ma3H/TZ2SpAWwLfZSqSYK0o2ZqQEaQ1AN32T1vs54yYbMyVIC+GBVuwyLLBL+kCr3rzb4oV/vdZ/jZESZHb8iqS9F5GFp2yMlCAtjCENgcZGCTI79rPdqWH4FO60sVGCKOh7bIc0DNM4ZGNCShAFEFKOsyDVARttTJQgGoJpPMb2Gw2DicFjGgYlyExYpyHQGChBZsfv2B5p4ft/xMZAoQSZFZso3TKo1VC2965QgpwQI2w3t+B932zvXaEEOSnuZtvbQve7196zQgkyZ6zXe1UoQWbH02zPtcB9PmfvVaEEmTeG9B6VIIrZ8RbbvU18f/fae1QoQRYMJKU81oT3dYwkJj1VguQOk9REaY2Pw4323hRKkEVjJ9vrTXQ/r9t7UihBaobr9V6UIIrZ8Wu2J5rgPp6w96JQgtQcG2jmhGl5QWzvQaEEqQsOst2WY/9vs/egUILUtZIN59Dv4ZyTWwmSEyDnUx7luRtJar4qJUjT4RdsL+bI3xetzwolSMOwTn1Vgihmx2tsD+XAz4esrwolSMPxLZK9XGPS+qhQgmSCo2xbBPu3xfqoUIJkhh+yvSPQr3esbwolSOYYUp+UIIrZ8SzbM4L8ecb6pFCC6BNbWw8lSB7wLtt2AX5st74olCDikPWskfRZNSVIi2OKst2+c5P1QaEEEYuH2V7N4Lqv2msrlCDisa5FrqkEUSwIL7E93sDrPW6vqVCC5AaN0l/kVZ+iBGlxfMR2awOuc6u9lkIJkjvcwXagjuc/YK+hUILkEgnVdxeRDfYaCiVIbvEk2546nHePPbdCCZJ7rMvJORVKkEzwBtuOGp5vhz2nQgnSNMBu6uM1OM84Nedu80qQFscY1SYfx2Z7LoUSpOlwH9ubi/j9m/YcCiWIDth1YK4EaUU8z7Z7Ab/bbX+rUII0PdY36DcKJUgu8R7btnkcv83+RqEEaRncwnZkDscdsccqlCAthQrbDXM47gZ7rEIJ0nJ4lO2VE3z/ij1GoQRpWaxb4HcKJUhL4GW2XTN8vst+p1CCtDw+Oc6Y6/hEoQRpCRxm23rcv7fazxRKEIXFXZRuwBDZvxUC4GsIREHflguDkyQqaVYotIulUChBFAoliEKhBFEolCAKhRJEoVCCKBRKEIVCCaJQKJQgCoUSRKFQgigUShCFIhP8vwADACog5YM65zugAAAAAElFTkSuQmCC" />)</a>
-            </div>
-            <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Decode video stream in a Next.js
-            Application from a USB-connected or built-in camera (mobile or desktop)." class="button title"
-                    href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.42/1.hello-world/7.read-video-nextjs">
-                Hello World in
-                Next.js (<svg width="30px" height="17px" viewBox="0 0 207 124" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Black-Next.js" transform="translate(-247.000000, -138.000000)" fill="#000000" fill-rule="nonzero"><g id="next-black" transform="translate(247.000000, 138.000000)"><g id="EXT-+-Type-something"><path d="M48.9421964,32.6320058 L87.9011585,32.6320058 L87.9011585,35.7136421 L52.5134345,35.7136421 L52.5134345,58.9070103 L85.7908813,58.9070103 L85.7908813,61.9886466 L52.5134345,61.9886466 L52.5134345,87.4526941 L88.306981,87.4526941 L88.306981,90.5343303 L48.9421964,90.5343303 L48.9421964,32.6320058 Z M91.3912326,32.6320058 L95.5306221,32.6320058 L113.8738,58.0960534 L132.622801,32.6320058 L158.124498,0.286809811 L116.22757,60.7722112 L137.817329,90.5343303 L133.51561,90.5343303 L113.8738,63.4483691 L94.1508254,90.5343303 L89.9302715,90.5343303 L111.682358,60.7722112 L91.3912326,32.6320058 Z M139.359455,35.713642 L139.359455,32.6320058 L183.756439,32.6320058 L183.756439,35.7136421 L163.302983,35.7136421 L163.302983,90.5343303 L159.731745,90.5343303 L159.731745,35.7136421 L139.359455,35.713642 Z" id="EXT"></path><polygon id="Type-something" points="0.202923647 32.6320058 4.66697141 32.6320058 66.2235778 124.303087 40.785176 90.5343303 3.93649086 37.0111732 3.77416185 90.5343303 0.202923647 90.5343303"></polygon></g><path d="M183.396622,86.5227221 C184.134938,86.5227221 184.673474,85.9601075 184.673474,85.233037 C184.673474,84.5059658 184.134938,83.9433513 183.396622,83.9433513 C182.666993,83.9433513 182.11977,84.5059658 182.11977,85.233037 C182.11977,85.9601075 182.666993,86.5227221 183.396622,86.5227221 Z M186.905793,83.1297235 C186.905793,85.2763149 188.460599,86.678523 190.727662,86.678523 C193.142388,86.678523 194.601647,85.233037 194.601647,82.7229099 L194.601647,73.8855335 L192.655968,73.8855335 L192.655968,82.7142542 C192.655968,84.1078073 191.952397,84.8521899 190.710289,84.8521899 C189.598473,84.8521899 188.842785,84.1597409 188.816727,83.1297235 L186.905793,83.1297235 Z M197.146664,83.0172011 C197.285642,85.2503478 199.153145,86.678523 201.932686,86.678523 C204.903321,86.678523 206.762139,85.1811034 206.762139,82.792155 C206.762139,80.9138876 205.702439,79.8752151 203.131364,79.2779777 L201.750279,78.9404092 C200.117298,78.5595622 199.457158,78.0488813 199.457158,77.1573541 C199.457158,76.0321243 200.482113,75.296398 202.019547,75.296398 C203.478806,75.296398 204.48639,76.0148135 204.668797,77.1660091 L206.562359,77.1660091 C206.44944,75.0626962 204.590622,73.5825873 202.045605,73.5825873 C199.309495,73.5825873 197.48542,75.0626962 197.48542,77.2871878 C197.48542,79.1221767 198.519063,80.2127835 200.786126,80.7407758 L202.401734,81.1302779 C204.060773,81.5197807 204.790402,82.091051 204.790402,83.0431676 C204.790402,84.1510859 203.643842,84.9560573 202.08035,84.9560573 C200.403939,84.9560573 199.240006,84.2030196 199.074971,83.0172011 L197.146664,83.0172011 Z" id=".JS"></path></g></g></g></svg>)</a>
-            </div>
-            <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Decode video stream in a NuxtJS
-            Application from a USB-connected or built-in camera (mobile or desktop)." class="button title"
-                    href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.40/1.hello-world/8.read-video-nuxtjs">
-                Hello World in
-                NuxtJS (<svg width="20px" height="17px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill-rule="nonzero" transform="translate(0 50)" fill="none"><path d="M227.92099 83.45116l-13.6889 24.10141-46.8148-82.44693L23.7037 278.17052h97.3037c0 13.31084 10.61252 24.10142 23.70371 24.10142H23.70371c-8.46771 0-16.29145-4.59601-20.5246-12.05272-4.23315-7.4567-4.23272-16.64312.00114-24.0994L146.89383 13.05492c4.23415-7.45738 12.0596-12.05138 20.5284-12.05138 8.46878 0 16.29423 4.594 20.52839 12.05138l39.97037 70.39623z" fill="#00C58E"/><path d="M331.6642 266.11981l-90.05432-158.56724-13.6889-24.10141-13.68888 24.10141-90.04445 158.56724c-4.23385 7.45629-4.23428 16.64271-.00113 24.09941 4.23314 7.4567 12.05689 12.05272 20.5246 12.05272h166.4c8.46946 0 16.29644-4.591 20.532-12.04837 4.23555-7.45736 4.23606-16.64592.00132-24.10376h.01976zM144.7111 278.17052L227.921 131.65399l83.19012 146.51653h-166.4z" fill="#2F495E"/><path d="M396.04938 290.22123c-4.23344 7.45557-12.05656 12.0507-20.52345 12.0507H311.1111c13.0912 0 23.7037-10.79057 23.7037-24.10141h40.66173L260.09877 74.98553l-18.4889 32.56704L227.921 83.45116l11.65432-20.51634c4.23416-7.45738 12.0596-12.05138 20.5284-12.05138 8.46879 0 16.29423 4.594 20.52839 12.05138l115.41728 203.185c4.23426 7.457 4.23426 16.6444 0 24.1014z" fill="#108775"/></g></svg>)</a>
-            </div>
-            <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Decode video stream in a Electron
-            Application from a USB-connected or built-in camera (desktop only)." class="button title"
-                    href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.42/1.hello-world/9.read-video-electron">
-                Hello World in
-                Electron (<img alt="Electron logo"
-                        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAABmJLR0QA/wD/AP+gvaeTAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE5LTAzLTMxVDIzOjUxOjI3KzAwOjAwzwUHXwAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOS0wMy0zMVQyMzo1MToyNyswMDowML5Yv+MAAANzSURBVDhPdZRtTFtlFMd/vbe0aymUQh1gmakjE4GhLkt0i1OBbUxXkYFbzAzGaNTEMP1gMrfMTDGonzf3kmX4zbcP7sXBkL2AG27OGESNcYVukGVAHUIUWgT6Xs9zByEz8dzcPDfPec7/+Z9z/uea0mL8x46faKej8xx+f4BQKIzTmU1ZaQm+zTU821A7f2rR7gC5cPES2xtfQ9c07HYbpFJY7XZis7OkNZ1ZWZOy98WnR6muemw+CrT5lYOHW6mrbyTXlYNLXl32VtZs4uHntlPy+BOQiBv7yr+loZEDh1pvB4oZTBQDBbBsmYdkPE46lVQuHG43q7bUk4hEuPFTL7f6/Wi6GT0jg5GRIKdOfk5V5brbIAWeUrnFKbRnKN+4CZfHw1/Dw/R3d5GIRVnicFDz1k6unj2D3eWi/9suLJlZTE1OcSvYj17xwOrms+e60SXXuvdbGOju5vql75gMjlK2fgMPPl0roEXc7OsTciamJyaobnpDznWh+Hq996BnZuU1j46MUvzIGoZ/6WMsMEB2fj7rd7zJ4JXv+f1MJ+OD1w1QBfhbZ4dgmbDY7ETCYWKxOJpqo9VqZWJokIL77sezsoLVDVs51fwufw/fJJVMYha/ZjYb9TLJk+e91wC1WC34+wNo4elpKZbOzOQk0Zl/8FRU0HVgP/acHCNwV89lEtEoiBKUGDJsNhy5ucTm5tBECuGwxGdnZ4kzTSqRYOmKFaTkNgWq9tTNfcePGW1U9VBdW1pcTM/RI5KOzTij4rWyshKikShur1dq8jO/trdR3/KhkYICuXDkkPEtVNCF2VggYDBLxGLExa/iNd9TNUyHQixfs1ZEVWkcPrb7bR6qfYZ1L70slHWDejqZEr3FjRo9uXMX5Rs2Ep4KGaNg6MR913Ie3baNovJyzu/fh7OwEEeem7EBP2tfeFHSUKnJzcIgU3Riczq50dvLj21tTIwPLSj2Mj7fVjyFBVhkVqIzM/h27+Hr9/ZitlgkOMKqunqGfrgirGSOhFVwbJyOjq8WFavqdvDwJ+x5p4WioruNTqjCVb7eRKDnIqVV1XR9vM+ogxqH0eAffPTBXnY0vaJCF0GUKUbPN75qtM62xEpaOpYvHfvz2jVMGRbmZIbUFH/5WavBYMHuAFmwEyfbOf3NefxXB5iS4uXIXP3//wT+Bb4xmi8orIo3AAAAAElFTkSuQmCC">)</a>
-            </div>
-            <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Decode video stream in a progressive web application from a USB-connected or built-in camera (mobile or desktop)." class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.42/1.hello-world/10.read-video-pwa">Hello World in PWA</a>
-            </div>
-    </div>
-</div>
-<style>
-:root{--balloon-border-radius: 2px; --balloon-color: rgba(16, 16, 16, 0.95); --balloon-text-color: #fff; --balloon-font-size: 12px; --balloon-move: 4px}button[aria-label][data-balloon-pos]{overflow:visible}[aria-label][data-balloon-pos]{position:relative; cursor:pointer}[aria-label][data-balloon-pos]:after{opacity:0; pointer-events:none; transition:all 0.18s ease-out 0.18s; text-indent:0; font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-weight:normal; font-style:normal; text-shadow:none; font-size:var(--balloon-font-size); background:var(--balloon-color); border-radius:2px; color:var(--balloon-text-color); border-radius:var(--balloon-border-radius); content:attr(aria-label); padding:.5em 1em; position:absolute; white-space:nowrap; z-index:10}[aria-label][data-balloon-pos]:before{width:0; height:0; border:5px solid transparent; border-top-color:var(--balloon-color); opacity:0; pointer-events:none; transition:all 0.18s ease-out 0.18s; content:""; position:absolute; z-index:10}[aria-label][data-balloon-pos]:hover:before, [aria-label][data-balloon-pos]:hover:after, [aria-label][data-balloon-pos][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-visible]:after, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:before, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:after{opacity:1; pointer-events:none}[aria-label][data-balloon-pos].font-awesome:after{font-family: FontAwesome, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif}[aria-label][data-balloon-pos][data-balloon-break]:after{white-space:pre}[aria-label][data-balloon-pos][data-balloon-break][data-balloon-length]:after{white-space:pre-line; word-break:break-word}[aria-label][data-balloon-pos][data-balloon-blunt]:before, [aria-label][data-balloon-pos][data-balloon-blunt]:after{transition:none}[aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:after{transform:translate(-50%, 0)}[aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:before{transform:translate(-50%, 0)}[aria-label][data-balloon-pos][data-balloon-pos*="-left"]:after{left:0}[aria-label][data-balloon-pos][data-balloon-pos*="-left"]:before{left:5px}[aria-label][data-balloon-pos][data-balloon-pos*="-right"]:after{right:0}[aria-label][data-balloon-pos][data-balloon-pos*="-right"]:before{right:5px}[aria-label][data-balloon-pos][data-balloon-po*="-left"]:hover:after, [aria-label][data-balloon-pos][data-balloon-po*="-left"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:after{transform:translate(0, 0)}[aria-label][data-balloon-pos][data-balloon-po*="-left"]:hover:before, [aria-label][data-balloon-pos][data-balloon-po*="-left"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:before{transform:translate(0, 0)}[aria-label][data-balloon-pos][data-balloon-pos^="up"]:before, [aria-label][data-balloon-pos][data-balloon-pos^="up"]:after{bottom:100%; transform-origin:top; transform:translate(0, var(--balloon-move))}[aria-label][data-balloon-pos][data-balloon-pos^="up"]:after{margin-bottom:10px}[aria-label][data-balloon-pos][data-balloon-pos="up"]:before, [aria-label][data-balloon-pos][data-balloon-pos="up"]:after{left:50%; transform:translate(-50%, var(--balloon-move))}[aria-label][data-balloon-pos][data-balloon-pos^="down"]:before, [aria-label][data-balloon-pos][data-balloon-pos^="down"]:after{top:100%; transform:translate(0, calc(var(--balloon-move) * -1))}[aria-label][data-balloon-pos][data-balloon-pos^="down"]:after{margin-top:10px}[aria-label][data-balloon-pos][data-balloon-pos^="down"]:before{width:0; height:0; border:5px solid transparent; border-bottom-color:var(--balloon-color)}[aria-label][data-balloon-pos][data-balloon-pos="down"]:after, [aria-label][data-balloon-pos][data-balloon-pos="down"]:before{left:50%; transform:translate(-50%, calc(var(--balloon-move) * -1))}[aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:after{transform:translate(0, -50%)}[aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:before{transform:translate(0, -50%)}[aria-label][data-balloon-pos][data-balloon-pos="left"]:after, [aria-label][data-balloon-pos][data-balloon-pos="left"]:before{right:100%; top:50%; transform:translate(var(--balloon-move), -50%)}[aria-label][data-balloon-pos][data-balloon-pos="left"]:after{margin-right:10px}[aria-label][data-balloon-pos][data-balloon-pos="left"]:before{width:0; height:0; border:5px solid transparent; border-left-color:var(--balloon-color)}[aria-label][data-balloon-pos][data-balloon-pos="right"]:after, [aria-label][data-balloon-pos][data-balloon-pos="right"]:before{left:100%; top:50%; transform:translate(calc(var(--balloon-move) * -1), -50%)}[aria-label][data-balloon-pos][data-balloon-pos="right"]:after{margin-left:10px}[aria-label][data-balloon-pos][data-balloon-pos="right"]:before{width:0; height:0; border:5px solid transparent; border-right-color:var(--balloon-color)}[aria-label][data-balloon-pos][data-balloon-length]:after{white-space:normal}[aria-label][data-balloon-pos][data-balloon-length="small"]:after{width:80px}[aria-label][data-balloon-pos][data-balloon-length="medium"]:after{width:150px}[aria-label][data-balloon-pos][data-balloon-length="large"]:after{width:260px}[aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after{width:380px}@media screen and (max-width: 768px){[aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after{width:90vw}}[aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after{width:100%}    
-.filetree {
-    font-family: "Open Sans", sans-serif;
-    text-align: left;
-    border-radius: 4px;
-    margin: 0 auto;
-    max-width: 800px;
-    padding: 16px 32px;
-}
-.filetree .ds-logo {
-    height: 3vh;
-    background: url(logo-dynamsoft-black.svg) no-repeat 0;
-}
-.filetree h3 {
-    margin: 1vh auto;
-}
-.filetree .description {
-    border: dashed 1px gray;
-    padding: 1vmin;
-}
-.filetree .file a {
-    z-index: auto;
-}
-.filetree .file {
-    display: block;
-    font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
-    letter-spacing: 0.3px;
-    line-height: 32px;
-    color: #333;
-}
-.filetree .children {
-    padding-left: 24px;
-    position: relative;
-}
-.filetree .children .file {
-    position: relative;
-}
-.filetree .children .file a {
-    z-index: auto;
-}
-.filetree .children .file::before {
-    content: '';
-    left: -18px;
-    bottom: 16px;
-    width: 16px;
-    height: 20px;
-    position: absolute;
-    border-width: 0 0 1px 1px;
-    border-style: solid;
-    border-color: #dbdbdb;
-    border-radius: 0 0 0 3px;
-}
-.filetree [aria-label] {
-    line-height: 15px;
-}
-.filetree .title img, .filetree .title svg {
-    height: 17px;
-    vertical-align: middle;
-}
-.filetree .tooltipIcon {
-    display: inline-block; 
-    width: 17px; 
-    height: 17px;
-    vertical-align: middle;
-    background: url(data:image/png; base64, iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAg5JREFUOBGVkktrE2EUhjuTSUJwExCColSwFAIFaZFSwaZ0abx110rugf4Ef0Drr3AxaTKJZNFSNwYDJbgxblQQN22xFFpF0J07Dbn1OaFnGMciZOCb833vec/9GBMXfNlstmCa5n3DMBKoDznx4XDYBmuUy2XHb2J4gWKxuAB5h2Nj0EbuVyqVH4VC4UogEJjpdruL4Nl+v/+kVqt9VFvXSSqVuhEKhXYty3pg2/ZPJfhlJpO5isPXBFipVqtfXb1kkM/nXc+u4j8X+J84t4ViyU9KCAaD83L3ful0+jqZvaQ3S5T1x6vD5iH4W7CbxnkTJx3HeeYl6V3KrNfrp/r2Snq1wfvYkikMBoPnXqXcISSIttTr9f6ZhnKl+diumzJGGrWvCpXgQQiXKPOFYn5JgAMCLZooDmWMfgL78CYajW6C3/Hr9M10vhPsSJzEZQ9UMY7M5XLXyGTa5NeWRRrHWLlMboZMZJPNhmyiKsaRbO5d+vJqtLEszREZLUuNXifJZDIci8VanU5nLRKJBOjTN9VTyiQJ7NHPuPRkgscKabWUoLLZbHbQPQ2Hww6TshUXCd4Ceyz3USZywfNlHH0go3tk9EWwiz6GEAff49wii1/CcZ3Ig7KmEFuc9zj7TLQ2zftN3RGwBJFnCTQHViyVSqdgo+8vJwoS7RFOVnlPYbSAfMc5wck2WTaUp/IMAjTZicjWFTcAAAAASUVORK5CYII=) right center no-repeat; 
-    background-size: 100%; 
-    margin-left: 5px; 
-}
-</style>
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
-
-* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/9.x/1.hello-world/1.hello-world.html">Read Barcodes from Camera - Source Code</a>
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
-
-* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/9.x/1.hello-world/7.read-video-nextjs">Hello World in Next.js - Source Code</a>
-
-## 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<BarcodeScanner>|null = null;
-    elRef: React.RefObject<HTMLDivElement> = 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 (
-            <div ref={this.elRef} className={styles["component-barcode-scanner"]}>
-                <svg className={styles["dce-bg-loading"]+" "+"dce-bg-loading"} viewBox="0 0 1792 1792"><path d="M1760 896q0 176-68.5 336t-184 275.5-275.5 184-336 68.5-336-68.5-275.5-184-184-275.5-68.5-336q0-213 97-398.5t265-305.5 374-151v228q-221 45-366.5 221t-145.5 406q0 130 51 248.5t136.5 204 204 136.5 248.5 51 248.5-51 204-136.5 136.5-204 51-248.5q0-230-145.5-406t-366.5-221v-228q206 31 374 151t265 305.5 97 398.5z"></path></svg>
-                <svg className={styles["dce-bg-camera"]+" "+"dce-bg-camera"} viewBox="0 0 2048 1792"><path d="M1024 672q119 0 203.5 84.5t84.5 203.5-84.5 203.5-203.5 84.5-203.5-84.5-84.5-203.5 84.5-203.5 203.5-84.5zm704-416q106 0 181 75t75 181v896q0 106-75 181t-181 75h-1408q-106 0-181-75t-75-181v-896q0-106 75-181t181-75h224l51-136q19-49 69.5-84.5t103.5-35.5h512q53 0 103.5 35.5t69.5 84.5l51 136h224zm-704 1152q185 0 316.5-131.5t131.5-316.5-131.5-316.5-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5z"></path></svg>
-                <div className={styles["dce-video-container"]+" "+"dce-video-container"}></div>
-                <div className={styles["dce-scanarea"]+" "+"dce-scanarea"}>
-                    <div className={styles["dce-scanlight"]+" "+"dce-scanlight"}></div>
-                </div>
-                <div className={styles["div-select-container"]+" "+"div-select-container"}>
-                    <select className={styles["dce-sel-camera"]+" "+"dce-sel-camera"}></select>
-                    <select className={styles["dce-sel-resolution"]+" "+"dce-sel-resolution"}></select>
-                </div>
-                <div className={styles["dbr-msg-poweredby"]}><svg viewBox="0 0 94 17"><g><path d="M0.9,14V4.3h2.3c0.6,0,1,0.1,1.4,0.3c0.3,0.2,0.6,0.5,0.7,0.9s0.2,0.8,0.2,1.4c0,0.5-0.1,0.9-0.2,1.3 C5.1,8.5,4.9,8.8,4.5,9.1C4.2,9.3,3.7,9.4,3.2,9.4H1.8V14H0.9z M1.8,8.7h1.2c0.4,0,0.7-0.1,1-0.2S4.3,8.2,4.4,8 c0.1-0.3,0.2-0.6,0.2-1.1c0-0.5,0-0.9-0.1-1.2C4.3,5.4,4.2,5.2,3.9,5.1S3.4,5,2.9,5H1.8V8.7z" /><path d="M8.1,14.1c-0.5,0-0.8-0.1-1.1-0.3s-0.5-0.5-0.6-0.9s-0.2-0.9-0.2-1.4V9.6c0-0.6,0.1-1,0.2-1.4 C6.5,7.8,6.7,7.5,7,7.3S7.6,7,8.1,7C8.6,7,9,7.1,9.2,7.3s0.5,0.5,0.6,0.9C9.9,8.5,9.9,9,9.9,9.6v1.9c0,0.6-0.1,1-0.2,1.4 c-0.1,0.4-0.3,0.7-0.6,0.9S8.6,14.1,8.1,14.1z M8.1,13.4c0.3,0,0.5-0.1,0.7-0.2C8.9,13,9,12.8,9,12.5c0-0.3,0-0.6,0-1v-2 c0-0.4,0-0.7,0-1C9,8.2,8.9,8,8.8,7.9C8.6,7.7,8.4,7.6,8.1,7.6c-0.3,0-0.5,0.1-0.7,0.2C7.3,8,7.2,8.2,7.2,8.5c0,0.3-0.1,0.6-0.1,1 v2c0,0.4,0,0.7,0.1,1c0,0.3,0.1,0.5,0.3,0.7C7.6,13.4,7.8,13.4,8.1,13.4z" /><path d="M12,14l-1.1-6.9h0.7l0.9,5.8l1.1-5.8h0.8l1.1,5.8l0.8-5.8H17L15.9,14H15l-1.1-5.6L12.8,14H12z" /><path d="M19.8,14.1c-0.4,0-0.8-0.1-1.1-0.3s-0.5-0.5-0.6-0.9c-0.1-0.4-0.2-0.9-0.2-1.6V9.6c0-0.7,0.1-1.2,0.2-1.6 c0.1-0.4,0.3-0.7,0.6-0.8C19,7,19.3,7,19.8,7c0.5,0,0.9,0.1,1.1,0.3c0.3,0.2,0.4,0.5,0.5,0.9c0.1,0.4,0.1,1,0.1,1.6v0.6h-2.8v1.2 c0,0.4,0,0.8,0.1,1.1c0.1,0.3,0.2,0.4,0.3,0.6s0.3,0.2,0.6,0.2c0.2,0,0.3,0,0.5-0.1c0.1-0.1,0.3-0.2,0.3-0.4s0.1-0.5,0.1-0.8v-0.5 h0.9V12c0,0.6-0.1,1.1-0.4,1.5S20.4,14.1,19.8,14.1z M18.8,9.9h1.9V9.4c0-0.4,0-0.7-0.1-0.9c0-0.3-0.1-0.5-0.3-0.6S20,7.6,19.8,7.6 c-0.2,0-0.4,0.1-0.6,0.2c-0.1,0.1-0.3,0.3-0.3,0.6c-0.1,0.3-0.1,0.7-0.1,1.1V9.9z" /><path d="M22.8,14V7.1h0.9V8c0.2-0.4,0.5-0.6,0.8-0.8C24.8,7.1,25,7,25.3,7c0,0,0,0,0.1,0s0.1,0,0.1,0v0.9 c-0.1,0-0.1,0-0.2-0.1c-0.1,0-0.2,0-0.2,0c-0.3,0-0.5,0.1-0.7,0.2c-0.2,0.1-0.4,0.3-0.6,0.6V14H22.8z" /><path d="M28,14.1c-0.4,0-0.8-0.1-1.1-0.3s-0.5-0.5-0.6-0.9c-0.1-0.4-0.2-0.9-0.2-1.6V9.6c0-0.7,0.1-1.2,0.2-1.6 c0.1-0.4,0.3-0.7,0.6-0.8C27.3,7,27.6,7,28,7c0.5,0,0.9,0.1,1.1,0.3c0.3,0.2,0.4,0.5,0.5,0.9c0.1,0.4,0.1,1,0.1,1.6v0.6H27v1.2 c0,0.4,0,0.8,0.1,1.1c0.1,0.3,0.2,0.4,0.3,0.6s0.3,0.2,0.6,0.2c0.2,0,0.3,0,0.5-0.1c0.1-0.1,0.3-0.2,0.3-0.4s0.1-0.5,0.1-0.8v-0.5 h0.9V12c0,0.6-0.1,1.1-0.4,1.5S28.7,14.1,28,14.1z M27,9.9H29V9.4c0-0.4,0-0.7-0.1-0.9c0-0.3-0.1-0.5-0.3-0.6S28.3,7.6,28,7.6 c-0.2,0-0.4,0.1-0.6,0.2c-0.1,0.1-0.3,0.3-0.3,0.6C27.1,8.6,27,9,27,9.5V9.9z" />
-                    <path d="M32.6,14.1c-0.6,0-1-0.2-1.3-0.7c-0.3-0.4-0.4-1.2-0.4-2.2V9.9c0-0.6,0-1.1,0.1-1.6c0.1-0.4,0.2-0.8,0.5-1 c0.2-0.2,0.6-0.4,1-0.4C32.8,7,33,7,33.2,7.1c0.2,0.1,0.4,0.3,0.5,0.4V4.3h0.9V14h-0.9v-0.5c-0.1,0.2-0.3,0.3-0.5,0.4 C33,14,32.8,14.1,32.6,14.1z M32.7,13.4c0.2,0,0.4,0,0.5-0.1c0.2-0.1,0.3-0.2,0.5-0.3V8.1c-0.1-0.1-0.3-0.2-0.4-0.3 c-0.2-0.1-0.4-0.2-0.6-0.2c-0.4,0-0.6,0.2-0.8,0.5S31.8,9,31.8,9.6v1.6c0,0.5,0,0.9,0.1,1.2c0.1,0.3,0.1,0.6,0.3,0.7 C32.3,13.3,32.5,13.4,32.7,13.4z" /><path d="M40.5,14.1c-0.3,0-0.5-0.1-0.7-0.2c-0.2-0.1-0.4-0.3-0.5-0.4V14h-0.9V4.3h0.9v3.4c0.1-0.2,0.3-0.3,0.5-0.5 C40.1,7,40.3,7,40.6,7C41,7,41.2,7,41.4,7.2c0.2,0.2,0.4,0.4,0.5,0.6c0.1,0.3,0.2,0.6,0.2,0.9s0.1,0.7,0.1,1v1.5 c0,0.6,0,1.1-0.1,1.5c-0.1,0.4-0.3,0.8-0.5,1C41.3,14,41,14.1,40.5,14.1z M40.4,13.4c0.3,0,0.5-0.1,0.6-0.3 c0.1-0.2,0.2-0.4,0.3-0.8s0.1-0.7,0.1-1.2V9.7c0-0.5,0-0.8-0.1-1.1S41.1,8,41,7.9c-0.1-0.2-0.3-0.2-0.6-0.2c-0.2,0-0.4,0.1-0.6,0.2 c-0.2,0.1-0.3,0.2-0.5,0.4v4.7c0.1,0.1,0.3,0.3,0.5,0.4C40,13.4,40.2,13.4,40.4,13.4z" /><path d="M43.2,15.7V15c0.4,0,0.7,0,0.9-0.1c0.2-0.1,0.3-0.1,0.4-0.3c0.1-0.1,0.1-0.2,0.1-0.4c0-0.1,0-0.3-0.1-0.5 c0-0.2-0.1-0.4-0.2-0.6L43,7.1h0.9l1.2,5.9l1.2-5.9h0.9l-1.7,7.4c-0.1,0.3-0.2,0.5-0.3,0.7c-0.2,0.2-0.4,0.3-0.6,0.4 c-0.3,0.1-0.6,0.1-1,0.1H43.2z" /><path d="M50.6,14V4.3h2.1c0.7,0,1.2,0.1,1.6,0.4c0.4,0.2,0.6,0.6,0.8,1c0.2,0.4,0.2,0.9,0.2,1.5V11 c0,0.6-0.1,1.1-0.2,1.6s-0.4,0.8-0.8,1S53.5,14,52.8,14H50.6z M51.5,13.3h1.2c0.5,0,0.9-0.1,1.1-0.3s0.4-0.5,0.5-0.9 s0.1-0.8,0.1-1.3V7.2c0-0.5,0-0.9-0.1-1.2s-0.2-0.6-0.5-0.8S53.2,5,52.7,5h-1.2V13.3z" /><path d="M56.5,15.7V15c0.4,0,0.7,0,0.9-0.1c0.2-0.1,0.3-0.1,0.4-0.3c0.1-0.1,0.1-0.2,0.1-0.4c0-0.1,0-0.3-0.1-0.5 c0-0.2-0.1-0.4-0.2-0.6l-1.4-6.1h0.9l1.2,5.9l1.2-5.9h0.9l-1.7,7.4c-0.1,0.3-0.2,0.5-0.3,0.7s-0.4,0.3-0.6,0.4s-0.6,0.1-1,0.1H56.5 z" /><path d="M61.3,14V7.1h0.9v0.7c0.2-0.2,0.5-0.4,0.8-0.6C63.2,7,63.5,7,63.8,7C64,7,64.2,7,64.4,7.1s0.3,0.3,0.4,0.5 c0.1,0.2,0.1,0.5,0.1,0.8V14H64V8.6c0-0.4-0.1-0.6-0.2-0.8c-0.1-0.1-0.3-0.2-0.5-0.2c-0.2,0-0.4,0.1-0.6,0.2s-0.4,0.3-0.6,0.5V14 H61.3z" />
-                    <path d="M67.4,14.1c-0.3,0-0.5-0.1-0.7-0.2c-0.2-0.1-0.4-0.3-0.5-0.6C66,13.1,66,12.8,66,12.6c0-0.4,0.1-0.7,0.2-0.9 s0.3-0.5,0.5-0.7c0.2-0.2,0.5-0.4,0.9-0.6c0.4-0.2,0.8-0.4,1.3-0.6V9.3c0-0.4,0-0.8-0.1-1c-0.1-0.2-0.1-0.4-0.3-0.5 c-0.1-0.1-0.3-0.2-0.5-0.2c-0.2,0-0.3,0-0.5,0.1c-0.1,0.1-0.3,0.2-0.3,0.4c-0.1,0.2-0.1,0.4-0.1,0.7V9l-0.9,0 c0-0.7,0.2-1.2,0.5-1.6C66.8,7.1,67.3,7,68,7c0.6,0,1.1,0.2,1.3,0.6c0.3,0.4,0.4,1,0.4,1.7v3.4c0,0.1,0,0.3,0,0.5 c0,0.2,0,0.4,0,0.5c0,0.2,0,0.3,0,0.4h-0.8c0-0.2-0.1-0.3-0.1-0.5c0-0.2,0-0.3-0.1-0.5c-0.1,0.3-0.3,0.5-0.5,0.7 S67.7,14.1,67.4,14.1z M67.6,13.4c0.2,0,0.3,0,0.5-0.1c0.1-0.1,0.3-0.2,0.4-0.3s0.2-0.3,0.3-0.4v-2.2c-0.3,0.2-0.6,0.3-0.9,0.5 c-0.2,0.1-0.4,0.3-0.6,0.4c-0.2,0.1-0.3,0.3-0.3,0.5s-0.1,0.4-0.1,0.6c0,0.4,0.1,0.6,0.2,0.8C67.2,13.3,67.4,13.4,67.6,13.4z" /><path d="M70.9,14V7.1h0.8v0.7c0.2-0.3,0.5-0.5,0.8-0.6c0.3-0.1,0.6-0.2,0.9-0.2c0.2,0,0.5,0.1,0.7,0.2s0.3,0.4,0.4,0.7 c0.2-0.3,0.5-0.5,0.8-0.7c0.3-0.2,0.6-0.2,0.9-0.2c0.2,0,0.4,0,0.6,0.1s0.3,0.3,0.4,0.5c0.1,0.2,0.2,0.5,0.2,0.9V14h-0.8V8.6 c0-0.4-0.1-0.7-0.2-0.8s-0.3-0.2-0.5-0.2c-0.2,0-0.4,0.1-0.7,0.2S74.7,8,74.5,8.3c0,0,0,0.1,0,0.1s0,0.1,0,0.1V14h-0.8V8.6 c0-0.4-0.1-0.7-0.2-0.8c-0.1-0.1-0.3-0.2-0.5-0.2c-0.2,0-0.4,0.1-0.7,0.2c-0.2,0.1-0.4,0.3-0.6,0.5V14H70.9z" /><path d="M80.2,14.1c-0.6,0-1-0.2-1.3-0.5c-0.3-0.4-0.5-0.8-0.6-1.4l0.7-0.2c0,0.5,0.2,0.9,0.4,1.2 c0.2,0.2,0.5,0.4,0.8,0.4c0.3,0,0.5-0.1,0.7-0.3c0.2-0.2,0.2-0.4,0.2-0.7c0-0.2-0.1-0.5-0.2-0.7c-0.1-0.2-0.4-0.5-0.6-0.7l-0.9-0.8 c-0.3-0.3-0.5-0.5-0.7-0.8c-0.2-0.3-0.2-0.6-0.2-0.9c0-0.3,0.1-0.6,0.2-0.8c0.1-0.2,0.3-0.4,0.6-0.5C79.5,7,79.8,7,80.2,7 c0.5,0,0.9,0.2,1.2,0.5c0.3,0.3,0.4,0.8,0.4,1.3L81.2,9c0-0.3-0.1-0.6-0.1-0.8s-0.2-0.4-0.3-0.5c-0.1-0.1-0.3-0.1-0.5-0.1 c-0.3,0-0.5,0.1-0.6,0.2c-0.2,0.1-0.2,0.4-0.2,0.6c0,0.2,0,0.4,0.1,0.6c0.1,0.2,0.2,0.3,0.4,0.5l1,0.9c0.2,0.2,0.4,0.3,0.6,0.5 c0.2,0.2,0.3,0.4,0.4,0.6c0.1,0.2,0.2,0.5,0.2,0.8c0,0.4-0.1,0.7-0.2,0.9c-0.1,0.2-0.4,0.4-0.6,0.6C80.9,14,80.6,14.1,80.2,14.1z" />
-                    <path d="M84.7,14.1c-0.5,0-0.8-0.1-1.1-0.3c-0.3-0.2-0.5-0.5-0.6-0.9s-0.2-0.9-0.2-1.4V9.6c0-0.6,0.1-1,0.2-1.4 c0.1-0.4,0.3-0.7,0.6-0.9C83.9,7.1,84.3,7,84.7,7c0.5,0,0.9,0.1,1.1,0.3s0.5,0.5,0.6,0.9c0.1,0.4,0.2,0.9,0.2,1.4v1.9 c0,0.6-0.1,1-0.2,1.4s-0.3,0.7-0.6,0.9S85.2,14.1,84.7,14.1z M84.7,13.4c0.3,0,0.5-0.1,0.7-0.2c0.1-0.2,0.2-0.4,0.3-0.7 c0-0.3,0-0.6,0-1v-2c0-0.4,0-0.7,0-1c0-0.3-0.1-0.5-0.3-0.7c-0.1-0.2-0.4-0.2-0.7-0.2c-0.3,0-0.5,0.1-0.7,0.2 c-0.1,0.2-0.2,0.4-0.3,0.7c0,0.3-0.1,0.6-0.1,1v2c0,0.4,0,0.7,0.1,1c0,0.3,0.1,0.5,0.3,0.7C84.2,13.4,84.4,13.4,84.7,13.4z" /><path d="M88.2,14V7.7h-0.9V7.1h0.9V6.3c0-0.3,0-0.6,0.1-0.9c0.1-0.3,0.2-0.5,0.4-0.6c0.2-0.2,0.5-0.2,0.8-0.2 c0.1,0,0.2,0,0.4,0c0.1,0,0.2,0,0.3,0.1v0.6c-0.1,0-0.2,0-0.2,0c-0.1,0-0.2,0-0.2,0c-0.3,0-0.4,0.1-0.5,0.2s-0.1,0.4-0.1,0.8v0.8 h1.1v0.6h-1.1V14H88.2z" /><path d="M92.7,14.1c-0.3,0-0.6-0.1-0.8-0.2s-0.3-0.3-0.4-0.5c-0.1-0.2-0.1-0.5-0.1-0.8V7.6h-0.9V7.1h0.9V4.9h0.9v2.1 h1.2v0.6h-1.2v4.8c0,0.3,0,0.6,0.1,0.7c0.1,0.1,0.2,0.2,0.5,0.2c0.1,0,0.2,0,0.2,0s0.2,0,0.3,0V14c-0.1,0-0.2,0-0.4,0.1 C92.9,14.1,92.8,14.1,92.7,14.1z" /></g></svg>
-                </div>
-            </div>
-        );
-    }
-}
-
-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> = BarcodeReader.createInstance();
-
-  decodeImg = async (e: ChangeEvent<HTMLInputElement>) => {
-    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 (
-      <div className={styles.ImgDecode}><input type="file" onChange={this.decodeImg} /></div>
-    )
-  }
-}
-```
-
-* 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<any, isState> {
-    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 (
-            <div className={styles.helloWorld}>
-                <h1 className={styles.header}>Hello World for Next.js</h1>
-                <div>
-                    <button className={styles.button} style={{ marginRight: '10px', backgroundColor: this.state.bShowScanner ? 'rgb(255,174,55)' : 'white' }} onClick={this.showScanner}>Video Decode</button>
-                    <button className={styles.button} style={{ backgroundColor: this.state.bShowImgDecode ? 'rgb(255,174,55)' : 'white' }} onClick={this.showImgDecode}>Image Decode</button>
-                </div>
-                <div className={styles.container}>
-                    {this.state.bShowScanner ? (<VideoDecode></VideoDecode>) : ""}
-                    {this.state.bShowImgDecode ? (<ImgDecode></ImgDecode>) : ""}
-                </div>
-            </div>
-        );
-    }
-}
-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 &lt;main&gt; tag like this:
-
-```jsx
-<main className={styles.main}>
-  <div className={styles.UIElement}>
-    <HelloWorld />
-  </div>
-</main>
-```
-
-* 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
-
-* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/9.x/1.hello-world/8.read-video-nuxtjs">Hello World in Nuxt - Source Code</a>
-
-## 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
-<script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, getCurrentInstance } from "vue";
-import type { Ref } from 'vue'
-import { BarcodeScanner } from 'dynamsoft-javascript-barcode'
-
-const pScanner: Ref<null | Promise<BarcodeScanner>> = ref(null);
-const elRefs: Ref<null | HTMLElement> = ref(null);
-onMounted(async () => {
-  try {
-    const internalInstance = getCurrentInstance();
-    elRefs.value = internalInstance?.refs.elRefs as HTMLElement;
-    const scanner = await (pScanner.value = BarcodeScanner.createInstance());
-    await scanner.setUIElement(elRefs.value);
-    scanner.onFrameRead = (results) => {
-      for (let result of results) {
-        console.log(result.barcodeText);
-      }
-    };
-    scanner.onUniqueRead = (txt) => {
-      alert(txt);
-    }
-    await scanner.open();
-  } catch (ex:any) {
-    let errMsg = ex.message||ex;
-    if (errMsg.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.";
-    }
-    console.error(errMsg);
-    alert(errMsg);
-  }
-});
-onBeforeUnmount(async () => {
-  if (pScanner.value) {
-    (await pScanner.value).destroyContext();
-    console.log('BarcodeScanner Component Unmount');
-  }
-});
-</script>
-
-<template>
-  <div ref="elRefs" class="component-barcode-scanner">
-    <svg class="dce-bg-loading" viewBox="0 0 1792 1792">
-      <path
-        d="M1760 896q0 176-68.5 336t-184 275.5-275.5 184-336 68.5-336-68.5-275.5-184-184-275.5-68.5-336q0-213 97-398.5t265-305.5 374-151v228q-221 45-366.5 221t-145.5 406q0 130 51 248.5t136.5 204 204 136.5 248.5 51 248.5-51 204-136.5 136.5-204 51-248.5q0-230-145.5-406t-366.5-221v-228q206 31 374 151t265 305.5 97 398.5z"></path>
-    </svg>
-    <svg class="dce-bg-camera" viewBox="0 0 2048 1792">
-      <path
-        d="M1024 672q119 0 203.5 84.5t84.5 203.5-84.5 203.5-203.5 84.5-203.5-84.5-84.5-203.5 84.5-203.5 203.5-84.5zm704-416q106 0 181 75t75 181v896q0 106-75 181t-181 75h-1408q-106 0-181-75t-75-181v-896q0-106 75-181t181-75h224l51-136q19-49 69.5-84.5t103.5-35.5h512q53 0 103.5 35.5t69.5 84.5l51 136h224zm-704 1152q185 0 316.5-131.5t131.5-316.5-131.5-316.5-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5z">
-      </path>
-    </svg>
-    <div class="dce-video-container"></div>
-    <div class="dce-scanarea">
-      <div class="dce-scanlight"></div>
-    </div>
-    <div class="div-select-container">
-      <select class="dce-sel-camera"></select>
-      <select class="dce-sel-resolution"></select>
-    </div>
-    <div class="dbr-msg-poweredby">
-      <svg viewBox="0 0 94 17">
-        <g>
-          <path
-            d="M0.9,14V4.3h2.3c0.6,0,1,0.1,1.4,0.3c0.3,0.2,0.6,0.5,0.7,0.9s0.2,0.8,0.2,1.4c0,0.5-0.1,0.9-0.2,1.3 C5.1,8.5,4.9,8.8,4.5,9.1C4.2,9.3,3.7,9.4,3.2,9.4H1.8V14H0.9z M1.8,8.7h1.2c0.4,0,0.7-0.1,1-0.2S4.3,8.2,4.4,8 c0.1-0.3,0.2-0.6,0.2-1.1c0-0.5,0-0.9-0.1-1.2C4.3,5.4,4.2,5.2,3.9,5.1S3.4,5,2.9,5H1.8V8.7z" />
-          <path
-            d="M8.1,14.1c-0.5,0-0.8-0.1-1.1-0.3s-0.5-0.5-0.6-0.9s-0.2-0.9-0.2-1.4V9.6c0-0.6,0.1-1,0.2-1.4 C6.5,7.8,6.7,7.5,7,7.3S7.6,7,8.1,7C8.6,7,9,7.1,9.2,7.3s0.5,0.5,0.6,0.9C9.9,8.5,9.9,9,9.9,9.6v1.9c0,0.6-0.1,1-0.2,1.4 c-0.1,0.4-0.3,0.7-0.6,0.9S8.6,14.1,8.1,14.1z M8.1,13.4c0.3,0,0.5-0.1,0.7-0.2C8.9,13,9,12.8,9,12.5c0-0.3,0-0.6,0-1v-2 c0-0.4,0-0.7,0-1C9,8.2,8.9,8,8.8,7.9C8.6,7.7,8.4,7.6,8.1,7.6c-0.3,0-0.5,0.1-0.7,0.2C7.3,8,7.2,8.2,7.2,8.5c0,0.3-0.1,0.6-0.1,1 v2c0,0.4,0,0.7,0.1,1c0,0.3,0.1,0.5,0.3,0.7C7.6,13.4,7.8,13.4,8.1,13.4z" />
-          <path d="M12,14l-1.1-6.9h0.7l0.9,5.8l1.1-5.8h0.8l1.1,5.8l0.8-5.8H17L15.9,14H15l-1.1-5.6L12.8,14H12z" />
-          <path
-            d="M19.8,14.1c-0.4,0-0.8-0.1-1.1-0.3s-0.5-0.5-0.6-0.9c-0.1-0.4-0.2-0.9-0.2-1.6V9.6c0-0.7,0.1-1.2,0.2-1.6 c0.1-0.4,0.3-0.7,0.6-0.8C19,7,19.3,7,19.8,7c0.5,0,0.9,0.1,1.1,0.3c0.3,0.2,0.4,0.5,0.5,0.9c0.1,0.4,0.1,1,0.1,1.6v0.6h-2.8v1.2 c0,0.4,0,0.8,0.1,1.1c0.1,0.3,0.2,0.4,0.3,0.6s0.3,0.2,0.6,0.2c0.2,0,0.3,0,0.5-0.1c0.1-0.1,0.3-0.2,0.3-0.4s0.1-0.5,0.1-0.8v-0.5 h0.9V12c0,0.6-0.1,1.1-0.4,1.5S20.4,14.1,19.8,14.1z M18.8,9.9h1.9V9.4c0-0.4,0-0.7-0.1-0.9c0-0.3-0.1-0.5-0.3-0.6S20,7.6,19.8,7.6 c-0.2,0-0.4,0.1-0.6,0.2c-0.1,0.1-0.3,0.3-0.3,0.6c-0.1,0.3-0.1,0.7-0.1,1.1V9.9z" />
-          <path
-            d="M22.8,14V7.1h0.9V8c0.2-0.4,0.5-0.6,0.8-0.8C24.8,7.1,25,7,25.3,7c0,0,0,0,0.1,0s0.1,0,0.1,0v0.9 c-0.1,0-0.1,0-0.2-0.1c-0.1,0-0.2,0-0.2,0c-0.3,0-0.5,0.1-0.7,0.2c-0.2,0.1-0.4,0.3-0.6,0.6V14H22.8z" />
-          <path
-            d="M28,14.1c-0.4,0-0.8-0.1-1.1-0.3s-0.5-0.5-0.6-0.9c-0.1-0.4-0.2-0.9-0.2-1.6V9.6c0-0.7,0.1-1.2,0.2-1.6 c0.1-0.4,0.3-0.7,0.6-0.8C27.3,7,27.6,7,28,7c0.5,0,0.9,0.1,1.1,0.3c0.3,0.2,0.4,0.5,0.5,0.9c0.1,0.4,0.1,1,0.1,1.6v0.6H27v1.2 c0,0.4,0,0.8,0.1,1.1c0.1,0.3,0.2,0.4,0.3,0.6s0.3,0.2,0.6,0.2c0.2,0,0.3,0,0.5-0.1c0.1-0.1,0.3-0.2,0.3-0.4s0.1-0.5,0.1-0.8v-0.5 h0.9V12c0,0.6-0.1,1.1-0.4,1.5S28.7,14.1,28,14.1z M27,9.9H29V9.4c0-0.4,0-0.7-0.1-0.9c0-0.3-0.1-0.5-0.3-0.6S28.3,7.6,28,7.6 c-0.2,0-0.4,0.1-0.6,0.2c-0.1,0.1-0.3,0.3-0.3,0.6C27.1,8.6,27,9,27,9.5V9.9z" />
-          <path
-            d="M32.6,14.1c-0.6,0-1-0.2-1.3-0.7c-0.3-0.4-0.4-1.2-0.4-2.2V9.9c0-0.6,0-1.1,0.1-1.6c0.1-0.4,0.2-0.8,0.5-1 c0.2-0.2,0.6-0.4,1-0.4C32.8,7,33,7,33.2,7.1c0.2,0.1,0.4,0.3,0.5,0.4V4.3h0.9V14h-0.9v-0.5c-0.1,0.2-0.3,0.3-0.5,0.4 C33,14,32.8,14.1,32.6,14.1z M32.7,13.4c0.2,0,0.4,0,0.5-0.1c0.2-0.1,0.3-0.2,0.5-0.3V8.1c-0.1-0.1-0.3-0.2-0.4-0.3 c-0.2-0.1-0.4-0.2-0.6-0.2c-0.4,0-0.6,0.2-0.8,0.5S31.8,9,31.8,9.6v1.6c0,0.5,0,0.9,0.1,1.2c0.1,0.3,0.1,0.6,0.3,0.7 C32.3,13.3,32.5,13.4,32.7,13.4z" />
-          <path
-            d="M40.5,14.1c-0.3,0-0.5-0.1-0.7-0.2c-0.2-0.1-0.4-0.3-0.5-0.4V14h-0.9V4.3h0.9v3.4c0.1-0.2,0.3-0.3,0.5-0.5 C40.1,7,40.3,7,40.6,7C41,7,41.2,7,41.4,7.2c0.2,0.2,0.4,0.4,0.5,0.6c0.1,0.3,0.2,0.6,0.2,0.9s0.1,0.7,0.1,1v1.5 c0,0.6,0,1.1-0.1,1.5c-0.1,0.4-0.3,0.8-0.5,1C41.3,14,41,14.1,40.5,14.1z M40.4,13.4c0.3,0,0.5-0.1,0.6-0.3 c0.1-0.2,0.2-0.4,0.3-0.8s0.1-0.7,0.1-1.2V9.7c0-0.5,0-0.8-0.1-1.1S41.1,8,41,7.9c-0.1-0.2-0.3-0.2-0.6-0.2c-0.2,0-0.4,0.1-0.6,0.2 c-0.2,0.1-0.3,0.2-0.5,0.4v4.7c0.1,0.1,0.3,0.3,0.5,0.4C40,13.4,40.2,13.4,40.4,13.4z" />
-          <path
-            d="M43.2,15.7V15c0.4,0,0.7,0,0.9-0.1c0.2-0.1,0.3-0.1,0.4-0.3c0.1-0.1,0.1-0.2,0.1-0.4c0-0.1,0-0.3-0.1-0.5 c0-0.2-0.1-0.4-0.2-0.6L43,7.1h0.9l1.2,5.9l1.2-5.9h0.9l-1.7,7.4c-0.1,0.3-0.2,0.5-0.3,0.7c-0.2,0.2-0.4,0.3-0.6,0.4 c-0.3,0.1-0.6,0.1-1,0.1H43.2z" />
-          <path
-            d="M50.6,14V4.3h2.1c0.7,0,1.2,0.1,1.6,0.4c0.4,0.2,0.6,0.6,0.8,1c0.2,0.4,0.2,0.9,0.2,1.5V11 c0,0.6-0.1,1.1-0.2,1.6s-0.4,0.8-0.8,1S53.5,14,52.8,14H50.6z M51.5,13.3h1.2c0.5,0,0.9-0.1,1.1-0.3s0.4-0.5,0.5-0.9 s0.1-0.8,0.1-1.3V7.2c0-0.5,0-0.9-0.1-1.2s-0.2-0.6-0.5-0.8S53.2,5,52.7,5h-1.2V13.3z" />
-          <path
-            d="M56.5,15.7V15c0.4,0,0.7,0,0.9-0.1c0.2-0.1,0.3-0.1,0.4-0.3c0.1-0.1,0.1-0.2,0.1-0.4c0-0.1,0-0.3-0.1-0.5 c0-0.2-0.1-0.4-0.2-0.6l-1.4-6.1h0.9l1.2,5.9l1.2-5.9h0.9l-1.7,7.4c-0.1,0.3-0.2,0.5-0.3,0.7s-0.4,0.3-0.6,0.4s-0.6,0.1-1,0.1H56.5 z" />
-          <path
-            d="M61.3,14V7.1h0.9v0.7c0.2-0.2,0.5-0.4,0.8-0.6C63.2,7,63.5,7,63.8,7C64,7,64.2,7,64.4,7.1s0.3,0.3,0.4,0.5 c0.1,0.2,0.1,0.5,0.1,0.8V14H64V8.6c0-0.4-0.1-0.6-0.2-0.8c-0.1-0.1-0.3-0.2-0.5-0.2c-0.2,0-0.4,0.1-0.6,0.2s-0.4,0.3-0.6,0.5V14 H61.3z" />
-          <path
-            d="M67.4,14.1c-0.3,0-0.5-0.1-0.7-0.2c-0.2-0.1-0.4-0.3-0.5-0.6C66,13.1,66,12.8,66,12.6c0-0.4,0.1-0.7,0.2-0.9 s0.3-0.5,0.5-0.7c0.2-0.2,0.5-0.4,0.9-0.6c0.4-0.2,0.8-0.4,1.3-0.6V9.3c0-0.4,0-0.8-0.1-1c-0.1-0.2-0.1-0.4-0.3-0.5 c-0.1-0.1-0.3-0.2-0.5-0.2c-0.2,0-0.3,0-0.5,0.1c-0.1,0.1-0.3,0.2-0.3,0.4c-0.1,0.2-0.1,0.4-0.1,0.7V9l-0.9,0 c0-0.7,0.2-1.2,0.5-1.6C66.8,7.1,67.3,7,68,7c0.6,0,1.1,0.2,1.3,0.6c0.3,0.4,0.4,1,0.4,1.7v3.4c0,0.1,0,0.3,0,0.5 c0,0.2,0,0.4,0,0.5c0,0.2,0,0.3,0,0.4h-0.8c0-0.2-0.1-0.3-0.1-0.5c0-0.2,0-0.3-0.1-0.5c-0.1,0.3-0.3,0.5-0.5,0.7 S67.7,14.1,67.4,14.1z M67.6,13.4c0.2,0,0.3,0,0.5-0.1c0.1-0.1,0.3-0.2,0.4-0.3s0.2-0.3,0.3-0.4v-2.2c-0.3,0.2-0.6,0.3-0.9,0.5 c-0.2,0.1-0.4,0.3-0.6,0.4c-0.2,0.1-0.3,0.3-0.3,0.5s-0.1,0.4-0.1,0.6c0,0.4,0.1,0.6,0.2,0.8C67.2,13.3,67.4,13.4,67.6,13.4z" />
-          <path
-            d="M70.9,14V7.1h0.8v0.7c0.2-0.3,0.5-0.5,0.8-0.6c0.3-0.1,0.6-0.2,0.9-0.2c0.2,0,0.5,0.1,0.7,0.2s0.3,0.4,0.4,0.7 c0.2-0.3,0.5-0.5,0.8-0.7c0.3-0.2,0.6-0.2,0.9-0.2c0.2,0,0.4,0,0.6,0.1s0.3,0.3,0.4,0.5c0.1,0.2,0.2,0.5,0.2,0.9V14h-0.8V8.6 c0-0.4-0.1-0.7-0.2-0.8s-0.3-0.2-0.5-0.2c-0.2,0-0.4,0.1-0.7,0.2S74.7,8,74.5,8.3c0,0,0,0.1,0,0.1s0,0.1,0,0.1V14h-0.8V8.6 c0-0.4-0.1-0.7-0.2-0.8c-0.1-0.1-0.3-0.2-0.5-0.2c-0.2,0-0.4,0.1-0.7,0.2c-0.2,0.1-0.4,0.3-0.6,0.5V14H70.9z" />
-          <path
-            d="M80.2,14.1c-0.6,0-1-0.2-1.3-0.5c-0.3-0.4-0.5-0.8-0.6-1.4l0.7-0.2c0,0.5,0.2,0.9,0.4,1.2 c0.2,0.2,0.5,0.4,0.8,0.4c0.3,0,0.5-0.1,0.7-0.3c0.2-0.2,0.2-0.4,0.2-0.7c0-0.2-0.1-0.5-0.2-0.7c-0.1-0.2-0.4-0.5-0.6-0.7l-0.9-0.8 c-0.3-0.3-0.5-0.5-0.7-0.8c-0.2-0.3-0.2-0.6-0.2-0.9c0-0.3,0.1-0.6,0.2-0.8c0.1-0.2,0.3-0.4,0.6-0.5C79.5,7,79.8,7,80.2,7 c0.5,0,0.9,0.2,1.2,0.5c0.3,0.3,0.4,0.8,0.4,1.3L81.2,9c0-0.3-0.1-0.6-0.1-0.8s-0.2-0.4-0.3-0.5c-0.1-0.1-0.3-0.1-0.5-0.1 c-0.3,0-0.5,0.1-0.6,0.2c-0.2,0.1-0.2,0.4-0.2,0.6c0,0.2,0,0.4,0.1,0.6c0.1,0.2,0.2,0.3,0.4,0.5l1,0.9c0.2,0.2,0.4,0.3,0.6,0.5 c0.2,0.2,0.3,0.4,0.4,0.6c0.1,0.2,0.2,0.5,0.2,0.8c0,0.4-0.1,0.7-0.2,0.9c-0.1,0.2-0.4,0.4-0.6,0.6C80.9,14,80.6,14.1,80.2,14.1z" />
-          <path
-            d="M84.7,14.1c-0.5,0-0.8-0.1-1.1-0.3c-0.3-0.2-0.5-0.5-0.6-0.9s-0.2-0.9-0.2-1.4V9.6c0-0.6,0.1-1,0.2-1.4 c0.1-0.4,0.3-0.7,0.6-0.9C83.9,7.1,84.3,7,84.7,7c0.5,0,0.9,0.1,1.1,0.3s0.5,0.5,0.6,0.9c0.1,0.4,0.2,0.9,0.2,1.4v1.9 c0,0.6-0.1,1-0.2,1.4s-0.3,0.7-0.6,0.9S85.2,14.1,84.7,14.1z M84.7,13.4c0.3,0,0.5-0.1,0.7-0.2c0.1-0.2,0.2-0.4,0.3-0.7 c0-0.3,0-0.6,0-1v-2c0-0.4,0-0.7,0-1c0-0.3-0.1-0.5-0.3-0.7c-0.1-0.2-0.4-0.2-0.7-0.2c-0.3,0-0.5,0.1-0.7,0.2 c-0.1,0.2-0.2,0.4-0.3,0.7c0,0.3-0.1,0.6-0.1,1v2c0,0.4,0,0.7,0.1,1c0,0.3,0.1,0.5,0.3,0.7C84.2,13.4,84.4,13.4,84.7,13.4z" />
-          <path
-            d="M88.2,14V7.7h-0.9V7.1h0.9V6.3c0-0.3,0-0.6,0.1-0.9c0.1-0.3,0.2-0.5,0.4-0.6c0.2-0.2,0.5-0.2,0.8-0.2 c0.1,0,0.2,0,0.4,0c0.1,0,0.2,0,0.3,0.1v0.6c-0.1,0-0.2,0-0.2,0c-0.1,0-0.2,0-0.2,0c-0.3,0-0.4,0.1-0.5,0.2s-0.1,0.4-0.1,0.8v0.8 h1.1v0.6h-1.1V14H88.2z" />
-          <path
-            d="M92.7,14.1c-0.3,0-0.6-0.1-0.8-0.2s-0.3-0.3-0.4-0.5c-0.1-0.2-0.1-0.5-0.1-0.8V7.6h-0.9V7.1h0.9V4.9h0.9v2.1 h1.2v0.6h-1.2v4.8c0,0.3,0,0.6,0.1,0.7c0.1,0.1,0.2,0.2,0.5,0.2c0.1,0,0.2,0,0.2,0s0.2,0,0.3,0V14c-0.1,0-0.2,0-0.4,0.1 C92.9,14.1,92.8,14.1,92.7,14.1z" />
-        </g>
-      </svg>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.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%;
-  }
-}
-
-@keyframes dbrScanner-scanlight {
-  from {
-    top: 0;
-  }
-
-  to {
-    top: 97%;
-  }
-}
-</style>
-```
-
-> 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
-<script setup lang="ts">
-import { onBeforeUnmount, ref } from "vue";
-import type { Ref } from 'vue'
-import { BarcodeReader } from 'dynamsoft-javascript-barcode'
-
-const pReader: Ref<null | Promise<BarcodeReader>> = ref(null);
-
-const decodeImg = async (e:Event) => {
-  try {
-    const reader = await (pReader.value = pReader.value || BarcodeReader.createInstance());
-    let results = await reader.decode((e.target as any).files[0]);
-    for (let result of results) {
-      alert(result.barcodeText);
-    }
-    if (!results.length) { alert('No barcode found'); }
-  } catch (ex:any) {
-    let errMsg = ex.message||ex;
-    if (errMsg.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.";
-    }
-    console.error(errMsg);
-    alert(errMsg);
-  }
-  (e.target as HTMLInputElement).value = '';
-}
-onBeforeUnmount(async () => {
-  if (pReader.value) {
-    (await pReader.value).destroyContext();
-    console.log('ImgDecode Component Unmount');
-  }
-})
-
-</script>
-
-<template>
-  <div class="ImgDecode"><input type="file" @change="decodeImg" /></div>
-</template>
-
-<style scoped>
-.ImgDecode {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: 1px solid black
-}
-</style>
-```
-
-### Add `VideoDecode` and `ImgDecode` components in `HelloWorld.vue`
-
-```vue
-<script setup lang="ts">
-import "../dbr"; // import side effects. The license, engineResourcePath, so on.
-import { BarcodeScanner } from 'dynamsoft-javascript-barcode'
-import VideoDecode from "./VideoDecode.vue";
-import ImgDecode from './ImgDecode.vue'
-import { ref, onMounted } from "vue";
-import type { Ref } from 'vue'
-
-const bShowScanner: Ref<boolean> = ref(true);
-const bShowImgDecode: Ref<boolean> = ref(false)
-onMounted(async () => {
-  try {
-    //Load the library on page load to speed things up.
-    await BarcodeScanner.loadWasm();
-  } catch (ex:any) {
-    let errMsg = ex.message||ex;
-    if (errMsg.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.";
-    }
-    console.error(errMsg);
-    alert(errMsg);
-  }
-});
-const showScanner = () => {
-  bShowScanner.value = true;
-  bShowImgDecode.value = false;
-};
-const showImgDecode = () => {
-  bShowScanner.value = false;
-  bShowImgDecode.value = true;
-}
-</script>
-
-<template>
-  <div className="helloWorld">
-    <h1>Hello World for Nuxt</h1>
-    <div>
-      <button :style="{ marginRight: '10px', backgroundColor: bShowScanner ? 'rgb(255,174,55)' : 'white' }"
-        @click="showScanner">Video Decode</button>
-      <button :style="{ backgroundColor: bShowImgDecode ? 'rgb(255,174,55)' : 'white' }" @click="showImgDecode">Image
-        Decode</button>
-    </div>
-    <div class="container">
-      <VideoDecode v-if="bShowScanner"></VideoDecode>
-      <ImgDecode v-if="bShowImgDecode"></ImgDecode>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-button {
-  font-size: 1.5rem;
-  margin-bottom: 2vh;
-  border: 1px solid black;
-}
-
-.container {
-  margin: 2vmin auto;
-  text-align: center;
-  font-size: medium;
-  width: 80vw;
-}
-
-.applogo {
-  height: 25px;
-}
-
-.helloWorld {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  color: #455a64;
-}
-
-h1 {
-  font-size: 1.5em;
-}
-</style>
-```
-
-> 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
-<template>
-  <div>
-    <HelloWorld />
-  </div>
-</template>
-```
-
-* 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
-
-* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/9.x/1.hello-world/10.read-video-pwa">Hello World in PWA - Source Code</a>
-
-## 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
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <title>Dynamsoft Barcode Reader PWA Sample - Hello World (Decoding via Camera)</title>
-</head>
-
-<body>
-    <h1 style="font-size: 1.5em;">Hello World for PWA</h1>
-    Loading...
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.42/dist/dbr.js"></script>
-    <script>
-        Dynamsoft.DBR.BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
-        (async function() {
-            try {
-                const scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-                scanner.onFrameRead = results => {
-                    console.log("Barcodes on one frame:");
-                    for (let result of results) {
-                        const format = result.barcodeFormatString;
-                        console.log(format + ": " + result.barcodeText);
-                    }
-                };
-                scanner.onUniqueRead = (txt, result) => {
-                    alert(txt);
-                    console.log("Unique Code Found: ", result);
-                }
-                await scanner.show();
-            } catch (ex) {
-                let errMsg = ex.message||ex;
-                console.error(errMsg);
-                alert(errMsg);
-            }
-        })();
-        
-        if ('serviceWorker' in navigator) {
-            navigator.serviceWorker.register('./service-worker.js');
-        };
-    </script>
-</body>
-
-</html>
-```
-
-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 &lt;head&gt; block of the helloworld-pwa.html file:
-
-```html
-<link rel="manifest" href="helloworld-pwa.webmanifest">
-```
-
-For compatibility on safari, we need add some `meta` in `<head>`:
-
-```html
-<meta name="theme-color" content="#B12A34">
-<meta name="mobile-web-app-capable" content="yes">
-<meta name="apple-mobile-web-app-title" content="sample for ios">
-<meta name="apple-mobile-web-app-capable" content="yes">
-<meta name="apple-mobile-web-app-status-bar-style" content="default">
-<link rel="apple-touch-icon" sizes="192x192" href="./dynamsoft-192x192.png" />
-<link rel="apple-touch-icon" sizes="512x512" href="./dynamsoft-512x512.png" />
-```
-
-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
-
-* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/9.x/1.hello-world/4.read-video-react">Hello World in React - Source Code</a>
-
-## 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<BarcodeScanner>|null = null;
-    elRef: React.RefObject<HTMLDivElement> = 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 (
-            <div ref={this.elRef} className="component-barcode-scanner">
-                <svg className="dce-bg-loading" viewBox="0 0 1792 1792"><path d="M1760 896q0 176-68.5 336t-184 275.5-275.5 184-336 68.5-336-68.5-275.5-184-184-275.5-68.5-336q0-213 97-398.5t265-305.5 374-151v228q-221 45-366.5 221t-145.5 406q0 130 51 248.5t136.5 204 204 136.5 248.5 51 248.5-51 204-136.5 136.5-204 51-248.5q0-230-145.5-406t-366.5-221v-228q206 31 374 151t265 305.5 97 398.5z"></path></svg>
-                <svg className="dce-bg-camera" viewBox="0 0 2048 1792"><path d="M1024 672q119 0 203.5 84.5t84.5 203.5-84.5 203.5-203.5 84.5-203.5-84.5-84.5-203.5 84.5-203.5 203.5-84.5zm704-416q106 0 181 75t75 181v896q0 106-75 181t-181 75h-1408q-106 0-181-75t-75-181v-896q0-106 75-181t181-75h224l51-136q19-49 69.5-84.5t103.5-35.5h512q53 0 103.5 35.5t69.5 84.5l51 136h224zm-704 1152q185 0 316.5-131.5t131.5-316.5-131.5-316.5-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5z"></path></svg>
-                <div className="dce-video-container"></div>
-                <div className="dce-scanarea">
-                    <div className="dce-scanlight"></div>
-                </div>
-                <div className="div-select-container">
-                    <select className="dce-sel-camera"></select>
-                    <select className="dce-sel-resolution"></select>
-                </div>
-                <div className="dbr-msg-poweredby"><svg viewBox="0 0 94 17"><g><path d="M0.9,14V4.3h2.3c0.6,0,1,0.1,1.4,0.3c0.3,0.2,0.6,0.5,0.7,0.9s0.2,0.8,0.2,1.4c0,0.5-0.1,0.9-0.2,1.3 C5.1,8.5,4.9,8.8,4.5,9.1C4.2,9.3,3.7,9.4,3.2,9.4H1.8V14H0.9z M1.8,8.7h1.2c0.4,0,0.7-0.1,1-0.2S4.3,8.2,4.4,8 c0.1-0.3,0.2-0.6,0.2-1.1c0-0.5,0-0.9-0.1-1.2C4.3,5.4,4.2,5.2,3.9,5.1S3.4,5,2.9,5H1.8V8.7z" /><path d="M8.1,14.1c-0.5,0-0.8-0.1-1.1-0.3s-0.5-0.5-0.6-0.9s-0.2-0.9-0.2-1.4V9.6c0-0.6,0.1-1,0.2-1.4 C6.5,7.8,6.7,7.5,7,7.3S7.6,7,8.1,7C8.6,7,9,7.1,9.2,7.3s0.5,0.5,0.6,0.9C9.9,8.5,9.9,9,9.9,9.6v1.9c0,0.6-0.1,1-0.2,1.4 c-0.1,0.4-0.3,0.7-0.6,0.9S8.6,14.1,8.1,14.1z M8.1,13.4c0.3,0,0.5-0.1,0.7-0.2C8.9,13,9,12.8,9,12.5c0-0.3,0-0.6,0-1v-2 c0-0.4,0-0.7,0-1C9,8.2,8.9,8,8.8,7.9C8.6,7.7,8.4,7.6,8.1,7.6c-0.3,0-0.5,0.1-0.7,0.2C7.3,8,7.2,8.2,7.2,8.5c0,0.3-0.1,0.6-0.1,1 v2c0,0.4,0,0.7,0.1,1c0,0.3,0.1,0.5,0.3,0.7C7.6,13.4,7.8,13.4,8.1,13.4z" /><path d="M12,14l-1.1-6.9h0.7l0.9,5.8l1.1-5.8h0.8l1.1,5.8l0.8-5.8H17L15.9,14H15l-1.1-5.6L12.8,14H12z" /><path d="M19.8,14.1c-0.4,0-0.8-0.1-1.1-0.3s-0.5-0.5-0.6-0.9c-0.1-0.4-0.2-0.9-0.2-1.6V9.6c0-0.7,0.1-1.2,0.2-1.6 c0.1-0.4,0.3-0.7,0.6-0.8C19,7,19.3,7,19.8,7c0.5,0,0.9,0.1,1.1,0.3c0.3,0.2,0.4,0.5,0.5,0.9c0.1,0.4,0.1,1,0.1,1.6v0.6h-2.8v1.2 c0,0.4,0,0.8,0.1,1.1c0.1,0.3,0.2,0.4,0.3,0.6s0.3,0.2,0.6,0.2c0.2,0,0.3,0,0.5-0.1c0.1-0.1,0.3-0.2,0.3-0.4s0.1-0.5,0.1-0.8v-0.5 h0.9V12c0,0.6-0.1,1.1-0.4,1.5S20.4,14.1,19.8,14.1z M18.8,9.9h1.9V9.4c0-0.4,0-0.7-0.1-0.9c0-0.3-0.1-0.5-0.3-0.6S20,7.6,19.8,7.6 c-0.2,0-0.4,0.1-0.6,0.2c-0.1,0.1-0.3,0.3-0.3,0.6c-0.1,0.3-0.1,0.7-0.1,1.1V9.9z" /><path d="M22.8,14V7.1h0.9V8c0.2-0.4,0.5-0.6,0.8-0.8C24.8,7.1,25,7,25.3,7c0,0,0,0,0.1,0s0.1,0,0.1,0v0.9 c-0.1,0-0.1,0-0.2-0.1c-0.1,0-0.2,0-0.2,0c-0.3,0-0.5,0.1-0.7,0.2c-0.2,0.1-0.4,0.3-0.6,0.6V14H22.8z" /><path d="M28,14.1c-0.4,0-0.8-0.1-1.1-0.3s-0.5-0.5-0.6-0.9c-0.1-0.4-0.2-0.9-0.2-1.6V9.6c0-0.7,0.1-1.2,0.2-1.6 c0.1-0.4,0.3-0.7,0.6-0.8C27.3,7,27.6,7,28,7c0.5,0,0.9,0.1,1.1,0.3c0.3,0.2,0.4,0.5,0.5,0.9c0.1,0.4,0.1,1,0.1,1.6v0.6H27v1.2 c0,0.4,0,0.8,0.1,1.1c0.1,0.3,0.2,0.4,0.3,0.6s0.3,0.2,0.6,0.2c0.2,0,0.3,0,0.5-0.1c0.1-0.1,0.3-0.2,0.3-0.4s0.1-0.5,0.1-0.8v-0.5 h0.9V12c0,0.6-0.1,1.1-0.4,1.5S28.7,14.1,28,14.1z M27,9.9H29V9.4c0-0.4,0-0.7-0.1-0.9c0-0.3-0.1-0.5-0.3-0.6S28.3,7.6,28,7.6 c-0.2,0-0.4,0.1-0.6,0.2c-0.1,0.1-0.3,0.3-0.3,0.6C27.1,8.6,27,9,27,9.5V9.9z" />
-                    <path d="M32.6,14.1c-0.6,0-1-0.2-1.3-0.7c-0.3-0.4-0.4-1.2-0.4-2.2V9.9c0-0.6,0-1.1,0.1-1.6c0.1-0.4,0.2-0.8,0.5-1 c0.2-0.2,0.6-0.4,1-0.4C32.8,7,33,7,33.2,7.1c0.2,0.1,0.4,0.3,0.5,0.4V4.3h0.9V14h-0.9v-0.5c-0.1,0.2-0.3,0.3-0.5,0.4 C33,14,32.8,14.1,32.6,14.1z M32.7,13.4c0.2,0,0.4,0,0.5-0.1c0.2-0.1,0.3-0.2,0.5-0.3V8.1c-0.1-0.1-0.3-0.2-0.4-0.3 c-0.2-0.1-0.4-0.2-0.6-0.2c-0.4,0-0.6,0.2-0.8,0.5S31.8,9,31.8,9.6v1.6c0,0.5,0,0.9,0.1,1.2c0.1,0.3,0.1,0.6,0.3,0.7 C32.3,13.3,32.5,13.4,32.7,13.4z" /><path d="M40.5,14.1c-0.3,0-0.5-0.1-0.7-0.2c-0.2-0.1-0.4-0.3-0.5-0.4V14h-0.9V4.3h0.9v3.4c0.1-0.2,0.3-0.3,0.5-0.5 C40.1,7,40.3,7,40.6,7C41,7,41.2,7,41.4,7.2c0.2,0.2,0.4,0.4,0.5,0.6c0.1,0.3,0.2,0.6,0.2,0.9s0.1,0.7,0.1,1v1.5 c0,0.6,0,1.1-0.1,1.5c-0.1,0.4-0.3,0.8-0.5,1C41.3,14,41,14.1,40.5,14.1z M40.4,13.4c0.3,0,0.5-0.1,0.6-0.3 c0.1-0.2,0.2-0.4,0.3-0.8s0.1-0.7,0.1-1.2V9.7c0-0.5,0-0.8-0.1-1.1S41.1,8,41,7.9c-0.1-0.2-0.3-0.2-0.6-0.2c-0.2,0-0.4,0.1-0.6,0.2 c-0.2,0.1-0.3,0.2-0.5,0.4v4.7c0.1,0.1,0.3,0.3,0.5,0.4C40,13.4,40.2,13.4,40.4,13.4z" /><path d="M43.2,15.7V15c0.4,0,0.7,0,0.9-0.1c0.2-0.1,0.3-0.1,0.4-0.3c0.1-0.1,0.1-0.2,0.1-0.4c0-0.1,0-0.3-0.1-0.5 c0-0.2-0.1-0.4-0.2-0.6L43,7.1h0.9l1.2,5.9l1.2-5.9h0.9l-1.7,7.4c-0.1,0.3-0.2,0.5-0.3,0.7c-0.2,0.2-0.4,0.3-0.6,0.4 c-0.3,0.1-0.6,0.1-1,0.1H43.2z" /><path d="M50.6,14V4.3h2.1c0.7,0,1.2,0.1,1.6,0.4c0.4,0.2,0.6,0.6,0.8,1c0.2,0.4,0.2,0.9,0.2,1.5V11 c0,0.6-0.1,1.1-0.2,1.6s-0.4,0.8-0.8,1S53.5,14,52.8,14H50.6z M51.5,13.3h1.2c0.5,0,0.9-0.1,1.1-0.3s0.4-0.5,0.5-0.9 s0.1-0.8,0.1-1.3V7.2c0-0.5,0-0.9-0.1-1.2s-0.2-0.6-0.5-0.8S53.2,5,52.7,5h-1.2V13.3z" /><path d="M56.5,15.7V15c0.4,0,0.7,0,0.9-0.1c0.2-0.1,0.3-0.1,0.4-0.3c0.1-0.1,0.1-0.2,0.1-0.4c0-0.1,0-0.3-0.1-0.5 c0-0.2-0.1-0.4-0.2-0.6l-1.4-6.1h0.9l1.2,5.9l1.2-5.9h0.9l-1.7,7.4c-0.1,0.3-0.2,0.5-0.3,0.7s-0.4,0.3-0.6,0.4s-0.6,0.1-1,0.1H56.5 z" /><path d="M61.3,14V7.1h0.9v0.7c0.2-0.2,0.5-0.4,0.8-0.6C63.2,7,63.5,7,63.8,7C64,7,64.2,7,64.4,7.1s0.3,0.3,0.4,0.5 c0.1,0.2,0.1,0.5,0.1,0.8V14H64V8.6c0-0.4-0.1-0.6-0.2-0.8c-0.1-0.1-0.3-0.2-0.5-0.2c-0.2,0-0.4,0.1-0.6,0.2s-0.4,0.3-0.6,0.5V14 H61.3z" />
-                    <path d="M67.4,14.1c-0.3,0-0.5-0.1-0.7-0.2c-0.2-0.1-0.4-0.3-0.5-0.6C66,13.1,66,12.8,66,12.6c0-0.4,0.1-0.7,0.2-0.9 s0.3-0.5,0.5-0.7c0.2-0.2,0.5-0.4,0.9-0.6c0.4-0.2,0.8-0.4,1.3-0.6V9.3c0-0.4,0-0.8-0.1-1c-0.1-0.2-0.1-0.4-0.3-0.5 c-0.1-0.1-0.3-0.2-0.5-0.2c-0.2,0-0.3,0-0.5,0.1c-0.1,0.1-0.3,0.2-0.3,0.4c-0.1,0.2-0.1,0.4-0.1,0.7V9l-0.9,0 c0-0.7,0.2-1.2,0.5-1.6C66.8,7.1,67.3,7,68,7c0.6,0,1.1,0.2,1.3,0.6c0.3,0.4,0.4,1,0.4,1.7v3.4c0,0.1,0,0.3,0,0.5 c0,0.2,0,0.4,0,0.5c0,0.2,0,0.3,0,0.4h-0.8c0-0.2-0.1-0.3-0.1-0.5c0-0.2,0-0.3-0.1-0.5c-0.1,0.3-0.3,0.5-0.5,0.7 S67.7,14.1,67.4,14.1z M67.6,13.4c0.2,0,0.3,0,0.5-0.1c0.1-0.1,0.3-0.2,0.4-0.3s0.2-0.3,0.3-0.4v-2.2c-0.3,0.2-0.6,0.3-0.9,0.5 c-0.2,0.1-0.4,0.3-0.6,0.4c-0.2,0.1-0.3,0.3-0.3,0.5s-0.1,0.4-0.1,0.6c0,0.4,0.1,0.6,0.2,0.8C67.2,13.3,67.4,13.4,67.6,13.4z" /><path d="M70.9,14V7.1h0.8v0.7c0.2-0.3,0.5-0.5,0.8-0.6c0.3-0.1,0.6-0.2,0.9-0.2c0.2,0,0.5,0.1,0.7,0.2s0.3,0.4,0.4,0.7 c0.2-0.3,0.5-0.5,0.8-0.7c0.3-0.2,0.6-0.2,0.9-0.2c0.2,0,0.4,0,0.6,0.1s0.3,0.3,0.4,0.5c0.1,0.2,0.2,0.5,0.2,0.9V14h-0.8V8.6 c0-0.4-0.1-0.7-0.2-0.8s-0.3-0.2-0.5-0.2c-0.2,0-0.4,0.1-0.7,0.2S74.7,8,74.5,8.3c0,0,0,0.1,0,0.1s0,0.1,0,0.1V14h-0.8V8.6 c0-0.4-0.1-0.7-0.2-0.8c-0.1-0.1-0.3-0.2-0.5-0.2c-0.2,0-0.4,0.1-0.7,0.2c-0.2,0.1-0.4,0.3-0.6,0.5V14H70.9z" /><path d="M80.2,14.1c-0.6,0-1-0.2-1.3-0.5c-0.3-0.4-0.5-0.8-0.6-1.4l0.7-0.2c0,0.5,0.2,0.9,0.4,1.2 c0.2,0.2,0.5,0.4,0.8,0.4c0.3,0,0.5-0.1,0.7-0.3c0.2-0.2,0.2-0.4,0.2-0.7c0-0.2-0.1-0.5-0.2-0.7c-0.1-0.2-0.4-0.5-0.6-0.7l-0.9-0.8 c-0.3-0.3-0.5-0.5-0.7-0.8c-0.2-0.3-0.2-0.6-0.2-0.9c0-0.3,0.1-0.6,0.2-0.8c0.1-0.2,0.3-0.4,0.6-0.5C79.5,7,79.8,7,80.2,7 c0.5,0,0.9,0.2,1.2,0.5c0.3,0.3,0.4,0.8,0.4,1.3L81.2,9c0-0.3-0.1-0.6-0.1-0.8s-0.2-0.4-0.3-0.5c-0.1-0.1-0.3-0.1-0.5-0.1 c-0.3,0-0.5,0.1-0.6,0.2c-0.2,0.1-0.2,0.4-0.2,0.6c0,0.2,0,0.4,0.1,0.6c0.1,0.2,0.2,0.3,0.4,0.5l1,0.9c0.2,0.2,0.4,0.3,0.6,0.5 c0.2,0.2,0.3,0.4,0.4,0.6c0.1,0.2,0.2,0.5,0.2,0.8c0,0.4-0.1,0.7-0.2,0.9c-0.1,0.2-0.4,0.4-0.6,0.6C80.9,14,80.6,14.1,80.2,14.1z" />
-                    <path d="M84.7,14.1c-0.5,0-0.8-0.1-1.1-0.3c-0.3-0.2-0.5-0.5-0.6-0.9s-0.2-0.9-0.2-1.4V9.6c0-0.6,0.1-1,0.2-1.4 c0.1-0.4,0.3-0.7,0.6-0.9C83.9,7.1,84.3,7,84.7,7c0.5,0,0.9,0.1,1.1,0.3s0.5,0.5,0.6,0.9c0.1,0.4,0.2,0.9,0.2,1.4v1.9 c0,0.6-0.1,1-0.2,1.4s-0.3,0.7-0.6,0.9S85.2,14.1,84.7,14.1z M84.7,13.4c0.3,0,0.5-0.1,0.7-0.2c0.1-0.2,0.2-0.4,0.3-0.7 c0-0.3,0-0.6,0-1v-2c0-0.4,0-0.7,0-1c0-0.3-0.1-0.5-0.3-0.7c-0.1-0.2-0.4-0.2-0.7-0.2c-0.3,0-0.5,0.1-0.7,0.2 c-0.1,0.2-0.2,0.4-0.3,0.7c0,0.3-0.1,0.6-0.1,1v2c0,0.4,0,0.7,0.1,1c0,0.3,0.1,0.5,0.3,0.7C84.2,13.4,84.4,13.4,84.7,13.4z" /><path d="M88.2,14V7.7h-0.9V7.1h0.9V6.3c0-0.3,0-0.6,0.1-0.9c0.1-0.3,0.2-0.5,0.4-0.6c0.2-0.2,0.5-0.2,0.8-0.2 c0.1,0,0.2,0,0.4,0c0.1,0,0.2,0,0.3,0.1v0.6c-0.1,0-0.2,0-0.2,0c-0.1,0-0.2,0-0.2,0c-0.3,0-0.4,0.1-0.5,0.2s-0.1,0.4-0.1,0.8v0.8 h1.1v0.6h-1.1V14H88.2z" /><path d="M92.7,14.1c-0.3,0-0.6-0.1-0.8-0.2s-0.3-0.3-0.4-0.5c-0.1-0.2-0.1-0.5-0.1-0.8V7.6h-0.9V7.1h0.9V4.9h0.9v2.1 h1.2v0.6h-1.2v4.8c0,0.3,0,0.6,0.1,0.7c0.1,0.1,0.2,0.2,0.5,0.2c0.1,0,0.2,0,0.2,0s0.2,0,0.3,0V14c-0.1,0-0.2,0-0.4,0.1 C92.9,14.1,92.8,14.1,92.7,14.1z" /></g></svg>
-                </div>
-            </div>
-        );
-    }
-}
-
-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> = BarcodeReader.createInstance();
-
-  decodeImg = async (e: ChangeEvent<HTMLInputElement>) => {
-    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 (
-      <div className="ImgDecode"><input type="file" onChange={this.decodeImg} /></div>
-    )
-  }
-}
-```
-
-* 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<any, isState> {
-    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 (
-            <div className="helloWorld">
-                <h1>Hello World for React<img src={reactLogo} className="App-logo" alt="logo" /></h1>
-                <div>
-                    <button style={{ marginRight: '10px', backgroundColor: this.state.bShowScanner ? 'rgb(255,174,55)' : 'white' }} onClick={this.showScanner}>Video Decode</button>
-                    <button style={{ backgroundColor: this.state.bShowImgDecode ? 'rgb(255,174,55)' : 'white' }} onClick={this.showImgDecode}>Image Decode</button>
-                </div>
-                <div className="container">
-                    {this.state.bShowScanner ? (<VideoDecode></VideoDecode>) : ""}
-                    {this.state.bShowImgDecode ? (<ImgDecode></ImgDecode>) : ""}
-                </div>
-            </div>
-        );
-    }
-}
-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 (
-    <div className="App">
-      <HelloWorld></HelloWorld>
-    </div>
-  );
-}
-
-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
-
-* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/9.x/1.hello-world/2.read-an-image.html">Read Barcodes from An Existing Image - Source Code</a>
-
-## 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
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <title>Dynamsoft Barcode Reader Sample - Read an Image</title>
-</head>
-
-<body>
-    <script></script>
-</body>
-
-</html>
-```
-
-* Add reference to the library in the page "head".
-
-```html
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.42/dist/dbr.js"></script>
-```
-
-* In the page "body", add an input for image selecting and a div for displaying the barcode results.
-
-```html
-<input id="input-file" type="file" accept="image/png,image/jpeg,image/bmp,image/gif">
-<div id="results"></div>
-```
-
-* 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 += "<p>" + format + ": " + result.barcodeText + "</p>";
-            }
-            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:
-
-* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/9.x/1.hello-world/11.read-video-requirejs.html">Read Barcodes from Camera - RequireJS - Source Code</a>
-
-## 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
-<script src="https://cdn.jsdelivr.net/npm/requirejs@2.3.6/require.js"></script>
-```
-
-### 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
-
-* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/9.x/1.hello-world/5.read-video-vue">Hello World in Vue - Source Code</a>
-
-## 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
-<template>
-  <div v-once class="component-barcode-scanner">
-    <svg class="dce-bg-loading" viewBox="0 0 1792 1792">
-      <path
-        d="M1760 896q0 176-68.5 336t-184 275.5-275.5 184-336 68.5-336-68.5-275.5-184-184-275.5-68.5-336q0-213 97-398.5t265-305.5 374-151v228q-221 45-366.5 221t-145.5 406q0 130 51 248.5t136.5 204 204 136.5 248.5 51 248.5-51 204-136.5 136.5-204 51-248.5q0-230-145.5-406t-366.5-221v-228q206 31 374 151t265 305.5 97 398.5z">
-      </path>
-    </svg>
-    <svg class="dce-bg-camera" viewBox="0 0 2048 1792">
-      <path
-        d="M1024 672q119 0 203.5 84.5t84.5 203.5-84.5 203.5-203.5 84.5-203.5-84.5-84.5-203.5 84.5-203.5 203.5-84.5zm704-416q106 0 181 75t75 181v896q0 106-75 181t-181 75h-1408q-106 0-181-75t-75-181v-896q0-106 75-181t181-75h224l51-136q19-49 69.5-84.5t103.5-35.5h512q53 0 103.5 35.5t69.5 84.5l51 136h224zm-704 1152q185 0 316.5-131.5t131.5-316.5-131.5-316.5-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5z">
-      </path>
-    </svg>
-    <div class="dce-video-container"></div>
-    <div class="dce-scanarea">
-      <div class="dce-scanlight"></div>
-    </div>
-    <div class="div-select-container">
-      <select class="dce-sel-camera"></select>
-      <select class="dce-sel-resolution"></select>
-    </div>
-    <div class="dbr-msg-poweredby">
-      <svg viewBox="0 0 94 17">
-        <g>
-          <path
-            d="M0.9,14V4.3h2.3c0.6,0,1,0.1,1.4,0.3c0.3,0.2,0.6,0.5,0.7,0.9s0.2,0.8,0.2,1.4c0,0.5-0.1,0.9-0.2,1.3 C5.1,8.5,4.9,8.8,4.5,9.1C4.2,9.3,3.7,9.4,3.2,9.4H1.8V14H0.9z M1.8,8.7h1.2c0.4,0,0.7-0.1,1-0.2S4.3,8.2,4.4,8 c0.1-0.3,0.2-0.6,0.2-1.1c0-0.5,0-0.9-0.1-1.2C4.3,5.4,4.2,5.2,3.9,5.1S3.4,5,2.9,5H1.8V8.7z" />
-          <path
-            d="M8.1,14.1c-0.5,0-0.8-0.1-1.1-0.3s-0.5-0.5-0.6-0.9s-0.2-0.9-0.2-1.4V9.6c0-0.6,0.1-1,0.2-1.4 C6.5,7.8,6.7,7.5,7,7.3S7.6,7,8.1,7C8.6,7,9,7.1,9.2,7.3s0.5,0.5,0.6,0.9C9.9,8.5,9.9,9,9.9,9.6v1.9c0,0.6-0.1,1-0.2,1.4 c-0.1,0.4-0.3,0.7-0.6,0.9S8.6,14.1,8.1,14.1z M8.1,13.4c0.3,0,0.5-0.1,0.7-0.2C8.9,13,9,12.8,9,12.5c0-0.3,0-0.6,0-1v-2 c0-0.4,0-0.7,0-1C9,8.2,8.9,8,8.8,7.9C8.6,7.7,8.4,7.6,8.1,7.6c-0.3,0-0.5,0.1-0.7,0.2C7.3,8,7.2,8.2,7.2,8.5c0,0.3-0.1,0.6-0.1,1 v2c0,0.4,0,0.7,0.1,1c0,0.3,0.1,0.5,0.3,0.7C7.6,13.4,7.8,13.4,8.1,13.4z" />
-          <path d="M12,14l-1.1-6.9h0.7l0.9,5.8l1.1-5.8h0.8l1.1,5.8l0.8-5.8H17L15.9,14H15l-1.1-5.6L12.8,14H12z" />
-          <path
-            d="M19.8,14.1c-0.4,0-0.8-0.1-1.1-0.3s-0.5-0.5-0.6-0.9c-0.1-0.4-0.2-0.9-0.2-1.6V9.6c0-0.7,0.1-1.2,0.2-1.6 c0.1-0.4,0.3-0.7,0.6-0.8C19,7,19.3,7,19.8,7c0.5,0,0.9,0.1,1.1,0.3c0.3,0.2,0.4,0.5,0.5,0.9c0.1,0.4,0.1,1,0.1,1.6v0.6h-2.8v1.2 c0,0.4,0,0.8,0.1,1.1c0.1,0.3,0.2,0.4,0.3,0.6s0.3,0.2,0.6,0.2c0.2,0,0.3,0,0.5-0.1c0.1-0.1,0.3-0.2,0.3-0.4s0.1-0.5,0.1-0.8v-0.5 h0.9V12c0,0.6-0.1,1.1-0.4,1.5S20.4,14.1,19.8,14.1z M18.8,9.9h1.9V9.4c0-0.4,0-0.7-0.1-0.9c0-0.3-0.1-0.5-0.3-0.6S20,7.6,19.8,7.6 c-0.2,0-0.4,0.1-0.6,0.2c-0.1,0.1-0.3,0.3-0.3,0.6c-0.1,0.3-0.1,0.7-0.1,1.1V9.9z" />
-          <path
-            d="M22.8,14V7.1h0.9V8c0.2-0.4,0.5-0.6,0.8-0.8C24.8,7.1,25,7,25.3,7c0,0,0,0,0.1,0s0.1,0,0.1,0v0.9 c-0.1,0-0.1,0-0.2-0.1c-0.1,0-0.2,0-0.2,0c-0.3,0-0.5,0.1-0.7,0.2c-0.2,0.1-0.4,0.3-0.6,0.6V14H22.8z" />
-          <path
-            d="M28,14.1c-0.4,0-0.8-0.1-1.1-0.3s-0.5-0.5-0.6-0.9c-0.1-0.4-0.2-0.9-0.2-1.6V9.6c0-0.7,0.1-1.2,0.2-1.6 c0.1-0.4,0.3-0.7,0.6-0.8C27.3,7,27.6,7,28,7c0.5,0,0.9,0.1,1.1,0.3c0.3,0.2,0.4,0.5,0.5,0.9c0.1,0.4,0.1,1,0.1,1.6v0.6H27v1.2 c0,0.4,0,0.8,0.1,1.1c0.1,0.3,0.2,0.4,0.3,0.6s0.3,0.2,0.6,0.2c0.2,0,0.3,0,0.5-0.1c0.1-0.1,0.3-0.2,0.3-0.4s0.1-0.5,0.1-0.8v-0.5 h0.9V12c0,0.6-0.1,1.1-0.4,1.5S28.7,14.1,28,14.1z M27,9.9H29V9.4c0-0.4,0-0.7-0.1-0.9c0-0.3-0.1-0.5-0.3-0.6S28.3,7.6,28,7.6 c-0.2,0-0.4,0.1-0.6,0.2c-0.1,0.1-0.3,0.3-0.3,0.6C27.1,8.6,27,9,27,9.5V9.9z" />
-          <path
-            d="M32.6,14.1c-0.6,0-1-0.2-1.3-0.7c-0.3-0.4-0.4-1.2-0.4-2.2V9.9c0-0.6,0-1.1,0.1-1.6c0.1-0.4,0.2-0.8,0.5-1 c0.2-0.2,0.6-0.4,1-0.4C32.8,7,33,7,33.2,7.1c0.2,0.1,0.4,0.3,0.5,0.4V4.3h0.9V14h-0.9v-0.5c-0.1,0.2-0.3,0.3-0.5,0.4 C33,14,32.8,14.1,32.6,14.1z M32.7,13.4c0.2,0,0.4,0,0.5-0.1c0.2-0.1,0.3-0.2,0.5-0.3V8.1c-0.1-0.1-0.3-0.2-0.4-0.3 c-0.2-0.1-0.4-0.2-0.6-0.2c-0.4,0-0.6,0.2-0.8,0.5S31.8,9,31.8,9.6v1.6c0,0.5,0,0.9,0.1,1.2c0.1,0.3,0.1,0.6,0.3,0.7 C32.3,13.3,32.5,13.4,32.7,13.4z" />
-          <path
-            d="M40.5,14.1c-0.3,0-0.5-0.1-0.7-0.2c-0.2-0.1-0.4-0.3-0.5-0.4V14h-0.9V4.3h0.9v3.4c0.1-0.2,0.3-0.3,0.5-0.5 C40.1,7,40.3,7,40.6,7C41,7,41.2,7,41.4,7.2c0.2,0.2,0.4,0.4,0.5,0.6c0.1,0.3,0.2,0.6,0.2,0.9s0.1,0.7,0.1,1v1.5 c0,0.6,0,1.1-0.1,1.5c-0.1,0.4-0.3,0.8-0.5,1C41.3,14,41,14.1,40.5,14.1z M40.4,13.4c0.3,0,0.5-0.1,0.6-0.3 c0.1-0.2,0.2-0.4,0.3-0.8s0.1-0.7,0.1-1.2V9.7c0-0.5,0-0.8-0.1-1.1S41.1,8,41,7.9c-0.1-0.2-0.3-0.2-0.6-0.2c-0.2,0-0.4,0.1-0.6,0.2 c-0.2,0.1-0.3,0.2-0.5,0.4v4.7c0.1,0.1,0.3,0.3,0.5,0.4C40,13.4,40.2,13.4,40.4,13.4z" />
-          <path
-            d="M43.2,15.7V15c0.4,0,0.7,0,0.9-0.1c0.2-0.1,0.3-0.1,0.4-0.3c0.1-0.1,0.1-0.2,0.1-0.4c0-0.1,0-0.3-0.1-0.5 c0-0.2-0.1-0.4-0.2-0.6L43,7.1h0.9l1.2,5.9l1.2-5.9h0.9l-1.7,7.4c-0.1,0.3-0.2,0.5-0.3,0.7c-0.2,0.2-0.4,0.3-0.6,0.4 c-0.3,0.1-0.6,0.1-1,0.1H43.2z" />
-          <path
-            d="M50.6,14V4.3h2.1c0.7,0,1.2,0.1,1.6,0.4c0.4,0.2,0.6,0.6,0.8,1c0.2,0.4,0.2,0.9,0.2,1.5V11 c0,0.6-0.1,1.1-0.2,1.6s-0.4,0.8-0.8,1S53.5,14,52.8,14H50.6z M51.5,13.3h1.2c0.5,0,0.9-0.1,1.1-0.3s0.4-0.5,0.5-0.9 s0.1-0.8,0.1-1.3V7.2c0-0.5,0-0.9-0.1-1.2s-0.2-0.6-0.5-0.8S53.2,5,52.7,5h-1.2V13.3z" />
-          <path
-            d="M56.5,15.7V15c0.4,0,0.7,0,0.9-0.1c0.2-0.1,0.3-0.1,0.4-0.3c0.1-0.1,0.1-0.2,0.1-0.4c0-0.1,0-0.3-0.1-0.5 c0-0.2-0.1-0.4-0.2-0.6l-1.4-6.1h0.9l1.2,5.9l1.2-5.9h0.9l-1.7,7.4c-0.1,0.3-0.2,0.5-0.3,0.7s-0.4,0.3-0.6,0.4s-0.6,0.1-1,0.1H56.5 z" />
-          <path
-            d="M61.3,14V7.1h0.9v0.7c0.2-0.2,0.5-0.4,0.8-0.6C63.2,7,63.5,7,63.8,7C64,7,64.2,7,64.4,7.1s0.3,0.3,0.4,0.5 c0.1,0.2,0.1,0.5,0.1,0.8V14H64V8.6c0-0.4-0.1-0.6-0.2-0.8c-0.1-0.1-0.3-0.2-0.5-0.2c-0.2,0-0.4,0.1-0.6,0.2s-0.4,0.3-0.6,0.5V14 H61.3z" />
-          <path
-            d="M67.4,14.1c-0.3,0-0.5-0.1-0.7-0.2c-0.2-0.1-0.4-0.3-0.5-0.6C66,13.1,66,12.8,66,12.6c0-0.4,0.1-0.7,0.2-0.9 s0.3-0.5,0.5-0.7c0.2-0.2,0.5-0.4,0.9-0.6c0.4-0.2,0.8-0.4,1.3-0.6V9.3c0-0.4,0-0.8-0.1-1c-0.1-0.2-0.1-0.4-0.3-0.5 c-0.1-0.1-0.3-0.2-0.5-0.2c-0.2,0-0.3,0-0.5,0.1c-0.1,0.1-0.3,0.2-0.3,0.4c-0.1,0.2-0.1,0.4-0.1,0.7V9l-0.9,0 c0-0.7,0.2-1.2,0.5-1.6C66.8,7.1,67.3,7,68,7c0.6,0,1.1,0.2,1.3,0.6c0.3,0.4,0.4,1,0.4,1.7v3.4c0,0.1,0,0.3,0,0.5 c0,0.2,0,0.4,0,0.5c0,0.2,0,0.3,0,0.4h-0.8c0-0.2-0.1-0.3-0.1-0.5c0-0.2,0-0.3-0.1-0.5c-0.1,0.3-0.3,0.5-0.5,0.7 S67.7,14.1,67.4,14.1z M67.6,13.4c0.2,0,0.3,0,0.5-0.1c0.1-0.1,0.3-0.2,0.4-0.3s0.2-0.3,0.3-0.4v-2.2c-0.3,0.2-0.6,0.3-0.9,0.5 c-0.2,0.1-0.4,0.3-0.6,0.4c-0.2,0.1-0.3,0.3-0.3,0.5s-0.1,0.4-0.1,0.6c0,0.4,0.1,0.6,0.2,0.8C67.2,13.3,67.4,13.4,67.6,13.4z" />
-          <path
-            d="M70.9,14V7.1h0.8v0.7c0.2-0.3,0.5-0.5,0.8-0.6c0.3-0.1,0.6-0.2,0.9-0.2c0.2,0,0.5,0.1,0.7,0.2s0.3,0.4,0.4,0.7 c0.2-0.3,0.5-0.5,0.8-0.7c0.3-0.2,0.6-0.2,0.9-0.2c0.2,0,0.4,0,0.6,0.1s0.3,0.3,0.4,0.5c0.1,0.2,0.2,0.5,0.2,0.9V14h-0.8V8.6 c0-0.4-0.1-0.7-0.2-0.8s-0.3-0.2-0.5-0.2c-0.2,0-0.4,0.1-0.7,0.2S74.7,8,74.5,8.3c0,0,0,0.1,0,0.1s0,0.1,0,0.1V14h-0.8V8.6 c0-0.4-0.1-0.7-0.2-0.8c-0.1-0.1-0.3-0.2-0.5-0.2c-0.2,0-0.4,0.1-0.7,0.2c-0.2,0.1-0.4,0.3-0.6,0.5V14H70.9z" />
-          <path
-            d="M80.2,14.1c-0.6,0-1-0.2-1.3-0.5c-0.3-0.4-0.5-0.8-0.6-1.4l0.7-0.2c0,0.5,0.2,0.9,0.4,1.2 c0.2,0.2,0.5,0.4,0.8,0.4c0.3,0,0.5-0.1,0.7-0.3c0.2-0.2,0.2-0.4,0.2-0.7c0-0.2-0.1-0.5-0.2-0.7c-0.1-0.2-0.4-0.5-0.6-0.7l-0.9-0.8 c-0.3-0.3-0.5-0.5-0.7-0.8c-0.2-0.3-0.2-0.6-0.2-0.9c0-0.3,0.1-0.6,0.2-0.8c0.1-0.2,0.3-0.4,0.6-0.5C79.5,7,79.8,7,80.2,7 c0.5,0,0.9,0.2,1.2,0.5c0.3,0.3,0.4,0.8,0.4,1.3L81.2,9c0-0.3-0.1-0.6-0.1-0.8s-0.2-0.4-0.3-0.5c-0.1-0.1-0.3-0.1-0.5-0.1 c-0.3,0-0.5,0.1-0.6,0.2c-0.2,0.1-0.2,0.4-0.2,0.6c0,0.2,0,0.4,0.1,0.6c0.1,0.2,0.2,0.3,0.4,0.5l1,0.9c0.2,0.2,0.4,0.3,0.6,0.5 c0.2,0.2,0.3,0.4,0.4,0.6c0.1,0.2,0.2,0.5,0.2,0.8c0,0.4-0.1,0.7-0.2,0.9c-0.1,0.2-0.4,0.4-0.6,0.6C80.9,14,80.6,14.1,80.2,14.1z" />
-          <path
-            d="M84.7,14.1c-0.5,0-0.8-0.1-1.1-0.3c-0.3-0.2-0.5-0.5-0.6-0.9s-0.2-0.9-0.2-1.4V9.6c0-0.6,0.1-1,0.2-1.4 c0.1-0.4,0.3-0.7,0.6-0.9C83.9,7.1,84.3,7,84.7,7c0.5,0,0.9,0.1,1.1,0.3s0.5,0.5,0.6,0.9c0.1,0.4,0.2,0.9,0.2,1.4v1.9 c0,0.6-0.1,1-0.2,1.4s-0.3,0.7-0.6,0.9S85.2,14.1,84.7,14.1z M84.7,13.4c0.3,0,0.5-0.1,0.7-0.2c0.1-0.2,0.2-0.4,0.3-0.7 c0-0.3,0-0.6,0-1v-2c0-0.4,0-0.7,0-1c0-0.3-0.1-0.5-0.3-0.7c-0.1-0.2-0.4-0.2-0.7-0.2c-0.3,0-0.5,0.1-0.7,0.2 c-0.1,0.2-0.2,0.4-0.3,0.7c0,0.3-0.1,0.6-0.1,1v2c0,0.4,0,0.7,0.1,1c0,0.3,0.1,0.5,0.3,0.7C84.2,13.4,84.4,13.4,84.7,13.4z" />
-          <path
-            d="M88.2,14V7.7h-0.9V7.1h0.9V6.3c0-0.3,0-0.6,0.1-0.9c0.1-0.3,0.2-0.5,0.4-0.6c0.2-0.2,0.5-0.2,0.8-0.2 c0.1,0,0.2,0,0.4,0c0.1,0,0.2,0,0.3,0.1v0.6c-0.1,0-0.2,0-0.2,0c-0.1,0-0.2,0-0.2,0c-0.3,0-0.4,0.1-0.5,0.2s-0.1,0.4-0.1,0.8v0.8 h1.1v0.6h-1.1V14H88.2z" />
-          <path
-            d="M92.7,14.1c-0.3,0-0.6-0.1-0.8-0.2s-0.3-0.3-0.4-0.5c-0.1-0.2-0.1-0.5-0.1-0.8V7.6h-0.9V7.1h0.9V4.9h0.9v2.1 h1.2v0.6h-1.2v4.8c0,0.3,0,0.6,0.1,0.7c0.1,0.1,0.2,0.2,0.5,0.2c0.1,0,0.2,0,0.2,0s0.2,0,0.3,0V14c-0.1,0-0.2,0-0.4,0.1 C92.9,14.1,92.8,14.1,92.7,14.1z" />
-        </g>
-      </svg>
-    </div>
-  </div>
-</template>
-
-<script>
-import { BarcodeScanner } from "dynamsoft-javascript-barcode";
-
-export default {
-  data() {
-    return {
-      pScanner: null,
-    };
-  },
-  async mounted() {
-    try {
-      const scanner = await (this.pScanner = BarcodeScanner.createInstance());
-      await scanner.setUIElement(this.$el);
-      scanner.onFrameRead = (results) => {
-        for (let result of results) {
-          console.log(result.barcodeText);
-        }
-      };
-      scanner.onUniqueRead = (txt, result) => {
-        alert(txt, result);
-      };
-      await scanner.open();
-    } catch (ex) {
-      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 beforeDestroy() {
-    if (this.pScanner) {
-      (await this.pScanner).destroyContext();
-      console.log("BarcodeScanner Component Unmount");
-    }
-  },
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-.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%;
-  }
-}
-</style>
-```
-
-> 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
-<template>
-  <div class="ImgDecode"><input type="file" @change="decodeImg" /></div>
-</template>
-
-<script>
-import { BarcodeReader } from 'dynamsoft-javascript-barcode'
-export default {
-  name: 'ImgDecode',
-  data() {
-    return {
-      pReader: null,
-    }
-  },
-  methods: {
-    async decodeImg(e) {
-      try {
-        const reader = await (this.pReader = this.pReader || BarcodeReader.createInstance());
-        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) {
-        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 beforeDestroy() {
-    if (this.pReader) {
-      (await this.pReader).destroyContext();
-      console.log('ImgDecode Component Unmount');
-    }
-  },
-}
-</script>
-
-<style scoped>
-.ImgDecode {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: 1px solid black
-}
-</style>
-```
-
-### Add `VideoDecode` and `ImgDecode` components in `HelloWorld.vue`
-
-```vue
-<template>
-  <div class="helloWorld">
-    <h1>Hello World for Vue<img class="applogo" alt="Vue logo" src="../assets/logo.png" /></h1>
-    <div>
-      <button :style="{ marginRight: '10px', backgroundColor: bShowScanner ? 'rgb(255,174,55)' : 'white' }"
-        @click="showScanner">Video Decode</button>
-      <button :style="{ backgroundColor: bShowImgDecode ? 'rgb(255,174,55)' : 'white' }" @click="showImgDecode">Image
-        Decode</button>
-    </div>
-    <div class="container">
-      <VideoDecode v-if="bShowScanner"></VideoDecode>
-      <ImgDecode v-if="bShowImgDecode"></ImgDecode>
-    </div>
-  </div>
-</template>
-
-<script>
-import "../dbr"; // import side effects. The license, engineResourcePath, so on.
-import { BarcodeReader } from "dynamsoft-javascript-barcode";
-import VideoDecode from "./VideoDecode";
-import ImgDecode from './ImgDecode.vue'
-
-export default {
-  name: "HelloWorld",
-  data() {
-    return {
-      bShowScanner: true,
-      bShowImgDecode: false
-    };
-  },
-  async mounted() {
-    //Load the library on page load to speed things up.
-    try {
-      await BarcodeReader.loadWasm();
-    } catch (ex) {
-      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);
-    }
-  },
-  components: {
-    VideoDecode, ImgDecode
-  },
-  methods: {
-    showScanner() {
-      this.bShowScanner = true;
-      this.bShowImgDecode = false;
-    },
-    showImgDecode() {
-      this.bShowScanner = false;
-      this.bShowImgDecode = true;
-    }
-  },
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h1 {
-  font-size: 1.5em;
-}
-
-.applogo {
-  height: 25px;
-}
-
-.helloWorld {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  color: #455a64;
-}
-
-button {
-  font-size: 1.5rem;
-  margin-bottom: 2vh;
-  border: 1px solid black;
-}
-
-.container {
-  margin: 2vmin auto;
-  text-align: center;
-  font-size: medium;
-  width: 80vw;
-}
-</style>
-```
-
-> 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
-<template>
-  <div id="app">
-    <HelloWorld />
-  </div>
-</template>
-
-<script>
-import HelloWorld from "./components/HelloWorld.vue";
-
-export default {
-  name: "App",
-  components: {
-    HelloWorld,
-  },
-};
-</script>
-
-<style>
-</style>
-```
-
-* 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
-
-* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/9.x/1.hello-world/6.read-video-vue3">Hello World in Vue 3 - Source Code</a>
-
-## 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
-<script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, getCurrentInstance } from "vue";
-import type { Ref } from 'vue'
-import { BarcodeScanner } from 'dynamsoft-javascript-barcode'
-
-const pScanner: Ref<null | Promise<BarcodeScanner>> = ref(null);
-const elRefs: Ref<null | HTMLElement> = ref(null);
-onMounted(async () => {
-  try {
-    const internalInstance = getCurrentInstance();
-    elRefs.value = internalInstance?.refs.elRefs as HTMLElement;
-    const scanner = await (pScanner.value = BarcodeScanner.createInstance());
-    await scanner.setUIElement(elRefs.value);
-    scanner.onFrameRead = (results) => {
-      for (let result of results) {
-        console.log(result.barcodeText);
-      }
-    };
-    scanner.onUniqueRead = (txt) => {
-      alert(txt);
-    }
-    await scanner.open();
-  } catch (ex:any) {
-    let errMsg = ex.message||ex;
-    if (errMsg.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.";
-    }
-    console.error(errMsg);
-    alert(errMsg);
-  }
-});
-onBeforeUnmount(async () => {
-  if (pScanner.value) {
-    (await pScanner.value).destroyContext();
-    console.log('BarcodeScanner Component Unmount');
-  }
-});
-</script>
-
-<template>
-  <div ref="elRefs" class="component-barcode-scanner">
-    <svg class="dce-bg-loading" viewBox="0 0 1792 1792">
-      <path
-        d="M1760 896q0 176-68.5 336t-184 275.5-275.5 184-336 68.5-336-68.5-275.5-184-184-275.5-68.5-336q0-213 97-398.5t265-305.5 374-151v228q-221 45-366.5 221t-145.5 406q0 130 51 248.5t136.5 204 204 136.5 248.5 51 248.5-51 204-136.5 136.5-204 51-248.5q0-230-145.5-406t-366.5-221v-228q206 31 374 151t265 305.5 97 398.5z"></path>
-    </svg>
-    <svg class="dce-bg-camera" viewBox="0 0 2048 1792">
-      <path
-        d="M1024 672q119 0 203.5 84.5t84.5 203.5-84.5 203.5-203.5 84.5-203.5-84.5-84.5-203.5 84.5-203.5 203.5-84.5zm704-416q106 0 181 75t75 181v896q0 106-75 181t-181 75h-1408q-106 0-181-75t-75-181v-896q0-106 75-181t181-75h224l51-136q19-49 69.5-84.5t103.5-35.5h512q53 0 103.5 35.5t69.5 84.5l51 136h224zm-704 1152q185 0 316.5-131.5t131.5-316.5-131.5-316.5-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5z">
-      </path>
-    </svg>
-    <div class="dce-video-container"></div>
-    <div class="dce-scanarea">
-      <div class="dce-scanlight"></div>
-    </div>
-    <div class="div-select-container">
-      <select class="dce-sel-camera"></select>
-      <select class="dce-sel-resolution"></select>
-    </div>
-    <div class="dbr-msg-poweredby">
-      <svg viewBox="0 0 94 17">
-        <g>
-          <path
-            d="M0.9,14V4.3h2.3c0.6,0,1,0.1,1.4,0.3c0.3,0.2,0.6,0.5,0.7,0.9s0.2,0.8,0.2,1.4c0,0.5-0.1,0.9-0.2,1.3 C5.1,8.5,4.9,8.8,4.5,9.1C4.2,9.3,3.7,9.4,3.2,9.4H1.8V14H0.9z M1.8,8.7h1.2c0.4,0,0.7-0.1,1-0.2S4.3,8.2,4.4,8 c0.1-0.3,0.2-0.6,0.2-1.1c0-0.5,0-0.9-0.1-1.2C4.3,5.4,4.2,5.2,3.9,5.1S3.4,5,2.9,5H1.8V8.7z" />
-          <path
-            d="M8.1,14.1c-0.5,0-0.8-0.1-1.1-0.3s-0.5-0.5-0.6-0.9s-0.2-0.9-0.2-1.4V9.6c0-0.6,0.1-1,0.2-1.4 C6.5,7.8,6.7,7.5,7,7.3S7.6,7,8.1,7C8.6,7,9,7.1,9.2,7.3s0.5,0.5,0.6,0.9C9.9,8.5,9.9,9,9.9,9.6v1.9c0,0.6-0.1,1-0.2,1.4 c-0.1,0.4-0.3,0.7-0.6,0.9S8.6,14.1,8.1,14.1z M8.1,13.4c0.3,0,0.5-0.1,0.7-0.2C8.9,13,9,12.8,9,12.5c0-0.3,0-0.6,0-1v-2 c0-0.4,0-0.7,0-1C9,8.2,8.9,8,8.8,7.9C8.6,7.7,8.4,7.6,8.1,7.6c-0.3,0-0.5,0.1-0.7,0.2C7.3,8,7.2,8.2,7.2,8.5c0,0.3-0.1,0.6-0.1,1 v2c0,0.4,0,0.7,0.1,1c0,0.3,0.1,0.5,0.3,0.7C7.6,13.4,7.8,13.4,8.1,13.4z" />
-          <path d="M12,14l-1.1-6.9h0.7l0.9,5.8l1.1-5.8h0.8l1.1,5.8l0.8-5.8H17L15.9,14H15l-1.1-5.6L12.8,14H12z" />
-          <path
-            d="M19.8,14.1c-0.4,0-0.8-0.1-1.1-0.3s-0.5-0.5-0.6-0.9c-0.1-0.4-0.2-0.9-0.2-1.6V9.6c0-0.7,0.1-1.2,0.2-1.6 c0.1-0.4,0.3-0.7,0.6-0.8C19,7,19.3,7,19.8,7c0.5,0,0.9,0.1,1.1,0.3c0.3,0.2,0.4,0.5,0.5,0.9c0.1,0.4,0.1,1,0.1,1.6v0.6h-2.8v1.2 c0,0.4,0,0.8,0.1,1.1c0.1,0.3,0.2,0.4,0.3,0.6s0.3,0.2,0.6,0.2c0.2,0,0.3,0,0.5-0.1c0.1-0.1,0.3-0.2,0.3-0.4s0.1-0.5,0.1-0.8v-0.5 h0.9V12c0,0.6-0.1,1.1-0.4,1.5S20.4,14.1,19.8,14.1z M18.8,9.9h1.9V9.4c0-0.4,0-0.7-0.1-0.9c0-0.3-0.1-0.5-0.3-0.6S20,7.6,19.8,7.6 c-0.2,0-0.4,0.1-0.6,0.2c-0.1,0.1-0.3,0.3-0.3,0.6c-0.1,0.3-0.1,0.7-0.1,1.1V9.9z" />
-          <path
-            d="M22.8,14V7.1h0.9V8c0.2-0.4,0.5-0.6,0.8-0.8C24.8,7.1,25,7,25.3,7c0,0,0,0,0.1,0s0.1,0,0.1,0v0.9 c-0.1,0-0.1,0-0.2-0.1c-0.1,0-0.2,0-0.2,0c-0.3,0-0.5,0.1-0.7,0.2c-0.2,0.1-0.4,0.3-0.6,0.6V14H22.8z" />
-          <path
-            d="M28,14.1c-0.4,0-0.8-0.1-1.1-0.3s-0.5-0.5-0.6-0.9c-0.1-0.4-0.2-0.9-0.2-1.6V9.6c0-0.7,0.1-1.2,0.2-1.6 c0.1-0.4,0.3-0.7,0.6-0.8C27.3,7,27.6,7,28,7c0.5,0,0.9,0.1,1.1,0.3c0.3,0.2,0.4,0.5,0.5,0.9c0.1,0.4,0.1,1,0.1,1.6v0.6H27v1.2 c0,0.4,0,0.8,0.1,1.1c0.1,0.3,0.2,0.4,0.3,0.6s0.3,0.2,0.6,0.2c0.2,0,0.3,0,0.5-0.1c0.1-0.1,0.3-0.2,0.3-0.4s0.1-0.5,0.1-0.8v-0.5 h0.9V12c0,0.6-0.1,1.1-0.4,1.5S28.7,14.1,28,14.1z M27,9.9H29V9.4c0-0.4,0-0.7-0.1-0.9c0-0.3-0.1-0.5-0.3-0.6S28.3,7.6,28,7.6 c-0.2,0-0.4,0.1-0.6,0.2c-0.1,0.1-0.3,0.3-0.3,0.6C27.1,8.6,27,9,27,9.5V9.9z" />
-          <path
-            d="M32.6,14.1c-0.6,0-1-0.2-1.3-0.7c-0.3-0.4-0.4-1.2-0.4-2.2V9.9c0-0.6,0-1.1,0.1-1.6c0.1-0.4,0.2-0.8,0.5-1 c0.2-0.2,0.6-0.4,1-0.4C32.8,7,33,7,33.2,7.1c0.2,0.1,0.4,0.3,0.5,0.4V4.3h0.9V14h-0.9v-0.5c-0.1,0.2-0.3,0.3-0.5,0.4 C33,14,32.8,14.1,32.6,14.1z M32.7,13.4c0.2,0,0.4,0,0.5-0.1c0.2-0.1,0.3-0.2,0.5-0.3V8.1c-0.1-0.1-0.3-0.2-0.4-0.3 c-0.2-0.1-0.4-0.2-0.6-0.2c-0.4,0-0.6,0.2-0.8,0.5S31.8,9,31.8,9.6v1.6c0,0.5,0,0.9,0.1,1.2c0.1,0.3,0.1,0.6,0.3,0.7 C32.3,13.3,32.5,13.4,32.7,13.4z" />
-          <path
-            d="M40.5,14.1c-0.3,0-0.5-0.1-0.7-0.2c-0.2-0.1-0.4-0.3-0.5-0.4V14h-0.9V4.3h0.9v3.4c0.1-0.2,0.3-0.3,0.5-0.5 C40.1,7,40.3,7,40.6,7C41,7,41.2,7,41.4,7.2c0.2,0.2,0.4,0.4,0.5,0.6c0.1,0.3,0.2,0.6,0.2,0.9s0.1,0.7,0.1,1v1.5 c0,0.6,0,1.1-0.1,1.5c-0.1,0.4-0.3,0.8-0.5,1C41.3,14,41,14.1,40.5,14.1z M40.4,13.4c0.3,0,0.5-0.1,0.6-0.3 c0.1-0.2,0.2-0.4,0.3-0.8s0.1-0.7,0.1-1.2V9.7c0-0.5,0-0.8-0.1-1.1S41.1,8,41,7.9c-0.1-0.2-0.3-0.2-0.6-0.2c-0.2,0-0.4,0.1-0.6,0.2 c-0.2,0.1-0.3,0.2-0.5,0.4v4.7c0.1,0.1,0.3,0.3,0.5,0.4C40,13.4,40.2,13.4,40.4,13.4z" />
-          <path
-            d="M43.2,15.7V15c0.4,0,0.7,0,0.9-0.1c0.2-0.1,0.3-0.1,0.4-0.3c0.1-0.1,0.1-0.2,0.1-0.4c0-0.1,0-0.3-0.1-0.5 c0-0.2-0.1-0.4-0.2-0.6L43,7.1h0.9l1.2,5.9l1.2-5.9h0.9l-1.7,7.4c-0.1,0.3-0.2,0.5-0.3,0.7c-0.2,0.2-0.4,0.3-0.6,0.4 c-0.3,0.1-0.6,0.1-1,0.1H43.2z" />
-          <path
-            d="M50.6,14V4.3h2.1c0.7,0,1.2,0.1,1.6,0.4c0.4,0.2,0.6,0.6,0.8,1c0.2,0.4,0.2,0.9,0.2,1.5V11 c0,0.6-0.1,1.1-0.2,1.6s-0.4,0.8-0.8,1S53.5,14,52.8,14H50.6z M51.5,13.3h1.2c0.5,0,0.9-0.1,1.1-0.3s0.4-0.5,0.5-0.9 s0.1-0.8,0.1-1.3V7.2c0-0.5,0-0.9-0.1-1.2s-0.2-0.6-0.5-0.8S53.2,5,52.7,5h-1.2V13.3z" />
-          <path
-            d="M56.5,15.7V15c0.4,0,0.7,0,0.9-0.1c0.2-0.1,0.3-0.1,0.4-0.3c0.1-0.1,0.1-0.2,0.1-0.4c0-0.1,0-0.3-0.1-0.5 c0-0.2-0.1-0.4-0.2-0.6l-1.4-6.1h0.9l1.2,5.9l1.2-5.9h0.9l-1.7,7.4c-0.1,0.3-0.2,0.5-0.3,0.7s-0.4,0.3-0.6,0.4s-0.6,0.1-1,0.1H56.5 z" />
-          <path
-            d="M61.3,14V7.1h0.9v0.7c0.2-0.2,0.5-0.4,0.8-0.6C63.2,7,63.5,7,63.8,7C64,7,64.2,7,64.4,7.1s0.3,0.3,0.4,0.5 c0.1,0.2,0.1,0.5,0.1,0.8V14H64V8.6c0-0.4-0.1-0.6-0.2-0.8c-0.1-0.1-0.3-0.2-0.5-0.2c-0.2,0-0.4,0.1-0.6,0.2s-0.4,0.3-0.6,0.5V14 H61.3z" />
-          <path
-            d="M67.4,14.1c-0.3,0-0.5-0.1-0.7-0.2c-0.2-0.1-0.4-0.3-0.5-0.6C66,13.1,66,12.8,66,12.6c0-0.4,0.1-0.7,0.2-0.9 s0.3-0.5,0.5-0.7c0.2-0.2,0.5-0.4,0.9-0.6c0.4-0.2,0.8-0.4,1.3-0.6V9.3c0-0.4,0-0.8-0.1-1c-0.1-0.2-0.1-0.4-0.3-0.5 c-0.1-0.1-0.3-0.2-0.5-0.2c-0.2,0-0.3,0-0.5,0.1c-0.1,0.1-0.3,0.2-0.3,0.4c-0.1,0.2-0.1,0.4-0.1,0.7V9l-0.9,0 c0-0.7,0.2-1.2,0.5-1.6C66.8,7.1,67.3,7,68,7c0.6,0,1.1,0.2,1.3,0.6c0.3,0.4,0.4,1,0.4,1.7v3.4c0,0.1,0,0.3,0,0.5 c0,0.2,0,0.4,0,0.5c0,0.2,0,0.3,0,0.4h-0.8c0-0.2-0.1-0.3-0.1-0.5c0-0.2,0-0.3-0.1-0.5c-0.1,0.3-0.3,0.5-0.5,0.7 S67.7,14.1,67.4,14.1z M67.6,13.4c0.2,0,0.3,0,0.5-0.1c0.1-0.1,0.3-0.2,0.4-0.3s0.2-0.3,0.3-0.4v-2.2c-0.3,0.2-0.6,0.3-0.9,0.5 c-0.2,0.1-0.4,0.3-0.6,0.4c-0.2,0.1-0.3,0.3-0.3,0.5s-0.1,0.4-0.1,0.6c0,0.4,0.1,0.6,0.2,0.8C67.2,13.3,67.4,13.4,67.6,13.4z" />
-          <path
-            d="M70.9,14V7.1h0.8v0.7c0.2-0.3,0.5-0.5,0.8-0.6c0.3-0.1,0.6-0.2,0.9-0.2c0.2,0,0.5,0.1,0.7,0.2s0.3,0.4,0.4,0.7 c0.2-0.3,0.5-0.5,0.8-0.7c0.3-0.2,0.6-0.2,0.9-0.2c0.2,0,0.4,0,0.6,0.1s0.3,0.3,0.4,0.5c0.1,0.2,0.2,0.5,0.2,0.9V14h-0.8V8.6 c0-0.4-0.1-0.7-0.2-0.8s-0.3-0.2-0.5-0.2c-0.2,0-0.4,0.1-0.7,0.2S74.7,8,74.5,8.3c0,0,0,0.1,0,0.1s0,0.1,0,0.1V14h-0.8V8.6 c0-0.4-0.1-0.7-0.2-0.8c-0.1-0.1-0.3-0.2-0.5-0.2c-0.2,0-0.4,0.1-0.7,0.2c-0.2,0.1-0.4,0.3-0.6,0.5V14H70.9z" />
-          <path
-            d="M80.2,14.1c-0.6,0-1-0.2-1.3-0.5c-0.3-0.4-0.5-0.8-0.6-1.4l0.7-0.2c0,0.5,0.2,0.9,0.4,1.2 c0.2,0.2,0.5,0.4,0.8,0.4c0.3,0,0.5-0.1,0.7-0.3c0.2-0.2,0.2-0.4,0.2-0.7c0-0.2-0.1-0.5-0.2-0.7c-0.1-0.2-0.4-0.5-0.6-0.7l-0.9-0.8 c-0.3-0.3-0.5-0.5-0.7-0.8c-0.2-0.3-0.2-0.6-0.2-0.9c0-0.3,0.1-0.6,0.2-0.8c0.1-0.2,0.3-0.4,0.6-0.5C79.5,7,79.8,7,80.2,7 c0.5,0,0.9,0.2,1.2,0.5c0.3,0.3,0.4,0.8,0.4,1.3L81.2,9c0-0.3-0.1-0.6-0.1-0.8s-0.2-0.4-0.3-0.5c-0.1-0.1-0.3-0.1-0.5-0.1 c-0.3,0-0.5,0.1-0.6,0.2c-0.2,0.1-0.2,0.4-0.2,0.6c0,0.2,0,0.4,0.1,0.6c0.1,0.2,0.2,0.3,0.4,0.5l1,0.9c0.2,0.2,0.4,0.3,0.6,0.5 c0.2,0.2,0.3,0.4,0.4,0.6c0.1,0.2,0.2,0.5,0.2,0.8c0,0.4-0.1,0.7-0.2,0.9c-0.1,0.2-0.4,0.4-0.6,0.6C80.9,14,80.6,14.1,80.2,14.1z" />
-          <path
-            d="M84.7,14.1c-0.5,0-0.8-0.1-1.1-0.3c-0.3-0.2-0.5-0.5-0.6-0.9s-0.2-0.9-0.2-1.4V9.6c0-0.6,0.1-1,0.2-1.4 c0.1-0.4,0.3-0.7,0.6-0.9C83.9,7.1,84.3,7,84.7,7c0.5,0,0.9,0.1,1.1,0.3s0.5,0.5,0.6,0.9c0.1,0.4,0.2,0.9,0.2,1.4v1.9 c0,0.6-0.1,1-0.2,1.4s-0.3,0.7-0.6,0.9S85.2,14.1,84.7,14.1z M84.7,13.4c0.3,0,0.5-0.1,0.7-0.2c0.1-0.2,0.2-0.4,0.3-0.7 c0-0.3,0-0.6,0-1v-2c0-0.4,0-0.7,0-1c0-0.3-0.1-0.5-0.3-0.7c-0.1-0.2-0.4-0.2-0.7-0.2c-0.3,0-0.5,0.1-0.7,0.2 c-0.1,0.2-0.2,0.4-0.3,0.7c0,0.3-0.1,0.6-0.1,1v2c0,0.4,0,0.7,0.1,1c0,0.3,0.1,0.5,0.3,0.7C84.2,13.4,84.4,13.4,84.7,13.4z" />
-          <path
-            d="M88.2,14V7.7h-0.9V7.1h0.9V6.3c0-0.3,0-0.6,0.1-0.9c0.1-0.3,0.2-0.5,0.4-0.6c0.2-0.2,0.5-0.2,0.8-0.2 c0.1,0,0.2,0,0.4,0c0.1,0,0.2,0,0.3,0.1v0.6c-0.1,0-0.2,0-0.2,0c-0.1,0-0.2,0-0.2,0c-0.3,0-0.4,0.1-0.5,0.2s-0.1,0.4-0.1,0.8v0.8 h1.1v0.6h-1.1V14H88.2z" />
-          <path
-            d="M92.7,14.1c-0.3,0-0.6-0.1-0.8-0.2s-0.3-0.3-0.4-0.5c-0.1-0.2-0.1-0.5-0.1-0.8V7.6h-0.9V7.1h0.9V4.9h0.9v2.1 h1.2v0.6h-1.2v4.8c0,0.3,0,0.6,0.1,0.7c0.1,0.1,0.2,0.2,0.5,0.2c0.1,0,0.2,0,0.2,0s0.2,0,0.3,0V14c-0.1,0-0.2,0-0.4,0.1 C92.9,14.1,92.8,14.1,92.7,14.1z" />
-        </g>
-      </svg>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.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%;
-  }
-}
-
-@keyframes dbrScanner-scanlight {
-  from {
-    top: 0;
-  }
-
-  to {
-    top: 97%;
-  }
-}
-</style>
-```
-
-> 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
-<script setup lang="ts">
-import { onBeforeUnmount, ref } from "vue";
-import type { Ref } from 'vue'
-import { BarcodeReader } from 'dynamsoft-javascript-barcode'
-
-const pReader: Ref<null | Promise<BarcodeReader>> = ref(null);
-
-const decodeImg = async (e:Event) => {
-  try {
-    const reader = await (pReader.value = pReader.value || BarcodeReader.createInstance());
-    let results = await reader.decode((e.target as any).files[0]);
-    for (let result of results) {
-      alert(result.barcodeText);
-    }
-    if (!results.length) { alert('No barcode found'); }
-  } catch (ex:any) {
-    let errMsg = ex.message||ex;
-    if (errMsg.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.";
-    }
-    console.error(errMsg);
-    alert(errMsg);
-  }
-  (e.target as HTMLInputElement).value = '';
-}
-onBeforeUnmount(async () => {
-  if (pReader.value) {
-    (await pReader.value).destroyContext();
-    console.log('ImgDecode Component Unmount');
-  }
-})
-
-</script>
-
-<template>
-  <div class="ImgDecode"><input type="file" @change="decodeImg" /></div>
-</template>
-
-<style scoped>
-.ImgDecode {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: 1px solid black
-}
-</style>
-```
-
-### Add `VideoDecode` and `ImgDecode` components in `HelloWorld.vue`
-
-```vue
-<script setup lang="ts">
-import "../dbr"; // import side effects. The license, engineResourcePath, so on.
-import { BarcodeScanner } from 'dynamsoft-javascript-barcode'
-import VideoDecode from "./VideoDecode.vue";
-import ImgDecode from './ImgDecode.vue'
-import { ref, onMounted } from "vue";
-import type { Ref } from 'vue'
-
-const bShowScanner: Ref<boolean> = ref(true);
-const bShowImgDecode: Ref<boolean> = ref(false)
-onMounted(async () => {
-  try {
-    //Load the library on page load to speed things up.
-    await BarcodeScanner.loadWasm();
-  } catch (ex:any) {
-    let errMsg = ex.message||ex;
-    if (errMsg.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.";
-    }
-    console.error(errMsg);
-    alert(errMsg);
-  }
-});
-const showScanner = () => {
-  bShowScanner.value = true;
-  bShowImgDecode.value = false;
-};
-const showImgDecode = () => {
-  bShowScanner.value = false;
-  bShowImgDecode.value = true;
-}
-</script>
-
-<template>
-  <div className="helloWorld">
-    <h1>Hello World for Vue 3 <img class="applogo" alt="Vue logo" src="../assets/logo.svg" /></h1>
-    <div>
-      <button :style="{ marginRight: '10px', backgroundColor: bShowScanner ? 'rgb(255,174,55)' : 'white' }"
-        @click="showScanner">Video Decode</button>
-      <button :style="{ backgroundColor: bShowImgDecode ? 'rgb(255,174,55)' : 'white' }" @click="showImgDecode">Image
-        Decode</button>
-    </div>
-    <div class="container">
-      <VideoDecode v-if="bShowScanner"></VideoDecode>
-      <ImgDecode v-if="bShowImgDecode"></ImgDecode>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-button {
-  font-size: 1.5rem;
-  margin-bottom: 2vh;
-  border: 1px solid black;
-}
-
-.container {
-  margin: 2vmin auto;
-  text-align: center;
-  font-size: medium;
-  width: 100%;
-}
-
-.applogo {
-  height: 25px;
-}
-
-.helloWorld {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  color: #455a64;
-}
-
-h1 {
-  font-size: 1.5em;
-}
-</style>
-```
-
-> 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
-<script setup lang="ts">
-import HelloWorld from './components/HelloWorld.vue'
-</script>
-
-<template>
-  <HelloWorld />
-</template>
-
-<style scoped>
-</style>
-```
-
-* 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
----
-
-<div class="filetree">
-    <div class="ds-logo"></div>
-    <div class="file">
-        <h3>Demo and Samples - DBR JavaScript Edition</h3>
-    </div>
-    <div class="children">
-        <div class="file">Hello World</div>
-        <div class="children">
-            <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Minimum necessary JavaScript code to get
-                the BarcodeScanner (video) up and running." class="button title"
-                     href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.42/1.hello-world/1.hello-world.html">Hello World</a>
-            </div>
-            <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Decode video stream in an Angular
-                Application from a USB-connected or built-in camera (mobile or desktop)." class="button title"
-                     href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.42/1.hello-world/3.read-video-angular">Hello World in
-                    Angular (<img alt="Angular logo"
-                        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==" />)</a> 
-                        </div>
-            <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Decode video stream in a React
-                Application from a USB-connected or built-in camera (mobile or desktop)." class="button title"
-                     href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.42/1.hello-world/4.read-video-react">
-                    Hello World in
-                    React (<img alt="React logo"
-                        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4NDEuOSA1OTUuMyI+PGcgZmlsbD0iIzYxREFGQiI+PHBhdGggZD0iTTY2Ni4zIDI5Ni41YzAtMzIuNS00MC43LTYzLjMtMTAzLjEtODIuNCAxNC40LTYzLjYgOC0xMTQuMi0yMC4yLTEzMC40LTYuNS0zLjgtMTQuMS01LjYtMjIuNC01LjZ2MjIuM2M0LjYgMCA4LjMuOSAxMS40IDIuNiAxMy42IDcuOCAxOS41IDM3LjUgMTQuOSA3NS43LTEuMSA5LjQtMi45IDE5LjMtNS4xIDI5LjQtMTkuNi00LjgtNDEtOC41LTYzLjUtMTAuOS0xMy41LTE4LjUtMjcuNS0zNS4zLTQxLjYtNTAgMzIuNi0zMC4zIDYzLjItNDYuOSA4NC00Ni45Vjc4Yy0yNy41IDAtNjMuNSAxOS42LTk5LjkgNTMuNi0zNi40LTMzLjgtNzIuNC01My4yLTk5LjktNTMuMnYyMi4zYzIwLjcgMCA1MS40IDE2LjUgODQgNDYuNi0xNCAxNC43LTI4IDMxLjQtNDEuMyA0OS45LTIyLjYgMi40LTQ0IDYuMS02My42IDExLTIuMy0xMC00LTE5LjctNS4yLTI5LTQuNy0zOC4yIDEuMS02Ny45IDE0LjYtNzUuOCAzLTEuOCA2LjktMi42IDExLjUtMi42Vjc4LjVjLTguNCAwLTE2IDEuOC0yMi42IDUuNi0yOC4xIDE2LjItMzQuNCA2Ni43LTE5LjkgMTMwLjEtNjIuMiAxOS4yLTEwMi43IDQ5LjktMTAyLjcgODIuMyAwIDMyLjUgNDAuNyA2My4zIDEwMy4xIDgyLjQtMTQuNCA2My42LTggMTE0LjIgMjAuMiAxMzAuNCA2LjUgMy44IDE0LjEgNS42IDIyLjUgNS42IDI3LjUgMCA2My41LTE5LjYgOTkuOS01My42IDM2LjQgMzMuOCA3Mi40IDUzLjIgOTkuOSA1My4yIDguNCAwIDE2LTEuOCAyMi42LTUuNiAyOC4xLTE2LjIgMzQuNC02Ni43IDE5LjktMTMwLjEgNjItMTkuMSAxMDIuNS00OS45IDEwMi41LTgyLjN6bS0xMzAuMi02Ni43Yy0zLjcgMTIuOS04LjMgMjYuMi0xMy41IDM5LjUtNC4xLTgtOC40LTE2LTEzLjEtMjQtNC42LTgtOS41LTE1LjgtMTQuNC0yMy40IDE0LjIgMi4xIDI3LjkgNC43IDQxIDcuOXptLTQ1LjggMTA2LjVjLTcuOCAxMy41LTE1LjggMjYuMy0yNC4xIDM4LjItMTQuOSAxLjMtMzAgMi00NS4yIDItMTUuMSAwLTMwLjItLjctNDUtMS45LTguMy0xMS45LTE2LjQtMjQuNi0yNC4yLTM4LTcuNi0xMy4xLTE0LjUtMjYuNC0yMC44LTM5LjggNi4yLTEzLjQgMTMuMi0yNi44IDIwLjctMzkuOSA3LjgtMTMuNSAxNS44LTI2LjMgMjQuMS0zOC4yIDE0LjktMS4zIDMwLTIgNDUuMi0yIDE1LjEgMCAzMC4yLjcgNDUgMS45IDguMyAxMS45IDE2LjQgMjQuNiAyNC4yIDM4IDcuNiAxMy4xIDE0LjUgMjYuNCAyMC44IDM5LjgtNi4zIDEzLjQtMTMuMiAyNi44LTIwLjcgMzkuOXptMzIuMy0xM2M1LjQgMTMuNCAxMCAyNi44IDEzLjggMzkuOC0xMy4xIDMuMi0yNi45IDUuOS00MS4yIDggNC45LTcuNyA5LjgtMTUuNiAxNC40LTIzLjcgNC42LTggOC45LTE2LjEgMTMtMjQuMXpNNDIxLjIgNDMwYy05LjMtOS42LTE4LjYtMjAuMy0yNy44LTMyIDkgLjQgMTguMi43IDI3LjUuNyA5LjQgMCAxOC43LS4yIDI3LjgtLjctOSAxMS43LTE4LjMgMjIuNC0yNy41IDMyem0tNzQuNC01OC45Yy0xNC4yLTIuMS0yNy45LTQuNy00MS03LjkgMy43LTEyLjkgOC4zLTI2LjIgMTMuNS0zOS41IDQuMSA4IDguNCAxNiAxMy4xIDI0IDQuNyA4IDkuNSAxNS44IDE0LjQgMjMuNHpNNDIwLjcgMTYzYzkuMyA5LjYgMTguNiAyMC4zIDI3LjggMzItOS0uNC0xOC4yLS43LTI3LjUtLjctOS40IDAtMTguNy4yLTI3LjguNyA5LTExLjcgMTguMy0yMi40IDI3LjUtMzJ6bS03NCA1OC45Yy00LjkgNy43LTkuOCAxNS42LTE0LjQgMjMuNy00LjYgOC04LjkgMTYtMTMgMjQtNS40LTEzLjQtMTAtMjYuOC0xMy44LTM5LjggMTMuMS0zLjEgMjYuOS01LjggNDEuMi03Ljl6bS05MC41IDEyNS4yYy0zNS40LTE1LjEtNTguMy0zNC45LTU4LjMtNTAuNiAwLTE1LjcgMjIuOS0zNS42IDU4LjMtNTAuNiA4LjYtMy43IDE4LTcgMjcuNy0xMC4xIDUuNyAxOS42IDEzLjIgNDAgMjIuNSA2MC45LTkuMiAyMC44LTE2LjYgNDEuMS0yMi4yIDYwLjYtOS45LTMuMS0xOS4zLTYuNS0yOC0xMC4yek0zMTAgNDkwYy0xMy42LTcuOC0xOS41LTM3LjUtMTQuOS03NS43IDEuMS05LjQgMi45LTE5LjMgNS4xLTI5LjQgMTkuNiA0LjggNDEgOC41IDYzLjUgMTAuOSAxMy41IDE4LjUgMjcuNSAzNS4zIDQxLjYgNTAtMzIuNiAzMC4zLTYzLjIgNDYuOS04NCA0Ni45LTQuNS0uMS04LjMtMS0xMS4zLTIuN3ptMjM3LjItNzYuMmM0LjcgMzguMi0xLjEgNjcuOS0xNC42IDc1LjgtMyAxLjgtNi45IDIuNi0xMS41IDIuNi0yMC43IDAtNTEuNC0xNi41LTg0LTQ2LjYgMTQtMTQuNyAyOC0zMS40IDQxLjMtNDkuOSAyMi42LTIuNCA0NC02LjEgNjMuNi0xMSAyLjMgMTAuMSA0LjEgMTkuOCA1LjIgMjkuMXptMzguNS02Ni43Yy04LjYgMy43LTE4IDctMjcuNyAxMC4xLTUuNy0xOS42LTEzLjItNDAtMjIuNS02MC45IDkuMi0yMC44IDE2LjYtNDEuMSAyMi4yLTYwLjYgOS45IDMuMSAxOS4zIDYuNSAyOC4xIDEwLjIgMzUuNCAxNS4xIDU4LjMgMzQuOSA1OC4zIDUwLjYtLjEgMTUuNy0yMyAzNS42LTU4LjQgNTAuNnpNMzIwLjggNzguNHoiLz48Y2lyY2xlIGN4PSI0MjAuOSIgY3k9IjI5Ni41IiByPSI0NS43Ii8+PHBhdGggZD0iTTUyMC41IDc4LjF6Ii8+PC9nPjwvc3ZnPg==" />)</a>
-                        </div>
-            <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Decode video stream in a Vue
-                Application from a USB-connected or built-in camera (mobile or desktop)." class="button title"
-                     href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.42/1.hello-world/5.read-video-vue">
-                    Hello World in
-                    Vue 2 (<img alt="Vue logo"
-                        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTk2QkI4RkE3NjE2MTFFNUE4NEU4RkIxNjQ5MTYyRDgiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTk2QkI4Rjk3NjE2MTFFNUE4NEU4RkIxNjQ5MTYyRDgiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjU2QTEyNzk3NjkyMTFFMzkxODk4RDkwQkY4Q0U0NzYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjU2QTEyN0E3NjkyMTFFMzkxODk4RDkwQkY4Q0U0NzYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5WHowqAAAXNElEQVR42uxda4xd1XVe53XvvD2eGQ/lXQcKuDwc2eFlCAGnUn7kT6T86J/+aNTgsWPchJJYciEOCQ8hF+G0hFCIHRSEqAuJBCqRaUEIEbmBppAIBGnESwZje8COZ+y587j3PLq+ffadGJix53HvPevcuz60xPjec89ZZ+39nf04+9vLSZKEFArFzHA1BAqFEkShUIIoFEoQhUIJolAoQRQKJYhCoQRRKJQgCoUSRKFQKEEUCiWIQrFo+Gv/8/YH+f/nsMWSHHMChyhxqPTTdyncWyJ3ScD/ztipiB3wXSqu6P17avN+TyFC5ggv4tRnmoxWTP1+5F+Mz17GPvPl49EKBWd3UsfXllPiso8VcYtmPba3fNuKrBVXrGFCbrdPwXndFL49ltI367roOpSUI4pGypv9s7q+ltj6JxqOQ07Bo/DgxGb2/a8cX0CnAWXJ5etz2TqdHiXHKlKj9w6i9XX8Ic41DmI8FVHhmmXk85MmRhCzJoiTWnig9LfJRHihgydxzAxJhBr7Bh/hK3yu+p9568FliTJF2aKMZfVd/kQOcKP6OBmS9+Rjm4zJ6faoeN0gOUn61MncLX4CJ+MRhe+P/dRxhfew2Df4CF/hs4jWg8vQYUKYMuWyRRkLjeHQ8YP0Z9mekVjA8Qj3VVcuoeDiXu63lkUE0ym6FA5PXBaNVr7qtPumGyPR4Bt8hK/wWUR5chn6XJYoU5StUHL8l+XEx2axhkS6yk+chJuP4rXLyOkIKJkS0B67adcqfL/0Y4pixxSysK6V8Yl9Mz7i3272NRFlhzJsu24Z5l9E9Ahmwfrpoj7uw3fZtktsRZKjIXnndlLxin7+W8ZTBwPf6I+Tg9HwxK2Ob8citbCoBoaxBxMCvsFH+CqjHCtUvLzflKWUcpwB91gupG5f9/Rtx39ZZBtmWyJtphKzHTQW0diP36b4aJmcLj/zGaSkHJPb4SWFi/tOJd8bTqd9s48VBRh4RKeUX/vjgXg8cpyCmz05xkJylxSoa8M5RF0eJaVIIkGOsg2yTc3UgpD94psiWxEOqDNYoOIXuHnGwE5AXUTFi46FTnRw4l/dwEm7/pSxcYnCF/gE3zInh52RRJkVP7/MlKFQcgCbjifHTAQBfsb2qsgBO3e1Cpf3UXBej3nRJKKrxU/rcH/pKzz4vNIQuRJTEmZklbg6EL4SPsE3GQPzinmfhbJDGQolB+r8w58abs5y8DqRt4ABeptLRR7koY9NleybEYw/MPisvF/ayT1/SvDewcnIcG32wfiCAbEvoCZyGaGsitdyz6XdTctQJq6fcT5mloNfYvu5yFZkpEz+RT0UrFoqpxVBV+vQxIrkaPnrbqdvXs6hcjbU+Jq4Nvvwd/BFRNeq2npwWfkX95iyE9p6PM72P/MhCPANTBSKu5WITHcC074Y9CUTkYglKBgcV/aVtlM5Kpp/RHFjDdfka7MP/2wG6m72661QNigjlBXKTGBtsjWKNs5atCf44Uds3xc5YD8Wknd2BxWuGjCzIxLWQzlFj+IjU108OL7bafM5sm5DDdfka/8T+9AJXyTMpqFsUEYoK5SZ0NbjVlvX500Q4Ha2A+JuCcEvhVS8qp/8MzspHhMSfO7mVPaP35BMRp9JsCQldbX+hmvxNfnamzJfqVvtWnGZoGxQRigroYs6UbfvOGHn4ORVkTaIbEWwtqg3MNO+Zql0JGCdVuCayhDuG9uJB7vp+oR17FbZc+NauCauLWLmKkqXr6NsUEYoK6GtxwY6CXXnEs0n2faIHLCPhhR8bikFKwRN+xZddHWu5a7Ol9yCZ2ZwHKdOxufGNeKRqS/hmnLWW1VMmQSrl5oyEkqOPbZu02IJAsic9sU7B+5uF9cOmqUfeLOdOaAZYb/CA+M/Ic9NxUoYMNfD/PT84f7xB807EAnrrbgMUBZt1w1SEpCIqfjF1Om5EuQNth0iu1r8tPLP76LCpX2yWpHDk2dGH018p6brtD5hOHf04cR3okOTZ0lqPVAW3gVdlMhdrfsTW6drRhDgRrYJcbeKZQxTkenvegNt6YBQwrQvOxG+P3ZHEia9TuClS9Br1XKge8XnxLlxjelzZ/2w4tijDMxyoHIsVQg1zvYPcy7KeZx4jG2zyFakFJF7Whu1XT2QvhfJeryeVNdplYPo4Pi9hKd7VVxVC8O5cH4+N65hXgoKuGfEHmWAskjGxI49Ntu6XHOCAD9ie1PcLSepjDNY00fB8m6KpSyJx/jgg9LfJEfLK40818w+LXY5e5zKaMfKl+DcIlSCZp0cd3U59igDI4+WOa2LunvfvDoD9RrcNLqAjDy3yzfrtKqbAkggSDIZmSlYxzz9a8BaJ101zF2rh3BuSTJaCKGMDEGujHbedXch0X2ebbdEkkDC6a9cQoWVguS53P0JP5xcHY1W/tppD9KxgrdAw5QxnwPn4nOukrPeqkzBJb0m9oJltLtt3a07QYD1IkMAeS7/hw0BXMhzJwXJc/eV7kuiyIN8OOGuUhLP06JUeoxz4FxiZLRouTsDM9WO2OdBRtsIgrzHtk3kgH00JO+cTipc2S9jqyCaluf2xwcnfuB6LndHuEsSzdP4N/gtzoFzSZHRIsaQQiPmidyXgttsnW0YQYDvsh2ROGBPxkMqXjNA/qlCFsnZ8UdlX+kfk0pymlnMWH2JOBfz0sWI+C3OMS1dzPphhPVWHOPC5wdMzIUOzFFHb1lwB2ARF+ZOPt0gshWBPLe/wCRZlu6CIkSei/cE0fD4g2ZbVWceyxH5WPwGvzXrrSTJaDnG7oBoGS3qaCULggCPsv1W5IAd8tzLllJwvpx1WthMIfyg9OVotHy1WVQ4V37wsfgNfkuSZLQcW8Q4lruU/RVbRykrggDXiwwN3uQWnXTa1xMkz2W/on2lndNajpNtAGePw2/MOicBMlqs+8K7GBNbjrFgGe2iX0nUgiAvs+0S2YpgndaFPVRc3SdmVanZlfGjifOiw5PrT/oGvPpG/vDkEH4jZ70Vt86rl5rYimmdP41/s3Uzc4Isup9XNxwvz+0tyNAlONPrtO6hctR+QnluKqNt52O3pxvtClhvxTH0egtmEwbBMlrUxU21OFGtCHKYbavIATv3j90z26kIea4QZRtahfhIuT0anrjH7O3rpjNVHzPIaLG3Lh8Tj5TbRQihjlNyehxTwTLarbZOiiEIcBfbPnGhMtroChXW9JN/VqeYdyPEY4nwwPj6ZCL8C1T+T61JhDqRv8MxZgwlJG2BxzEsrBmgeEzseqt9ti6SNIIA8t6wm901eFDZ66d7M4UkQ56LVgTTvvtKaRqFqoTWymjxGb6LpUzrImYcuzaOIWKJmAptPWpaB2sd+V+yvSB1wB6s7qXgwiUyBpbJdBqFq6MjU18mKCKhRsTyEbx558/wnRmYJzLiV+DYBat6JQ/MX7B1UCxBAKHy3IQrH6W7MhY9MWkUMNAN948/8Mm35/jMDIKlpC3gmBWQtsAjifkE61b36kGQP7DdL7KrVZXnXiYpjYKZxj09Gh7f4kB4yIa/8ZmU1brIIYiYIXaJ3Nbjflv3xBME+DZbSVwIzfIIK89dJkSea18Ihu+XflD9yPztCJnW5Ri5VRntpNh8giVb5ygvBIHu9yaRrchYRO6fFU0CSTPQlDLte6zshx9O3g3D3yJajySd4EDaAsQMsRPaetxk61zty+YTCXRqjf9jO19cOLnyYV+p8QffpcreMXJ7BeRgh77Ds6SIYhGbMBgB2tld1DW0nGL4VxbZfKBbdUHdhol1dl7mOi0MOjttGgWT11lAwU9r1mMSsX0oxwSxgYyWOvKXtiAvBPkV239I7GqZdVqX9FDw2V5+UoYipn2nt/WRMK3LMQlW9poYCZ7WfcrWsdwSBNggMrRYdcLdhjas0+q28lzJOc8bOU7jWLh2AwzEyLxclYm6Z2ZuBEE+YLtTZEVA9tzPdBh5biJ3q5rGD8yRjXbNAPkcm0RuyjTUqf3NQBDge2yHJFaGeDyi4tUD5J3WIXmzs8Y9NDgG3un80OCYIDZCHxqHbJ2iZiEIGmnB8twgzYIkd7vMxiBON59GLJyBQLKMdiM1qOPXyMn2f2f7X5EDdshzkUbhAtED0oZMXCAGiIXgtAW/YXusURdr9NsoufLcgmP20zKy2ErrNSNGRuunMUAshL7zABq61q/RBPkd2yNSn57+X3ZTQZA8t7H3H5p7RwwEt6KP2DrUtAQBIIUsiwt99Kf+tydFntuocVhVRltNWyBTRlumGslopRNkhO1mkRVlLCT3jHYzqyU48WSN+1ZWRou0BZDRyp3Ju9nWnaYnCHA3216JlQWy0gKy557dJSaNQn0nKNL1VrhnwTLavbbOUKsQBBApzzVpFHqsPFdIGoW6AfeG7cMwrcv3TC0io80LQZ5me07kU3WkYqSlhYvkpFGoz8C8bO7RyGjlpi14ztaVliMIIFOeizQKbpI+WdsDGfLcWvcmsaK53b4gdUW3lENZXjxrgrzNdq/IAftohbzzOql4eV/zjUUcu96K7w33KFhGi7rxVisTBEBSxWPiiqYqz71mGfmDQuS5tSIHstHyPZnd7+XKaI+RgKSxEggySWmKaXkVaSwi5xSbRmGiSdZpxVZGy/eEexMso73R1o2WJwiwk+11kQNZrNO6oo+Cc7vz39Wy07q4l+CKfnNvQu/ndVsnSAkifcCOAXq7R8W1y9JdRvI87QvfnTRtgdPeujLavBLkv9meEPnUHS2Tf1EPFT67lOKRnE77munrsrkH/+IeydPXqAO/VoLMDMhz5T2irTzXpFHoKeRPnluV0XYX0mlduTLamIRJtKUR5CDbbSIrGPfX/eUdVFyTQ3luku6OaNIW/HmH5LQFt9k6oAQ5Ab7PNiyxkmGndUhRvTNyJM9F1wrZaM9IZbQmG63MocewxIejRIKg+DaKbEXGI3KWBtT2hUFKyonUZeEfB3xkX4vsM3wXvIx/IwmMqCu0WH/B9qLIpzG6Wp/rpWBFj/x1WnaCAb4G7LPgad0XbZmTEmTukDnti0yzgZvKcwNPtDzXyGjZR5ONFincVEbbVAR5je0hkU/lkTL5F3TZzQ2EvjysJr1hH/0LuiVPTz9ky1oJsgB8iwQsN5hplISns5Hn9hXl9eurMlr2zUzrVsQuk5m0ZUxKkIXhKNsWkQN2yHNPhzx3WbqQMRZGYCOjXWZ8FDzjtsWWsRJkEfgh2zvyOvhWnovsucu75GTPtdlo4RN8i+W+s3nHli0pQRaPIXEeVeW53V46YJciz2Uf4IvxiX0juW/9h/JQ8fJCkGfZnpE5YK9QsHIJBZcIkOdW141d3Gt8EiyjfcaWqRKk6Z84kOc6duODjmzluUZGyz4g6Q18UhltaxHkXbbtIgfsRyvknQt5bobZc6dltP3Gl0SudmW7LUslSJ1mPUbFeWVUepDnDpB3SgazRtW0BXxt+ABfhE7rypyVbCKCTLF9U2QrgjQKg3b7zskGv3eI0+XsuDZ8EJy2YJMtQyVIHfEztldFDtghz728j4LzGphGoZq2gK9ZMDuwiH3ngTJ7OG+VLY8EAeTKc9ts9lwk42zEOi2st+JrYZIA1xYso12Xx4qWV4K8xPZzka3ISCrPDVY1YJ1WtfVYZWW0ctdbPW7LTAnSQHyDJCoykEYhTNdpuUsK6YDZqQ85cG5cw6y3CsWmLYBXG/NayfJMkI8oVR/KG7AfC8k7u4MKVw2kM1r1eB2RpDNXuAauJVhGe6stKyVIBrid7YA4r6o5N5BG4cxOI3mtaeWtymj53LiG4FwmKJs78lzB8k4QVIsN4ryqynN7AzP1ShXIc2tYg3GuSpJO6/aKltHK3KWmhQgCPMm2R+SAfTSkANlzV9Rw2rc6MDcyWtHZaPfYsiElSPaQOYVYiSnxiIprB8kpeGn+v8U2mZD8FjxzTpybKjqtqwQ5Od5g2yGyq4Xsued3UeHSvsW3IlUZLZ8L5xSctmCHLRMliCBgN/AJcV7F6SpbjBe8gUWkUaimLeBzmOUsU2JltOMkcbd+JQiNkYB8ErNVbPe0Nmq72i4kXMiwNUnfe+AcOJfgfCWbbVkoQQTiR2xvivPKynODNX0ULF9AGoVq2gL+Lc4hWEaL2N/XTBWq2Qgic3BYled2+ekeVfOV51az0WKNF59DsIx2XbNVpmYkyPNsuyWSBBJYf+USKsxHnlvNRsu/8WXLaHfb2CtBcoD1Ir2CPJf/wxSt2xmkupGT9c6QtoCPNdO66FfJldGub8aK1KwEeY9tm8gB+2hI3jmdVLii/+RbBdktfHAsfpPIfSm4zcZcCZIjfJftiMQBO1IQQBrrn3qCRYZ20SOOMTLacbHrrRDjW5q1EjUzQbiTTzeIbEUgz+232XNne59RfX+CbLT9omW0iHFFCZJPPMr2W5EDdshzL1tKwfkzrNOqrrfi73CMYBntKzbGpATJL64X6RXWZRVtxlnP+VgaBZO2wEu/wzGatkAJUk+8zLZLZCuCdVoXciux+rhVuXYVMD7Dd7Hc9Va7bGyVIE0Amf3kaXnuIHm9qTwXhr/xmWAZbUXk+E4JsmAcZtsqcsAOee6Z7VS08lwY/sZngmW0W21MlSBNhLvY9onzCqtIxipUuKqf3L6iMfyNz4RO6+6zsWwJ+NRawNvep8S1IhMxucie+8VT0o+6PIqPiB17rG+lCtNqBPkl2wts14gbsCONwqVLzT8Fr7d6wcawZeBS60Hm1GSSTu+a6d5EY6cEyQ5/YLtf4oCd4iQ1ma3H/TZ2SpAWwLfZSqSYK0o2ZqQEaQ1AN32T1vs54yYbMyVIC+GBVuwyLLBL+kCr3rzb4oV/vdZ/jZESZHb8iqS9F5GFp2yMlCAtjCENgcZGCTI79rPdqWH4FO60sVGCKOh7bIc0DNM4ZGNCShAFEFKOsyDVARttTJQgGoJpPMb2Gw2DicFjGgYlyExYpyHQGChBZsfv2B5p4ft/xMZAoQSZFZso3TKo1VC2965QgpwQI2w3t+B932zvXaEEOSnuZtvbQve7196zQgkyZ6zXe1UoQWbH02zPtcB9PmfvVaEEmTeG9B6VIIrZ8RbbvU18f/fae1QoQRYMJKU81oT3dYwkJj1VguQOk9REaY2Pw4323hRKkEVjJ9vrTXQ/r9t7UihBaobr9V6UIIrZ8Wu2J5rgPp6w96JQgtQcG2jmhGl5QWzvQaEEqQsOst2WY/9vs/egUILUtZIN59Dv4ZyTWwmSEyDnUx7luRtJar4qJUjT4RdsL+bI3xetzwolSMOwTn1Vgihmx2tsD+XAz4esrwolSMPxLZK9XGPS+qhQgmSCo2xbBPu3xfqoUIJkhh+yvSPQr3esbwolSOYYUp+UIIrZ8SzbM4L8ecb6pFCC6BNbWw8lSB7wLtt2AX5st74olCDikPWskfRZNSVIi2OKst2+c5P1QaEEEYuH2V7N4Lqv2msrlCDisa5FrqkEUSwIL7E93sDrPW6vqVCC5AaN0l/kVZ+iBGlxfMR2awOuc6u9lkIJkjvcwXagjuc/YK+hUILkEgnVdxeRDfYaCiVIbvEk2546nHePPbdCCZJ7rMvJORVKkEzwBtuOGp5vhz2nQgnSNMBu6uM1OM84Nedu80qQFscY1SYfx2Z7LoUSpOlwH9ubi/j9m/YcCiWIDth1YK4EaUU8z7Z7Ab/bbX+rUII0PdY36DcKJUgu8R7btnkcv83+RqEEaRncwnZkDscdsccqlCAthQrbDXM47gZ7rEIJ0nJ4lO2VE3z/ij1GoQRpWaxb4HcKJUhL4GW2XTN8vst+p1CCtDw+Oc6Y6/hEoQRpCRxm23rcv7fazxRKEIXFXZRuwBDZvxUC4GsIREHflguDkyQqaVYotIulUChBFAoliEKhBFEolCAKhRJEoVCCKBRKEIVCCaJQKJQgCoUSRKFQgigUShCFIhP8vwADACog5YM65zugAAAAAElFTkSuQmCC" />)</a>
-                </div> 
-                <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Decode video stream in a Vue 3
-                Application from a USB-connected or built-in camera (mobile or desktop)." class="button title"
-                     href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.42/1.hello-world/6.read-video-vue3">
-                    Hello World in
-                    Vue 3 (<img alt="Vue3 logo"
-                        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTk2QkI4RkE3NjE2MTFFNUE4NEU4RkIxNjQ5MTYyRDgiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTk2QkI4Rjk3NjE2MTFFNUE4NEU4RkIxNjQ5MTYyRDgiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjU2QTEyNzk3NjkyMTFFMzkxODk4RDkwQkY4Q0U0NzYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjU2QTEyN0E3NjkyMTFFMzkxODk4RDkwQkY4Q0U0NzYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5WHowqAAAXNElEQVR42uxda4xd1XVe53XvvD2eGQ/lXQcKuDwc2eFlCAGnUn7kT6T86J/+aNTgsWPchJJYciEOCQ8hF+G0hFCIHRSEqAuJBCqRaUEIEbmBppAIBGnESwZje8COZ+y587j3PLq+ffadGJix53HvPevcuz60xPjec89ZZ+39nf04+9vLSZKEFArFzHA1BAqFEkShUIIoFEoQhUIJolAoQRQKJYhCoQRRKJQgCoUSRKFQKEEUCiWIQrFo+Gv/8/YH+f/nsMWSHHMChyhxqPTTdyncWyJ3ScD/ztipiB3wXSqu6P17avN+TyFC5ggv4tRnmoxWTP1+5F+Mz17GPvPl49EKBWd3UsfXllPiso8VcYtmPba3fNuKrBVXrGFCbrdPwXndFL49ltI367roOpSUI4pGypv9s7q+ltj6JxqOQ07Bo/DgxGb2/a8cX0CnAWXJ5etz2TqdHiXHKlKj9w6i9XX8Ic41DmI8FVHhmmXk85MmRhCzJoiTWnig9LfJRHihgydxzAxJhBr7Bh/hK3yu+p9568FliTJF2aKMZfVd/kQOcKP6OBmS9+Rjm4zJ6faoeN0gOUn61MncLX4CJ+MRhe+P/dRxhfew2Df4CF/hs4jWg8vQYUKYMuWyRRkLjeHQ8YP0Z9mekVjA8Qj3VVcuoeDiXu63lkUE0ym6FA5PXBaNVr7qtPumGyPR4Bt8hK/wWUR5chn6XJYoU5StUHL8l+XEx2axhkS6yk+chJuP4rXLyOkIKJkS0B67adcqfL/0Y4pixxSysK6V8Yl9Mz7i3272NRFlhzJsu24Z5l9E9Ahmwfrpoj7uw3fZtktsRZKjIXnndlLxin7+W8ZTBwPf6I+Tg9HwxK2Ob8citbCoBoaxBxMCvsFH+CqjHCtUvLzflKWUcpwB91gupG5f9/Rtx39ZZBtmWyJtphKzHTQW0diP36b4aJmcLj/zGaSkHJPb4SWFi/tOJd8bTqd9s48VBRh4RKeUX/vjgXg8cpyCmz05xkJylxSoa8M5RF0eJaVIIkGOsg2yTc3UgpD94psiWxEOqDNYoOIXuHnGwE5AXUTFi46FTnRw4l/dwEm7/pSxcYnCF/gE3zInh52RRJkVP7/MlKFQcgCbjifHTAQBfsb2qsgBO3e1Cpf3UXBej3nRJKKrxU/rcH/pKzz4vNIQuRJTEmZklbg6EL4SPsE3GQPzinmfhbJDGQolB+r8w58abs5y8DqRt4ABeptLRR7koY9NleybEYw/MPisvF/ayT1/SvDewcnIcG32wfiCAbEvoCZyGaGsitdyz6XdTctQJq6fcT5mloNfYvu5yFZkpEz+RT0UrFoqpxVBV+vQxIrkaPnrbqdvXs6hcjbU+Jq4Nvvwd/BFRNeq2npwWfkX95iyE9p6PM72P/MhCPANTBSKu5WITHcC074Y9CUTkYglKBgcV/aVtlM5Kpp/RHFjDdfka7MP/2wG6m72661QNigjlBXKTGBtsjWKNs5atCf44Uds3xc5YD8Wknd2BxWuGjCzIxLWQzlFj+IjU108OL7bafM5sm5DDdfka/8T+9AJXyTMpqFsUEYoK5SZ0NbjVlvX500Q4Ha2A+JuCcEvhVS8qp/8MzspHhMSfO7mVPaP35BMRp9JsCQldbX+hmvxNfnamzJfqVvtWnGZoGxQRigroYs6UbfvOGHn4ORVkTaIbEWwtqg3MNO+Zql0JGCdVuCayhDuG9uJB7vp+oR17FbZc+NauCauLWLmKkqXr6NsUEYoK6GtxwY6CXXnEs0n2faIHLCPhhR8bikFKwRN+xZddHWu5a7Ol9yCZ2ZwHKdOxufGNeKRqS/hmnLWW1VMmQSrl5oyEkqOPbZu02IJAsic9sU7B+5uF9cOmqUfeLOdOaAZYb/CA+M/Ic9NxUoYMNfD/PT84f7xB807EAnrrbgMUBZt1w1SEpCIqfjF1Om5EuQNth0iu1r8tPLP76LCpX2yWpHDk2dGH018p6brtD5hOHf04cR3okOTZ0lqPVAW3gVdlMhdrfsTW6drRhDgRrYJcbeKZQxTkenvegNt6YBQwrQvOxG+P3ZHEia9TuClS9Br1XKge8XnxLlxjelzZ/2w4tijDMxyoHIsVQg1zvYPcy7KeZx4jG2zyFakFJF7Whu1XT2QvhfJeryeVNdplYPo4Pi9hKd7VVxVC8O5cH4+N65hXgoKuGfEHmWAskjGxI49Ntu6XHOCAD9ie1PcLSepjDNY00fB8m6KpSyJx/jgg9LfJEfLK40818w+LXY5e5zKaMfKl+DcIlSCZp0cd3U59igDI4+WOa2LunvfvDoD9RrcNLqAjDy3yzfrtKqbAkggSDIZmSlYxzz9a8BaJ101zF2rh3BuSTJaCKGMDEGujHbedXch0X2ebbdEkkDC6a9cQoWVguS53P0JP5xcHY1W/tppD9KxgrdAw5QxnwPn4nOukrPeqkzBJb0m9oJltLtt3a07QYD1IkMAeS7/hw0BXMhzJwXJc/eV7kuiyIN8OOGuUhLP06JUeoxz4FxiZLRouTsDM9WO2OdBRtsIgrzHtk3kgH00JO+cTipc2S9jqyCaluf2xwcnfuB6LndHuEsSzdP4N/gtzoFzSZHRIsaQQiPmidyXgttsnW0YQYDvsh2ROGBPxkMqXjNA/qlCFsnZ8UdlX+kfk0pymlnMWH2JOBfz0sWI+C3OMS1dzPphhPVWHOPC5wdMzIUOzFFHb1lwB2ARF+ZOPt0gshWBPLe/wCRZlu6CIkSei/cE0fD4g2ZbVWceyxH5WPwGvzXrrSTJaDnG7oBoGS3qaCULggCPsv1W5IAd8tzLllJwvpx1WthMIfyg9OVotHy1WVQ4V37wsfgNfkuSZLQcW8Q4lruU/RVbRykrggDXiwwN3uQWnXTa1xMkz2W/on2lndNajpNtAGePw2/MOicBMlqs+8K7GBNbjrFgGe2iX0nUgiAvs+0S2YpgndaFPVRc3SdmVanZlfGjifOiw5PrT/oGvPpG/vDkEH4jZ70Vt86rl5rYimmdP41/s3Uzc4Isup9XNxwvz+0tyNAlONPrtO6hctR+QnluKqNt52O3pxvtClhvxTH0egtmEwbBMlrUxU21OFGtCHKYbavIATv3j90z26kIea4QZRtahfhIuT0anrjH7O3rpjNVHzPIaLG3Lh8Tj5TbRQihjlNyehxTwTLarbZOiiEIcBfbPnGhMtroChXW9JN/VqeYdyPEY4nwwPj6ZCL8C1T+T61JhDqRv8MxZgwlJG2BxzEsrBmgeEzseqt9ti6SNIIA8t6wm901eFDZ66d7M4UkQ56LVgTTvvtKaRqFqoTWymjxGb6LpUzrImYcuzaOIWKJmAptPWpaB2sd+V+yvSB1wB6s7qXgwiUyBpbJdBqFq6MjU18mKCKhRsTyEbx558/wnRmYJzLiV+DYBat6JQ/MX7B1UCxBAKHy3IQrH6W7MhY9MWkUMNAN948/8Mm35/jMDIKlpC3gmBWQtsAjifkE61b36kGQP7DdL7KrVZXnXiYpjYKZxj09Gh7f4kB4yIa/8ZmU1brIIYiYIXaJ3Nbjflv3xBME+DZbSVwIzfIIK89dJkSea18Ihu+XflD9yPztCJnW5Ri5VRntpNh8giVb5ygvBIHu9yaRrchYRO6fFU0CSTPQlDLte6zshx9O3g3D3yJajySd4EDaAsQMsRPaetxk61zty+YTCXRqjf9jO19cOLnyYV+p8QffpcreMXJ7BeRgh77Ds6SIYhGbMBgB2tld1DW0nGL4VxbZfKBbdUHdhol1dl7mOi0MOjttGgWT11lAwU9r1mMSsX0oxwSxgYyWOvKXtiAvBPkV239I7GqZdVqX9FDw2V5+UoYipn2nt/WRMK3LMQlW9poYCZ7WfcrWsdwSBNggMrRYdcLdhjas0+q28lzJOc8bOU7jWLh2AwzEyLxclYm6Z2ZuBEE+YLtTZEVA9tzPdBh5biJ3q5rGD8yRjXbNAPkcm0RuyjTUqf3NQBDge2yHJFaGeDyi4tUD5J3WIXmzs8Y9NDgG3un80OCYIDZCHxqHbJ2iZiEIGmnB8twgzYIkd7vMxiBON59GLJyBQLKMdiM1qOPXyMn2f2f7X5EDdshzkUbhAtED0oZMXCAGiIXgtAW/YXusURdr9NsoufLcgmP20zKy2ErrNSNGRuunMUAshL7zABq61q/RBPkd2yNSn57+X3ZTQZA8t7H3H5p7RwwEt6KP2DrUtAQBIIUsiwt99Kf+tydFntuocVhVRltNWyBTRlumGslopRNkhO1mkRVlLCT3jHYzqyU48WSN+1ZWRou0BZDRyp3Ju9nWnaYnCHA3216JlQWy0gKy557dJSaNQn0nKNL1VrhnwTLavbbOUKsQBBApzzVpFHqsPFdIGoW6AfeG7cMwrcv3TC0io80LQZ5me07kU3WkYqSlhYvkpFGoz8C8bO7RyGjlpi14ztaVliMIIFOeizQKbpI+WdsDGfLcWvcmsaK53b4gdUW3lENZXjxrgrzNdq/IAftohbzzOql4eV/zjUUcu96K7w33KFhGi7rxVisTBEBSxWPiiqYqz71mGfmDQuS5tSIHstHyPZnd7+XKaI+RgKSxEggySWmKaXkVaSwi5xSbRmGiSdZpxVZGy/eEexMso73R1o2WJwiwk+11kQNZrNO6oo+Cc7vz39Wy07q4l+CKfnNvQu/ndVsnSAkifcCOAXq7R8W1y9JdRvI87QvfnTRtgdPeujLavBLkv9meEPnUHS2Tf1EPFT67lOKRnE77munrsrkH/+IeydPXqAO/VoLMDMhz5T2irTzXpFHoKeRPnluV0XYX0mlduTLamIRJtKUR5CDbbSIrGPfX/eUdVFyTQ3luku6OaNIW/HmH5LQFt9k6oAQ5Ab7PNiyxkmGndUhRvTNyJM9F1wrZaM9IZbQmG63MocewxIejRIKg+DaKbEXGI3KWBtT2hUFKyonUZeEfB3xkX4vsM3wXvIx/IwmMqCu0WH/B9qLIpzG6Wp/rpWBFj/x1WnaCAb4G7LPgad0XbZmTEmTukDnti0yzgZvKcwNPtDzXyGjZR5ONFincVEbbVAR5je0hkU/lkTL5F3TZzQ2EvjysJr1hH/0LuiVPTz9ky1oJsgB8iwQsN5hplISns5Hn9hXl9eurMlr2zUzrVsQuk5m0ZUxKkIXhKNsWkQN2yHNPhzx3WbqQMRZGYCOjXWZ8FDzjtsWWsRJkEfgh2zvyOvhWnovsucu75GTPtdlo4RN8i+W+s3nHli0pQRaPIXEeVeW53V46YJciz2Uf4IvxiX0juW/9h/JQ8fJCkGfZnpE5YK9QsHIJBZcIkOdW141d3Gt8EiyjfcaWqRKk6Z84kOc6duODjmzluUZGyz4g6Q18UhltaxHkXbbtIgfsRyvknQt5bobZc6dltP3Gl0SudmW7LUslSJ1mPUbFeWVUepDnDpB3SgazRtW0BXxt+ABfhE7rypyVbCKCTLF9U2QrgjQKg3b7zskGv3eI0+XsuDZ8EJy2YJMtQyVIHfEztldFDtghz728j4LzGphGoZq2gK9ZMDuwiH3ngTJ7OG+VLY8EAeTKc9ts9lwk42zEOi2st+JrYZIA1xYso12Xx4qWV4K8xPZzka3ISCrPDVY1YJ1WtfVYZWW0ctdbPW7LTAnSQHyDJCoykEYhTNdpuUsK6YDZqQ85cG5cw6y3CsWmLYBXG/NayfJMkI8oVR/KG7AfC8k7u4MKVw2kM1r1eB2RpDNXuAauJVhGe6stKyVIBrid7YA4r6o5N5BG4cxOI3mtaeWtymj53LiG4FwmKJs78lzB8k4QVIsN4ryqynN7AzP1ShXIc2tYg3GuSpJO6/aKltHK3KWmhQgCPMm2R+SAfTSkANlzV9Rw2rc6MDcyWtHZaPfYsiElSPaQOYVYiSnxiIprB8kpeGn+v8U2mZD8FjxzTpybKjqtqwQ5Od5g2yGyq4Xsued3UeHSvsW3IlUZLZ8L5xSctmCHLRMliCBgN/AJcV7F6SpbjBe8gUWkUaimLeBzmOUsU2JltOMkcbd+JQiNkYB8ErNVbPe0Nmq72i4kXMiwNUnfe+AcOJfgfCWbbVkoQQTiR2xvivPKynODNX0ULF9AGoVq2gL+Lc4hWEaL2N/XTBWq2Qgic3BYled2+ekeVfOV51az0WKNF59DsIx2XbNVpmYkyPNsuyWSBBJYf+USKsxHnlvNRsu/8WXLaHfb2CtBcoD1Ir2CPJf/wxSt2xmkupGT9c6QtoCPNdO66FfJldGub8aK1KwEeY9tm8gB+2hI3jmdVLii/+RbBdktfHAsfpPIfSm4zcZcCZIjfJftiMQBO1IQQBrrn3qCRYZ20SOOMTLacbHrrRDjW5q1EjUzQbiTTzeIbEUgz+232XNne59RfX+CbLT9omW0iHFFCZJPPMr2W5EDdshzL1tKwfkzrNOqrrfi73CMYBntKzbGpATJL64X6RXWZRVtxlnP+VgaBZO2wEu/wzGatkAJUk+8zLZLZCuCdVoXciux+rhVuXYVMD7Dd7Hc9Va7bGyVIE0Amf3kaXnuIHm9qTwXhr/xmWAZbUXk+E4JsmAcZtsqcsAOee6Z7VS08lwY/sZngmW0W21MlSBNhLvY9onzCqtIxipUuKqf3L6iMfyNz4RO6+6zsWwJ+NRawNvep8S1IhMxucie+8VT0o+6PIqPiB17rG+lCtNqBPkl2wts14gbsCONwqVLzT8Fr7d6wcawZeBS60Hm1GSSTu+a6d5EY6cEyQ5/YLtf4oCd4iQ1ma3H/TZ2SpAWwLfZSqSYK0o2ZqQEaQ1AN32T1vs54yYbMyVIC+GBVuwyLLBL+kCr3rzb4oV/vdZ/jZESZHb8iqS9F5GFp2yMlCAtjCENgcZGCTI79rPdqWH4FO60sVGCKOh7bIc0DNM4ZGNCShAFEFKOsyDVARttTJQgGoJpPMb2Gw2DicFjGgYlyExYpyHQGChBZsfv2B5p4ft/xMZAoQSZFZso3TKo1VC2965QgpwQI2w3t+B932zvXaEEOSnuZtvbQve7196zQgkyZ6zXe1UoQWbH02zPtcB9PmfvVaEEmTeG9B6VIIrZ8RbbvU18f/fae1QoQRYMJKU81oT3dYwkJj1VguQOk9REaY2Pw4323hRKkEVjJ9vrTXQ/r9t7UihBaobr9V6UIIrZ8Wu2J5rgPp6w96JQgtQcG2jmhGl5QWzvQaEEqQsOst2WY/9vs/egUILUtZIN59Dv4ZyTWwmSEyDnUx7luRtJar4qJUjT4RdsL+bI3xetzwolSMOwTn1Vgihmx2tsD+XAz4esrwolSMPxLZK9XGPS+qhQgmSCo2xbBPu3xfqoUIJkhh+yvSPQr3esbwolSOYYUp+UIIrZ8SzbM4L8ecb6pFCC6BNbWw8lSB7wLtt2AX5st74olCDikPWskfRZNSVIi2OKst2+c5P1QaEEEYuH2V7N4Lqv2msrlCDisa5FrqkEUSwIL7E93sDrPW6vqVCC5AaN0l/kVZ+iBGlxfMR2awOuc6u9lkIJkjvcwXagjuc/YK+hUILkEgnVdxeRDfYaCiVIbvEk2546nHePPbdCCZJ7rMvJORVKkEzwBtuOGp5vhz2nQgnSNMBu6uM1OM84Nedu80qQFscY1SYfx2Z7LoUSpOlwH9ubi/j9m/YcCiWIDth1YK4EaUU8z7Z7Ab/bbX+rUII0PdY36DcKJUgu8R7btnkcv83+RqEEaRncwnZkDscdsccqlCAthQrbDXM47gZ7rEIJ0nJ4lO2VE3z/ij1GoQRpWaxb4HcKJUhL4GW2XTN8vst+p1CCtDw+Oc6Y6/hEoQRpCRxm23rcv7fazxRKEIXFXZRuwBDZvxUC4GsIREHflguDkyQqaVYotIulUChBFAoliEKhBFEolCAKhRJEoVCCKBRKEIVCCaJQKJQgCoUSRKFQgigUShCFIhP8vwADACog5YM65zugAAAAAElFTkSuQmCC" />)</a>
-                </div>
-                <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Decode video stream in a Next.js
-                Application from a USB-connected or built-in camera (mobile or desktop)." class="button title"
-                     href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.42/1.hello-world/7.read-video-nextjs">
-                    Hello World in
-                    Next.js (<svg width="30px" height="17px" viewBox="0 0 207 124" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Black-Next.js" transform="translate(-247.000000, -138.000000)" fill="#000000" fill-rule="nonzero"><g id="next-black" transform="translate(247.000000, 138.000000)"><g id="EXT-+-Type-something"><path d="M48.9421964,32.6320058 L87.9011585,32.6320058 L87.9011585,35.7136421 L52.5134345,35.7136421 L52.5134345,58.9070103 L85.7908813,58.9070103 L85.7908813,61.9886466 L52.5134345,61.9886466 L52.5134345,87.4526941 L88.306981,87.4526941 L88.306981,90.5343303 L48.9421964,90.5343303 L48.9421964,32.6320058 Z M91.3912326,32.6320058 L95.5306221,32.6320058 L113.8738,58.0960534 L132.622801,32.6320058 L158.124498,0.286809811 L116.22757,60.7722112 L137.817329,90.5343303 L133.51561,90.5343303 L113.8738,63.4483691 L94.1508254,90.5343303 L89.9302715,90.5343303 L111.682358,60.7722112 L91.3912326,32.6320058 Z M139.359455,35.713642 L139.359455,32.6320058 L183.756439,32.6320058 L183.756439,35.7136421 L163.302983,35.7136421 L163.302983,90.5343303 L159.731745,90.5343303 L159.731745,35.7136421 L139.359455,35.713642 Z" id="EXT"></path><polygon id="Type-something" points="0.202923647 32.6320058 4.66697141 32.6320058 66.2235778 124.303087 40.785176 90.5343303 3.93649086 37.0111732 3.77416185 90.5343303 0.202923647 90.5343303"></polygon></g><path d="M183.396622,86.5227221 C184.134938,86.5227221 184.673474,85.9601075 184.673474,85.233037 C184.673474,84.5059658 184.134938,83.9433513 183.396622,83.9433513 C182.666993,83.9433513 182.11977,84.5059658 182.11977,85.233037 C182.11977,85.9601075 182.666993,86.5227221 183.396622,86.5227221 Z M186.905793,83.1297235 C186.905793,85.2763149 188.460599,86.678523 190.727662,86.678523 C193.142388,86.678523 194.601647,85.233037 194.601647,82.7229099 L194.601647,73.8855335 L192.655968,73.8855335 L192.655968,82.7142542 C192.655968,84.1078073 191.952397,84.8521899 190.710289,84.8521899 C189.598473,84.8521899 188.842785,84.1597409 188.816727,83.1297235 L186.905793,83.1297235 Z M197.146664,83.0172011 C197.285642,85.2503478 199.153145,86.678523 201.932686,86.678523 C204.903321,86.678523 206.762139,85.1811034 206.762139,82.792155 C206.762139,80.9138876 205.702439,79.8752151 203.131364,79.2779777 L201.750279,78.9404092 C200.117298,78.5595622 199.457158,78.0488813 199.457158,77.1573541 C199.457158,76.0321243 200.482113,75.296398 202.019547,75.296398 C203.478806,75.296398 204.48639,76.0148135 204.668797,77.1660091 L206.562359,77.1660091 C206.44944,75.0626962 204.590622,73.5825873 202.045605,73.5825873 C199.309495,73.5825873 197.48542,75.0626962 197.48542,77.2871878 C197.48542,79.1221767 198.519063,80.2127835 200.786126,80.7407758 L202.401734,81.1302779 C204.060773,81.5197807 204.790402,82.091051 204.790402,83.0431676 C204.790402,84.1510859 203.643842,84.9560573 202.08035,84.9560573 C200.403939,84.9560573 199.240006,84.2030196 199.074971,83.0172011 L197.146664,83.0172011 Z" id=".JS"></path></g></g></g></svg>)</a>
-                </div>
-                <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Decode video stream in a NuxtJS
-                Application from a USB-connected or built-in camera (mobile or desktop)." class="button title"
-                     href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.40/1.hello-world/8.read-video-nuxtjs">
-                    Hello World in
-                    NuxtJS (<svg width="20px" height="17px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill-rule="nonzero" transform="translate(0 50)" fill="none"><path d="M227.92099 83.45116l-13.6889 24.10141-46.8148-82.44693L23.7037 278.17052h97.3037c0 13.31084 10.61252 24.10142 23.70371 24.10142H23.70371c-8.46771 0-16.29145-4.59601-20.5246-12.05272-4.23315-7.4567-4.23272-16.64312.00114-24.0994L146.89383 13.05492c4.23415-7.45738 12.0596-12.05138 20.5284-12.05138 8.46878 0 16.29423 4.594 20.52839 12.05138l39.97037 70.39623z" fill="#00C58E"/><path d="M331.6642 266.11981l-90.05432-158.56724-13.6889-24.10141-13.68888 24.10141-90.04445 158.56724c-4.23385 7.45629-4.23428 16.64271-.00113 24.09941 4.23314 7.4567 12.05689 12.05272 20.5246 12.05272h166.4c8.46946 0 16.29644-4.591 20.532-12.04837 4.23555-7.45736 4.23606-16.64592.00132-24.10376h.01976zM144.7111 278.17052L227.921 131.65399l83.19012 146.51653h-166.4z" fill="#2F495E"/><path d="M396.04938 290.22123c-4.23344 7.45557-12.05656 12.0507-20.52345 12.0507H311.1111c13.0912 0 23.7037-10.79057 23.7037-24.10141h40.66173L260.09877 74.98553l-18.4889 32.56704L227.921 83.45116l11.65432-20.51634c4.23416-7.45738 12.0596-12.05138 20.5284-12.05138 8.46879 0 16.29423 4.594 20.52839 12.05138l115.41728 203.185c4.23426 7.457 4.23426 16.6444 0 24.1014z" fill="#108775"/></g></svg>)</a>
-                </div>
-                <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Decode video stream in a Electron
-                Application from a USB-connected or built-in camera (desktop only)." class="button title"
-                     href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.42/1.hello-world/9.read-video-electron">
-                    Hello World in
-                    Electron (<img alt="Electron logo"
-                            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAABmJLR0QA/wD/AP+gvaeTAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE5LTAzLTMxVDIzOjUxOjI3KzAwOjAwzwUHXwAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOS0wMy0zMVQyMzo1MToyNyswMDowML5Yv+MAAANzSURBVDhPdZRtTFtlFMd/vbe0aymUQh1gmakjE4GhLkt0i1OBbUxXkYFbzAzGaNTEMP1gMrfMTDGonzf3kmX4zbcP7sXBkL2AG27OGESNcYVukGVAHUIUWgT6Xs9zByEz8dzcPDfPec7/+Z9z/uea0mL8x46faKej8xx+f4BQKIzTmU1ZaQm+zTU821A7f2rR7gC5cPES2xtfQ9c07HYbpFJY7XZis7OkNZ1ZWZOy98WnR6muemw+CrT5lYOHW6mrbyTXlYNLXl32VtZs4uHntlPy+BOQiBv7yr+loZEDh1pvB4oZTBQDBbBsmYdkPE46lVQuHG43q7bUk4hEuPFTL7f6/Wi6GT0jg5GRIKdOfk5V5brbIAWeUrnFKbRnKN+4CZfHw1/Dw/R3d5GIRVnicFDz1k6unj2D3eWi/9suLJlZTE1OcSvYj17xwOrms+e60SXXuvdbGOju5vql75gMjlK2fgMPPl0roEXc7OsTciamJyaobnpDznWh+Hq996BnZuU1j46MUvzIGoZ/6WMsMEB2fj7rd7zJ4JXv+f1MJ+OD1w1QBfhbZ4dgmbDY7ETCYWKxOJpqo9VqZWJokIL77sezsoLVDVs51fwufw/fJJVMYha/ZjYb9TLJk+e91wC1WC34+wNo4elpKZbOzOQk0Zl/8FRU0HVgP/acHCNwV89lEtEoiBKUGDJsNhy5ucTm5tBECuGwxGdnZ4kzTSqRYOmKFaTkNgWq9tTNfcePGW1U9VBdW1pcTM/RI5KOzTij4rWyshKikShur1dq8jO/trdR3/KhkYICuXDkkPEtVNCF2VggYDBLxGLExa/iNd9TNUyHQixfs1ZEVWkcPrb7bR6qfYZ1L70slHWDejqZEr3FjRo9uXMX5Rs2Ep4KGaNg6MR913Ie3baNovJyzu/fh7OwEEeem7EBP2tfeFHSUKnJzcIgU3Riczq50dvLj21tTIwPLSj2Mj7fVjyFBVhkVqIzM/h27+Hr9/ZitlgkOMKqunqGfrgirGSOhFVwbJyOjq8WFavqdvDwJ+x5p4WioruNTqjCVb7eRKDnIqVV1XR9vM+ogxqH0eAffPTBXnY0vaJCF0GUKUbPN75qtM62xEpaOpYvHfvz2jVMGRbmZIbUFH/5WavBYMHuAFmwEyfbOf3NefxXB5iS4uXIXP3//wT+Bb4xmi8orIo3AAAAAElFTkSuQmCC">)</a>
-                </div>
-                <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Decode video stream in a progressive web application from a USB-connected or built-in camera (mobile or desktop)." class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.42/1.hello-world/10.read-video-pwa">Hello World in PWA</a>
-                </div>
-                <!-- <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Decode video stream from a USB-connected or built-in camera (mobile or desktop) in a web application that uses RequireJS." class="button title" href="helloworld-requirejs.html">Hello World with RequireJS</a>
-                </div> -->
-        </div>
-        <div class="file">Customize Camera UI</div>
-        <div class="children">
-            <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Show the default camera UI to decode video stream from a USB-connected or built-in camera (mobile or desktop)." class="button title"
-                     href="ui-customization.html#default-gui">Use the Default Camera
-                    UI</a></div>
-            <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Hide built-in UI elements (camera
-                selection, resolution selection, etc.) and show only the video stream." class="button title"
-                     href="ui-customization.html#hide-built-in-controllers">Hide
-                    Built-in
-                    Controllers</a></div>
-            <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down"
-                    aria-label="Use custom controllers to manipulate the Camera UI." class="button title"
-                     href="ui-customization.html#use-external-controllers">Use
-                    External
-                    Controllers</a></div>
-            <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Enlarge the video stream temporarily
-                to read a barcode." class="button title" href="ui-customization.html#enlarge-the-video-stream">Enlarge
-                    the
-                    Video Stream</a></div>
-        </div>
-        <div class="file">Parameter Settings</div>
-        <div class="children">
-            <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Set the barcode formats and control
-                the number of barcodes to read per image/frame." class="button title"
-                     href="parameter-settings.html#specify-the-barcode-types-and-number-of-barcodes-per-image">Formats and
-                    Count</a></div>
-            <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down"
-                    aria-label="Set how localization and binarization are done during barcode decoding."
-                    class="button title"  href="parameter-settings.html#set-localization-and-binarization-modes">Localization
-                    and
-                    Binarization</a></div>
-            <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down"
-                    aria-label="Set DeblurModes and ScaleUpModes for decoding blurry or small barcodes."
-                    class="button title"  href="parameter-settings.html#set-deblur-modes-and-scale-up-modes">Deblur Modes and Scale-up Modes</a></div>
-            <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down"
-                    aria-label="Set DeformationResistingModes or BarcodeComplementModes for decoding deformed or incomplete barcodes."
-                    class="button title"  href="parameter-settings.html#deformation-resisting-modes-and-barcode-complement-modes">Deformation Resisting and Barcode Complementing</a></div>
-            <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down"
-                    aria-label="Set the region of interest manually or regionPredetectionModes to speed up the reading process."
-                    class="button title"  href="parameter-settings.html#define-or-detect-the-region-of-interest">Define or Detect the Region of Interest</a></div>
-        </div>
-        <div class="file">Use Case</div>
-        <div class="children">
-            <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="up"
-                    aria-label="Read barcodes to fill a form." class="button title"
-                     href="use-cases.html#read-barcodes-and-fill-form-fields">Read Video and
-                    Fill a
-                    Form</a></div>
-            <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="up" aria-label="Read the PDF417 barcode on a driver's
-                license (AAMVA compliant) and parse it." class="button title"
-                     href="use-cases.html#read-the-pdf417-barcode-on-the-drivers-license">Read a
-                    Driver's License</a></div>
-        </div>
-        <!--<div class="file">Performance</div>-->
-        <div class="file">Others</div>
-        <div class="children">
-            <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="up"
-                    aria-label="Collect
-                        image frames which failed to be read for debugging purposes." class="button title" href="debug.html">Collect
-                        Images for Debugging</a>
-            </div>
-        </div>
-    </div>
-    <div class="children">
-        <div class="file"><a href="https://demo.dynamsoft.com/barcode-reader-js/" target="_blank">Official online Demo</a></div>
-    </div>
-
-</div>
-<style>
-:root{--balloon-border-radius: 2px; --balloon-color: rgba(16, 16, 16, 0.95); --balloon-text-color: #fff; --balloon-font-size: 12px; --balloon-move: 4px}button[aria-label][data-balloon-pos]{overflow:visible}[aria-label][data-balloon-pos]{position:relative; cursor:pointer}[aria-label][data-balloon-pos]:after{opacity:0; pointer-events:none; transition:all 0.18s ease-out 0.18s; text-indent:0; font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-weight:normal; font-style:normal; text-shadow:none; font-size:var(--balloon-font-size); background:var(--balloon-color); border-radius:2px; color:var(--balloon-text-color); border-radius:var(--balloon-border-radius); content:attr(aria-label); padding:.5em 1em; position:absolute; white-space:nowrap; z-index:10}[aria-label][data-balloon-pos]:before{width:0; height:0; border:5px solid transparent; border-top-color:var(--balloon-color); opacity:0; pointer-events:none; transition:all 0.18s ease-out 0.18s; content:""; position:absolute; z-index:10}[aria-label][data-balloon-pos]:hover:before, [aria-label][data-balloon-pos]:hover:after, [aria-label][data-balloon-pos][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-visible]:after, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:before, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:after{opacity:1; pointer-events:none}[aria-label][data-balloon-pos].font-awesome:after{font-family: FontAwesome, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif}[aria-label][data-balloon-pos][data-balloon-break]:after{white-space:pre}[aria-label][data-balloon-pos][data-balloon-break][data-balloon-length]:after{white-space:pre-line; word-break:break-word}[aria-label][data-balloon-pos][data-balloon-blunt]:before, [aria-label][data-balloon-pos][data-balloon-blunt]:after{transition:none}[aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:after{transform:translate(-50%, 0)}[aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:before{transform:translate(-50%, 0)}[aria-label][data-balloon-pos][data-balloon-pos*="-left"]:after{left:0}[aria-label][data-balloon-pos][data-balloon-pos*="-left"]:before{left:5px}[aria-label][data-balloon-pos][data-balloon-pos*="-right"]:after{right:0}[aria-label][data-balloon-pos][data-balloon-pos*="-right"]:before{right:5px}[aria-label][data-balloon-pos][data-balloon-po*="-left"]:hover:after, [aria-label][data-balloon-pos][data-balloon-po*="-left"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:after{transform:translate(0, 0)}[aria-label][data-balloon-pos][data-balloon-po*="-left"]:hover:before, [aria-label][data-balloon-pos][data-balloon-po*="-left"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:before{transform:translate(0, 0)}[aria-label][data-balloon-pos][data-balloon-pos^="up"]:before, [aria-label][data-balloon-pos][data-balloon-pos^="up"]:after{bottom:100%; transform-origin:top; transform:translate(0, var(--balloon-move))}[aria-label][data-balloon-pos][data-balloon-pos^="up"]:after{margin-bottom:10px}[aria-label][data-balloon-pos][data-balloon-pos="up"]:before, [aria-label][data-balloon-pos][data-balloon-pos="up"]:after{left:50%; transform:translate(-50%, var(--balloon-move))}[aria-label][data-balloon-pos][data-balloon-pos^="down"]:before, [aria-label][data-balloon-pos][data-balloon-pos^="down"]:after{top:100%; transform:translate(0, calc(var(--balloon-move) * -1))}[aria-label][data-balloon-pos][data-balloon-pos^="down"]:after{margin-top:10px}[aria-label][data-balloon-pos][data-balloon-pos^="down"]:before{width:0; height:0; border:5px solid transparent; border-bottom-color:var(--balloon-color)}[aria-label][data-balloon-pos][data-balloon-pos="down"]:after, [aria-label][data-balloon-pos][data-balloon-pos="down"]:before{left:50%; transform:translate(-50%, calc(var(--balloon-move) * -1))}[aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:after{transform:translate(0, -50%)}[aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:before{transform:translate(0, -50%)}[aria-label][data-balloon-pos][data-balloon-pos="left"]:after, [aria-label][data-balloon-pos][data-balloon-pos="left"]:before{right:100%; top:50%; transform:translate(var(--balloon-move), -50%)}[aria-label][data-balloon-pos][data-balloon-pos="left"]:after{margin-right:10px}[aria-label][data-balloon-pos][data-balloon-pos="left"]:before{width:0; height:0; border:5px solid transparent; border-left-color:var(--balloon-color)}[aria-label][data-balloon-pos][data-balloon-pos="right"]:after, [aria-label][data-balloon-pos][data-balloon-pos="right"]:before{left:100%; top:50%; transform:translate(calc(var(--balloon-move) * -1), -50%)}[aria-label][data-balloon-pos][data-balloon-pos="right"]:after{margin-left:10px}[aria-label][data-balloon-pos][data-balloon-pos="right"]:before{width:0; height:0; border:5px solid transparent; border-right-color:var(--balloon-color)}[aria-label][data-balloon-pos][data-balloon-length]:after{white-space:normal}[aria-label][data-balloon-pos][data-balloon-length="small"]:after{width:80px}[aria-label][data-balloon-pos][data-balloon-length="medium"]:after{width:150px}[aria-label][data-balloon-pos][data-balloon-length="large"]:after{width:260px}[aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after{width:380px}@media screen and (max-width: 768px){[aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after{width:90vw}}[aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after{width:100%}    
-.filetree {
-    font-family: "Open Sans", sans-serif;
-    text-align: left;
-    border-radius: 4px;
-    margin: 0 auto;
-    max-width: 800px;
-    padding: 16px 32px;
-}
-.filetree .ds-logo {
-    height: 3vh;
-    background: url(logo-dynamsoft-black.svg) no-repeat 0;
-}
-.filetree h3 {
-    margin: 1vh auto;
-}
-.filetree .description {
-    border: dashed 1px gray;
-    padding: 1vmin;
-}
-.filetree .file a {
-    z-index: auto;
-}
-.filetree .file {
-    display: block;
-    font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
-    letter-spacing: 0.3px;
-    line-height: 32px;
-    color: #333;
-}
-.filetree .children {
-    padding-left: 24px;
-    position: relative;
-}
-.filetree .children .file {
-    position: relative;
-}
-.filetree .children .file a {
-    z-index: auto;
-}
-.filetree .children .file::before {
-    content: '';
-    left: -18px;
-    bottom: 16px;
-    width: 16px;
-    height: 20px;
-    position: absolute;
-    border-width: 0 0 1px 1px;
-    border-style: solid;
-    border-color: #dbdbdb;
-    border-radius: 0 0 0 3px;
-}
-.filetree [aria-label] {
-    line-height: 15px;
-}
-.filetree .title img, .filetree .title svg {
-    height: 17px;
-    vertical-align: middle;
-}
-.filetree .tooltipIcon {
-    display: inline-block; 
-    width: 17px; 
-    height: 17px;
-    vertical-align: middle;
-    background: url(data:image/png; base64, iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAg5JREFUOBGVkktrE2EUhjuTSUJwExCColSwFAIFaZFSwaZ0abx110rugf4Ef0Drr3AxaTKJZNFSNwYDJbgxblQQN22xFFpF0J07Dbn1OaFnGMciZOCb833vec/9GBMXfNlstmCa5n3DMBKoDznx4XDYBmuUy2XHb2J4gWKxuAB5h2Nj0EbuVyqVH4VC4UogEJjpdruL4Nl+v/+kVqt9VFvXSSqVuhEKhXYty3pg2/ZPJfhlJpO5isPXBFipVqtfXb1kkM/nXc+u4j8X+J84t4ViyU9KCAaD83L3ful0+jqZvaQ3S5T1x6vD5iH4W7CbxnkTJx3HeeYl6V3KrNfrp/r2Snq1wfvYkikMBoPnXqXcISSIttTr9f6ZhnKl+diumzJGGrWvCpXgQQiXKPOFYn5JgAMCLZooDmWMfgL78CYajW6C3/Hr9M10vhPsSJzEZQ9UMY7M5XLXyGTa5NeWRRrHWLlMboZMZJPNhmyiKsaRbO5d+vJqtLEszREZLUuNXifJZDIci8VanU5nLRKJBOjTN9VTyiQJ7NHPuPRkgscKabWUoLLZbHbQPQ2Hww6TshUXCd4Ceyz3USZywfNlHH0go3tk9EWwiz6GEAff49wii1/CcZ3Ig7KmEFuc9zj7TLQ2zftN3RGwBJFnCTQHViyVSqdgo+8vJwoS7RFOVnlPYbSAfMc5wck2WTaUp/IMAjTZicjWFTcAAAAASUVORK5CYII=) right center no-repeat; 
-    background-size: 100%; 
-    margin-left: 5px; 
-}
-</style>
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
----
-
-<div class="filetree">
-    <div class="ds-logo"></div>
-    <div class="file">
-        <h3>Other Samples - DBR JavaScript Edition</h3>
-    </div>
-    <div class="children">
-        <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="up"
-                aria-label="Collect
-                    image frames which failed to be read for debugging purposes." class="button title" href="debug.html">Collect
-                    Images for Debugging</a>
-        </div>
-    </div>
-</div>
-<style>
-:root{--balloon-border-radius: 2px; --balloon-color: rgba(16, 16, 16, 0.95); --balloon-text-color: #fff; --balloon-font-size: 12px; --balloon-move: 4px}button[aria-label][data-balloon-pos]{overflow:visible}[aria-label][data-balloon-pos]{position:relative; cursor:pointer}[aria-label][data-balloon-pos]:after{opacity:0; pointer-events:none; transition:all 0.18s ease-out 0.18s; text-indent:0; font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-weight:normal; font-style:normal; text-shadow:none; font-size:var(--balloon-font-size); background:var(--balloon-color); border-radius:2px; color:var(--balloon-text-color); border-radius:var(--balloon-border-radius); content:attr(aria-label); padding:.5em 1em; position:absolute; white-space:nowrap; z-index:10}[aria-label][data-balloon-pos]:before{width:0; height:0; border:5px solid transparent; border-top-color:var(--balloon-color); opacity:0; pointer-events:none; transition:all 0.18s ease-out 0.18s; content:""; position:absolute; z-index:10}[aria-label][data-balloon-pos]:hover:before, [aria-label][data-balloon-pos]:hover:after, [aria-label][data-balloon-pos][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-visible]:after, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:before, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:after{opacity:1; pointer-events:none}[aria-label][data-balloon-pos].font-awesome:after{font-family: FontAwesome, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif}[aria-label][data-balloon-pos][data-balloon-break]:after{white-space:pre}[aria-label][data-balloon-pos][data-balloon-break][data-balloon-length]:after{white-space:pre-line; word-break:break-word}[aria-label][data-balloon-pos][data-balloon-blunt]:before, [aria-label][data-balloon-pos][data-balloon-blunt]:after{transition:none}[aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:after{transform:translate(-50%, 0)}[aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:before{transform:translate(-50%, 0)}[aria-label][data-balloon-pos][data-balloon-pos*="-left"]:after{left:0}[aria-label][data-balloon-pos][data-balloon-pos*="-left"]:before{left:5px}[aria-label][data-balloon-pos][data-balloon-pos*="-right"]:after{right:0}[aria-label][data-balloon-pos][data-balloon-pos*="-right"]:before{right:5px}[aria-label][data-balloon-pos][data-balloon-po*="-left"]:hover:after, [aria-label][data-balloon-pos][data-balloon-po*="-left"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:after{transform:translate(0, 0)}[aria-label][data-balloon-pos][data-balloon-po*="-left"]:hover:before, [aria-label][data-balloon-pos][data-balloon-po*="-left"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:before{transform:translate(0, 0)}[aria-label][data-balloon-pos][data-balloon-pos^="up"]:before, [aria-label][data-balloon-pos][data-balloon-pos^="up"]:after{bottom:100%; transform-origin:top; transform:translate(0, var(--balloon-move))}[aria-label][data-balloon-pos][data-balloon-pos^="up"]:after{margin-bottom:10px}[aria-label][data-balloon-pos][data-balloon-pos="up"]:before, [aria-label][data-balloon-pos][data-balloon-pos="up"]:after{left:50%; transform:translate(-50%, var(--balloon-move))}[aria-label][data-balloon-pos][data-balloon-pos^="down"]:before, [aria-label][data-balloon-pos][data-balloon-pos^="down"]:after{top:100%; transform:translate(0, calc(var(--balloon-move) * -1))}[aria-label][data-balloon-pos][data-balloon-pos^="down"]:after{margin-top:10px}[aria-label][data-balloon-pos][data-balloon-pos^="down"]:before{width:0; height:0; border:5px solid transparent; border-bottom-color:var(--balloon-color)}[aria-label][data-balloon-pos][data-balloon-pos="down"]:after, [aria-label][data-balloon-pos][data-balloon-pos="down"]:before{left:50%; transform:translate(-50%, calc(var(--balloon-move) * -1))}[aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:after{transform:translate(0, -50%)}[aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:before{transform:translate(0, -50%)}[aria-label][data-balloon-pos][data-balloon-pos="left"]:after, [aria-label][data-balloon-pos][data-balloon-pos="left"]:before{right:100%; top:50%; transform:translate(var(--balloon-move), -50%)}[aria-label][data-balloon-pos][data-balloon-pos="left"]:after{margin-right:10px}[aria-label][data-balloon-pos][data-balloon-pos="left"]:before{width:0; height:0; border:5px solid transparent; border-left-color:var(--balloon-color)}[aria-label][data-balloon-pos][data-balloon-pos="right"]:after, [aria-label][data-balloon-pos][data-balloon-pos="right"]:before{left:100%; top:50%; transform:translate(calc(var(--balloon-move) * -1), -50%)}[aria-label][data-balloon-pos][data-balloon-pos="right"]:after{margin-left:10px}[aria-label][data-balloon-pos][data-balloon-pos="right"]:before{width:0; height:0; border:5px solid transparent; border-right-color:var(--balloon-color)}[aria-label][data-balloon-pos][data-balloon-length]:after{white-space:normal}[aria-label][data-balloon-pos][data-balloon-length="small"]:after{width:80px}[aria-label][data-balloon-pos][data-balloon-length="medium"]:after{width:150px}[aria-label][data-balloon-pos][data-balloon-length="large"]:after{width:260px}[aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after{width:380px}@media screen and (max-width: 768px){[aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after{width:90vw}}[aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after{width:100%}    
-.filetree {
-    font-family: "Open Sans", sans-serif;
-    text-align: left;
-    border-radius: 4px;
-    margin: 0 auto;
-    max-width: 800px;
-    padding: 16px 32px;
-}
-.filetree .ds-logo {
-    height: 3vh;
-    background: url(logo-dynamsoft-black.svg) no-repeat 0;
-}
-.filetree h3 {
-    margin: 1vh auto;
-}
-.filetree .description {
-    border: dashed 1px gray;
-    padding: 1vmin;
-}
-.filetree .file a {
-    z-index: auto;
-}
-.filetree .file {
-    display: block;
-    font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
-    letter-spacing: 0.3px;
-    line-height: 32px;
-    color: #333;
-}
-.filetree .children {
-    padding-left: 24px;
-    position: relative;
-}
-.filetree .children .file {
-    position: relative;
-}
-.filetree .children .file a {
-    z-index: auto;
-}
-.filetree .children .file::before {
-    content: '';
-    left: -18px;
-    bottom: 16px;
-    width: 16px;
-    height: 20px;
-    position: absolute;
-    border-width: 0 0 1px 1px;
-    border-style: solid;
-    border-color: #dbdbdb;
-    border-radius: 0 0 0 3px;
-}
-.filetree [aria-label] {
-    line-height: 15px;
-}
-.filetree .title img, .filetree .title svg {
-    height: 17px;
-    vertical-align: middle;
-}
-.filetree .tooltipIcon {
-    display: inline-block; 
-    width: 17px; 
-    height: 17px;
-    vertical-align: middle;
-    background: url(data:image/png; base64, iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAg5JREFUOBGVkktrE2EUhjuTSUJwExCColSwFAIFaZFSwaZ0abx110rugf4Ef0Drr3AxaTKJZNFSNwYDJbgxblQQN22xFFpF0J07Dbn1OaFnGMciZOCb833vec/9GBMXfNlstmCa5n3DMBKoDznx4XDYBmuUy2XHb2J4gWKxuAB5h2Nj0EbuVyqVH4VC4UogEJjpdruL4Nl+v/+kVqt9VFvXSSqVuhEKhXYty3pg2/ZPJfhlJpO5isPXBFipVqtfXb1kkM/nXc+u4j8X+J84t4ViyU9KCAaD83L3ful0+jqZvaQ3S5T1x6vD5iH4W7CbxnkTJx3HeeYl6V3KrNfrp/r2Snq1wfvYkikMBoPnXqXcISSIttTr9f6ZhnKl+diumzJGGrWvCpXgQQiXKPOFYn5JgAMCLZooDmWMfgL78CYajW6C3/Hr9M10vhPsSJzEZQ9UMY7M5XLXyGTa5NeWRRrHWLlMboZMZJPNhmyiKsaRbO5d+vJqtLEszREZLUuNXifJZDIci8VanU5nLRKJBOjTN9VTyiQJ7NHPuPRkgscKabWUoLLZbHbQPQ2Hww6TshUXCd4Ceyz3USZywfNlHH0go3tk9EWwiz6GEAff49wii1/CcZ3Ig7KmEFuc9zj7TLQ2zftN3RGwBJFnCTQHViyVSqdgo+8vJwoS7RFOVnlPYbSAfMc5wck2WTaUp/IMAjTZicjWFTcAAAAASUVORK5CYII=) right center no-repeat; 
-    background-size: 100%; 
-    margin-left: 5px; 
-}
-</style>
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.
-
-* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/9.x/3.settings/1.barcodeFormats-expectedBarcodes.html">Specify Barcode Types and Count - Source Code</a>
-
-## 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.
-
-* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/9.x/3.settings/2.localizationModes-binarizationModes.html">Localization and Binarization - Source Code</a>
-
-## 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.
-
-* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/9.x/3.settings/2.localizationModes-binarizationModes.html">Deblur Modes and Scale-Up Modes - Source Code</a>
-
-## 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.
-
-* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/9.x/3.settings/4.deformed-incomplete-barcodes.html">Deformation-Resisting Modes and Barcode-Complement Modes - Source Code</a>
-
-## 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.
-
-* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/9.x/3.settings/5.regionOfInterest-regionPredetection.html">Define or Detect the Region of Interest - Source Code</a>
-
-## 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.
-
-* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/9.x/3.settings/6.dense-barcodes.html">Dealing with Dense Barcodes - Source Code</a>
-
-## 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.
-
-* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/9.x/2.ui-tweaking/1.read-video-show-result.html">Use the Default Camera UI - Source Code</a>
-
-**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
-<div id="UIElement">
-    <span id='lib-load' style='font-size:x-large' hidden>Loading Library...</span>
-    <div id="div-ui-container" style="width:100%;height:100%;">
-        <div class="dce-video-container" style="position:relative;width:100%;height:100%;"></div>
-    </div>
-</div>
-```
-
-```javascript
-await scanner.setUIElement(document.getElementById('div-ui-container'));
-```
-
-Official sample:
-
-* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/9.x/2.ui-tweaking/2.read-video-no-extra-control.html">Hide Built-in Controllers - Source Code</a>
-
-## 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
-<select id="cameraList"></select>
-```
-
-```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:
-
-* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/9.x/2.ui-tweaking/3.read-video-with-external-control.html">Use External Controllers - Source Code</a>
-
-## 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:
-
-* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/9.x/2.ui-tweaking/4.difference-video-size.html">Enlarge the Video Stream - Source Code</a>
-
-## 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:
-
-* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/9.x/2.ui-tweaking/5.read-video-with-custom-default-ui.html">Customize the Default Ui - Source Code</a>
-
-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
-<input id="input-to-fill" type="text" readonly="true" placeholder="Barcode Result">
-```
-
-```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.
-
-* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/9.x/4.use-case/1.fill-a-form-with-barcode-reading.html">Read Barcodes and Fill Form Fields - Source Code</a>
-
-## 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.
-
-* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/9.x/4.use-case/2.read-a-drivers-license.html">Read the PDF417 Barcode on the Driver&apos;s License - Source Code</a>
-
-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.
-
-* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/9.x/4.use-case/3.show-result-texts-on-the-video.html">Read barcodes via camera and highlight results with custom style - Source Code</a>
-
-## 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
-<input id="input-to-fill" type="text" readonly="true" placeholder="Barcode Result">
-```
-
-```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.
-
-* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/4.use-case/1.fill-a-form-with-barcode-reading.html">Read Barcodes and Fill Form Fields - Source Code</a>
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.
-
-* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/9.x/4.use-case/2.read-a-drivers-license.html">Read the PDF417 Barcode on the Driver&apos;s License - Source Code</a>
-
-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
----
-
-<div class="filetree">
-    <div class="ds-logo"></div>
-    <div class="file">
-        <h3>Use Case Samples - DBR JavaScript Edition</h3>
-    </div>
-    <div class="children">
-        <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="up"
-                aria-label="Read barcodes to fill a form." class="button title"
-                    href="usecase1-formfill.html">Read Video and
-                Fill a
-                Form</a></div>
-        <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="up" aria-label="Read the PDF417 barcode on a driver's
-            license (AAMVA compliant) and parse it." class="button title"
-                    href="usecase2-pdf417DL.html">Read a
-                Driver's License</a></div>
-    </div>
-</div>
-<style>
-:root{--balloon-border-radius: 2px; --balloon-color: rgba(16, 16, 16, 0.95); --balloon-text-color: #fff; --balloon-font-size: 12px; --balloon-move: 4px}button[aria-label][data-balloon-pos]{overflow:visible}[aria-label][data-balloon-pos]{position:relative; cursor:pointer}[aria-label][data-balloon-pos]:after{opacity:0; pointer-events:none; transition:all 0.18s ease-out 0.18s; text-indent:0; font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-weight:normal; font-style:normal; text-shadow:none; font-size:var(--balloon-font-size); background:var(--balloon-color); border-radius:2px; color:var(--balloon-text-color); border-radius:var(--balloon-border-radius); content:attr(aria-label); padding:.5em 1em; position:absolute; white-space:nowrap; z-index:10}[aria-label][data-balloon-pos]:before{width:0; height:0; border:5px solid transparent; border-top-color:var(--balloon-color); opacity:0; pointer-events:none; transition:all 0.18s ease-out 0.18s; content:""; position:absolute; z-index:10}[aria-label][data-balloon-pos]:hover:before, [aria-label][data-balloon-pos]:hover:after, [aria-label][data-balloon-pos][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-visible]:after, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:before, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:after{opacity:1; pointer-events:none}[aria-label][data-balloon-pos].font-awesome:after{font-family: FontAwesome, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif}[aria-label][data-balloon-pos][data-balloon-break]:after{white-space:pre}[aria-label][data-balloon-pos][data-balloon-break][data-balloon-length]:after{white-space:pre-line; word-break:break-word}[aria-label][data-balloon-pos][data-balloon-blunt]:before, [aria-label][data-balloon-pos][data-balloon-blunt]:after{transition:none}[aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:after{transform:translate(-50%, 0)}[aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:before{transform:translate(-50%, 0)}[aria-label][data-balloon-pos][data-balloon-pos*="-left"]:after{left:0}[aria-label][data-balloon-pos][data-balloon-pos*="-left"]:before{left:5px}[aria-label][data-balloon-pos][data-balloon-pos*="-right"]:after{right:0}[aria-label][data-balloon-pos][data-balloon-pos*="-right"]:before{right:5px}[aria-label][data-balloon-pos][data-balloon-po*="-left"]:hover:after, [aria-label][data-balloon-pos][data-balloon-po*="-left"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:after{transform:translate(0, 0)}[aria-label][data-balloon-pos][data-balloon-po*="-left"]:hover:before, [aria-label][data-balloon-pos][data-balloon-po*="-left"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:before{transform:translate(0, 0)}[aria-label][data-balloon-pos][data-balloon-pos^="up"]:before, [aria-label][data-balloon-pos][data-balloon-pos^="up"]:after{bottom:100%; transform-origin:top; transform:translate(0, var(--balloon-move))}[aria-label][data-balloon-pos][data-balloon-pos^="up"]:after{margin-bottom:10px}[aria-label][data-balloon-pos][data-balloon-pos="up"]:before, [aria-label][data-balloon-pos][data-balloon-pos="up"]:after{left:50%; transform:translate(-50%, var(--balloon-move))}[aria-label][data-balloon-pos][data-balloon-pos^="down"]:before, [aria-label][data-balloon-pos][data-balloon-pos^="down"]:after{top:100%; transform:translate(0, calc(var(--balloon-move) * -1))}[aria-label][data-balloon-pos][data-balloon-pos^="down"]:after{margin-top:10px}[aria-label][data-balloon-pos][data-balloon-pos^="down"]:before{width:0; height:0; border:5px solid transparent; border-bottom-color:var(--balloon-color)}[aria-label][data-balloon-pos][data-balloon-pos="down"]:after, [aria-label][data-balloon-pos][data-balloon-pos="down"]:before{left:50%; transform:translate(-50%, calc(var(--balloon-move) * -1))}[aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:after{transform:translate(0, -50%)}[aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:before{transform:translate(0, -50%)}[aria-label][data-balloon-pos][data-balloon-pos="left"]:after, [aria-label][data-balloon-pos][data-balloon-pos="left"]:before{right:100%; top:50%; transform:translate(var(--balloon-move), -50%)}[aria-label][data-balloon-pos][data-balloon-pos="left"]:after{margin-right:10px}[aria-label][data-balloon-pos][data-balloon-pos="left"]:before{width:0; height:0; border:5px solid transparent; border-left-color:var(--balloon-color)}[aria-label][data-balloon-pos][data-balloon-pos="right"]:after, [aria-label][data-balloon-pos][data-balloon-pos="right"]:before{left:100%; top:50%; transform:translate(calc(var(--balloon-move) * -1), -50%)}[aria-label][data-balloon-pos][data-balloon-pos="right"]:after{margin-left:10px}[aria-label][data-balloon-pos][data-balloon-pos="right"]:before{width:0; height:0; border:5px solid transparent; border-right-color:var(--balloon-color)}[aria-label][data-balloon-pos][data-balloon-length]:after{white-space:normal}[aria-label][data-balloon-pos][data-balloon-length="small"]:after{width:80px}[aria-label][data-balloon-pos][data-balloon-length="medium"]:after{width:150px}[aria-label][data-balloon-pos][data-balloon-length="large"]:after{width:260px}[aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after{width:380px}@media screen and (max-width: 768px){[aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after{width:90vw}}[aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after{width:100%}    
-.filetree {
-    font-family: "Open Sans", sans-serif;
-    text-align: left;
-    border-radius: 4px;
-    margin: 0 auto;
-    max-width: 800px;
-    padding: 16px 32px;
-}
-.filetree .ds-logo {
-    height: 3vh;
-    background: url(logo-dynamsoft-black.svg) no-repeat 0;
-}
-.filetree h3 {
-    margin: 1vh auto;
-}
-.filetree .description {
-    border: dashed 1px gray;
-    padding: 1vmin;
-}
-.filetree .file a {
-    z-index: auto;
-}
-.filetree .file {
-    display: block;
-    font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
-    letter-spacing: 0.3px;
-    line-height: 32px;
-    color: #333;
-}
-.filetree .children {
-    padding-left: 24px;
-    position: relative;
-}
-.filetree .children .file {
-    position: relative;
-}
-.filetree .children .file a {
-    z-index: auto;
-}
-.filetree .children .file::before {
-    content: '';
-    left: -18px;
-    bottom: 16px;
-    width: 16px;
-    height: 20px;
-    position: absolute;
-    border-width: 0 0 1px 1px;
-    border-style: solid;
-    border-color: #dbdbdb;
-    border-radius: 0 0 0 3px;
-}
-.filetree [aria-label] {
-    line-height: 15px;
-}
-.filetree .title img, .filetree .title svg {
-    height: 17px;
-    vertical-align: middle;
-}
-.filetree .tooltipIcon {
-    display: inline-block; 
-    width: 17px; 
-    height: 17px;
-    vertical-align: middle;
-    background: url(data:image/png; base64, iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAg5JREFUOBGVkktrE2EUhjuTSUJwExCColSwFAIFaZFSwaZ0abx110rugf4Ef0Drr3AxaTKJZNFSNwYDJbgxblQQN22xFFpF0J07Dbn1OaFnGMciZOCb833vec/9GBMXfNlstmCa5n3DMBKoDznx4XDYBmuUy2XHb2J4gWKxuAB5h2Nj0EbuVyqVH4VC4UogEJjpdruL4Nl+v/+kVqt9VFvXSSqVuhEKhXYty3pg2/ZPJfhlJpO5isPXBFipVqtfXb1kkM/nXc+u4j8X+J84t4ViyU9KCAaD83L3ful0+jqZvaQ3S5T1x6vD5iH4W7CbxnkTJx3HeeYl6V3KrNfrp/r2Snq1wfvYkikMBoPnXqXcISSIttTr9f6ZhnKl+diumzJGGrWvCpXgQQiXKPOFYn5JgAMCLZooDmWMfgL78CYajW6C3/Hr9M10vhPsSJzEZQ9UMY7M5XLXyGTa5NeWRRrHWLlMboZMZJPNhmyiKsaRbO5d+vJqtLEszREZLUuNXifJZDIci8VanU5nLRKJBOjTN9VTyiQJ7NHPuPRkgscKabWUoLLZbHbQPQ2Hww6TshUXCd4Ceyz3USZywfNlHH0go3tk9EWwiz6GEAff49wii1/CcZ3Ig7KmEFuc9zj7TLQ2zftN3RGwBJFnCTQHViyVSqdgo+8vJwoS7RFOVnlPYbSAfMc5wck2WTaUp/IMAjTZicjWFTcAAAAASUVORK5CYII=) right center no-repeat; 
-    background-size: 100%; 
-    margin-left: 5px; 
-}
-</style>
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
-<input id="ipt-0">
-<input id="ipt-1">
-<input id="ipt-2">
-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
-<div id='scannerV' style="width:50vw;height:50vh"></div>
-<div id='cvses'></div>
-```
-
-```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
-<div id='scannerV' style="width:50vw;height:50vh"></div>
-<div id='cvses'></div>
-```
-
-```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 `<pre>` element.
-2. Manually replace each `\n` character in the result with `<br>`
-
-## 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
-<div id='scannerV' style="width:50vw;height:50vh"></div>
-<div id='cvses'></div>
-```
-
-```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 (`<script type="module">`)
-* `dbr.ui.html` // Defines the default scanner UI
-* `dbr-<version>.worker.js` // Defines the worker thread for barcode reading
-* `dbr-<version>.wasm.js` // Compact edition of the library (.js)
-* `dbr-<version>.wasm` // Compact edition of the library (.wasm)
-* `dbr-<version>.full.wasm.js` // Full edition of the library (.js)
-* `dbr-<version>.full.wasm` // Full edition of the library (.wasm)
-
-### Step Two: Configure the Server
-
-* Set the MIME type for `.wasm` as `application/wasm` on your webserver.
-  
-  The goal is to configure your server to send the correct Content-Type header for the wasm file so that it is processed correctly by the browser.
-
-  Different types of webservers are configured differently, for example:
-
-  + <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Apache_Configuration_htaccess#media_types_and_character_encodings" title="Apache">Apache</a>
-  + <a target="_blank" href="https://docs.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/mimemap" title="IIS">IIS</a>
-  + <a target="_blank" href="https://www.nginx.com/resources/wiki/start/topics/examples/full/#mime-types" title="NGINX">NGINX</a>
-
-* Enable HTTPS
-
-  Due to the browser <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts" title="security restriction">security restriction</a> on camera video streaming access, a secure HTTPS connection is required to use the library with camera.
-
-  > For convenience, self-signed certificates can be used during development and testing.
-
-### Step Three: Include the library from the server
-
-Now that the library is hosted on your server, you can include it accordingly.
-
-```html
-<script src="https://www.yourwebsite.com/dynamsoft-javascript-barcode/dist/dbr.js"></script>
-```
-
-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
-<!DOCTYPE html>
-<html>
-<body>
-    <div id="div-video-container">
-        <video class="dbrScanner-video" playsinline="true"></video>
-    </div>
-    <!-- Please visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js to get a trial license. -->
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@7.5.0-v1/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-    <script>
-        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, result) => {alert(txt);};
-            await scanner.show();
-        })();
-    </script>
-</body>
-</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
-   <video class="dbrScanner-video" playsinline="true"></video>
-   ```
-
-### 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
-<select class="dbrScanner-sel-camera"></select>
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-```html
-<select class="dbrScanner-sel-resolution"></select>
-```
-   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
-<select class="dbrScanner-sel-resolution">
-    <option class="dbrScanner-opt-gotResolution" value="got"></option>
-    <option data-width="1920" data-height="1080">1920 x 1080</option>
-    <option data-width="1280" data-height="720">1280 x 720</option>
-    <option data-width="640" data-height="480">640 x 480</option>
-</select>
-```
-
-   **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
-<!DOCTYPE html>
-<html>
-<body>
-    <div id="div-video-container">
-        <video class="dbrScanner-video" playsinline="true"></video>
-    </div>
-    <!-- Please visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js to get a trial license. -->
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@7.6.0/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-    <script>
-        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, result) => {alert(txt);};
-            await scanner.show();
-        })();
-    </script>
-</body>
-</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
-   <video class="dbrScanner-video" playsinline="true"></video>
-   ```
-
-### 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
-<select class="dbrScanner-sel-camera"></select>
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-```html
-<select class="dbrScanner-sel-resolution"></select>
-```
-   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
-<select class="dbrScanner-sel-resolution">
-    <option class="dbrScanner-opt-gotResolution" value="got"></option>
-    <option data-width="1920" data-height="1080">1920 x 1080</option>
-    <option data-width="1280" data-height="720">1280 x 720</option>
-    <option data-width="640" data-height="480">640 x 480</option>
-</select>
-```
-
-   **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
-  <div id="scannerUI"></div>
-  ```
-  
-  ```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
-<!DOCTYPE html>
-<html>
-<body>
-    <div id="div-video-container">
-        <video class="dbrScanner-video" playsinline="true"></video>
-    </div>
-    <!-- Please visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js to get a trial license. -->
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.0.0/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-    <script>
-        let scanner = null;
-        (async()=>{
-            scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            await scanner.setUIElement(document.getElementById('div-video-container'));
-            scanner.onFrameRead = results => {console.log(results);};
-            scanner.onUnduplicatedRead = (txt, result) => {alert(txt);};
-            await scanner.show();
-        })();
-    </script>
-</body>
-</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
-<video class="dbrScanner-video" playsinline="true"></video>
-```
-
-### 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
-<select class="dbrScanner-sel-camera"></select>
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-```html
-<select class="dbrScanner-sel-resolution"></select>
-```
-
-[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
-<select class="dbrScanner-sel-resolution">
-    <option class="dbrScanner-opt-gotResolution" value="got"></option>
-    <option data-width="1920" data-height="1080">1920 x 1080</option>
-    <option data-width="1280" data-height="720">1280 x 720</option>
-    <option data-width="640" data-height="480">640 x 480</option>
-</select>
-```
-
-*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
-<!DOCTYPE html>
-<html>
-<body>
-    <div id="div-video-container">
-        <video class="dbrScanner-existingVideo" src="myvideo.mp4"></video>
-    </div>
-    <!-- Please visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js to get a trial license. -->
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.0.0/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-    <script>
-        let scanner = null;
-        (async()=>{
-            scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            await scanner.setUIElement(document.getElementById('div-video-container'));
-            scanner.onFrameRead = results => {console.log(results);};
-            scanner.onUnduplicatedRead = (txt, result) => {alert(txt);};
-            await scanner.show();
-        })();
-    </script>
-</body>
-</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
-  <div id="scannerUI"></div>
-  ```
-  
-  ```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
-<!DOCTYPE html>
-<html>
-<body>
-    <div id="div-video-container">
-        <video class="dbrScanner-video" playsinline="true"></video>
-    </div>
-    <!-- Please visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js to get a trial license. -->
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.1.0/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-    <script>
-        let scanner = null;
-        (async()=>{
-            scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            await scanner.setUIElement(document.getElementById('div-video-container'));
-            scanner.onFrameRead = results => {console.log(results);};
-            scanner.onUnduplicatedRead = (txt, result) => {alert(txt);};
-            await scanner.show();
-        })();
-    </script>
-</body>
-</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
-<video class="dbrScanner-video" playsinline="true"></video>
-```
-
-### 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
-<select class="dbrScanner-sel-camera"></select>
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-```html
-<select class="dbrScanner-sel-resolution"></select>
-```
-
-[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
-<select class="dbrScanner-sel-resolution">
-    <option class="dbrScanner-opt-gotResolution" value="got"></option>
-    <option data-width="1920" data-height="1080">1920 x 1080</option>
-    <option data-width="1280" data-height="720">1280 x 720</option>
-    <option data-width="640" data-height="480">640 x 480</option>
-</select>
-```
-
-*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
-<!DOCTYPE html>
-<html>
-<body>
-    <div id="div-video-container">
-        <video class="dbrScanner-existingVideo" src="myvideo.mp4"></video>
-    </div>
-    <!-- Please visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js to get a trial license. -->
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.1.0/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-    <script>
-        let scanner = null;
-        (async()=>{
-            scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            await scanner.setUIElement(document.getElementById('div-video-container'));
-            scanner.onFrameRead = results => {console.log(results);};
-            scanner.onUnduplicatedRead = (txt, result) => {alert(txt);};
-            await scanner.show();
-        })();
-    </script>
-</body>
-</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
-  <div id="scannerUI"></div>
-  ```
-  
-  ```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
-<!DOCTYPE html>
-<html>
-<body>
-    <div id="div-video-container">
-        <video class="dbrScanner-video" playsinline="true"></video>
-    </div>
-    <!-- Please visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js to get a trial license. -->
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.1.2/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-    <script>
-        let scanner = null;
-        (async()=>{
-            scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            await scanner.setUIElement(document.getElementById('div-video-container'));
-            scanner.onFrameRead = results => {console.log(results);};
-            scanner.onUnduplicatedRead = (txt, result) => {alert(txt);};
-            await scanner.show();
-        })();
-    </script>
-</body>
-</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
-<video class="dbrScanner-video" playsinline="true"></video>
-```
-
-### 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
-<select class="dbrScanner-sel-camera"></select>
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-```html
-<select class="dbrScanner-sel-resolution"></select>
-```
-
-[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
-<select class="dbrScanner-sel-resolution">
-    <option class="dbrScanner-opt-gotResolution" value="got"></option>
-    <option data-width="1920" data-height="1080">1920 x 1080</option>
-    <option data-width="1280" data-height="720">1280 x 720</option>
-    <option data-width="640" data-height="480">640 x 480</option>
-</select>
-```
-
-*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
-<!DOCTYPE html>
-<html>
-<body>
-    <div id="div-video-container">
-        <video class="dbrScanner-existingVideo" src="myvideo.mp4"></video>
-    </div>
-    <!-- Please visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js to get a trial license. -->
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.1.2/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-    <script>
-        let scanner = null;
-        (async()=>{
-            scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            await scanner.setUIElement(document.getElementById('div-video-container'));
-            scanner.onFrameRead = results => {console.log(results);};
-            scanner.onUnduplicatedRead = (txt, result) => {alert(txt);};
-            await scanner.show();
-        })();
-    </script>
-</body>
-</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
-  <div id="scannerUI"></div>
-  ```
-  
-  ```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
-<!DOCTYPE html>
-<html>
-<body>
-    <div id="div-video-container">
-        <video class="dbrScanner-video" playsinline="true"></video>
-    </div>
-    <!-- Please visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js to get a trial license. -->
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.1.3/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-    <script>
-        let scanner = null;
-        (async()=>{
-            scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            await scanner.setUIElement(document.getElementById('div-video-container'));
-            scanner.onFrameRead = results => {console.log(results);};
-            scanner.onUnduplicatedRead = (txt, result) => {alert(txt);};
-            await scanner.show();
-        })();
-    </script>
-</body>
-</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
-<video class="dbrScanner-video" playsinline="true"></video>
-```
-
-### 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
-<select class="dbrScanner-sel-camera"></select>
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-```html
-<select class="dbrScanner-sel-resolution"></select>
-```
-
-[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
-<select class="dbrScanner-sel-resolution">
-    <option class="dbrScanner-opt-gotResolution" value="got"></option>
-    <option data-width="1920" data-height="1080">1920 x 1080</option>
-    <option data-width="1280" data-height="720">1280 x 720</option>
-    <option data-width="640" data-height="480">640 x 480</option>
-</select>
-```
-
-*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
-<!DOCTYPE html>
-<html>
-<body>
-    <div id="div-video-container">
-        <video class="dbrScanner-existingVideo" src="myvideo.mp4"></video>
-    </div>
-    <!-- Please visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js to get a trial license. -->
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.1.3/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-    <script>
-        let scanner = null;
-        (async()=>{
-            scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            await scanner.setUIElement(document.getElementById('div-video-container'));
-            scanner.onFrameRead = results => {console.log(results);};
-            scanner.onUnduplicatedRead = (txt, result) => {alert(txt);};
-            await scanner.show();
-        })();
-    </script>
-</body>
-</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
-  <div id="scannerUI"></div>
-  ```
-  
-  ```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
-<!DOCTYPE html>
-<html>
-<body>
-    <div id="div-video-container">
-        <video class="dbrScanner-video" playsinline="true"></video>
-    </div>
-    <!-- Please visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js to get a trial license. -->
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.2.0/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-    <script>
-        let scanner = null;
-        (async()=>{
-            scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            await scanner.setUIElement(document.getElementById('div-video-container'));
-            scanner.onFrameRead = results => {console.log(results);};
-            scanner.onUnduplicatedRead = (txt, result) => {alert(txt);};
-            await scanner.show();
-        })();
-    </script>
-</body>
-</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
-<video class="dbrScanner-video" playsinline="true"></video>
-```
-
-### 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
-<select class="dbrScanner-sel-camera"></select>
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-```html
-<select class="dbrScanner-sel-resolution"></select>
-```
-
-[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
-<select class="dbrScanner-sel-resolution">
-    <option class="dbrScanner-opt-gotResolution" value="got"></option>
-    <option data-width="1920" data-height="1080">1920 x 1080</option>
-    <option data-width="1280" data-height="720">1280 x 720</option>
-    <option data-width="640" data-height="480">640 x 480</option>
-</select>
-```
-
-*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
-<!DOCTYPE html>
-<html>
-<body>
-    <div id="div-video-container">
-        <video class="dbrScanner-existingVideo" src="myvideo.mp4"></video>
-    </div>
-    <!-- Please visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js to get a trial license. -->
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.2.0/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-    <script>
-        let scanner = null;
-        (async()=>{
-            scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            await scanner.setUIElement(document.getElementById('div-video-container'));
-            scanner.onFrameRead = results => {console.log(results);};
-            scanner.onUnduplicatedRead = (txt, result) => {alert(txt);};
-            await scanner.show();
-        })();
-    </script>
-</body>
-</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
-  <div id="scannerUI"></div>
-  ```
-  
-  ```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
-<!DOCTYPE html>
-<html>
-<body>
-    <div id="div-video-container">
-        <video class="dbrScanner-video" playsinline="true"></video>
-    </div>
-    <!-- Please visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js to get a trial license. -->
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.2.1/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-    <script>
-        let scanner = null;
-        (async()=>{
-            scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            await scanner.setUIElement(document.getElementById('div-video-container'));
-            scanner.onFrameRead = results => {console.log(results);};
-            scanner.onUnduplicatedRead = (txt, result) => {alert(txt);};
-            await scanner.show();
-        })();
-    </script>
-</body>
-</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
-<video class="dbrScanner-video" playsinline="true"></video>
-```
-
-### 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
-<select class="dbrScanner-sel-camera"></select>
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-```html
-<select class="dbrScanner-sel-resolution"></select>
-```
-
-[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
-<select class="dbrScanner-sel-resolution">
-    <option class="dbrScanner-opt-gotResolution" value="got"></option>
-    <option data-width="1920" data-height="1080">1920 x 1080</option>
-    <option data-width="1280" data-height="720">1280 x 720</option>
-    <option data-width="640" data-height="480">640 x 480</option>
-</select>
-```
-
-*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
-<!DOCTYPE html>
-<html>
-<body>
-    <div id="div-video-container">
-        <video class="dbrScanner-existingVideo" src="myvideo.mp4"></video>
-    </div>
-    <!-- Please visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js to get a trial license. -->
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.2.1/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-    <script>
-        let scanner = null;
-        (async()=>{
-            scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            await scanner.setUIElement(document.getElementById('div-video-container'));
-            scanner.onFrameRead = results => {console.log(results);};
-            scanner.onUnduplicatedRead = (txt, result) => {alert(txt);};
-            await scanner.show();
-        })();
-    </script>
-</body>
-</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
-  <div id="scannerUI"></div>
-  ```
-  
-  ```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
-<!DOCTYPE html>
-<html>
-<body>
-    <div id="div-video-container">
-        <video class="dbrScanner-video" playsinline="true"></video>
-    </div>
-    <!-- Please visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js to get a trial license. -->
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.42/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-    <script>
-        let scanner = null;
-        (async()=>{
-            scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            await scanner.setUIElement(document.getElementById('div-video-container'));
-            scanner.onFrameRead = results => {console.log(results);};
-            scanner.onUnduplicatedRead = (txt, result) => {alert(txt);};
-            await scanner.show();
-        })();
-    </script>
-</body>
-</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
-<video class="dbrScanner-video" playsinline="true"></video>
-```
-
-### 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
-<select class="dbrScanner-sel-camera"></select>
-```
-
-[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-```html
-<select class="dbrScanner-sel-resolution"></select>
-```
-
-[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
-<select class="dbrScanner-sel-resolution">
-    <option class="dbrScanner-opt-gotResolution" value="got"></option>
-    <option data-width="1920" data-height="1080">1920 x 1080</option>
-    <option data-width="1280" data-height="720">1280 x 720</option>
-    <option data-width="640" data-height="480">640 x 480</option>
-</select>
-```
-
-*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
-<!DOCTYPE html>
-<html>
-<body>
-    <div id="div-video-container">
-        <video class="dbrScanner-existingVideo" src="myvideo.mp4"></video>
-    </div>
-    <!-- Please visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js to get a trial license. -->
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.42/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-    <script>
-        let scanner = null;
-        (async()=>{
-            scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            await scanner.setUIElement(document.getElementById('div-video-container'));
-            scanner.onFrameRead = results => {console.log(results);};
-            scanner.onUnduplicatedRead = (txt, result) => {alert(txt);};
-            await scanner.show();
-        })();
-    </script>
-</body>
-</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 `<script>`
-- `dbr.browser.mjs` // For `<script type="module">`
-- `dbr.scanner.html` // Scanner default UI
-- `dbr-<version>.worker.js` // A worker thread for decoding
-- `dbr-<version>.wasm.js` // Compact Edition JS
-- `dbr-<version>.wasm` // Compact Edition WASM
-- `dbr-<version>.full.wasm.js` // Full Edition JS
-- `dbr-<version>.full.wasm` // Full Edition WASM
-
-If the resource files (e.g.,`wasm` files) are not placed in the same directory as `dbr.js`, you will need to specify the path using the API `engineResourcePath` before calling `loadWasm` or `createInstance`.
-
-```javascript
-Dynamsoft.BarcodeReader.engineResourcePath = "url/to/the/dir/";
-```
-
-### Step Two: Configure the Server
-
-Set the MIME type for `.wasm` to `application/wasm`.
-
-Different servers are configured differently. Here are some popular ones:
-
-- NGINX: `mime.types`
-- IIS: `Web.config`
-- Java™ EE web app: `web.xml`
-- Node.js: `npm mime`
-
-## License Activation
-
-A full license is required for deployment. If you have not purchased a license yet, please visit our [online store](https://www.dynamsoft.com/store/dynamsoft-barcode-reader/).
-
-### Step One : Create a Dynamsoft account
-
-If you don't have an Dynamsoft account yet, sign up [here](https://www.dynamsoft.com/api-common/Regist/Regist). Be sure to use the same email that was registered for the purchase.
-
-### Step Two : Log into Dynamsoft Customer Portal
-
-Once logged in, click License in the left menu bar to show your purchased license(s).
-
-### Step Three : Activate the License
-
-Under **Status**, click **Activate Now** to specify a domain to bind your license key. The domain binding is a security feature to protect your license, optional but highly recommended.
-
-A few examples of the domain:
-
-- www.dynamsoft.com
-- demo.dynamsoft.com
-- *.dynamsoft.com
-- *.dynamsoft.com; *.yoursite.com
-
-### Step Four : Use the License
-
-```html
-<!-- Please visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js to get a trial license. -->
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@7.5.0-v1/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-```
-
-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 `<script>`
-- `dbr.browser.mjs` // For `<script type="module">`
-- `dbr.scanner.html` // Scanner default UI
-- `dbr-<version>.worker.js` // A worker thread for decoding
-- `dbr-<version>.wasm.js` // Compact Edition JS
-- `dbr-<version>.wasm` // Compact Edition WASM
-- `dbr-<version>.full.wasm.js` // Full Edition JS
-- `dbr-<version>.full.wasm` // Full Edition WASM
-
-If the resource files (e.g.,`wasm` files) are not placed in the same directory as `dbr.js`, you will need to specify the path using the API `engineResourcePath` before calling `loadWasm` or `createInstance`.
-
-```javascript
-Dynamsoft.BarcodeReader.engineResourcePath = "url/to/the/dir/";
-```
-
-### Step Two: Configure the Server
-
-Set the MIME type for `.wasm` to `application/wasm`.
-
-Different servers are configured differently. Here are some popular ones:
-
-- NGINX: `mime.types`
-- IIS: `Web.config`
-- Java™ EE web app: `web.xml`
-- Node.js: `npm mime`
-
-## License Activation
-
-A full license is required for deployment. If you have not purchased a license yet, please visit our [online store](https://www.dynamsoft.com/store/dynamsoft-barcode-reader/).
-
-### Step One : Create a Dynamsoft account
-
-If you don't have an Dynamsoft account yet, sign up [here](https://www.dynamsoft.com/api-common/Regist/Regist). Be sure to use the same email that was registered for the purchase.
-
-### Step Two : Log into Dynamsoft Customer Portal
-
-Once logged in, click License in the left menu bar to show your purchased license(s).
-
-### Step Three : Activate the License
-
-Under **Status**, click **Activate Now** to specify a domain to bind your license key. The domain binding is a security feature to protect your license, optional but highly recommended.
-
-A few examples of the domain:
-
-- www.dynamsoft.com
-- demo.dynamsoft.com
-- *.dynamsoft.com
-- *.dynamsoft.com; *.yoursite.com
-
-### Step Four : Use the License
-
-```html
-<!-- Please visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js to get a trial license. -->
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@7.6.0/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-```
-
-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 `<script>` tag
-- `dbr.browser.mjs` // For using the library as a module (`<script type="module">`)
-- `dbr.scanner.html` // Defines the default scanner UI
-- `dbr-<version>.worker.js` // Defines the worker thread for barcode reading
-- `dbr-<version>.wasm.js` // Compact edition of the library (.js)
-- `dbr-<version>.wasm` // Compact edition of the library (.wasm)
-- `dbr-<version>.full.wasm.js` // Full edition of the library (.js)
-- `dbr-<version>.full.wasm` // Full edition of the library (.wasm)
-
-If the resource files (e.g.,`wasm` files) are not placed in the same directory as `dbr.js`, you will need to specify the path using the API `engineResourcePath` before calling `loadWasm()` or `createInstance()`. For example:
-
-```javascript
-Dynamsoft.DBR.BarcodeReader.engineResourcePath = "url/to/the/dir/";
-```
-
-### Step Two: Configure the Server
-
-Set the MIME type for `.wasm` to `application/wasm`.
-
-Different servers are configured differently. Here are some popular ones:
-
-- NGINX: <a href="https://www.nginx.com/resources/wiki/start/topics/examples/full/#mime-types" target="_blank">mime.types</a>
-- IIS: <a href="https://github.com/dynamsoft-dbr/javascript-barcode/blob/dac614f8033661901d85381dfaff8d612115862a/documents/conf/Web.config" target="_blank">Web.config</a>
-- Java™ EE web app: <a href="https://github.com/dynamsoft-dbr/javascript-barcode/blob/dac614f8033661901d85381dfaff8d612115862a/documents/conf/web.xml" target="_blank">web.xml</a>
-- Node.js: <a href="https://github.com/broofa/node-mime" target="_blank">npm mime</a>
-
-Please note that HTTPS **must** be enabled in order to use the component. For how to enable HTTPS, please check out the manual of your webserver.
-
-If deploying to a production server, it is recommended to use a valid SSL certificate.
-
-## License Activation
-
-Commercial deployment requires a full license. If you have not purchased a license yet, please visit our [online store](https://www.dynamsoft.com/store/dynamsoft-barcode-reader/).
-
-In version 8.0, we introduced [License Tracking 2.0](https://www.dynamsoft.com/license-tracking/docs/about/index.html) to activate and track usage. Please follow the steps in [this article](https://www.dynamsoft.com/license-tracking/docs/common/mechanism.html) to activate and use your license. 
diff --git a/programming-old/javascript/user-guide/explore-features/index.md b/programming-old/javascript/user-guide/explore-features/index.md
deleted file mode 100644
index f24cf178..00000000
--- a/programming-old/javascript/user-guide/explore-features/index.md
+++ /dev/null
@@ -1,53 +0,0 @@
----
-layout: default-layout
-title: Explore Features - Dynamsoft Barcode Reader JavaScript Edition User Guide
-description: This page lists the topics to explore the features of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, explore features, javascript, js
-breadcrumbText: Explore Features
-noTitleIndex: false
-needGenerateH3Content: true
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/explore-features/index.html
----
-
-# Explore Features
-
-Once you have got an application running with Dynamsoft Barcode Reader JavaScript edition, you can explore the many features of the SDK to see how to make the best out of the SDK.
-
-> If you are just getting started with Dynamsoft Barcode Reader JavaScript Edition, we recommend that you read [Get Started](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/index.html) first.
-
-## Basic Features
-
-* [Specify barcode formats and count]({{site.features}}barcode-formats-and-count.html?lang=js)
-* [Read a specific area/region]({{site.features}}barcode-scan-region.html?lang=js)
-<!-- * [Customize the UI]({{site.features}}customize-the-ui.html?lang=js) -->
-
-## Handle Difficult Cases
-
-While the SDK has been carefully tuned to provide the best possible performance in most use cases, it can be further tweaked to provide an even better performance for barcodes/images of similar characteristics. Read the following topics and see if any of them might be helpful in your case.
-
-* [Read inverted barcodes]({{site.features}}read-inverted-barcodes.html?lang=js)
-* [Read deformed barcodes]({{site.features}}read-deformed-barcodes.html?lang=js)
-* [Read incomplete barcodes]({{site.features}}read-incomplete-barcodes.html?lang=js)
-* [Read dense barcodes]({{site.features}}read-dense-barcodes.html?lang=js)
-* [Read barcodes from a large image]({{site.features}}read-a-large-image.html?lang=js)
-* [Read barcodes with small module size]({{site.features}}read-barcodes-with-small-module-size.html?lang=js)
-* [Read barcodes with imbalanced colors]({{site.features}}read-barcodes-with-imbalanced-colour.html?lang=js)
-* [Read barcodes with uneven lighting]({{site.features}}read-barcodes-with-uneven-lighting.html?lang=js)
-* [Read images with texture]({{site.features}}read-images-with-texture.html?lang=js)
-* [Read images with lots of text]({{site.features}}read-images-with-lots-of-text.html?lang=js)
-* [Preprocesss images to read difficult barcodes]({{site.features}}preprocess-images.html?lang=js)
-
-## Barcode Results
-
-* [Get barcode confidence and rotation]({{site.features}}get-confidence-rotation.html?lang=js)
-* [Get barcode location]({{site.features}}get-barcode-location.html?lang=js)
-* [Get detailed barcode information]({{site.features}}get-detailed-info.html?lang=js)
-* [Filter and sort decoding results]({{site.features}}filter-and-sort.html?lang=js)
-<!-- * [Use intermediate results]({{site.features}}use-intermidiate-results.html?lang=js) -->
-
-## Advanced Features
-
-<!-- * [Control when to terminate a decoding process]({{site.features}}control-terminate-phase.html?lang=js) -->
-* [Use SimplifiedCaptureVisionSettings or Templates]({{site.features}}use-runtimesettings-or-templates.html?lang=js)
-* [Use format specific configurations]({{site.features}}use-format-specific-configuration.html?lang=js)
diff --git a/programming-old/javascript/user-guide/features-requirements-v7.6.0.md b/programming-old/javascript/user-guide/features-requirements-v7.6.0.md
deleted file mode 100644
index dc910cb4..00000000
--- a/programming-old/javascript/user-guide/features-requirements-v7.6.0.md
+++ /dev/null
@@ -1,91 +0,0 @@
----
-layout: default-layout
-title: v7.6.0 Features & Requirements - Dynamsoft Barcode Reader JavaScript Edition
-description: This page shows features and requirements of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, features, requirements, javascript, js
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/features-requirements-v7.6.0.html
----
-
-# Features & Requirements
-
-## Features
-
-### Supported Symbologies:
-
-- 1D barcode: **Code 39**, **Code 128**, **Code 93**, **Codabar**, **Interleaved 2 of 5 (ITF)**, **EAN-13**, **EAN-8**, **UPC-A**, **UPC-E**, **Industrial 2 of 5** (Code 2 of 5 Industry, Standard 2 of 5, Code 2 of 5), **Code 39 Extended**.
-- 2D barcode: **PDF417**, **QR**, **DataMatrix**, **Aztec**, **MaxiCode**, and **DotCode**.    
-- GS1 Databar: **Omnidirectional**, **Truncated**, **Stacked**, **Stacked Omnidirectional**, **Expanded**, **Expanded Stacked** and **Limited**.
-- Patch Code
-- GS1 Composite Code  
-- Postal Code: **USPS Intelligent Mail**, **PostNet**, **Planet**, **Australian Post**, **UK Royal Mail (RM4SCC)**.  
-
-### Supported Data Sources: 
-
-`Blob`, `HTMLImageElement`, `HTMLVideoElement`, and `URL`, etc.  
-
-### Compact and Full Editions  
-
-Two editions - Compact and Full - are available. The Compact Edition includes basic features with smaller size allowing for faster download and compiling. The Full Edition includes full features but with a larger size.
-
-The following table shows available features between the two editions:
-    
-  | Features | Compact edition | Full edition |
-  |:-:|:-:|:-:|
-  | `wasm` size<sup>1</sup>\(gzip\) | 810KB | 1.1 MB |
-  | 1D | &#10003; | &#10003; |
-  | QR | &#10003; | &#10003; |
-  | Micro QR | - | &#10003; |
-  | PDF417 | &#10003; | &#10003; |
-  | Micro PDF417 | - | &#10003; |
-  | DataMatrix | &#10003; | &#10003; |
-  | Aztec | - | &#10003; |
-  | MaxiCode | - | &#10003; |
-  | Patch Code | - | &#10003; |
-  | GS1 Composite Code | - | &#10003; |
-  | GS1 DataBar | - | &#10003; |
-  | DotCode | - | &#10003; |
-  | Postal Code | - | &#10003; |
-  | DPM | - | &#10003; |
-  | getRuntimeSettings | &#10003; | &#10003; |
-  | updateRuntimeSettings | &#10003; | &#10003; |
-  | getIntermediateResults | - | &#10003; |
-  | initRuntimeSettingsWithString | - | &#10003; |
-  | outputSettingsToString | - | &#10003; |
-  | **recommended scenario<sup>2</sup>** | Customer Facing Application | Enterprise Solution  |
-    
-<sup>1</sup> The `wasm` file size is of version 7.2.2. In later versions, the size may differ.  
-  
-<sup>2</sup> For the scenario where a user only needs to scan a barcode once, the Compact Edition is recommended as it downloads and compiles faster. For scenarios where a user needs to continuously scan many barcodes or where specific uncommon barcodes or advanced features are required, use the Full Edition by simply setting the following before you call `loadWasm` or `CreateInstance`.
-
-``` javascript
-Dynamsoft.BarcodeReader._bUseFullFeature = true;
-```
-
-## System Requirements
-
-This library requires some advanced features 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 is only required for in-browser video streaming. If a browser does not support this API, Single Frame Mode will be used automatically. If the API exists but doesn't work correctly, Single Frame Mode can be used as an alternative.  
-
-The following table is a list of supported browsers:  
-
-Browser Name | Version
-:-: | :-:
-Chrome | v57+ (v59+ on Android/iOS<sup>1</sup>)
-Firefox | v52+ (v55+ on Android/iOS<sup>1</sup>)
-Edge<sup>2</sup> | v16+
-Safari<sup>3</sup> | v11+
-
-<sup>1</sup> On iOS, camera video streaming is only supported in Safari.  
-<sup>2</sup> On Edge, due to strict Same-origin policy, you must host the library on the same domain as your webpage.  
-<sup>3</sup> Safari 11.2.2 ~ 11.2.6 are not supported.
-     
-**NOTE**: Apart from the browsers, the operating systems running on the target devices 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.  
-
diff --git a/programming-old/javascript/user-guide/features-requirements.md b/programming-old/javascript/user-guide/features-requirements.md
deleted file mode 100644
index aa8936aa..00000000
--- a/programming-old/javascript/user-guide/features-requirements.md
+++ /dev/null
@@ -1,93 +0,0 @@
----
-layout: default-layout
-title: Features & Requirements - Dynamsoft Barcode Reader JavaScript Edition
-description: This page shows features and requirements of Dynamsoft Barcode Reader JavaScript SDK.
-keywords: user guide, features, requirements, javascript, js
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/user-guide/features-requirements.html
----
-
-# Features & Requirements
-
-## Features
-
-### Supported Symbologies:
-
-- 1D barcode: *Code 39 (including Code 39 Extended)*, *Code 128*, *Code 93*, *Codabar*, *Interleaved 2 of 5 (ITF)*, *EAN-13*, *EAN-8*, *UPC-A*, *UPC-E*, *Industrial 2 of 5* (Code 2 of 5 Industry, Standard 2 of 5, Code 2 of 5), and *MSI (Modified Plessey)*.
-- 2D barcode: *PDF417*, *QR (including Micro QR Code and Model 1)*, *DataMatrix*, *Aztec*, *MaxiCode*, and *DotCode*.    
-- GS1 Databar: *Omnidirectional*, *Truncated*, *Stacked*, *Stacked Omnidirectional*, *Expanded*, *Expanded Stacked* and *Limited*.
-- Patch Code
-- GS1 Composite Code  
-- Postal Code: *USPS Intelligent Mail*, *PostNet*, *Planet*, *Australian Post*, *UK Royal Mail (RM4SCC)*.  
-
-### Supported Data Sources: 
-
-`Blob`, `HTMLImageElement`, `HTMLVideoElement`, and `URL`, etc.  
-
-### Compact and Full Editions  
-
-Two editions - Compact and Full - are available. The Compact Edition includes basic features with smaller size allowing for faster download and compiling. The Full Edition includes full features but with a larger size.
-
-The following table shows available features between the two editions:
-    
-  | Features | Compact edition | Full edition |
-  |:-:|:-:|:-:|
-  | `wasm` size<sup>1</sup>\(gzip\) | 976 KB | 1.3 MB |
-  | 1D | &#10003; | &#10003; |
-  | QR | &#10003; | &#10003; |
-  | Micro QR | - | &#10003; |
-  | PDF417 | &#10003; | &#10003; |
-  | Micro PDF417 | - | &#10003; |
-  | DataMatrix | &#10003; | &#10003; |
-  | Aztec | - | &#10003; |
-  | MaxiCode | - | &#10003; |
-  | Patch Code | - | &#10003; |
-  | GS1 Composite Code | - | &#10003; |
-  | GS1 DataBar | - | &#10003; |
-  | DotCode | - | &#10003; |
-  | Postal Code | - | &#10003; |
-  | DPM | - | &#10003; |
-  | getRuntimeSettings | &#10003; | &#10003; |
-  | updateRuntimeSettings | &#10003; | &#10003; |
-  | getIntermediateResults | - | &#10003; |
-  | initRuntimeSettingsWithString | - | &#10003; |
-  | outputSettingsToString | - | &#10003; |
-  | *recommended scenario<sup>2</sup>* | Customer Facing Application | Enterprise Solution  |
-    
-<sup>1</sup> The `wasm` file size is of version 8.1.2. In other versions, the size may differ.  
-  
-<sup>2</sup> For the scenario where a user only needs to scan a barcode once, the Compact Edition is recommended as it downloads and compiles faster. For scenarios where a user needs to continuously scan many barcodes or where specific uncommon barcodes or advanced features are required, use the Full Edition by simply setting the following before you call `loadWasm()` or `CreateInstance()`.
-
-``` javascript
-Dynamsoft.DBR.BarcodeReader._bUseFullFeature = true;
-```
-
-## System Requirements
-
-This library requires some advanced features 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 is only required for in-browser video streaming. If a browser does not support this API, "Single Frame Mode" will be used automatically. If the API exists but doesn't work correctly, "Single Frame Mode" can be used as an alternative.  
-
-The following table is a list of supported browsers:
-
-Browser Name | Version
-:-: | :-:
-Chrome | v57+ (v59+ on Android/iOS<sup>1</sup>)
-Firefox | v52+ (v55+ on Android/iOS<sup>1</sup>)
-Edge<sup>2</sup> | v16+
-Safari<sup>3</sup> | v11+
-
-<sup>1</sup> iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-<sup>2</sup> On Edge, due to strict Same-origin policy, you must host the library on the same domain as your webpage.  
-<sup>3</sup> Safari 11.2.2 ~ 11.2.6 are not supported.
-     
-*NOTE*
-
-Apart from the browsers, the operating systems running on the target devices 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.  
-
diff --git a/programming-old/javascript/user-guide/index-v7.5.0.md b/programming-old/javascript/user-guide/index-v7.5.0.md
deleted file mode 100644
index aa7709b2..00000000
--- a/programming-old/javascript/user-guide/index-v7.5.0.md
+++ /dev/null
@@ -1,143 +0,0 @@
----
-layout: default-layout
-title: v7.5.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.5.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
-<!DOCTYPE html>
-<html>
-<body>
-    <!-- Please visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js to get a trial license. -->
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@7.5.0-v1/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-    <script>
-        // initializes and uses the library
-        let scanner = null;
-        (async()=>{
-            scanner = await Dynamsoft.BarcodeScanner.createInstance();
-            scanner.onFrameRead = results => {console.log(results);};
-            scanner.onUnduplicatedRead = (txt, result) => {alert(txt);};
-            await scanner.show();
-        })();
-    </script>
-</body>
-</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
-
-```
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@7.5.0-v1/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-<!-- or -->
-<script src="https://unpkg.com/dynamsoft-javascript-barcode@7.5.0-v1/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-```
-
-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
-<!DOCTYPE html>
-<html>
-<body>
-    <!-- Please visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js to get a trial license. -->
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@7.6.0/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-    <script>
-        // initializes and uses the library
-        let scanner = null;
-        (async()=>{
-            scanner = await Dynamsoft.BarcodeScanner.createInstance();
-            scanner.onFrameRead = results => {console.log(results);};
-            scanner.onUnduplicatedRead = (txt, result) => {alert(txt);};
-            await scanner.show();
-        })();
-    </script>
-</body>
-</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
-
-```
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@7.6.0/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-<!-- or -->
-<script src="https://unpkg.com/dynamsoft-javascript-barcode@7.6.0/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-```
-
-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
-<!DOCTYPE html>
-<html>
-<body>
-    <!-- Please visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js to get a trial license. -->
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.0.0/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-    <script>
-        // initializes and uses the library
-        let scanner = null;
-        (async()=>{
-            scanner = await Dynamsoft.BarcodeScanner.createInstance();
-            scanner.onFrameRead = results => {console.log(results);};
-            scanner.onUnduplicatedRead = (txt, result) => {alert(txt);};
-            await scanner.show();
-        })();
-    </script>
-</body>
-</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
-
-```
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.0.0/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-<!-- or -->
-<script src="https://unpkg.com/dynamsoft-javascript-barcode@8.0.0/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-```
-
-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
-<!DOCTYPE html>
-<html>
-<body>
-    <!-- Please visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js to get a trial license. -->
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.1.0/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-    <script>
-        // initializes and uses the library
-        let scanner = null;
-        (async()=>{
-            scanner = await Dynamsoft.BarcodeScanner.createInstance();
-            scanner.onFrameRead = results => {console.log(results);};
-            scanner.onUnduplicatedRead = (txt, result) => {alert(txt);};
-            await scanner.show();
-        })();
-    </script>
-</body>
-</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
-
-```
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.1.0/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-<!-- or -->
-<script src="https://unpkg.com/dynamsoft-javascript-barcode@8.1.0/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-```
-
-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
-<!DOCTYPE html>
-<html>
-<body>
-    <!-- Please visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js to get a trial license. -->
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.1.2/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-    <script>
-        // initializes and uses the library
-        let scanner = null;
-        (async()=>{
-            scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            scanner.onFrameRead = results => {if(results.length > 0 ) console.log(results);};
-            scanner.onUnduplicatedRead = (txt, result) => {alert(txt);};
-            await scanner.show();
-        })();
-    </script>
-</body>
-</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
-
-  ```
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.1.2/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-  <!-- or -->
-  <script src="https://unpkg.com/dynamsoft-javascript-barcode@8.1.2/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-  ```
-
-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
-<!DOCTYPE html>
-<html>
-<body>
-    <!-- Please visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js to get a trial license. -->
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.1.3/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-    <script>
-        // initializes and uses the library
-        let scanner = null;
-        (async()=>{
-            scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            scanner.onFrameRead = results => {if(results.length > 0 ) console.log(results);};
-            scanner.onUnduplicatedRead = (txt, result) => {alert(txt);};
-            await scanner.show();
-        })();
-    </script>
-</body>
-</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
-
-  ```
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.1.3/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-  <!-- or -->
-  <script src="https://unpkg.com/dynamsoft-javascript-barcode@8.1.3/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-  ```
-
-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
-<!DOCTYPE html>
-<html>
-<body>
-    <!-- Please visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js to get a trial license. -->
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.2.0/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-    <script>
-        // initializes and uses the library
-        let scanner = null;
-        (async()=>{
-            scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            scanner.onFrameRead = results => {if(results.length > 0 ) console.log(results);};
-            scanner.onUnduplicatedRead = (txt, result) => {alert(txt);};
-            await scanner.show();
-        })();
-    </script>
-</body>
-</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
-
-  ```
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.2.0/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-  <!-- or -->
-  <script src="https://unpkg.com/dynamsoft-javascript-barcode@8.2.0/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-  ```
-
-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
-<!DOCTYPE html>
-<html>
-<body>
-    <!-- Please visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js to get a trial license. -->
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.2.1/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-    <script>
-        // initializes and uses the library
-        let scanner = null;
-        (async()=>{
-            scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            scanner.onFrameRead = results => {if(results.length > 0 ) console.log(results);};
-            scanner.onUnduplicatedRead = (txt, result) => {alert(txt);};
-            await scanner.show();
-        })();
-    </script>
-</body>
-</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
-
-  ```
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.2.1/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-  <!-- or -->
-  <script src="https://unpkg.com/dynamsoft-javascript-barcode@8.2.1/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-  ```
-
-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
-<!DOCTYPE html>
-<html>
-<body>
-    <!-- Please visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js to get a trial license. -->
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.2.3/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-    <script>
-        // initializes and uses the library
-        let scanner = null;
-        (async()=>{
-            scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            scanner.onFrameRead = results => {if(results.length > 0 ) console.log(results);};
-            scanner.onUnduplicatedRead = (txt, result) => {alert(txt);};
-            await scanner.show();
-        })();
-    </script>
-</body>
-</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
-
-  ```
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.2.3/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-  <!-- or -->
-  <script src="https://unpkg.com/dynamsoft-javascript-barcode@8.2.3/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-  ```
-
-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
-<!DOCTYPE html>
-<html>
-
-<body>
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.2.5/dist/dbr.js"></script>
-  <script>
-        // initializes and uses the library
-        let scanner = null;
-        (async () => {
-            scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            scanner.onFrameRead = results => {
-                if (results.length > 0) console.log(results);
-            };
-            scanner.onUnduplicatedRead = (txt, result) => {
-                alert(txt);
-            };
-            await scanner.show();
-        })();
-    </script>
-</body>
-
-</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
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.2.5/dist/dbr.js"></script>
-  ```
-
-* UNPKG  
-
-  ``` html
-  <script src="https://unpkg.com/dynamsoft-javascript-barcode@8.2.5/dist/dbr.js"></script>
-  ```
-
-#### 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
-<script src="/DBR-JS-8.2.5/dist/dbr.js"></script>
-```
-
-or
-
-``` html
-<script src="/node_modules/dynamsoft-javascript-barcode/dist/dbr.js"></script>
-```
-
-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
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.2.5/dist/dbr.js" data-productKeys="t0068NQAAACgTVU2aucyxqETXKkiomqhV7YoLrnqjLiQQRSH5DBV1UtIs4..."></script>
-  ```
-
-
-#### 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<sup>*</sup>\(gzip\) | 897 KB | 1.2 MB |
-  | 1D | &#10003; | &#10003; |
-  | QR | &#10003; | &#10003; |
-  | Micro QR | - | &#10003; |
-  | PDF417 | &#10003; | &#10003; |
-  | Micro PDF417 | - | &#10003; |
-  | DataMatrix | &#10003; | &#10003; |
-  | Aztec | - | &#10003; |
-  | MaxiCode | - | &#10003; |
-  | Patch Code | - | &#10003; |
-  | GS1 Composite Code | - | &#10003; |
-  | GS1 DataBar | - | &#10003; |
-  | DotCode | - | &#10003; |
-  | Postal Code | - | &#10003; |
-  | DPM | - | &#10003; |
-  | getRuntimeSettings | &#10003; | &#10003; |
-  | updateRuntimeSettings | &#10003; | &#10003; |
-  | getIntermediateResults | - | &#10003; |
-  | initRuntimeSettingsWithString | - | &#10003; |
-  | outputSettingsToString | - | &#10003; |
-
-  <sup>*</sup> 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
-  <div id="scannerUI"></div>
-  ```
-
-  ``` 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
-    <div id="div-video-container">
-        <video class="dbrScanner-video" playsinline="true" style="width:100%;height:100%;position:absolute;left:0;top:0;"></video>
-    </div>
-    <script>
-        let scanner = null;
-        (async()=>{
-            scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            await scanner.setUIElement(document.getElementById('div-video-container'));
-            scanner.onFrameRead = results => {console.log(results);};
-            scanner.onUnduplicatedRead = (txt, result) => {alert(txt);};
-            await scanner.show();
-        })();
-    </script>
-    ```
-
-    > 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
-    <select class="dbrScanner-sel-camera"></select>
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-    ``` html
-    <select class="dbrScanner-sel-resolution"></select>
-    ```
-
-    [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
-    <select class="dbrScanner-sel-resolution">
-        <option class="dbrScanner-opt-gotResolution" value="got"></option>
-        <option data-width="1920" data-height="1080">1920 x 1080</option>
-        <option data-width="1280" data-height="720">1280 x 720</option>
-        <option data-width="640" data-height="480">640 x 480</option>
-    </select>
-    ```
-
-    [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 <a href="https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js" target="_blank">Request a Trial License</a> 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/iOS<sup>1</sup>)
-Firefox | v52+ (v55+ on Android/iOS<sup>1</sup>)
-Edge<sup>2</sup> | v16+
-Safari<sup>3</sup> | v11+
-
-<sup>1</sup> iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-<sup>2</sup> On Edge, due to strict Same-origin policy, you must host the library files on the same domain as your web page. 
-
-<sup>3</sup> 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 (`<script type="module">`)
-* `dbr.scanner.html` // Defines the default scanner UI
-* `dbr-<version>.worker.js` // Defines the worker thread for barcode reading
-* `dbr-<version>.wasm.js` // Compact edition of the library (.js)
-* `dbr-<version>.wasm` // Compact edition of the library (.wasm)
-* `dbr-<version>.full.wasm.js` // Full edition of the library (.js)
-* `dbr-<version>.full.wasm` // Full edition of the library (.wasm)
-
-### Step Two: Configure the Server
-
-* Set the MIME type for `.wasm` to `application/wasm`.
-
-  Different servers are configured differently. Here are some popular ones:
-
-  + NGINX: <a href="https://www.nginx.com/resources/wiki/start/topics/examples/full/#mime-types" target="_blank">mime.types</a>
-  + IIS: <a href="https://github.com/dynamsoft-dbr/javascript-barcode/blob/dac614f8033661901d85381dfaff8d612115862a/documents/conf/Web.config" target="_blank">Web.config</a>
-  + Java™ EE web app: <a href="https://github.com/dynamsoft-dbr/javascript-barcode/blob/dac614f8033661901d85381dfaff8d612115862a/documents/conf/web.xml" target="_blank">web.xml</a>
-  + Node.js: <a href="https://github.com/broofa/node-mime" target="_blank">npm mime</a>
-
-* Enable HTTPS
-
-  To use the library, you must access your website / web application via a secure HTTPS connection. This is due to browser security restrictions which only grant camera video streaming access to a [secure context](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts).
-
-  > For convenience, self-signed certificates are allowed during development and testing.
-
-### Step Three: Include the library from the server
-
-Now that the library is hosted on your server, you can include it accordingly.
-
-``` html
-<script src="https://www.yourwebsite.com/dynamsoft-javascript-barcode/dist/dbr.js"></script>
-```
-
-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
-<!DOCTYPE html>
-<html>
-
-<body>
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.4.0/dist/dbr.js"></script>
-  <script>
-        // initializes and uses the library
-        let scanner = null;
-        (async () => {
-            scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            scanner.onFrameRead = results => {
-                if (results.length > 0) console.log(results);
-            };
-            scanner.onUnduplicatedRead = (txt, result) => {
-                alert(txt);
-            };
-            await scanner.show();
-        })();
-    </script>
-</body>
-
-</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
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.4.0/dist/dbr.js"></script>
-  ```
-
-* UNPKG  
-
-  ``` html
-  <script src="https://unpkg.com/dynamsoft-javascript-barcode@8.4.0/dist/dbr.js"></script>
-  ```
-
-#### 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
-<script src="/DBR-JS-8.4.0/dist/dbr.js"></script>
-```
-
-or
-
-``` html
-<script src="/node_modules/dynamsoft-javascript-barcode/dist/dbr.js"></script>
-```
-
-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
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.4.0/dist/dbr.js" data-productKeys="t0068NQAAACgTVU2aucyxqETXKkiomqhV7YoLrnqjLiQQRSH5DBV1UtIs4..."></script>
-  ```
-
-
-#### 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<sup>*</sup>\(gzip\) | 910 KB | 1.2 MB |
-  | 1D | &#10003; | &#10003; |
-  | QR | &#10003; | &#10003; |
-  | Micro QR | - | &#10003; |
-  | PDF417 | &#10003; | &#10003; |
-  | Micro PDF417 | - | &#10003; |
-  | DataMatrix | &#10003; | &#10003; |
-  | Aztec | - | &#10003; |
-  | MaxiCode | - | &#10003; |
-  | Patch Code | - | &#10003; |
-  | GS1 Composite Code | - | &#10003; |
-  | GS1 DataBar | - | &#10003; |
-  | DotCode | - | &#10003; |
-  | Postal Code | - | &#10003; |
-  | DPM | - | &#10003; |
-  | getRuntimeSettings | &#10003; | &#10003; |
-  | updateRuntimeSettings | &#10003; | &#10003; |
-  | getIntermediateResults | - | &#10003; |
-  | initRuntimeSettingsWithString | - | &#10003; |
-  | outputSettingsToString | - | &#10003; |
-
-  <sup>*</sup> 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
-  <div id="scannerUI"></div>
-  ```
-
-  ``` 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
-    <div id="div-video-container">
-        <video class="dbrScanner-video" playsinline="true" style="width:100%;height:100%;position:absolute;left:0;top:0;"></video>
-    </div>
-    <script>
-        let scanner = null;
-        (async()=>{
-            scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            await scanner.setUIElement(document.getElementById('div-video-container'));
-            scanner.onFrameRead = results => {console.log(results);};
-            scanner.onUnduplicatedRead = (txt, result) => {alert(txt);};
-            await scanner.show();
-        })();
-    </script>
-    ```
-
-    > 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
-    <select class="dbrScanner-sel-camera"></select>
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-    ``` html
-    <select class="dbrScanner-sel-resolution"></select>
-    ```
-
-    [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
-    <select class="dbrScanner-sel-resolution">
-        <option class="dbrScanner-opt-gotResolution" value="got"></option>
-        <option data-width="1920" data-height="1080">1920 x 1080</option>
-        <option data-width="1280" data-height="720">1280 x 720</option>
-        <option data-width="640" data-height="480">640 x 480</option>
-    </select>
-    ```
-
-    [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 <a href="https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js" target="_blank">Request a Trial License</a> 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/iOS<sup>1</sup>)
-Firefox | v52+ (v55+ on Android/iOS<sup>1</sup>)
-Edge<sup>2</sup> | v16+
-Safari<sup>3</sup> | v11+
-
-<sup>1</sup> iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-<sup>2</sup> On Edge, due to strict Same-origin policy, you must host the library files on the same domain as your web page. 
-
-<sup>3</sup> 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 (`<script type="module">`)
-* `dbr.scanner.html` // Defines the default scanner UI
-* `dbr-<version>.worker.js` // Defines the worker thread for barcode reading
-* `dbr-<version>.wasm.js` // Compact edition of the library (.js)
-* `dbr-<version>.wasm` // Compact edition of the library (.wasm)
-* `dbr-<version>.full.wasm.js` // Full edition of the library (.js)
-* `dbr-<version>.full.wasm` // Full edition of the library (.wasm)
-
-### Step Two: Configure the Server
-
-* Set the MIME type for `.wasm` to `application/wasm` on your webserver.
-  
-  The goal is to configure your server to send the correct Content-Type header for each document.
-
-  Different types of webservers are configured differently. Here are some popular ones:
-
-  + [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)
-
-* Enable HTTPS
-
-  To use the library, you must access your website / web application via a secure HTTPS connection. This is due to browser security restrictions which only grant camera video streaming access to a [secure context](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts).
-
-  > For convenience, self-signed certificates are allowed during development and testing.
-
-### Step Three: Include the library from the server
-
-Now that the library is hosted on your server, you can include it accordingly.
-
-``` html
-<script src="https://www.yourwebsite.com/dynamsoft-javascript-barcode/dist/dbr.js"></script>
-```
-
-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
-<!DOCTYPE html>
-<html>
-
-<body>
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.6.0/dist/dbr.js"></script>
-  <script>
-    // initializes and uses the library
-    (async () => {
-      let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-      scanner.onFrameRead = results => {
-        if (results.length > 0) console.log(results);
-      };
-      scanner.onUnduplicatedRead = (txt, result) => {
-        alert(txt);
-      };
-      await scanner.show();
-    })();
-  </script>
-</body>
-
-</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
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.6.0/dist/dbr.js"></script>
-  ```
-
-* UNPKG  
-
-  ``` html
-  <script src="https://unpkg.com/dynamsoft-javascript-barcode@8.6.0/dist/dbr.js"></script>
-  ```
-
-#### 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
-<script src="/DBR-JS-8.6.0/dist/dbr.js"></script>
-```
-
-or
-
-``` html
-<script src="/node_modules/dynamsoft-javascript-barcode/dist/dbr.js"></script>
-```
-
-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
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.6.0/dist/dbr.js" data-productKeys="t0068NQAAACgTVU2aucyxqETXKkiomqhV7YoLrnqjLiQQRSH5DBV1UtIs4..."></script>
-```
-
-#### 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
-  <div id="scannerUI"></div>
-  ```
-
-  ``` 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
-    <div id="div-video-container">
-      <video class="dbrScanner-video" playsinline="true" style="width:100%;height:100%;position:absolute;left:0;top:0;"></video>
-    </div>
-    <script>
-      (async()=>{
-        let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-        await scanner.setUIElement(document.getElementById('div-video-container'));
-        scanner.onFrameRead = results => {console.log(results);};
-        scanner.onUnduplicatedRead = (txt, result) => {alert(txt);};
-        await scanner.show();
-      })();
-    </script>
-    ```
-
-    > 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
-    <select class="dbrScanner-sel-camera"></select>
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-    ``` html
-    <select class="dbrScanner-sel-resolution"></select>
-    ```
-
-    [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
-    <select class="dbrScanner-sel-resolution">
-      <option class="dbrScanner-opt-gotResolution" value="got"></option>
-      <option data-width="1920" data-height="1080">1920 x 1080</option>
-      <option data-width="1280" data-height="720">1280 x 720</option>
-      <option data-width="640" data-height="480">640 x 480</option>
-    </select>
-    ```
-
-    [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 <a href="https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js" target="_blank">Request a Trial License</a> 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/iOS<sup>1</sup>)
-  Firefox | v52+ (v55+ on Android/iOS<sup>1</sup>)
-  Edge<sup>2</sup> | v16+
-  Safari<sup>3</sup> | v11+
-
-  <sup>1</sup> iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  <sup>2</sup> On Edge, due to strict Same-origin policy, you must host the library files on the same domain as your web page. 
-
-  <sup>3</sup> 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 (`<script type="module">`)
-* `dbr.scanner.html` // Defines the default scanner UI
-* `dbr-<version>.worker.js` // Defines the worker thread for barcode reading
-* `dbr-<version>.wasm.js` // Compact edition of the library (.js)
-* `dbr-<version>.wasm` // Compact edition of the library (.wasm)
-* `dbr-<version>.full.wasm.js` // Full edition of the library (.js)
-* `dbr-<version>.full.wasm` // Full edition of the library (.wasm)
-
-### Step Two: Configure the Server
-
-* Set the MIME type for `.wasm` as `application/wasm` on your webserver.
-  
-  The goal is to configure your server to send the correct Content-Type header for the wasm file so that it is processed correctly by the browser.
-
-  Different types of webservers are configured differently, for example:
-
-  + [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)
-
-* Enable HTTPS
-
-  To use the library, you must access your website / web application via a secure HTTPS connection. This is due to browser security restrictions which only grant camera video streaming access to a [secure context](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts).
-
-  > For convenience, self-signed certificates are allowed during development and testing.
-
-### Step Three: Include the library from the server
-
-Now that the library is hosted on your server, you can include it accordingly.
-
-``` html
-<script src="https://www.yourwebsite.com/dynamsoft-javascript-barcode/dist/dbr.js"></script>
-```
-
-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
-<!DOCTYPE html>
-<html>
-
-<body>
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.6.3/dist/dbr.js"></script>
-  <script>
-    // initializes and uses the library
-    (async () => {
-      let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-      scanner.onFrameRead = results => {
-        if (results.length > 0) console.log(results);
-      };
-      scanner.onUnduplicatedRead = (txt, result) => {
-        alert(txt);
-      };
-      await scanner.show();
-    })();
-  </script>
-</body>
-
-</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
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.6.3/dist/dbr.js"></script>
-  ```
-
-* UNPKG  
-
-  ``` html
-  <script src="https://unpkg.com/dynamsoft-javascript-barcode@8.6.3/dist/dbr.js"></script>
-  ```
-
-#### 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
-<script src="/DBR-JS-8.6.3/dist/dbr.js"></script>
-```
-
-or
-
-``` html
-<script src="/node_modules/dynamsoft-javascript-barcode/dist/dbr.js"></script>
-```
-
-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
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.6.3/dist/dbr.js" data-productKeys="t0068NQAAACgTVU2aucyxqETXKkiomqhV7YoLrnqjLiQQRSH5DBV1UtIs4..."></script>
-```
-
-#### 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
-  <div id="scannerUI"></div>
-  ```
-
-  ``` 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
-    <div id="div-video-container">
-      <video class="dbrScanner-video" playsinline="true" style="width:100%;height:100%;position:absolute;left:0;top:0;"></video>
-    </div>
-    <script>
-      (async()=>{
-        let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-        await scanner.setUIElement(document.getElementById('div-video-container'));
-        scanner.onFrameRead = results => {console.log(results);};
-        scanner.onUnduplicatedRead = (txt, result) => {alert(txt);};
-        await scanner.show();
-      })();
-    </script>
-    ```
-
-    > 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
-    <select class="dbrScanner-sel-camera"></select>
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-    ``` html
-    <select class="dbrScanner-sel-resolution"></select>
-    ```
-
-    [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
-    <select class="dbrScanner-sel-resolution">
-      <option class="dbrScanner-opt-gotResolution" value="got"></option>
-      <option data-width="1920" data-height="1080">1920 x 1080</option>
-      <option data-width="1280" data-height="720">1280 x 720</option>
-      <option data-width="640" data-height="480">640 x 480</option>
-    </select>
-    ```
-
-    [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 <a href="https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js" target="_blank">Request a Trial License</a> 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/iOS<sup>1</sup>)
-  Firefox | v52+ (v55+ on Android/iOS<sup>1</sup>)
-  Edge<sup>2</sup> | v16+
-  Safari<sup>3</sup> | v11+
-
-  <sup>1</sup> iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  <sup>2</sup> On Edge, due to strict Same-origin policy, you must host the library files on the same domain as your web page. 
-
-  <sup>3</sup> 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 (`<script type="module">`)
-* `dbr.scanner.html` // Defines the default scanner UI
-* `dbr-<version>.worker.js` // Defines the worker thread for barcode reading
-* `dbr-<version>.wasm.js` // Compact edition of the library (.js)
-* `dbr-<version>.wasm` // Compact edition of the library (.wasm)
-* `dbr-<version>.full.wasm.js` // Full edition of the library (.js)
-* `dbr-<version>.full.wasm` // Full edition of the library (.wasm)
-
-### Step Two: Configure the Server
-
-* Set the MIME type for `.wasm` as `application/wasm` on your webserver.
-  
-  The goal is to configure your server to send the correct Content-Type header for the wasm file so that it is processed correctly by the browser.
-
-  Different types of webservers are configured differently, for example:
-
-  + [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)
-
-* Enable HTTPS
-
-  To use the library, you must access your website / web application via a secure HTTPS connection. This is due to browser security restrictions which only grant camera video streaming access to a [secure context](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts).
-
-  > For convenience, self-signed certificates are allowed during development and testing.
-
-### Step Three: Include the library from the server
-
-Now that the library is hosted on your server, you can include it accordingly.
-
-``` html
-<script src="https://www.yourwebsite.com/dynamsoft-javascript-barcode/dist/dbr.js"></script>
-```
-
-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
-<!DOCTYPE html>
-<html>
-
-<body>
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.0/dist/dbr.js"></script>
-  <script>
-    // initializes and uses the library
-    (async () => {
-      let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-      scanner.onFrameRead = results => {
-        if (results.length > 0) console.log(results);
-      };
-      scanner.onUnduplicatedRead = (txt, result) => {
-        alert(txt);
-      };
-      await scanner.show();
-    })();
-  </script>
-</body>
-
-</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
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.0/dist/dbr.js"></script>
-  ```
-
-* UNPKG  
-
-  ``` html
-  <script src="https://unpkg.com/dynamsoft-javascript-barcode@8.8.0/dist/dbr.js"></script>
-  ```
-
-#### 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
-<script src="/DBR-JS-8.8.0/dist/dbr.js"></script>
-```
-
-or
-
-``` html
-<script src="/node_modules/dynamsoft-javascript-barcode/dist/dbr.js"></script>
-```
-
-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
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.0/dist/dbr.js" data-productKeys="t0068NQAAACgTVU2aucyxqETXKkiomqhV7YoLrnqjLiQQRSH5DBV1UtIs4..."></script>
-```
-
-#### 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
-  <div id="scannerUI"></div>
-  ```
-
-  ``` 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
-    <div id="div-video-container">
-      <video class="dbrScanner-video" playsinline="true" style="width:100%;height:100%;position:absolute;left:0;top:0;"></video>
-    </div>
-    <script>
-      (async()=>{
-        let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-        await scanner.setUIElement(document.getElementById('div-video-container'));
-        scanner.onFrameRead = results => {console.log(results);};
-        scanner.onUnduplicatedRead = (txt, result) => {alert(txt);};
-        await scanner.show();
-      })();
-    </script>
-    ```
-
-    > 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
-    <select class="dbrScanner-sel-camera"></select>
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-    ``` html
-    <select class="dbrScanner-sel-resolution"></select>
-    ```
-
-    [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
-    <select class="dbrScanner-sel-resolution">
-      <option class="dbrScanner-opt-gotResolution" value="got"></option>
-      <option data-width="1920" data-height="1080">1920 x 1080</option>
-      <option data-width="1280" data-height="720">1280 x 720</option>
-      <option data-width="640" data-height="480">640 x 480</option>
-    </select>
-    ```
-
-    [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 <a href="https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js" target="_blank">Request a Trial License</a> 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/iOS<sup>1</sup>)
-  Firefox | v52+ (v55+ on Android/iOS<sup>1</sup>)
-  Edge<sup>2</sup> | v16+
-  Safari<sup>3</sup> | v11+
-
-  <sup>1</sup> iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  <sup>2</sup> On Edge, due to strict Same-origin policy, you must host the library files on the same domain as your web page. 
-
-  <sup>3</sup> 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 (`<script type="module">`)
-* `dbr.scanner.html` // Defines the default scanner UI
-* `dbr-<version>.worker.js` // Defines the worker thread for barcode reading
-* `dbr-<version>.wasm.js` // Compact edition of the library (.js)
-* `dbr-<version>.wasm` // Compact edition of the library (.wasm)
-* `dbr-<version>.full.wasm.js` // Full edition of the library (.js)
-* `dbr-<version>.full.wasm` // Full edition of the library (.wasm)
-
-### Step Two: Configure the Server
-
-* Set the MIME type for `.wasm` as `application/wasm` on your webserver.
-  
-  The goal is to configure your server to send the correct Content-Type header for the wasm file so that it is processed correctly by the browser.
-
-  Different types of webservers are configured differently, for example:
-
-  + [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)
-
-* Enable HTTPS
-
-  To use the library, you must access your website / web application via a secure HTTPS connection. This is due to browser security restrictions which only grant camera video streaming access to a [secure context](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts).
-
-  > For convenience, self-signed certificates are allowed during development and testing.
-
-### Step Three: Include the library from the server
-
-Now that the library is hosted on your server, you can include it accordingly.
-
-``` html
-<script src="https://www.yourwebsite.com/dynamsoft-javascript-barcode/dist/dbr.js"></script>
-```
-
-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
-<!DOCTYPE html>
-<html>
-
-<body>
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.3/dist/dbr.js"></script>
-  <script>
-    // initializes and uses the library
-    (async () => {
-      let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-      scanner.onFrameRead = results => {
-        if (results.length > 0) console.log(results);
-      };
-      scanner.onUnduplicatedRead = (txt, result) => {
-        alert(txt);
-      };
-      await scanner.show();
-    })();
-  </script>
-</body>
-
-</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
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.3/dist/dbr.js"></script>
-  ```
-
-* UNPKG  
-
-  ``` html
-  <script src="https://unpkg.com/dynamsoft-javascript-barcode@8.8.3/dist/dbr.js"></script>
-  ```
-
-#### 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
-<script src="/dbr-js-8.8.3/dist/dbr.js"></script>
-```
-
-or
-
-``` html
-<script src="/node_modules/dynamsoft-javascript-barcode/dist/dbr.js"></script>
-```
-
-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
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.3/dist/dbr.js" data-productKeys="t0068NQAAACgTVU2aucyxqETXKkiomqhV7YoLrnqjLiQQRSH5DBV1UtIs4..."></script>
-```
-
-#### 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
-  <div id="scannerUI"></div>
-  ```
-
-  ``` 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
-    <div id="div-video-container">
-      <video class="dbrScanner-video" playsinline="true" style="width:100%;height:100%;position:absolute;left:0;top:0;"></video>
-    </div>
-    <script>
-      (async()=>{
-        let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-        await scanner.setUIElement(document.getElementById('div-video-container'));
-        scanner.onFrameRead = results => {console.log(results);};
-        scanner.onUnduplicatedRead = (txt, result) => {alert(txt);};
-        await scanner.show();
-      })();
-    </script>
-    ```
-
-    > 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
-    <select class="dbrScanner-sel-camera"></select>
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-    ``` html
-    <select class="dbrScanner-sel-resolution"></select>
-    ```
-
-    [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
-    <select class="dbrScanner-sel-resolution">
-      <option class="dbrScanner-opt-gotResolution" value="got"></option>
-      <option data-width="1920" data-height="1080">1920 x 1080</option>
-      <option data-width="1280" data-height="720">1280 x 720</option>
-      <option data-width="640" data-height="480">640 x 480</option>
-    </select>
-    ```
-
-    [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 <a href="https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js" target="_blank">Request a Trial License</a> 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/iOS<sup>1</sup>)
-  Firefox | v52+ (v55+ on Android/iOS<sup>1</sup>)
-  Edge<sup>2</sup> | v16+
-  Safari<sup>3</sup> | v11+
-
-  <sup>1</sup> iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  <sup>2</sup> On Edge, due to strict Same-origin policy, you must host the library files on the same domain as your web page. 
-  
-  <sup>3</sup> 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 (`<script type="module">`)
-* `dbr.scanner.html` // Defines the default scanner UI
-* `dbr-<version>.worker.js` // Defines the worker thread for barcode reading
-* `dbr-<version>.wasm.js` // Compact edition of the library (.js)
-* `dbr-<version>.wasm` // Compact edition of the library (.wasm)
-* `dbr-<version>.full.wasm.js` // Full edition of the library (.js)
-* `dbr-<version>.full.wasm` // Full edition of the library (.wasm)
-
-### Step Two: Configure the Server
-
-* Set the MIME type for `.wasm` as `application/wasm` on your webserver.
-  
-  The goal is to configure your server to send the correct Content-Type header for the wasm file so that it is processed correctly by the browser.
-
-  Different types of webservers are configured differently, for example:
-
-  + [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)
-
-* Enable HTTPS
-
-  To use the library, you must access your website / web application via a secure HTTPS connection. This is due to browser security restrictions which only grant camera video streaming access to a [secure context](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts).
-
-  > For convenience, self-signed certificates can be used during development and testing.
-
-### Step Three: Include the library from the server
-
-Now that the library is hosted on your server, you can include it accordingly.
-
-``` html
-<script src="https://www.yourwebsite.com/dynamsoft-javascript-barcode/dist/dbr.js"></script>
-```
-
-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 `<pre>` element.
-2. Manually replace each `\n` character in the result with `<br \>`
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
-<!DOCTYPE html>
-<html>
-
-<body>
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.5/dist/dbr.js"></script>
-  <script>
-    // initializes and uses the library
-    (async () => {
-      let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-      scanner.onFrameRead = results => {
-        if (results.length > 0) console.log(results);
-      };
-      scanner.onUnduplicatedRead = (txt, result) => {
-        alert(txt);
-      };
-      await scanner.show();
-    })();
-  </script>
-</body>
-
-</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
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.5/dist/dbr.js"></script>
-  ```
-
-* UNPKG  
-
-  ``` html
-  <script src="https://unpkg.com/dynamsoft-javascript-barcode@8.8.5/dist/dbr.js"></script>
-  ```
-
-#### 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
-<script src="/dbr-js-8.8.5/dist/dbr.js"></script>
-```
-
-or
-
-``` html
-<script src="/node_modules/dynamsoft-javascript-barcode/dist/dbr.js"></script>
-```
-
-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
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.5/dist/dbr.js" data-productKeys="t0068NQAAACgTVU2aucyxqETXKkiomqhV7YoLrnqjLiQQRSH5DBV1UtIs4..."></script>
-```
-
-#### 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
-  <div id="scannerUI"></div>
-  ```
-
-  ``` 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
-    <div id="div-video-container">
-      <video class="dbrScanner-video" playsinline="true" style="width:100%;height:100%;position:absolute;left:0;top:0;"></video>
-    </div>
-    <script>
-      (async()=>{
-        let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-        await scanner.setUIElement(document.getElementById('div-video-container'));
-        scanner.onFrameRead = results => {console.log(results);};
-        scanner.onUnduplicatedRead = (txt, result) => {alert(txt);};
-        await scanner.show();
-      })();
-    </script>
-    ```
-
-    > 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
-    <select class="dbrScanner-sel-camera"></select>
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-    ``` html
-    <select class="dbrScanner-sel-resolution"></select>
-    ```
-
-    [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
-    <select class="dbrScanner-sel-resolution">
-      <option class="dbrScanner-opt-gotResolution" value="got"></option>
-      <option data-width="1920" data-height="1080">1920 x 1080</option>
-      <option data-width="1280" data-height="720">1280 x 720</option>
-      <option data-width="640" data-height="480">640 x 480</option>
-    </select>
-    ```
-
-    [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 <a href="https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js" target="_blank">Request a Trial License</a> 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/iOS<sup>1</sup>)
-  Firefox | v52+ (v55+ on Android/iOS<sup>1</sup>)
-  Edge<sup>2</sup> | v16+
-  Safari<sup>3</sup> | v11+
-
-  <sup>1</sup> iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  <sup>2</sup> On Edge, due to strict Same-origin policy, you must host the library files on the same domain as your web page. 
-  
-  <sup>3</sup> 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 (`<script type="module">`)
-* `dbr.scanner.html` // Defines the default scanner UI
-* `dbr-<version>.worker.js` // Defines the worker thread for barcode reading
-* `dbr-<version>.wasm.js` // Compact edition of the library (.js)
-* `dbr-<version>.wasm` // Compact edition of the library (.wasm)
-* `dbr-<version>.full.wasm.js` // Full edition of the library (.js)
-* `dbr-<version>.full.wasm` // Full edition of the library (.wasm)
-
-### Step Two: Configure the Server
-
-* Set the MIME type for `.wasm` as `application/wasm` on your webserver.
-  
-  The goal is to configure your server to send the correct Content-Type header for the wasm file so that it is processed correctly by the browser.
-
-  Different types of webservers are configured differently, for example:
-
-  + [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)
-
-* Enable HTTPS
-
-  To use the library, you must access your website / web application via a secure HTTPS connection. This is due to browser security restrictions which only grant camera video streaming access to a [secure context](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts).
-
-  > For convenience, self-signed certificates can be used during development and testing.
-
-### Step Three: Include the library from the server
-
-Now that the library is hosted on your server, you can include it accordingly.
-
-``` html
-<script src="https://www.yourwebsite.com/dynamsoft-javascript-barcode/dist/dbr.js"></script>
-```
-
-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 `<pre>` element.
-2. Manually replace each `\n` character in the result with `<br \>`
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
----
-
-<!--The original doc is hosted here => https://github.com/dynamsoft-docs/barcode-reader-docs-js/blob/preview/programming/javascript/user-guide/index.md -->
-
-# 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)
-
-<br>
-
-## 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
-<!DOCTYPE html>
-<html>
-
-<body>
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.7/dist/dbr.js"></script>
-  <script>
-        // initializes and uses the library
-        (async () => {
-            let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            scanner.onFrameRead = results => {
-                if (results.length > 0) console.log(results);
-            };
-            scanner.onUnduplicatedRead = (txt, result) => {
-                alert(txt);
-            };
-            await scanner.show();
-        })();
-    </script>
-</body>
-
-</html>
-```
-
-<p align="center" style="text-align:center; ">
-  <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/master/1.hello-world/1.minimum-code.html" title="Code in Github">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg" alt="Code in Github" style="width:20px;height:20px;">
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/" title="Run via JSFiddle">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/jsfiddle.svg" alt="Run via JSFiddle" style="width:20px;height:20px;">
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.minimum-code.html?utm_source=guide" title="Run in Dynamsoft">
-    <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/svgs/solid/circle-play.svg" alt="Run in Dynamsoft" style="width:20px;height:20px;">
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://tst.dynamsoft.com/public/download/dbr/browser/code/helloworld-v8.8.7.zip?utm_source=guide" title="Download from Dynamsoft">
-    <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/svgs/solid/download.svg" alt="Download from Dynamsoft" style="width:20px;height:20px; ">
-  </a>
-</p>
-
------
-
-*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 <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices" title="MediaDevices interface">MediaDevices interface</a>.
-
-  + `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).
-
-<br>
-
-## 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
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.7/dist/dbr.js"></script>
-  ```
-
-* UNPKG  
-
-  ```html
-  <script src="https://unpkg.com/dynamsoft-javascript-barcode@8.8.7/dist/dbr.js"></script>
-  ```
-
-#### 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
-<script src="/dbr-js-8.8.7/dist/dbr.js"></script>
-```
-
-or
-
-```html
-<script src="/node_modules/dynamsoft-javascript-barcode/dist/dbr.js"></script>
-```
-
-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
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.7/dist/dbr.js"
-  data-license="YOUR-ORGANIZATION-ID or YOUR-HANDSHAKECODE or AN-OFFLINE-LICENSE or ANY-OTHER-TYPE-OF-SUPPORTED-LICENSE-STRING"></script>
-```
-
-*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 <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Syntax" target="_blank" title="here">here</a>.
-
-* `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 <a href="https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/global-interfaces.html?utm_source=guide#runtimesettings" target="_blank" title="here">here</a>. 
-
-  ```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
-  <div id="div-video-container"></div>
-  ```
-
-  ```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
-    <div id="div-video-container" style="position:relative;width:100%;height:70vh;">
-        <video class="dce-video" playsinline="true" muted style="position:absolute;left:0;top:0;width:100%;height:100%;"></video>
-    </div>
-    <script>
-        (async () => {
-            let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            await scanner.setUIElement(document.getElementById('div-video-container'));
-            scanner.onFrameRead = results => {
-                console.log(results);
-            };
-            scanner.onUnduplicatedRead = (txt, result) => {
-                alert(txt);
-            };
-            await scanner.show();
-        })();
-    </script>
-    ```
-
-    > 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
-    <select class="dce-sel-camera" style="position:absolute;left:0;top:0;"></select>
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-    ```html
-    <select class="dce-sel-resolution" style="position:absolute;left:0;top:20px;"></select>
-    ```
-
-    [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
-    <select class="dce-sel-resolution" style="position:absolute;left:0;top:20px;">
-        <option class="dce-opt-gotResolution" value="got"></option>
-        <option data-width="1920" data-height="1080">1920 x 1080</option>
-        <option data-width="1280" data-height="720">1280 x 720</option>
-        <option data-width="640" data-height="480">640 x 480</option>
-    </select>
-    ```
-
-    [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).
-
-<br>
-
-## Requesting a Trial
-
-You can request a 30-day free private trial license via the <a href="https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js" target="_blank">Request a Trial License</a> 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.
-
-<br>
-
-## 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/iOS<sup>1</sup>)
-  Firefox | v52+ (v55+ on Android/iOS<sup>1</sup>)
-  Edge<sup>2</sup> | v16+
-  Safari<sup>3</sup> | v11+
-
-  <sup>1</sup> iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  <sup>2</sup> On Edge, due to strict Same-origin policy, you must host the library files on the same domain as your web page. 
-  
-  <sup>3</sup> 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.
-
-<br>
-
-## 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 (`<script type="module">`)
-* `dbr.scanner.html` // Defines the default scanner UI
-* `dbr-<version>.worker.js` // Defines the worker thread for barcode reading
-* `dbr-<version>.wasm.js` // Compact edition of the library (.js)
-* `dbr-<version>.wasm` // Compact edition of the library (.wasm)
-* `dbr-<version>.full.wasm.js` // Full edition of the library (.js)
-* `dbr-<version>.full.wasm` // Full edition of the library (.wasm)
-
-### Step Two: Configure the Server
-
-* Set the MIME type for `.wasm` as `application/wasm` on your webserver.
-  
-  The goal is to configure your server to send the correct Content-Type header for the wasm file so that it is processed correctly by the browser.
-
-  Different types of webservers are configured differently, for example:
-
-  + <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Apache_Configuration_htaccess#media_types_and_character_encodings" title="Apache">Apache</a>
-  + <a target="_blank" href="https://docs.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/mimemap" title="IIS">IIS</a>
-  + <a target="_blank" href="https://www.nginx.com/resources/wiki/start/topics/examples/full/#mime-types" title="NGINX">NGINX</a>
-
-* Enable HTTPS
-
-  Due to the browser <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts" title="security restriction">security restriction</a> on camera video streaming access, a secure HTTPS connection is required to use the library with camera.
-
-  > For convenience, self-signed certificates can be used during development and testing.
-
-### Step Three: Include the library from the server
-
-Now that the library is hosted on your server, you can include it accordingly.
-
-```html
-<script src="https://www.yourwebsite.com/dynamsoft-javascript-barcode/dist/dbr.js"></script>
-```
-
-Optionally, you may also need to [specify the location of the "engine" files](#specify-the-location-of-the-engine-files).
-
-<br>
-
-## 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).
-
-<br>
-
-## 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).
-
-<br>
-
-## 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 <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia" title="getUserMedia">getUserMedia</a> 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: <a target="_blank" href="https://nginx.org/en/docs/http/configuring_https_servers.html" title="Configuring HTTPS servers">Configuring HTTPS servers</a>
-  + IIS: <a target="_blank" href="https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/" title="Create a Self Signed Certificate in IIS">Create a Self Signed Certificate in IIS</a>
-  + Tomcat: <a target="_blank" href="https://dzone.com/articles/setting-ssl-tomcat-5-minutes" title="Setting Up SSL on Tomcat in 5 minutes">Setting Up SSL on Tomcat in 5 minutes</a>
-  + Node.js: <a target="_blank" href="https://nodejs.org/docs/v0.4.1/api/tls.html" title="npm tls">npm tls</a>
-
-### 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 `<pre>` element.
-2. Manually replace each `\n` character in the result with `<br>`
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
----
-
-<!--The original doc is hosted here => https://github.com/dynamsoft-docs/barcode-reader-docs-js/blob/preview/programming/javascript/user-guide/index.md -->
-
-# 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.
-
-<span style="font-size:20px">Table of Contents</span>
-
-* [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
-<!DOCTYPE html>
-<html>
-
-<body>
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.0.0/dist/dbr.js"></script>
-  <script>
-        // Specifies a license, you can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js to get your own trial license good for 30 days. 
-        Dynamsoft.DBR.BarcodeScanner.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
-        // Initializes and uses the library
-        (async () => {
-            let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            scanner.onFrameRead = results => {
-                if (results.length > 0) console.log(results);
-            };
-            scanner.onUniqueRead = (txt, result) => {
-                alert(txt);
-            };
-            await scanner.show();
-        })();
-    </script>
-</body>
-
-</html>
-```
-
-<p align="center" style="text-align:center; white-space: normal;">
-  <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/master/1.hello-world/1.hello-world.html" title="Code in Github">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg" alt="Code in Github" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/" title="Run via JSFiddle">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/jsfiddle.svg" alt="Run via JSFiddle" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?utm_source=guide" title="Run in Dynamsoft">
-    <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/svgs/solid/circle-play.svg" alt="Run in Dynamsoft" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://tst.dynamsoft.com/public/download/dbr/browser/code/helloworld-v9.0.0.zip?utm_source=guide" title="Download from Dynamsoft">
-    <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/svgs/solid/download.svg" alt="Download from Dynamsoft" width="20" height="20" style="width:20px;height:20px; ">
-  </a>
-</p>
-
------
-
-#### 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 <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices" title="MediaDevices interface">MediaDevices interface</a>.
-
-* `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
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.0.0/dist/dbr.js"></script>
-  ```
-
-* UNPKG  
-
-  ```html
-  <script src="https://unpkg.com/dynamsoft-javascript-barcode@9.0.0/dist/dbr.js"></script>
-  ```
-
-#### 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
-<script src="/dbr-js-9.0.0/dist/dbr.js"></script>
-```
-
-or
-
-```html
-<script src="/node_modules/dynamsoft-javascript-barcode/dist/dbr.js"></script>
-```
-
-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 <a href="https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js" target="_blank">Request a Trial License</a> 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 <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Syntax" target="_blank" title="here">here</a>.
-
-* `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 <a href="https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/global-interfaces.html?utm_source=guide#runtimesettings" target="_blank" title="here">here</a>.
-
-  ```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
-  <div id="div-ui-container"></div>
-  ```
-
-  ```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
-    <div id="div-ui-container" style="width:100%;height:100%;">
-        <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-    </div>
-    <script>
-        (async () => {
-            let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            await scanner.setUIElement(document.getElementById('div-ui-container'));
-            scanner.onFrameRead = results => {
-                console.log(results);
-            };
-            scanner.onUniqueRead = (txt, result) => {
-                alert(txt);
-            };
-            await scanner.show();
-        })();
-    </script>
-    ```
-
-    > 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
-    <select class="dce-sel-camera"></select>
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-    ```html
-    <select class="dce-sel-resolution"></select>
-    ```
-
-    [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
-    <select class="dce-sel-resolution">
-        <option class="dce-opt-gotResolution" value="got"></option>
-        <option data-width="1920" data-height="1080">1920 x 1080</option>
-        <option data-width="1280" data-height="720">1280 x 720</option>
-        <option data-width="640" data-height="480">640 x 480</option>
-    </select>
-    ```
-
-    [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+<sup>1</sup>
-  Firefox | v52+ (v55+ on Android/iOS<sup>1</sup>)
-  Edge<sup>2</sup> | v16+
-  Safari<sup>3</sup> | v11+
-
-  <sup>1</sup> iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  <sup>2</sup> On Edge, due to strict Same-origin policy, you must host the library files on the same domain as your web page.
-  
-  <sup>3</sup> 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 <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia" title="getUserMedia">getUserMedia</a> 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: <a target="_blank" href="https://nginx.org/en/docs/http/configuring_https_servers.html" title="Configuring HTTPS servers">Configuring HTTPS servers</a>
-2. IIS: <a target="_blank" href="https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/" title="Create a Self Signed Certificate in IIS">Create a Self Signed Certificate in IIS</a>
-3. Tomcat: <a target="_blank" href="https://dzone.com/articles/setting-ssl-tomcat-5-minutes" title="Setting Up SSL on Tomcat in 5 minutes">Setting Up SSL on Tomcat in 5 minutes</a>
-4. Node.js: <a target="_blank" href="https://nodejs.org/docs/v0.4.1/api/tls.html" title="npm tls">npm tls</a>
-
-> 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 `<pre>` element.
-2. Manually replace each `\n` character in the result with `<br>`
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
----
-
-<!--The original doc is hosted here => https://github.com/dynamsoft-docs/barcode-reader-docs-js/blob/preview/programming/javascript/user-guide/index.md -->
-
-# 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.
-
-<span style="font-size:20px">Table of Contents</span>
-
-- [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
-<!DOCTYPE html>
-<html>
-
-<body>
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.0.1/dist/dbr.js"></script>
-    <script>
-        // Specifies a license, you can visit https://www.dynamsoft.com/customer/license/trialLicense?ver=9.0.1&utm_source=guide&product=dbr&package=js to get your own trial license good for 30 days. 
-        Dynamsoft.DBR.BarcodeScanner.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
-        // Initializes and uses the library
-        (async () => {
-            let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            scanner.onFrameRead = results => {
-                if (results.length > 0) console.log(results);
-            };
-            scanner.onUniqueRead = (txt, result) => {
-                alert(txt);
-            };
-            await scanner.show();
-        })();
-    </script>
-</body>
-
-</html>
-```
-
-<p align="center" style="text-align:center; white-space: normal; ">
-  <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.0.1/1.hello-world/1.hello-world.html" title="Code in Github" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg" alt="Code in Github" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/" title="Run via JSFiddle" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/jsfiddle.svg" alt="Run via JSFiddle" width="20" height="20" style="width:20px;height:20px;" >
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.0.1&utm_source=guide" title="Run in Dynamsoft" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/svgs/solid/circle-play.svg" alt="Run in Dynamsoft" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-</p>
-
------
-
-#### 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 <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices" title="MediaDevices interface">MediaDevices interface</a>.
-
-* `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 <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.0.1&utm_source=guide" title="Run in Dynamsoft">here</a>. 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 <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia" title="getUserMedia">getUserMedia</a> 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: <a target="_blank" href="https://nginx.org/en/docs/http/configuring_https_servers.html" title="Configuring HTTPS servers">Configuring HTTPS servers</a>
-2. IIS: <a target="_blank" href="https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/" title="Create a Self Signed Certificate in IIS">Create a Self Signed Certificate in IIS</a>
-3. Tomcat: <a target="_blank" href="https://dzone.com/articles/setting-ssl-tomcat-5-minutes" title="Setting Up SSL on Tomcat in 5 minutes">Setting Up SSL on Tomcat in 5 minutes</a>
-4. Node.js: <a target="_blank" href="https://nodejs.org/docs/v0.4.1/api/tls.html" title="npm tls">npm tls</a>
-
-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
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.0.1/dist/dbr.js"></script>
-  ```
-
-* UNPKG  
-
-  ```html
-  <script src="https://unpkg.com/dynamsoft-javascript-barcode@9.0.1/dist/dbr.js"></script>
-  ```
-
-#### 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
-
-  <a target="_blank" href="https://www.dynamsoft.com/barcode-reader/downloads/?ver=9.0.1&utm_source=guide" title="Download the JavaScript Package">Download the JavaScript Package</a>
-
-* 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
-<script src="/dynamsoft-barcode-reader-js-9.0.1/dist/dbr.js"></script>
-```
-
-or
-
-```html
-<script src="/node_modules/dynamsoft-javascript-barcode/dist/dbr.js"></script>
-```
-
-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 <a href="https://www.dynamsoft.com/customer/license/trialLicense?ver=9.0.1&utm_source=guide&product=dbr&package=js" target="_blank">Request a Trial License</a> 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 <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Syntax" target="_blank" title="here">here</a>.
-
-* `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 <a href="https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/global-interfaces.html?ver=9.0.1&utm_source=guide&&ver=latest#runtimesettings" target="_blank" title="here">here</a>.
-
-  ```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
-  <div id="div-ui-container"></div>
-  ```
-
-  ```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
-    <div id="div-ui-container" style="width:100%;height:100%;">
-        <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-    </div>
-    <script>
-        (async () => {
-            let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            await scanner.setUIElement(document.getElementById('div-ui-container'));
-            scanner.onFrameRead = results => {
-                console.log(results);
-            };
-            scanner.onUniqueRead = (txt, result) => {
-                alert(txt);
-            };
-            await scanner.show();
-        })();
-    </script>
-    ```
-
-    > 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
-    <div id="div-ui-container" style="width:100%;height:100%;">
-        <select class="dce-sel-camera"></select><br>
-        <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-    </div>
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-    ```html
-    <div id="div-video-container">
-        <select class="dce-sel-camera"></select>
-        <select class="dce-sel-resolution"></select>
-        <br>
-        <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-    </div>
-    ```
-
-    [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
-    <select class="dce-sel-resolution">
-        <option class="dce-opt-gotResolution" value="got"></option>
-        <option data-width="1920" data-height="1080">1920 x 1080</option>
-        <option data-width="1280" data-height="720">1280 x 720</option>
-        <option data-width="640" data-height="480">640 x 480</option>
-    </select>
-    ```
-
-    [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+<sup>1</sup>
-  Firefox | v52+ (v55+ on Android/iOS<sup>1</sup>)
-  Edge<sup>2</sup> | v16+
-  Safari<sup>3</sup> | v11+
-
-  <sup>1</sup> iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  <sup>2</sup> On Edge, due to strict Same-origin policy, you must host the library files on the same domain as your web page.
-  
-  <sup>3</sup> 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
----
-
-<!--The original doc is hosted here => https://github.com/dynamsoft-docs/barcode-reader-docs-js/blob/preview/programming/javascript/user-guide/index.md -->
-
-# 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.
-
-<span style="font-size:20px">Table of Contents</span>
-
-- [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
-<!DOCTYPE html>
-<html>
-
-<body>
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.0.2/dist/dbr.js"></script>
-    <script>
-        // Specifies a license, you can visit https://www.dynamsoft.com/customer/license/trialLicense?ver=9.0.2&utm_source=guide&product=dbr&package=js to get your own trial license good for 30 days. 
-        Dynamsoft.DBR.BarcodeScanner.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
-        // Initializes and uses the SDK
-        (async () => {
-            let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            scanner.onFrameRead = results => {
-                if (results.length > 0) console.log(results);
-            };
-            scanner.onUniqueRead = (txt, result) => {
-                alert(txt);
-            };
-            await scanner.show();
-        })();
-    </script>
-</body>
-
-</html>
-```
-
-<p align="center" style="text-align:center; white-space: normal; ">
-  <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.0.2/1.hello-world/1.hello-world.html" title="Code in Github" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg" alt="Code in Github" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/" title="Run via JSFiddle" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/jsfiddle.svg" alt="Run via JSFiddle" width="20" height="20" style="width:20px;height:20px;" >
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.0.2&utm_source=guide" title="Run in Dynamsoft" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/svgs/solid/circle-play.svg" alt="Run in Dynamsoft" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-</p>
-
------
-
-#### 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 <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices" title="MediaDevices interface">MediaDevices interface</a>.
-
-* `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 <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.0.2&utm_source=guide" title="Run in Dynamsoft">the Dynamsoft Demo Server</a> or test it with <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/" title="Run in JSFiddle">JSFiddle code editor</a>. 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 <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia" title="getUserMedia">getUserMedia</a> 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: <a target="_blank" href="https://nginx.org/en/docs/http/configuring_https_servers.html" title="Configuring HTTPS servers">Configuring HTTPS servers</a>
-2. IIS: <a target="_blank" href="https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/" title="Create a Self Signed Certificate in IIS">Create a Self Signed Certificate in IIS</a>
-3. Tomcat: <a target="_blank" href="https://dzone.com/articles/setting-ssl-tomcat-5-minutes" title="Setting Up SSL on Tomcat in 5 minutes">Setting Up SSL on Tomcat in 5 minutes</a>
-4. Node.js: <a target="_blank" href="https://nodejs.org/docs/v0.4.1/api/tls.html" title="npm tls">npm tls</a>
-
-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
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.0.2/dist/dbr.js"></script>
-  ```
-
-* UNPKG  
-
-  ```html
-  <script src="https://unpkg.com/dynamsoft-javascript-barcode@9.0.2/dist/dbr.js"></script>
-  ```
-
-#### 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
-
-  <a target="_blank" href="https://www.dynamsoft.com/barcode-reader/downloads/?ver=9.0.2&utm_source=guide" title="Download the JavaScript Package">Download the JavaScript Package</a>
-
-* 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
-<script src="/dynamsoft-barcode-reader-js-9.0.2/dist/dbr.js"></script>
-```
-
-or
-
-```html
-<script src="/node_modules/dynamsoft-javascript-barcode/dist/dbr.js"></script>
-```
-
-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 <a href="https://www.dynamsoft.com/customer/license/trialLicense?ver=9.0.2&utm_source=guide&product=dbr&package=js" target="_blank">Request a Trial License</a> 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 <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Syntax" target="_blank" title="here">here</a>.
-
-* `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 <a href="https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/global-interfaces.html?ver=9.0.2&utm_source=guide&&ver=latest#runtimesettings" target="_blank" title="here">here</a>.
-
-### 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
-  <div id="div-ui-container"></div>
-  ```
-
-  ```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
-    <div id="div-ui-container" style="width:100%;height:100%;">
-        <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-    </div>
-    <script>
-        (async () => {
-            let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            await scanner.setUIElement(document.getElementById('div-ui-container'));
-            scanner.onFrameRead = results => {
-                console.log(results);
-            };
-            scanner.onUniqueRead = (txt, result) => {
-                alert(txt);
-            };
-            await scanner.show();
-        })();
-    </script>
-    ```
-
-    > 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
-    <div id="div-ui-container" style="width:100%;height:100%;">
-        <select class="dce-sel-camera"></select><br>
-        <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-    </div>
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-    ```html
-    <div id="div-ui-container">
-        <select class="dce-sel-camera"></select>
-        <select class="dce-sel-resolution"></select>
-        <br>
-        <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-    </div>
-    ```
-
-    [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
-    <select class="dce-sel-resolution">
-        <option class="dce-opt-gotResolution" value="got"></option>
-        <option data-width="1920" data-height="1080">1920 x 1080</option>
-        <option data-width="1280" data-height="720">1280 x 720</option>
-        <option data-width="640" data-height="480">640 x 480</option>
-    </select>
-    ```
-
-    [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+<sup>1</sup>
-  Firefox | v52+ (v55+ on Android/iOS<sup>1</sup>)
-  Edge<sup>2</sup> | v16+
-  Safari<sup>3</sup> | v11+
-
-  <sup>1</sup> iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  <sup>2</sup> On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.
-  
-  <sup>3</sup> 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
----
-
-<!--The original doc is hosted here => https://github.com/dynamsoft-docs/barcode-reader-docs-js/blob/preview/programming/javascript/user-guide/index.md -->
-
-# 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.
-
-<span style="font-size:20px">Table of Contents</span>
-
-- [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
-<!DOCTYPE html>
-<html>
-
-<body>
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.2.12/dist/dbr.js"></script>
-    <script>
-        // Specifies a license, you can visit https://www.dynamsoft.com/customer/license/trialLicense?ver=9.2.12&utm_source=guide&product=dbr&package=js to get your own trial license good for 30 days. 
-        Dynamsoft.DBR.BarcodeScanner.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
-        // Initializes and uses the SDK
-        (async () => {
-            let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            scanner.onFrameRead = results => {
-                if (results.length > 0) console.log(results);
-            };
-            scanner.onUniqueRead = (txt, result) => {
-                alert(txt);
-            };
-            await scanner.show();
-        })();
-    </script>
-</body>
-
-</html>
-```
-
-<p align="center" style="text-align:center; white-space: normal; ">
-  <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.12/1.hello-world/1.hello-world.html" title="Code in Github" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg" alt="Code in Github" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/" title="Run via JSFiddle" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/jsfiddle.svg" alt="Run via JSFiddle" width="20" height="20" style="width:20px;height:20px;" >
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.2.12&utm_source=guide" title="Run in Dynamsoft" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/svgs/solid/circle-play.svg" alt="Run in Dynamsoft" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-</p>
-
------
-
-#### 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 <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices" title="MediaDevices interface">MediaDevices interface</a>.
-
-- `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 <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.2.12&utm_source=guide" title="Run in Dynamsoft">the Dynamsoft Demo Server</a> or test it with <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/" title="Run in JSFiddle">JSFiddle code editor</a>. 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 <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia" title="getUserMedia">getUserMedia</a> 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: <a target="_blank" href="https://nginx.org/en/docs/http/configuring_https_servers.html" title="Configuring HTTPS servers">Configuring HTTPS servers</a>
-2. IIS: <a target="_blank" href="https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/" title="Create a Self Signed Certificate in IIS">Create a Self Signed Certificate in IIS</a>
-3. Tomcat: <a target="_blank" href="https://dzone.com/articles/setting-ssl-tomcat-5-minutes" title="Setting Up SSL on Tomcat in 5 minutes">Setting Up SSL on Tomcat in 5 minutes</a>
-4. Node.js: <a target="_blank" href="https://nodejs.org/docs/v0.4.1/api/tls.html" title="npm tls">npm tls</a>
-
-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
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.2.12/dist/dbr.js"></script>
-  ```
-
-- UNPKG  
-
-  ```html
-  <script src="https://unpkg.com/dynamsoft-javascript-barcode@9.2.12/dist/dbr.js"></script>
-  ```
-
-#### 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
-
-  <a target="_blank" href="https://www.dynamsoft.com/barcode-reader/downloads/?ver=9.2.12&utm_source=guide" title="Download the JavaScript Package">Download the JavaScript Package</a>
-
-- 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
-<script src="/dynamsoft-barcode-reader-js-9.2.12/dist/dbr.js"></script>
-```
-
-or
-
-```html
-<script src="/node_modules/dynamsoft-javascript-barcode/dist/dbr.js"></script>
-```
-
-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 <a href="https://www.dynamsoft.com/customer/license/trialLicense?ver=9.2.12&utm_source=guide&product=dbr&package=js" target="_blank">Request a Trial License</a> 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 <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Syntax" target="_blank" title="here">here</a>.
-
-- `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 <a href="https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/global-interfaces.html?ver=9.2.12&utm_source=guide&&ver=latest#runtimesettings" target="_blank" title="here">here</a>.
-
-### 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
-  <div id="div-ui-container"></div>
-  ```
-
-  ```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
-    <div id="div-ui-container" style="width:100%;height:100%;">
-        <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-    </div>
-    <script>
-        (async () => {
-            let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            await scanner.setUIElement(document.getElementById('div-ui-container'));
-            scanner.onFrameRead = results => {
-                console.log(results);
-            };
-            scanner.onUniqueRead = (txt, result) => {
-                alert(txt);
-            };
-            await scanner.show();
-        })();
-    </script>
-    ```
-
-    > 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
-    <div id="div-ui-container" style="width:100%;height:100%;">
-        <select class="dce-sel-camera"></select><br>
-        <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-    </div>
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-    ```html
-    <div id="div-ui-container">
-        <select class="dce-sel-camera"></select>
-        <select class="dce-sel-resolution"></select>
-        <br>
-        <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-    </div>
-    ```
-
-    [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
-    <select class="dce-sel-resolution">
-        <option class="dce-opt-gotResolution" value="got"></option>
-        <option data-width="1280" data-height="720">1280x720</option>
-        <option data-width="1920" data-height="1080">1920x1080</option>
-    </select>
-    ```
-
-    [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+<sup>1</sup>
-  Firefox | v52+ (v55+ on Android/iOS<sup>1</sup>)
-  Edge<sup>2</sup> | v16+
-  Safari<sup>3</sup> | v11+
-
-  <sup>1</sup> iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  <sup>2</sup> On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.
-  
-  <sup>3</sup> 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
----
-
-<!--The original doc is hosted here => https://github.com/dynamsoft-docs/barcode-reader-docs-js/blob/preview/programming/javascript/user-guide/index.md -->
-
-# 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.
-
-<span style="font-size:20px">Table of Contents</span>
-
-- [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
-<!DOCTYPE html>
-<html>
-
-<body>
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.2.13/dist/dbr.js"></script>
-    <script>
-        // Specifies a license, you can visit https://www.dynamsoft.com/customer/license/trialLicense?ver=9.2.13&utm_source=guide&product=dbr&package=js to get your own trial license good for 30 days. 
-        Dynamsoft.DBR.BarcodeScanner.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
-        // Initializes and uses the SDK
-        (async () => {
-            let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            scanner.onFrameRead = results => {
-                if (results.length > 0) console.log(results);
-            };
-            scanner.onUniqueRead = (txt, result) => {
-                alert(txt);
-            };
-            await scanner.show();
-        })();
-    </script>
-</body>
-
-</html>
-```
-
-<p align="center" style="text-align:center; white-space: normal; ">
-  <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.13/1.hello-world/1.hello-world.html" title="Code in Github" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg" alt="Code in Github" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/" title="Run via JSFiddle" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/jsfiddle.svg" alt="Run via JSFiddle" width="20" height="20" style="width:20px;height:20px;" >
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.2.13&utm_source=guide" title="Run in Dynamsoft" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/svgs/solid/circle-play.svg" alt="Run in Dynamsoft" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-</p>
-
------
-
-#### 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 <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices" title="MediaDevices interface">MediaDevices interface</a>.
-
-- `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 <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.2.13&utm_source=guide" title="Run in Dynamsoft">the Dynamsoft Demo Server</a> or test it with <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/" title="Run in JSFiddle">JSFiddle code editor</a>. 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 <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia" title="getUserMedia">getUserMedia</a> 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: <a target="_blank" href="https://nginx.org/en/docs/http/configuring_https_servers.html" title="Configuring HTTPS servers">Configuring HTTPS servers</a>
-2. IIS: <a target="_blank" href="https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/" title="Create a Self Signed Certificate in IIS">Create a Self Signed Certificate in IIS</a>
-3. Tomcat: <a target="_blank" href="https://dzone.com/articles/setting-ssl-tomcat-5-minutes" title="Setting Up SSL on Tomcat in 5 minutes">Setting Up SSL on Tomcat in 5 minutes</a>
-4. Node.js: <a target="_blank" href="https://nodejs.org/docs/v0.4.1/api/tls.html" title="npm tls">npm tls</a>
-
-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
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.2.13/dist/dbr.js"></script>
-  ```
-
-- UNPKG  
-
-  ```html
-  <script src="https://unpkg.com/dynamsoft-javascript-barcode@9.2.13/dist/dbr.js"></script>
-  ```
-
-#### 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
-
-  <a target="_blank" href="https://www.dynamsoft.com/barcode-reader/downloads/?ver=9.2.13&utm_source=guide" title="Download the JavaScript Package">Download the JavaScript Package</a>
-
-- 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
-<script src="/dynamsoft-barcode-reader-js-9.2.13/dist/dbr.js"></script>
-```
-
-or
-
-```html
-<script src="/node_modules/dynamsoft-javascript-barcode/dist/dbr.js"></script>
-```
-
-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 <a href="https://www.dynamsoft.com/customer/license/trialLicense?ver=9.2.13&utm_source=guide&product=dbr&package=js" target="_blank">Request a Trial License</a> 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 <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Syntax" target="_blank" title="here">here</a>.
-
-- `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 <a href="https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/global-interfaces.html?ver=9.2.13&utm_source=guide&&ver=latest#runtimesettings" target="_blank" title="here">here</a>.
-
-### 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
-  <div id="div-ui-container"></div>
-  ```
-
-  ```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
-    <div id="div-ui-container" style="width:100%;height:100%;">
-        <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-    </div>
-    <script>
-        (async () => {
-            let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            await scanner.setUIElement(document.getElementById('div-ui-container'));
-            scanner.onFrameRead = results => {
-                console.log(results);
-            };
-            scanner.onUniqueRead = (txt, result) => {
-                alert(txt);
-            };
-            await scanner.show();
-        })();
-    </script>
-    ```
-
-    > 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
-    <div id="div-ui-container" style="width:100%;height:100%;">
-        <select class="dce-sel-camera"></select><br>
-        <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-    </div>
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-    ```html
-    <div id="div-ui-container">
-        <select class="dce-sel-camera"></select>
-        <select class="dce-sel-resolution"></select>
-        <br>
-        <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-    </div>
-    ```
-
-    [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
-    <select class="dce-sel-resolution">
-        <option class="dce-opt-gotResolution" value="got"></option>
-        <option data-width="1280" data-height="720">1280x720</option>
-        <option data-width="1920" data-height="1080">1920x1080</option>
-    </select>
-    ```
-
-    [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+<sup>1</sup>
-  Firefox | v52+ (v55+ on Android/iOS<sup>1</sup>)
-  Edge<sup>2</sup> | v16+
-  Safari<sup>3</sup> | v11+
-
-  <sup>1</sup> iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  <sup>2</sup> On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.
-  
-  <sup>3</sup> 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
----
-
-<!--The original doc is hosted here => https://github.com/dynamsoft-docs/barcode-reader-docs-js/blob/preview/programming/javascript/user-guide/index.md -->
-
-# 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.
-
-<span style="font-size:20px">Table of Contents</span>
-
-- [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
-<!DOCTYPE html>
-<html>
-
-<body>
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.3.1/dist/dbr.js"></script>
-    <script>
-        // Specifies a license, you can visit https://www.dynamsoft.com/customer/license/trialLicense?ver=9.3.1&utm_source=guide&product=dbr&package=js to get your own trial license good for 30 days. 
-        Dynamsoft.DBR.BarcodeScanner.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
-        // Initializes and uses the SDK
-        (async () => {
-            let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            scanner.onFrameRead = results => {
-                if (results.length > 0) console.log(results);
-            };
-            scanner.onUniqueRead = (txt, result) => {
-                alert(txt);
-            };
-            await scanner.show();
-        })();
-    </script>
-</body>
-
-</html>
-```
-
-<p align="center" style="text-align:center; white-space: normal; ">
-  <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.3.1/1.hello-world/1.hello-world.html" title="Code in Github" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg" alt="Code in Github" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/" title="Run via JSFiddle" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/jsfiddle.svg" alt="Run via JSFiddle" width="20" height="20" style="width:20px;height:20px;" >
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.3.1&utm_source=guide" title="Run in Dynamsoft" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/svgs/solid/circle-play.svg" alt="Run in Dynamsoft" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-</p>
-
------
-
-#### 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 <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices" title="MediaDevices interface">MediaDevices interface</a>.
-
-- `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 <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.3.1&utm_source=guide" title="Run in Dynamsoft">the Dynamsoft Demo Server</a> or test it with <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/" title="Run in JSFiddle">JSFiddle code editor</a>. 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 <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia" title="getUserMedia">getUserMedia</a> 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: <a target="_blank" href="https://nginx.org/en/docs/http/configuring_https_servers.html" title="Configuring HTTPS servers">Configuring HTTPS servers</a>
-2. IIS: <a target="_blank" href="https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/" title="Create a Self Signed Certificate in IIS">Create a Self Signed Certificate in IIS</a>
-3. Tomcat: <a target="_blank" href="https://dzone.com/articles/setting-ssl-tomcat-5-minutes" title="Setting Up SSL on Tomcat in 5 minutes">Setting Up SSL on Tomcat in 5 minutes</a>
-4. Node.js: <a target="_blank" href="https://nodejs.org/docs/v0.4.1/api/tls.html" title="npm tls">npm tls</a>
-
-If the test doesn't go as expected, you can [contact us](https://www.dynamsoft.com/contact/?ver=9.3.1&utm_source=guide).
-
-<iframe width="400" height="225" src="https://www.youtube.com/embed/j4gFtCHcCG4" title="How to Use Dynamsoft Barcode Reader JavaScript SDK | Dynamsoft Tutorial" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-
-## 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
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.3.1/dist/dbr.js"></script>
-  ```
-
-- UNPKG  
-
-  ```html
-  <script src="https://unpkg.com/dynamsoft-javascript-barcode@9.3.1/dist/dbr.js"></script>
-  ```
-
-#### 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
-
-  <a target="_blank" href="https://www.dynamsoft.com/barcode-reader/downloads/?ver=9.3.1&utm_source=guide" title="Download the JavaScript Package">Download the JavaScript Package</a>
-
-- 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
-<script src="/dynamsoft-barcode-reader-js-9.3.1/dist/dbr.js"></script>
-```
-
-or
-
-```html
-<script src="/node_modules/dynamsoft-javascript-barcode/dist/dbr.js"></script>
-```
-
-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 <a href="https://www.dynamsoft.com/customer/license/trialLicense?ver=9.3.1&utm_source=guide&product=dbr&package=js" target="_blank">Request a Trial License</a> 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 <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Syntax" target="_blank" title="here">here</a>.
-
-- `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 <a href="https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/global-interfaces.html?ver=9.3.1&utm_source=guide&&ver=latest#runtimesettings" target="_blank" title="here">here</a>.
-
-### 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
-  <div id="div-ui-container"></div>
-  ```
-
-  ```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
-    <div id="div-ui-container" style="width:100%;height:100%;">
-        <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-    </div>
-    <script>
-        (async () => {
-            let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            await scanner.setUIElement(document.getElementById('div-ui-container'));
-            scanner.onFrameRead = results => {
-                console.log(results);
-            };
-            scanner.onUniqueRead = (txt, result) => {
-                alert(txt);
-            };
-            await scanner.show();
-        })();
-    </script>
-    ```
-
-    > 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
-    <div id="div-ui-container" style="width:100%;height:100%;">
-        <select class="dce-sel-camera"></select><br>
-        <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-    </div>
-    ```
-
-    [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-    ```html
-    <div id="div-ui-container">
-        <select class="dce-sel-camera"></select>
-        <select class="dce-sel-resolution"></select>
-        <br>
-        <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-    </div>
-    ```
-
-    [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
-    <select class="dce-sel-resolution">
-        <option class="dce-opt-gotResolution" value="got"></option>
-        <option data-width="1280" data-height="720">1280x720</option>
-        <option data-width="1920" data-height="1080">1920x1080</option>
-    </select>
-    ```
-
-    [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+<sup>1</sup>
-  Firefox | v52+ (v55+ on Android/iOS<sup>1</sup>)
-  Edge<sup>2</sup> | v16+
-  Safari<sup>3</sup> | v11+
-
-  <sup>1</sup> iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  <sup>2</sup> On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.
-  
-  <sup>3</sup> 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
----
-
-<!--The original doc is hosted here => https://github.com/dynamsoft-docs/barcode-reader-docs-js/blob/preview/programming/javascript/user-guide/index.md -->
-
-# 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.
-
-<span style="font-size:20px">Table of Contents</span>
-
-- [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
-<!DOCTYPE html>
-<html>
-
-<body>
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.1/dist/dbr.js"></script>
-    <script>
-        // Specifies a license, you can visit https://www.dynamsoft.com/customer/license/trialLicense?ver=9.6.1&utm_source=guide&product=dbr&package=js to get your own trial license good for 30 days. 
-        Dynamsoft.DBR.BarcodeScanner.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
-        // Initializes and uses the SDK
-        (async () => {
-            let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            scanner.onFrameRead = results => {
-                if (results.length > 0) console.log(results);
-            };
-            scanner.onUniqueRead = (txt, result) => {
-                alert(txt);
-            };
-            await scanner.show();
-        })();
-    </script>
-</body>
-
-</html>
-```
-
-<p align="center" style="text-align:center; white-space: normal; ">
-  <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.1/1.hello-world/1.hello-world.html" title="Code in Github" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg" alt="Code in Github" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/" title="Run via JSFiddle" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/jsfiddle.svg" alt="Run via JSFiddle" width="20" height="20" style="width:20px;height:20px;" >
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.6.1&utm_source=guide" title="Run in Dynamsoft" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/svgs/solid/circle-play.svg" alt="Run in Dynamsoft" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-</p>
-
------
-
-#### 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 <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices" title="MediaDevices interface">MediaDevices interface</a>.
-
-- `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 <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.6.1&utm_source=guide" title="Run in Dynamsoft">the Dynamsoft Demo Server</a> or test it with <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/" title="Run in JSFiddle">JSFiddle code editor</a>. 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 <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia" title="getUserMedia">getUserMedia</a> 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: <a target="_blank" href="https://nginx.org/en/docs/http/configuring_https_servers.html" title="Configuring HTTPS servers">Configuring HTTPS servers</a>
-2. IIS: <a target="_blank" href="https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/" title="Create a Self Signed Certificate in IIS">Create a Self Signed Certificate in IIS</a>
-3. Tomcat: <a target="_blank" href="https://dzone.com/articles/setting-ssl-tomcat-5-minutes" title="Setting Up SSL on Tomcat in 5 minutes">Setting Up SSL on Tomcat in 5 minutes</a>
-4. Node.js: <a target="_blank" href="https://nodejs.org/docs/v0.4.1/api/tls.html" title="npm tls">npm tls</a>
-
-If the test doesn't go as expected, you can [contact us](https://www.dynamsoft.com/contact/?ver=9.6.1&utm_source=guide).
-
-<iframe width="400" height="225" src="https://www.youtube.com/embed/j4gFtCHcCG4" title="How to Use Dynamsoft Barcode Reader JavaScript SDK | Dynamsoft Tutorial" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-
-## 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
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.1/dist/dbr.js"></script>
-  ```
-
-- UNPKG  
-
-  ```html
-  <script src="https://unpkg.com/dynamsoft-javascript-barcode@9.6.1/dist/dbr.js"></script>
-  ```
-
-#### 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
-
-  <a target="_blank" href="https://www.dynamsoft.com/barcode-reader/downloads/?ver=9.6.1&utm_source=guide" title="Download the JavaScript Package">Download the JavaScript Package</a>
-
-- 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
-<script src="/dynamsoft-barcode-reader-js-9.6.1/dist/dbr.js"></script>
-```
-
-or
-
-```html
-<script src="/node_modules/dynamsoft-javascript-barcode/dist/dbr.js"></script>
-```
-
-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 <a href="https://www.dynamsoft.com/customer/license/trialLicense?ver=9.6.1&utm_source=guide&product=dbr&package=js" target="_blank">Request a Trial License</a> 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 <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Syntax" target="_blank" title="here">here</a>.
-
-- `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 <a href="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/global-interfaces.html?ver=9.6.1&utm_source=guide&&ver=latest#runtimesettings" target="_blank" title="here">here</a>.
-
-### 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
-  <div id="div-ui-container"></div>
-  ```
-
-  ```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
-  <div id="div-ui-container" style="width:100%;height:100%;">
-      <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-  </div>
-  <script>
-      (async () => {
-          let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-          await scanner.setUIElement(document.getElementById('div-ui-container'));
-          scanner.onFrameRead = results => {
-              console.log(results);
-          };
-          scanner.onUniqueRead = (txt, result) => {
-              alert(txt);
-          };
-          await scanner.show();
-      })();
-  </script>
-  ```
-
-  > 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
-    <div id="div-ui-container" style="width:100%;height:100%;">
-        <select class="dce-sel-camera"></select><br>
-        <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-    </div>
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-  ```html
-  <div id="div-ui-container">
-      <select class="dce-sel-camera"></select>
-      <select class="dce-sel-resolution"></select>
-      <br>
-      <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-  </div>
-  ```
-
-  [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
-  <select class="dce-sel-resolution">
-      <option class="dce-opt-gotResolution" value="got"></option>
-      <option data-width="1280" data-height="720">1280x720</option>
-      <option data-width="1920" data-height="1080">1920x1080</option>
-  </select>
-  ```
-
-  [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+<sup>1</sup>
-  Firefox | v52+ (v55+ on Android/iOS<sup>1</sup>)
-  Edge<sup>2</sup> | v16+
-  Safari<sup>3</sup> | v11+
-
-  <sup>1</sup> iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  <sup>2</sup> On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.
-  
-  <sup>3</sup> 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
----
-
-<!--The original doc is hosted here => https://github.com/dynamsoft-docs/barcode-reader-docs-js/blob/preview/programming/javascript/user-guide/index.md -->
-
-# 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.
-
-<video controls width="400" autoplay="true">
-    <source src="https://tst.dynamsoft.com/public/docs/dbr/javascript/How%20to%20Use%20Dynamsoft%20Barcode%20Reader%20JavaScript%20SDK%20v1.1.mp4">
-</video>
-
-In this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.
-
-<span style="font-size:20px">Table of Contents</span>
-
-- [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
-<!DOCTYPE html>
-<html>
-
-<body>
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.10/dist/dbr.js"></script>
-    <script>
-        // Specifies a license, you can visit https://www.dynamsoft.com/customer/license/trialLicense?ver=9.6.10&utm_source=guide&product=dbr&package=js to get your own trial license good for 30 days. 
-        Dynamsoft.DBR.BarcodeScanner.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
-        // Initializes and uses the SDK
-        (async () => {
-            let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            scanner.onFrameRead = results => {
-                if (results.length > 0) console.log(results);
-            };
-            scanner.onUniqueRead = (txt, result) => {
-                alert(txt);
-            };
-            await scanner.show();
-        })();
-    </script>
-</body>
-
-</html>
-```
-
-<p align="center" style="text-align:center; white-space: normal; ">
-  <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.10/1.hello-world/1.hello-world.html" title="Code in Github" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg" alt="Code in Github" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/" title="Run via JSFiddle" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/jsfiddle.svg" alt="Run via JSFiddle" width="20" height="20" style="width:20px;height:20px;" >
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.6.10&utm_source=guide" title="Run in Dynamsoft" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/svgs/solid/circle-play.svg" alt="Run in Dynamsoft" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-</p>
-
------
-
-#### 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 <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices" title="MediaDevices interface">MediaDevices interface</a>.
-
-- `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 <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.6.10&utm_source=guide" title="Run in Dynamsoft">the Dynamsoft Demo Server</a> or test it with <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/" title="Run in JSFiddle">JSFiddle code editor</a>. 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 <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia" title="getUserMedia">getUserMedia</a> 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: <a target="_blank" href="https://nginx.org/en/docs/http/configuring_https_servers.html" title="Configuring HTTPS servers">Configuring HTTPS servers</a>
-2. IIS: <a target="_blank" href="https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/" title="Create a Self Signed Certificate in IIS">Create a Self Signed Certificate in IIS</a>
-3. Tomcat: <a target="_blank" href="https://dzone.com/articles/setting-ssl-tomcat-5-minutes" title="Setting Up SSL on Tomcat in 5 minutes">Setting Up SSL on Tomcat in 5 minutes</a>
-4. Node.js: <a target="_blank" href="https://nodejs.org/docs/v0.4.1/api/tls.html" title="npm tls">npm tls</a>
-
-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
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.10/dist/dbr.js"></script>
-  ```
-
-- UNPKG  
-
-  ```html
-  <script src="https://unpkg.com/dynamsoft-javascript-barcode@9.6.10/dist/dbr.js"></script>
-  ```
-
-#### 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
-
-  <a target="_blank" href="https://www.dynamsoft.com/barcode-reader/downloads/?ver=9.6.10&utm_source=guide" title="Download the JavaScript Package">Download the JavaScript Package</a>
-
-- 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
-<script src="/dynamsoft-barcode-reader-js-9.6.10/dist/dbr.js"></script>
-```
-
-or
-
-```html
-<script src="/node_modules/dynamsoft-javascript-barcode/dist/dbr.js"></script>
-```
-
-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 <a href="https://www.dynamsoft.com/customer/license/trialLicense?ver=9.6.10&utm_source=guide&product=dbr&package=js" target="_blank">Request a Trial License</a> 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 <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Syntax" target="_blank" title="here">here</a>.
-
-- `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 <a href="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/global-interfaces.html?ver=9.6.10&utm_source=guide&&ver=latest#runtimesettings" target="_blank" title="here">here</a>.
-
-### 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
-  <div id="div-ui-container"></div>
-  ```
-
-  ```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
-  <div id="div-ui-container" style="width:100%;height:100%;">
-      <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-  </div>
-  <script>
-      (async () => {
-          let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-          await scanner.setUIElement(document.getElementById('div-ui-container'));
-          scanner.onFrameRead = results => {
-              console.log(results);
-          };
-          scanner.onUniqueRead = (txt, result) => {
-              alert(txt);
-          };
-          await scanner.show();
-      })();
-  </script>
-  ```
-
-  > 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
-    <div id="div-ui-container" style="width:100%;height:100%;">
-        <select class="dce-sel-camera"></select><br>
-        <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-    </div>
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-  ```html
-  <div id="div-ui-container">
-      <select class="dce-sel-camera"></select>
-      <select class="dce-sel-resolution"></select>
-      <br>
-      <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-  </div>
-  ```
-
-  [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
-  <select class="dce-sel-resolution">
-      <option class="dce-opt-gotResolution" value="got"></option>
-      <option data-width="1280" data-height="720">1280x720</option>
-      <option data-width="1920" data-height="1080">1920x1080</option>
-  </select>
-  ```
-
-  [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+<sup>1</sup>
-  Firefox | v52+ (v55+ on Android/iOS<sup>1</sup>)
-  Edge<sup>2</sup> | v16+
-  Safari<sup>3</sup> | v11+
-
-  <sup>1</sup> iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  <sup>2</sup> On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.
-  
-  <sup>3</sup> 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
----
-
-<!--The original doc is hosted here => https://github.com/dynamsoft-docs/barcode-reader-docs-js/blob/preview/programming/javascript/user-guide/index.md -->
-
-# 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.
-
-<video controls width="400" autoplay="true">
-    <source src="https://tst.dynamsoft.com/public/docs/dbr/javascript/How%20to%20Use%20Dynamsoft%20Barcode%20Reader%20JavaScript%20SDK%20v1.1.mp4">
-</video>
-
-In this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.
-
-<span style="font-size:20px">Table of Contents</span>
-
-- [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
-<!DOCTYPE html>
-<html>
-
-<body>
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.11/dist/dbr.js"></script>
-    <script>
-        // Specifies a license, you can visit https://www.dynamsoft.com/customer/license/trialLicense?ver=9.6.11&utm_source=guide&product=dbr&package=js to get your own trial license good for 30 days. 
-        Dynamsoft.DBR.BarcodeScanner.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
-        // Initializes and uses the SDK
-        (async () => {
-            let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            scanner.onFrameRead = results => {
-                if (results.length > 0) console.log(results);
-            };
-            scanner.onUniqueRead = (txt, result) => {
-                alert(txt);
-            };
-            await scanner.show();
-        })();
-    </script>
-</body>
-
-</html>
-```
-
-<p align="center" style="text-align:center; white-space: normal; ">
-  <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.11/1.hello-world/1.hello-world.html" title="Code in Github" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg" alt="Code in Github" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/" title="Run via JSFiddle" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/jsfiddle.svg" alt="Run via JSFiddle" width="20" height="20" style="width:20px;height:20px;" >
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.6.11&utm_source=guide" title="Run in Dynamsoft" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/svgs/solid/circle-play.svg" alt="Run in Dynamsoft" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-</p>
-
------
-
-#### 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 <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices" title="MediaDevices interface">MediaDevices interface</a>.
-
-- `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 <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.6.11&utm_source=guide" title="Run in Dynamsoft">the Dynamsoft Demo Server</a> or test it with <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/" title="Run in JSFiddle">JSFiddle code editor</a>. 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 <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia" title="getUserMedia">getUserMedia</a> 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: <a target="_blank" href="https://nginx.org/en/docs/http/configuring_https_servers.html" title="Configuring HTTPS servers">Configuring HTTPS servers</a>
-2. IIS: <a target="_blank" href="https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/" title="Create a Self Signed Certificate in IIS">Create a Self Signed Certificate in IIS</a>
-3. Tomcat: <a target="_blank" href="https://dzone.com/articles/setting-ssl-tomcat-5-minutes" title="Setting Up SSL on Tomcat in 5 minutes">Setting Up SSL on Tomcat in 5 minutes</a>
-4. Node.js: <a target="_blank" href="https://nodejs.org/docs/v0.4.1/api/tls.html" title="npm tls">npm tls</a>
-
-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
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.11/dist/dbr.js"></script>
-  ```
-
-- UNPKG  
-
-  ```html
-  <script src="https://unpkg.com/dynamsoft-javascript-barcode@9.6.11/dist/dbr.js"></script>
-  ```
-
-#### 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
-
-  <a target="_blank" href="https://www.dynamsoft.com/barcode-reader/downloads/?ver=9.6.11&utm_source=guide" title="Download the JavaScript Package">Download the JavaScript Package</a>
-
-- 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
-<script src="/dynamsoft-barcode-reader-js-9.6.11/dist/dbr.js"></script>
-```
-
-or
-
-```html
-<script src="/node_modules/dynamsoft-javascript-barcode/dist/dbr.js"></script>
-```
-
-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 <a href="https://www.dynamsoft.com/customer/license/trialLicense?ver=9.6.11&utm_source=guide&product=dbr&package=js" target="_blank">Request a Trial License</a> 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 <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Syntax" target="_blank" title="here">here</a>.
-
-- `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 <a href="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/global-interfaces.html?ver=9.6.11&utm_source=guide&&ver=latest#runtimesettings" target="_blank" title="here">here</a>.
-
-### 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
-  <div id="div-ui-container"></div>
-  ```
-
-  ```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
-  <div id="div-ui-container" style="width:100%;height:100%;">
-      <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-  </div>
-  <script>
-      (async () => {
-          let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-          await scanner.setUIElement(document.getElementById('div-ui-container'));
-          scanner.onFrameRead = results => {
-              console.log(results);
-          };
-          scanner.onUniqueRead = (txt, result) => {
-              alert(txt);
-          };
-          await scanner.show();
-      })();
-  </script>
-  ```
-
-  > 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
-    <div id="div-ui-container" style="width:100%;height:100%;">
-        <select class="dce-sel-camera"></select><br>
-        <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-    </div>
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-  ```html
-  <div id="div-ui-container">
-      <select class="dce-sel-camera"></select>
-      <select class="dce-sel-resolution"></select>
-      <br>
-      <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-  </div>
-  ```
-
-  [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
-  <select class="dce-sel-resolution">
-      <option class="dce-opt-gotResolution" value="got"></option>
-      <option data-width="1280" data-height="720">1280x720</option>
-      <option data-width="1920" data-height="1080">1920x1080</option>
-  </select>
-  ```
-
-  [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+<sup>1</sup>
-  Firefox | v52+ (v55+ on Android/iOS<sup>1</sup>)
-  Edge<sup>2</sup> | v16+
-  Safari<sup>3</sup> | v11+
-
-  <sup>1</sup> iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  <sup>2</sup> On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.
-  
-  <sup>3</sup> 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
----
-
-<!--The original doc is hosted here => https://github.com/dynamsoft-docs/barcode-reader-docs-js/blob/preview/programming/javascript/user-guide/index.md -->
-
-# 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.
-
-<span style="font-size:20px">Table of Contents</span>
-
-- [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
-<!DOCTYPE html>
-<html>
-
-<body>
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.2/dist/dbr.js"></script>
-    <script>
-        // Specifies a license, you can visit https://www.dynamsoft.com/customer/license/trialLicense?ver=9.6.2&utm_source=guide&product=dbr&package=js to get your own trial license good for 30 days. 
-        Dynamsoft.DBR.BarcodeScanner.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
-        // Initializes and uses the SDK
-        (async () => {
-            let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            scanner.onFrameRead = results => {
-                if (results.length > 0) console.log(results);
-            };
-            scanner.onUniqueRead = (txt, result) => {
-                alert(txt);
-            };
-            await scanner.show();
-        })();
-    </script>
-</body>
-
-</html>
-```
-
-<p align="center" style="text-align:center; white-space: normal; ">
-  <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.2/1.hello-world/1.hello-world.html" title="Code in Github" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg" alt="Code in Github" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/" title="Run via JSFiddle" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/jsfiddle.svg" alt="Run via JSFiddle" width="20" height="20" style="width:20px;height:20px;" >
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.6.2&utm_source=guide" title="Run in Dynamsoft" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/svgs/solid/circle-play.svg" alt="Run in Dynamsoft" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-</p>
-
------
-
-#### 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 <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices" title="MediaDevices interface">MediaDevices interface</a>.
-
-- `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 <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.6.2&utm_source=guide" title="Run in Dynamsoft">the Dynamsoft Demo Server</a> or test it with <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/" title="Run in JSFiddle">JSFiddle code editor</a>. 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 <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia" title="getUserMedia">getUserMedia</a> 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: <a target="_blank" href="https://nginx.org/en/docs/http/configuring_https_servers.html" title="Configuring HTTPS servers">Configuring HTTPS servers</a>
-2. IIS: <a target="_blank" href="https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/" title="Create a Self Signed Certificate in IIS">Create a Self Signed Certificate in IIS</a>
-3. Tomcat: <a target="_blank" href="https://dzone.com/articles/setting-ssl-tomcat-5-minutes" title="Setting Up SSL on Tomcat in 5 minutes">Setting Up SSL on Tomcat in 5 minutes</a>
-4. Node.js: <a target="_blank" href="https://nodejs.org/docs/v0.4.1/api/tls.html" title="npm tls">npm tls</a>
-
-If the test doesn't go as expected, you can [contact us](https://www.dynamsoft.com/contact/?ver=9.6.2&utm_source=guide).
-
-<iframe width="400" height="225" src="https://www.youtube.com/embed/j4gFtCHcCG4" title="How to Use Dynamsoft Barcode Reader JavaScript SDK | Dynamsoft Tutorial" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-
-<br/><br/>
-
-**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
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.2/dist/dbr.js"></script>
-  ```
-
-- UNPKG  
-
-  ```html
-  <script src="https://unpkg.com/dynamsoft-javascript-barcode@9.6.2/dist/dbr.js"></script>
-  ```
-
-#### 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
-
-  <a target="_blank" href="https://www.dynamsoft.com/barcode-reader/downloads/?ver=9.6.2&utm_source=guide" title="Download the JavaScript Package">Download the JavaScript Package</a>
-
-- 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
-<script src="/dynamsoft-barcode-reader-js-9.6.2/dist/dbr.js"></script>
-```
-
-or
-
-```html
-<script src="/node_modules/dynamsoft-javascript-barcode/dist/dbr.js"></script>
-```
-
-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 <a href="https://www.dynamsoft.com/customer/license/trialLicense?ver=9.6.2&utm_source=guide&product=dbr&package=js" target="_blank">Request a Trial License</a> 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 <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Syntax" target="_blank" title="here">here</a>.
-
-- `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 <a href="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/global-interfaces.html?ver=9.6.2&utm_source=guide&&ver=latest#runtimesettings" target="_blank" title="here">here</a>.
-
-### 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
-  <div id="div-ui-container"></div>
-  ```
-
-  ```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
-  <div id="div-ui-container" style="width:100%;height:100%;">
-      <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-  </div>
-  <script>
-      (async () => {
-          let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-          await scanner.setUIElement(document.getElementById('div-ui-container'));
-          scanner.onFrameRead = results => {
-              console.log(results);
-          };
-          scanner.onUniqueRead = (txt, result) => {
-              alert(txt);
-          };
-          await scanner.show();
-      })();
-  </script>
-  ```
-
-  > 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
-    <div id="div-ui-container" style="width:100%;height:100%;">
-        <select class="dce-sel-camera"></select><br>
-        <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-    </div>
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-  ```html
-  <div id="div-ui-container">
-      <select class="dce-sel-camera"></select>
-      <select class="dce-sel-resolution"></select>
-      <br>
-      <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-  </div>
-  ```
-
-  [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
-  <select class="dce-sel-resolution">
-      <option class="dce-opt-gotResolution" value="got"></option>
-      <option data-width="1280" data-height="720">1280x720</option>
-      <option data-width="1920" data-height="1080">1920x1080</option>
-  </select>
-  ```
-
-  [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+<sup>1</sup>
-  Firefox | v52+ (v55+ on Android/iOS<sup>1</sup>)
-  Edge<sup>2</sup> | v16+
-  Safari<sup>3</sup> | v11+
-
-  <sup>1</sup> iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  <sup>2</sup> On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.
-  
-  <sup>3</sup> 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
----
-
-<!--The original doc is hosted here => https://github.com/dynamsoft-docs/barcode-reader-docs-js/blob/preview/programming/javascript/user-guide/index.md -->
-
-# 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.
-
-<video controls width="400" autoplay="false">
-    <source src="https://tst.dynamsoft.com/public/docs/dbr/javascript/How%20to%20Use%20Dynamsoft%20Barcode%20Reader%20JavaScript%20SDK%20v1.1.mp4">
-</video>
-
-In this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.
-
-<span style="font-size:20px">Table of Contents</span>
-
-- [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
-<!DOCTYPE html>
-<html>
-
-<body>
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.20/dist/dbr.js"></script>
-    <script>
-        // Specifies a license, you can visit https://www.dynamsoft.com/customer/license/trialLicense?ver=9.6.20&utm_source=guide&product=dbr&package=js to get your own trial license good for 30 days. 
-        Dynamsoft.DBR.BarcodeScanner.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
-        // Initializes and uses the SDK
-        (async () => {
-            let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            scanner.onFrameRead = results => {
-                if (results.length > 0) console.log(results);
-            };
-            scanner.onUniqueRead = (txt, result) => {
-                alert(txt);
-            };
-            await scanner.show();
-        })();
-    </script>
-</body>
-
-</html>
-```
-
-<p align="center" style="text-align:center; white-space: normal; ">
-  <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.20/1.hello-world/1.hello-world.html" title="Code in Github" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg" alt="Code in Github" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/" title="Run via JSFiddle" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/jsfiddle.svg" alt="Run via JSFiddle" width="20" height="20" style="width:20px;height:20px;" >
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.6.20&utm_source=guide" title="Run in Dynamsoft" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/svgs/solid/circle-play.svg" alt="Run in Dynamsoft" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-</p>
-
------
-
-#### 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 <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices" title="MediaDevices interface">MediaDevices interface</a>.
-
-- `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 <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.6.20&utm_source=guide" title="Run in Dynamsoft">the Dynamsoft Demo Server</a> or test it with <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/" title="Run in JSFiddle">JSFiddle code editor</a>. 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 <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia" title="getUserMedia">getUserMedia</a> 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: <a target="_blank" href="https://nginx.org/en/docs/http/configuring_https_servers.html" title="Configuring HTTPS servers">Configuring HTTPS servers</a>
-2. IIS: <a target="_blank" href="https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/" title="Create a Self Signed Certificate in IIS">Create a Self Signed Certificate in IIS</a>
-3. Tomcat: <a target="_blank" href="https://dzone.com/articles/setting-ssl-tomcat-5-minutes" title="Setting Up SSL on Tomcat in 5 minutes">Setting Up SSL on Tomcat in 5 minutes</a>
-4. Node.js: <a target="_blank" href="https://nodejs.org/docs/v0.4.1/api/tls.html" title="npm tls">npm tls</a>
-
-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
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.20/dist/dbr.js"></script>
-  ```
-
-- UNPKG  
-
-  ```html
-  <script src="https://unpkg.com/dynamsoft-javascript-barcode@9.6.20/dist/dbr.js"></script>
-  ```
-
-#### 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
-
-  <a target="_blank" href="https://www.dynamsoft.com/barcode-reader/downloads/?ver=9.6.20&utm_source=guide" title="Download the JavaScript Package">Download the JavaScript Package</a>
-
-- 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
-<script src="/dynamsoft-barcode-reader-js-9.6.20/dist/dbr.js"></script>
-```
-
-or
-
-```html
-<script src="/node_modules/dynamsoft-javascript-barcode/dist/dbr.js"></script>
-```
-
-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 <a href="https://www.dynamsoft.com/customer/license/trialLicense?ver=9.6.20&utm_source=guide&product=dbr&package=js" target="_blank">Request a Trial License</a> 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 <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Syntax" target="_blank" title="here">here</a>.
-
-- `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 <a href="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/global-interfaces.html?ver=9.6.20&utm_source=guide&&ver=latest#runtimesettings" target="_blank" title="here">here</a>.
-
-### 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
-  <div id="div-ui-container"></div>
-  ```
-
-  ```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
-  <div id="div-ui-container" style="width:100%;height:100%;">
-      <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-  </div>
-  <script>
-      (async () => {
-          let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-          await scanner.setUIElement(document.getElementById('div-ui-container'));
-          scanner.onFrameRead = results => {
-              console.log(results);
-          };
-          scanner.onUniqueRead = (txt, result) => {
-              alert(txt);
-          };
-          await scanner.show();
-      })();
-  </script>
-  ```
-
-  > 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
-    <div id="div-ui-container" style="width:100%;height:100%;">
-        <select class="dce-sel-camera"></select><br>
-        <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-    </div>
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-  ```html
-  <div id="div-ui-container">
-      <select class="dce-sel-camera"></select>
-      <select class="dce-sel-resolution"></select>
-      <br>
-      <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-  </div>
-  ```
-
-  [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
-  <select class="dce-sel-resolution">
-      <option class="dce-opt-gotResolution" value="got"></option>
-      <option data-width="1280" data-height="720">1280x720</option>
-      <option data-width="1920" data-height="1080">1920x1080</option>
-  </select>
-  ```
-
-  [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+<sup>1</sup>
-  Firefox | v52+ (v55+ on Android/iOS<sup>1</sup>)
-  Edge<sup>2</sup> | v16+
-  Safari<sup>3</sup> | v11+
-
-  <sup>1</sup> iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  <sup>2</sup> On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.
-  
-  <sup>3</sup> 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
----
-
-<!--The original doc is hosted here => https://github.com/dynamsoft-docs/barcode-reader-docs-js/blob/preview/programming/javascript/user-guide/index.md -->
-
-# 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.
-
-<video controls width="400" autoplay="false">
-    <source src="https://tst.dynamsoft.com/public/docs/dbr/javascript/How%20to%20Use%20Dynamsoft%20Barcode%20Reader%20JavaScript%20SDK%20v1.1.mp4">
-</video>
-
-In this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.
-
-<span style="font-size:20px">Table of Contents</span>
-
-- [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
-<!DOCTYPE html>
-<html>
-
-<body>
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.21/dist/dbr.js"></script>
-    <script>
-        // Specifies a license, you can visit https://www.dynamsoft.com/customer/license/trialLicense?ver=9.6.21&utm_source=guide&product=dbr&package=js to get your own trial license good for 30 days. 
-        Dynamsoft.DBR.BarcodeScanner.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
-        // Initializes and uses the SDK
-        (async () => {
-            let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            scanner.onFrameRead = results => {
-                if (results.length > 0) console.log(results);
-            };
-            scanner.onUniqueRead = (txt, result) => {
-                alert(txt);
-            };
-            await scanner.show();
-        })();
-    </script>
-</body>
-
-</html>
-```
-
-<p align="center" style="text-align:center; white-space: normal; ">
-  <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.21/1.hello-world/1.hello-world.html" title="Code in Github" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg" alt="Code in Github" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/" title="Run via JSFiddle" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/jsfiddle.svg" alt="Run via JSFiddle" width="20" height="20" style="width:20px;height:20px;" >
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.6.21&utm_source=guide" title="Run in Dynamsoft" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/svgs/solid/circle-play.svg" alt="Run in Dynamsoft" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-</p>
-
------
-
-#### 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 <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices" title="MediaDevices interface">MediaDevices interface</a>.
-
-- `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 <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.6.21&utm_source=guide" title="Run in Dynamsoft">the Dynamsoft Demo Server</a> or test it with <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/" title="Run in JSFiddle">JSFiddle code editor</a>. 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 <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia" title="getUserMedia">getUserMedia</a> 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: <a target="_blank" href="https://nginx.org/en/docs/http/configuring_https_servers.html" title="Configuring HTTPS servers">Configuring HTTPS servers</a>
-2. IIS: <a target="_blank" href="https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/" title="Create a Self Signed Certificate in IIS">Create a Self Signed Certificate in IIS</a>
-3. Tomcat: <a target="_blank" href="https://dzone.com/articles/setting-ssl-tomcat-5-minutes" title="Setting Up SSL on Tomcat in 5 minutes">Setting Up SSL on Tomcat in 5 minutes</a>
-4. Node.js: <a target="_blank" href="https://nodejs.org/docs/v0.4.1/api/tls.html" title="npm tls">npm tls</a>
-
-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
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.21/dist/dbr.js"></script>
-  ```
-
-- UNPKG  
-
-  ```html
-  <script src="https://unpkg.com/dynamsoft-javascript-barcode@9.6.21/dist/dbr.js"></script>
-  ```
-
-#### 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
-
-  <a target="_blank" href="https://www.dynamsoft.com/barcode-reader/downloads/?ver=9.6.21&utm_source=guide" title="Download the JavaScript Package">Download the JavaScript Package</a>
-
-- 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
-<script src="/dynamsoft-barcode-reader-js-9.6.21/dist/dbr.js"></script>
-```
-
-or
-
-```html
-<script src="/node_modules/dynamsoft-javascript-barcode/dist/dbr.js"></script>
-```
-
-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 <a href="https://www.dynamsoft.com/customer/license/trialLicense?ver=9.6.21&utm_source=guide&product=dbr&package=js" target="_blank">Request a Trial License</a> 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 <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Syntax" target="_blank" title="here">here</a>.
-
-- `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 <a href="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/global-interfaces.html?ver=9.6.21&utm_source=guide&&ver=latest#runtimesettings" target="_blank" title="here">here</a>.
-
-### 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
-  <div id="div-ui-container"></div>
-  ```
-
-  ```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
-  <div id="div-ui-container" style="width:100%;height:100%;">
-      <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-  </div>
-  <script>
-      (async () => {
-          let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-          await scanner.setUIElement(document.getElementById('div-ui-container'));
-          scanner.onFrameRead = results => {
-              console.log(results);
-          };
-          scanner.onUniqueRead = (txt, result) => {
-              alert(txt);
-          };
-          await scanner.show();
-      })();
-  </script>
-  ```
-
-  > 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
-    <div id="div-ui-container" style="width:100%;height:100%;">
-        <select class="dce-sel-camera"></select><br>
-        <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-    </div>
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-  ```html
-  <div id="div-ui-container">
-      <select class="dce-sel-camera"></select>
-      <select class="dce-sel-resolution"></select>
-      <br>
-      <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-  </div>
-  ```
-
-  [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
-  <select class="dce-sel-resolution">
-      <option class="dce-opt-gotResolution" value="got"></option>
-      <option data-width="1280" data-height="720">1280x720</option>
-      <option data-width="1920" data-height="1080">1920x1080</option>
-  </select>
-  ```
-
-  [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+<sup>1</sup>
-  Firefox | v52+ (v55+ on Android/iOS<sup>1</sup>)
-  Edge<sup>2</sup> | v16+
-  Safari<sup>3</sup> | v11+
-
-  <sup>1</sup> iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  <sup>2</sup> On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.
-  
-  <sup>3</sup> 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
----
-
-<!--The original doc is hosted here => https://github.com/dynamsoft-docs/barcode-reader-docs-js/blob/preview/programming/javascript/user-guide/index.md -->
-
-# 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.
-
-<video controls width="400" autoplay="false">
-    <source src="https://tst.dynamsoft.com/public/docs/dbr/javascript/How%20to%20Use%20Dynamsoft%20Barcode%20Reader%20JavaScript%20SDK%20v1.1.mp4">
-</video>
-
-In this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.
-
-<span style="font-size:20px">Table of Contents</span>
-
-- [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
-<!DOCTYPE html>
-<html>
-
-<body>
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.30/dist/dbr.js"></script>
-    <script>
-        // Specifies a license, you can visit https://www.dynamsoft.com/customer/license/trialLicense?ver=9.6.30&utm_source=guide&product=dbr&package=js to get your own trial license good for 30 days. 
-        Dynamsoft.DBR.BarcodeScanner.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
-        // Initializes and uses the SDK
-        (async () => {
-            let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            scanner.onFrameRead = results => {
-                if (results.length > 0) console.log(results);
-            };
-            scanner.onUniqueRead = (txt, result) => {
-                alert(txt);
-            };
-            await scanner.show();
-        })();
-    </script>
-</body>
-
-</html>
-```
-
-<p align="center" style="text-align:center; white-space: normal; ">
-  <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.30/1.hello-world/1.hello-world.html" title="Code in Github" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg" alt="Code in Github" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/" title="Run via JSFiddle" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/jsfiddle.svg" alt="Run via JSFiddle" width="20" height="20" style="width:20px;height:20px;" >
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.6.30&utm_source=guide" title="Run in Dynamsoft" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/svgs/solid/circle-play.svg" alt="Run in Dynamsoft" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-</p>
-
------
-
-#### 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 <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices" title="MediaDevices interface">MediaDevices interface</a>.
-
-- `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 <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.6.30&utm_source=guide" title="Run in Dynamsoft">the Dynamsoft Demo Server</a> or test it with <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/" title="Run in JSFiddle">JSFiddle code editor</a>. 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 <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia" title="getUserMedia">getUserMedia</a> 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: <a target="_blank" href="https://nginx.org/en/docs/http/configuring_https_servers.html" title="Configuring HTTPS servers">Configuring HTTPS servers</a>
-2. IIS: <a target="_blank" href="https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/" title="Create a Self Signed Certificate in IIS">Create a Self Signed Certificate in IIS</a>
-3. Tomcat: <a target="_blank" href="https://dzone.com/articles/setting-ssl-tomcat-5-minutes" title="Setting Up SSL on Tomcat in 5 minutes">Setting Up SSL on Tomcat in 5 minutes</a>
-4. Node.js: <a target="_blank" href="https://nodejs.org/docs/v0.4.1/api/tls.html" title="npm tls">npm tls</a>
-
-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
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.30/dist/dbr.js"></script>
-  ```
-
-- UNPKG  
-
-  ```html
-  <script src="https://unpkg.com/dynamsoft-javascript-barcode@9.6.30/dist/dbr.js"></script>
-  ```
-
-#### 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
-
-  <a target="_blank" href="https://www.dynamsoft.com/barcode-reader/downloads/?ver=9.6.30&utm_source=guide" title="Download the JavaScript Package">Download the JavaScript Package</a>
-
-- 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
-<script src="/dynamsoft-barcode-reader-js-9.6.30/dist/dbr.js"></script>
-```
-
-or
-
-```html
-<script src="/node_modules/dynamsoft-javascript-barcode/dist/dbr.js"></script>
-```
-
-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 <a href="https://www.dynamsoft.com/customer/license/trialLicense?ver=9.6.30&utm_source=guide&product=dbr&package=js" target="_blank">Request a Trial License</a> 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 <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Syntax" target="_blank" title="here">here</a>.
-
-- `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 <a href="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/global-interfaces.html?ver=9.6.30&utm_source=guide&&ver=latest#runtimesettings" target="_blank" title="here">here</a>.
-
-### 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
-  <div id="div-ui-container"></div>
-  ```
-
-  ```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
-  <div id="div-ui-container" style="width:100%;height:100%;">
-      <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-  </div>
-  <script>
-      (async () => {
-          let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-          await scanner.setUIElement(document.getElementById('div-ui-container'));
-          scanner.onFrameRead = results => {
-              console.log(results);
-          };
-          scanner.onUniqueRead = (txt, result) => {
-              alert(txt);
-          };
-          await scanner.show();
-      })();
-  </script>
-  ```
-
-  > 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
-    <div id="div-ui-container" style="width:100%;height:100%;">
-        <select class="dce-sel-camera"></select><br>
-        <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-    </div>
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-  ```html
-  <div id="div-ui-container">
-      <select class="dce-sel-camera"></select>
-      <select class="dce-sel-resolution"></select>
-      <br>
-      <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-  </div>
-  ```
-
-  [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
-  <select class="dce-sel-resolution">
-      <option class="dce-opt-gotResolution" value="got"></option>
-      <option data-width="1280" data-height="720">1280x720</option>
-      <option data-width="1920" data-height="1080">1920x1080</option>
-  </select>
-  ```
-
-  [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+<sup>1</sup>
-  Firefox | v52+ (v55+ on Android/iOS<sup>1</sup>)
-  Edge<sup>2</sup> | v16+
-  Safari<sup>3</sup> | v11+
-
-  <sup>1</sup> iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  <sup>2</sup> On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.
-  
-  <sup>3</sup> 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
----
-
-<!--The original doc is hosted here => https://github.com/dynamsoft-docs/barcode-reader-docs-js/blob/preview/programming/javascript/user-guide/index.md -->
-
-# 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.
-
-<video controls width="400" autoplay="false">
-    <source src="https://tst.dynamsoft.com/public/docs/dbr/javascript/How%20to%20Use%20Dynamsoft%20Barcode%20Reader%20JavaScript%20SDK%20v1.1.mp4">
-</video>
-
-In this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.
-
-<span style="font-size:20px">Table of Contents</span>
-
-- [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
-<!DOCTYPE html>
-<html>
-
-<body>
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.31/dist/dbr.js"></script>
-    <script>
-        // Specifies a license, you can visit https://www.dynamsoft.com/customer/license/trialLicense?ver=9.6.31&utm_source=guide&product=dbr&package=js to get your own trial license good for 30 days. 
-        Dynamsoft.DBR.BarcodeScanner.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
-        // Initializes and uses the SDK
-        (async () => {
-            let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            scanner.onFrameRead = results => {
-                if (results.length > 0) console.log(results);
-            };
-            scanner.onUniqueRead = (txt, result) => {
-                alert(txt);
-            };
-            await scanner.show();
-        })();
-    </script>
-</body>
-
-</html>
-```
-
-<p align="center" style="text-align:center; white-space: normal; ">
-  <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.31/1.hello-world/1.hello-world.html" title="Code in Github" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg" alt="Code in Github" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/" title="Run via JSFiddle" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/jsfiddle.svg" alt="Run via JSFiddle" width="20" height="20" style="width:20px;height:20px;" >
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.6.31&utm_source=guide" title="Run in Dynamsoft" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/svgs/solid/circle-play.svg" alt="Run in Dynamsoft" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-</p>
-
------
-
-#### 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 <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices" title="MediaDevices interface">MediaDevices interface</a>.
-
-- `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 <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.6.31&utm_source=guide" title="Run in Dynamsoft">the Dynamsoft Demo Server</a> or test it with <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/" title="Run in JSFiddle">JSFiddle code editor</a>. 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 <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia" title="getUserMedia">getUserMedia</a> 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: <a target="_blank" href="https://nginx.org/en/docs/http/configuring_https_servers.html" title="Configuring HTTPS servers">Configuring HTTPS servers</a>
-2. IIS: <a target="_blank" href="https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/" title="Create a Self Signed Certificate in IIS">Create a Self Signed Certificate in IIS</a>
-3. Tomcat: <a target="_blank" href="https://dzone.com/articles/setting-ssl-tomcat-5-minutes" title="Setting Up SSL on Tomcat in 5 minutes">Setting Up SSL on Tomcat in 5 minutes</a>
-4. Node.js: <a target="_blank" href="https://nodejs.org/docs/v0.4.1/api/tls.html" title="npm tls">npm tls</a>
-
-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
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.31/dist/dbr.js"></script>
-  ```
-
-- UNPKG  
-
-  ```html
-  <script src="https://unpkg.com/dynamsoft-javascript-barcode@9.6.31/dist/dbr.js"></script>
-  ```
-
-#### 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
-
-  <a target="_blank" href="https://www.dynamsoft.com/barcode-reader/downloads/?ver=9.6.31&utm_source=guide" title="Download the JavaScript Package">Download the JavaScript Package</a>
-
-- 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
-<script src="/dynamsoft-barcode-reader-js-9.6.31/dist/dbr.js"></script>
-```
-
-or
-
-```html
-<script src="/node_modules/dynamsoft-javascript-barcode/dist/dbr.js"></script>
-```
-
-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 <a href="https://www.dynamsoft.com/customer/license/trialLicense?ver=9.6.31&utm_source=guide&product=dbr&package=js" target="_blank">Request a Trial License</a> 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 <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Syntax" target="_blank" title="here">here</a>.
-
-- `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 <a href="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/global-interfaces.html?ver=9.6.31&utm_source=guide&&ver=latest#runtimesettings" target="_blank" title="here">here</a>.
-
-### 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
-  <div id="div-ui-container"></div>
-  ```
-
-  ```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
-  <div id="div-ui-container" style="width:100%;height:100%;">
-      <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-  </div>
-  <script>
-      (async () => {
-          let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-          await scanner.setUIElement(document.getElementById('div-ui-container'));
-          scanner.onFrameRead = results => {
-              console.log(results);
-          };
-          scanner.onUniqueRead = (txt, result) => {
-              alert(txt);
-          };
-          await scanner.show();
-      })();
-  </script>
-  ```
-
-  > 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
-    <div id="div-ui-container" style="width:100%;height:100%;">
-        <select class="dce-sel-camera"></select><br>
-        <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-    </div>
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-  ```html
-  <div id="div-ui-container">
-      <select class="dce-sel-camera"></select>
-      <select class="dce-sel-resolution"></select>
-      <br>
-      <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-  </div>
-  ```
-
-  [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
-  <select class="dce-sel-resolution">
-      <option class="dce-opt-gotResolution" value="got"></option>
-      <option data-width="1280" data-height="720">1280x720</option>
-      <option data-width="1920" data-height="1080">1920x1080</option>
-  </select>
-  ```
-
-  [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+<sup>1</sup>
-  Firefox | v52+ (v55+ on Android/iOS<sup>1</sup>)
-  Edge<sup>2</sup> | v16+
-  Safari<sup>3</sup> | v11+
-
-  <sup>1</sup> iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  <sup>2</sup> On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.
-  
-  <sup>3</sup> 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
----
-
-<!--The original doc is hosted here => https://github.com/dynamsoft-docs/barcode-reader-docs-js/blob/preview/programming/javascript/user-guide/index.md -->
-
-# 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.
-
-<video controls width="400" autoplay="false">
-    <source src="https://tst.dynamsoft.com/public/docs/dbr/javascript/How%20to%20Use%20Dynamsoft%20Barcode%20Reader%20JavaScript%20SDK%20v1.1.mp4">
-</video>
-
-In this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.
-
-<span style="font-size:20px">Table of Contents</span>
-
-- [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
-<!DOCTYPE html>
-<html>
-
-<body>
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.32/dist/dbr.js"></script>
-    <script>
-        // Specifies a license, you can visit https://www.dynamsoft.com/customer/license/trialLicense?ver=9.6.32&utm_source=guide&product=dbr&package=js to get your own trial license good for 30 days. 
-        Dynamsoft.DBR.BarcodeScanner.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
-        // Initializes and uses the SDK
-        (async () => {
-            let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            scanner.onFrameRead = results => {
-                if (results.length > 0) console.log(results);
-            };
-            scanner.onUniqueRead = (txt, result) => {
-                alert(txt);
-            };
-            await scanner.show();
-        })();
-    </script>
-</body>
-
-</html>
-```
-
-<p align="center" style="text-align:center; white-space: normal; ">
-  <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.32/1.hello-world/1.hello-world.html" title="Code in Github" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg" alt="Code in Github" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/" title="Run via JSFiddle" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/jsfiddle.svg" alt="Run via JSFiddle" width="20" height="20" style="width:20px;height:20px;" >
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.6.32&utm_source=guide" title="Run in Dynamsoft" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/svgs/solid/circle-play.svg" alt="Run in Dynamsoft" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-</p>
-
------
-
-#### 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 <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices" title="MediaDevices interface">MediaDevices interface</a>.
-
-- `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 <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.6.32&utm_source=guide" title="Run in Dynamsoft">the Dynamsoft Demo Server</a> or test it with <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/" title="Run in JSFiddle">JSFiddle code editor</a>. 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 <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia" title="getUserMedia">getUserMedia</a> 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: <a target="_blank" href="https://nginx.org/en/docs/http/configuring_https_servers.html" title="Configuring HTTPS servers">Configuring HTTPS servers</a>
-2. IIS: <a target="_blank" href="https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/" title="Create a Self Signed Certificate in IIS">Create a Self Signed Certificate in IIS</a>
-3. Tomcat: <a target="_blank" href="https://dzone.com/articles/setting-ssl-tomcat-5-minutes" title="Setting Up SSL on Tomcat in 5 minutes">Setting Up SSL on Tomcat in 5 minutes</a>
-4. Node.js: <a target="_blank" href="https://nodejs.org/docs/v0.4.1/api/tls.html" title="npm tls">npm tls</a>
-
-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
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.32/dist/dbr.js"></script>
-  ```
-
-- UNPKG  
-
-  ```html
-  <script src="https://unpkg.com/dynamsoft-javascript-barcode@9.6.32/dist/dbr.js"></script>
-  ```
-
-#### 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
-
-  <a target="_blank" href="https://www.dynamsoft.com/barcode-reader/downloads/?ver=9.6.32&utm_source=guide" title="Download the JavaScript Package">Download the JavaScript Package</a>
-
-- 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
-<script src="/dynamsoft-barcode-reader-js-9.6.32/dist/dbr.js"></script>
-```
-
-or
-
-```html
-<script src="/node_modules/dynamsoft-javascript-barcode/dist/dbr.js"></script>
-```
-
-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 <a href="https://www.dynamsoft.com/customer/license/trialLicense?ver=9.6.32&utm_source=guide&product=dbr&package=js" target="_blank">Request a Trial License</a> 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 <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Syntax" target="_blank" title="here">here</a>.
-
-- `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 <a href="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/global-interfaces.html?ver=9.6.32&utm_source=guide&&ver=latest#runtimesettings" target="_blank" title="here">here</a>.
-
-### 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
-  <div id="div-ui-container"></div>
-  ```
-
-  ```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
-  <div id="div-ui-container" style="width:100%;height:100%;">
-      <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-  </div>
-  <script>
-      (async () => {
-          let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-          await scanner.setUIElement(document.getElementById('div-ui-container'));
-          scanner.onFrameRead = results => {
-              console.log(results);
-          };
-          scanner.onUniqueRead = (txt, result) => {
-              alert(txt);
-          };
-          await scanner.show();
-      })();
-  </script>
-  ```
-
-  > 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
-    <div id="div-ui-container" style="width:100%;height:100%;">
-        <select class="dce-sel-camera"></select><br>
-        <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-    </div>
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-  ```html
-  <div id="div-ui-container">
-      <select class="dce-sel-camera"></select>
-      <select class="dce-sel-resolution"></select>
-      <br>
-      <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-  </div>
-  ```
-
-  [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
-  <select class="dce-sel-resolution">
-      <option class="dce-opt-gotResolution" value="got"></option>
-      <option data-width="1280" data-height="720">1280x720</option>
-      <option data-width="1920" data-height="1080">1920x1080</option>
-  </select>
-  ```
-
-  [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+<sup>1</sup>
-  Firefox | v52+ (v55+ on Android/iOS<sup>1</sup>)
-  Edge<sup>2</sup> | v16+
-  Safari<sup>3</sup> | v11+
-
-  <sup>1</sup> iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  <sup>2</sup> On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.
-  
-  <sup>3</sup> 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
----
-
-<!--The original doc is hosted here => https://github.com/dynamsoft-docs/barcode-reader-docs-js/blob/preview/programming/javascript/user-guide/index.md -->
-
-# 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.
-
-<video controls width="400" autoplay="false">
-    <source src="https://tst.dynamsoft.com/public/docs/dbr/javascript/How%20to%20Use%20Dynamsoft%20Barcode%20Reader%20JavaScript%20SDK%20v1.1.mp4">
-</video>
-
-In this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.
-
-<span style="font-size:20px">Table of Contents</span>
-
-- [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
-<!DOCTYPE html>
-<html>
-
-<body>
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.33/dist/dbr.js"></script>
-    <script>
-        // Specifies a license, you can visit https://www.dynamsoft.com/customer/license/trialLicense?ver=9.6.33&utm_source=guide&product=dbr&package=js to get your own trial license good for 30 days. 
-        Dynamsoft.DBR.BarcodeScanner.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
-        // Initializes and uses the SDK
-        (async () => {
-            let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            scanner.onFrameRead = results => {
-                if (results.length > 0) console.log(results);
-            };
-            scanner.onUniqueRead = (txt, result) => {
-                alert(txt);
-            };
-            await scanner.show();
-        })();
-    </script>
-</body>
-
-</html>
-```
-
-<p align="center" style="text-align:center; white-space: normal; ">
-  <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.33/1.hello-world/1.hello-world.html" title="Code in Github" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg" alt="Code in Github" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/" title="Run via JSFiddle" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/jsfiddle.svg" alt="Run via JSFiddle" width="20" height="20" style="width:20px;height:20px;" >
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.6.33&utm_source=guide" title="Run in Dynamsoft" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/svgs/solid/circle-play.svg" alt="Run in Dynamsoft" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-</p>
-
------
-
-#### 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 <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices" title="MediaDevices interface">MediaDevices interface</a>.
-
-- `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 <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.6.33&utm_source=guide" title="Run in Dynamsoft">the Dynamsoft Demo Server</a> or test it with <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/" title="Run in JSFiddle">JSFiddle code editor</a>. 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 <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia" title="getUserMedia">getUserMedia</a> 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: <a target="_blank" href="https://nginx.org/en/docs/http/configuring_https_servers.html" title="Configuring HTTPS servers">Configuring HTTPS servers</a>
-2. IIS: <a target="_blank" href="https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/" title="Create a Self Signed Certificate in IIS">Create a Self Signed Certificate in IIS</a>
-3. Tomcat: <a target="_blank" href="https://dzone.com/articles/setting-ssl-tomcat-5-minutes" title="Setting Up SSL on Tomcat in 5 minutes">Setting Up SSL on Tomcat in 5 minutes</a>
-4. Node.js: <a target="_blank" href="https://nodejs.org/docs/v0.4.1/api/tls.html" title="npm tls">npm tls</a>
-
-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
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.33/dist/dbr.js"></script>
-  ```
-
-- UNPKG  
-
-  ```html
-  <script src="https://unpkg.com/dynamsoft-javascript-barcode@9.6.33/dist/dbr.js"></script>
-  ```
-
-#### 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
-
-  <a target="_blank" href="https://www.dynamsoft.com/barcode-reader/downloads/?ver=9.6.33&utm_source=guide" title="Download the JavaScript Package">Download the JavaScript Package</a>
-
-- 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
-<script src="/dynamsoft-barcode-reader-js-9.6.33/dist/dbr.js"></script>
-```
-
-or
-
-```html
-<script src="/node_modules/dynamsoft-javascript-barcode/dist/dbr.js"></script>
-```
-
-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 <a href="https://www.dynamsoft.com/customer/license/trialLicense?ver=9.6.33&utm_source=guide&product=dbr&package=js" target="_blank">Request a Trial License</a> 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 <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Syntax" target="_blank" title="here">here</a>.
-
-- `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 <a href="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/global-interfaces.html?ver=9.6.33&utm_source=guide&&ver=latest#runtimesettings" target="_blank" title="here">here</a>.
-
-### 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
-  <div id="div-ui-container"></div>
-  ```
-
-  ```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
-  <div id="div-ui-container" style="width:100%;height:100%;">
-      <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-  </div>
-  <script>
-      (async () => {
-          let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-          await scanner.setUIElement(document.getElementById('div-ui-container'));
-          scanner.onFrameRead = results => {
-              console.log(results);
-          };
-          scanner.onUniqueRead = (txt, result) => {
-              alert(txt);
-          };
-          await scanner.show();
-      })();
-  </script>
-  ```
-
-  > 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
-    <div id="div-ui-container" style="width:100%;height:100%;">
-        <select class="dce-sel-camera"></select><br>
-        <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-    </div>
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-  ```html
-  <div id="div-ui-container">
-      <select class="dce-sel-camera"></select>
-      <select class="dce-sel-resolution"></select>
-      <br>
-      <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-  </div>
-  ```
-
-  [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
-  <select class="dce-sel-resolution">
-      <option class="dce-opt-gotResolution" value="got"></option>
-      <option data-width="1280" data-height="720">1280x720</option>
-      <option data-width="1920" data-height="1080">1920x1080</option>
-  </select>
-  ```
-
-  [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+<sup>1</sup>
-  Firefox | v52+ (v55+ on Android/iOS<sup>1</sup>)
-  Edge<sup>2</sup> | v16+
-  Safari<sup>3</sup> | v11+
-
-  <sup>1</sup> iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  <sup>2</sup> On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.
-  
-  <sup>3</sup> 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
----
-
-<!--The original doc is hosted here => https://github.com/dynamsoft-docs/barcode-reader-docs-js/blob/preview/programming/javascript/user-guide/index.md -->
-
-# 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.
-
-<video controls width="400" autoplay="false">
-    <source src="https://tst.dynamsoft.com/public/docs/dbr/javascript/How%20to%20Use%20Dynamsoft%20Barcode%20Reader%20JavaScript%20SDK%20v1.1.mp4">
-</video>
-
-In this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.
-
-<span style="font-size:20px">Table of Contents</span>
-
-- [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
-<!DOCTYPE html>
-<html>
-
-<body>
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.40/dist/dbr.js"></script>
-    <script>
-        // Specifies a license, you can visit https://www.dynamsoft.com/customer/license/trialLicense?ver=9.6.40&utm_source=guide&product=dbr&package=js to get your own trial license good for 30 days. 
-        Dynamsoft.DBR.BarcodeScanner.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
-        // Initializes and uses the SDK
-        (async () => {
-            let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            scanner.onFrameRead = results => {
-                if (results.length > 0) console.log(results);
-            };
-            scanner.onUniqueRead = (txt, result) => {
-                alert(txt);
-            };
-            await scanner.show();
-        })();
-    </script>
-</body>
-
-</html>
-```
-
-<p align="center" style="text-align:center; white-space: normal; ">
-  <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/1.hello-world/1.hello-world.html" title="Code in Github" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg" alt="Code in Github" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/" title="Run via JSFiddle" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/jsfiddle.svg" alt="Run via JSFiddle" width="20" height="20" style="width:20px;height:20px;" >
-  </a>
-  <!--
-  &nbsp;
-  <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.6.40&utm_source=guide" title="Run in Dynamsoft" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/svgs/solid/circle-play.svg" alt="Run in Dynamsoft" width="20" height="20" style="width:20px;height:20px;">
-  </a>-->
-</p>
-
------
-
-#### 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 <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices" title="MediaDevices interface">MediaDevices interface</a>.
-
-- `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 <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.6.40&utm_source=guide" title="Run in Dynamsoft">the Dynamsoft Demo Server</a> or test it with <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/" title="Run in JSFiddle">JSFiddle code editor</a>. 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 <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia" title="getUserMedia">getUserMedia</a> 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: <a target="_blank" href="https://nginx.org/en/docs/http/configuring_https_servers.html" title="Configuring HTTPS servers">Configuring HTTPS servers</a>
-2. IIS: <a target="_blank" href="https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/" title="Create a Self Signed Certificate in IIS">Create a Self Signed Certificate in IIS</a>
-3. Tomcat: <a target="_blank" href="https://dzone.com/articles/setting-ssl-tomcat-5-minutes" title="Setting Up SSL on Tomcat in 5 minutes">Setting Up SSL on Tomcat in 5 minutes</a>
-4. Node.js: <a target="_blank" href="https://nodejs.org/docs/v0.4.1/api/tls.html" title="npm tls">npm tls</a>
-
-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
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.40/dist/dbr.js"></script>
-  ```
-
-- UNPKG  
-
-  ```html
-  <script src="https://unpkg.com/dynamsoft-javascript-barcode@9.6.40/dist/dbr.js"></script>
-  ```
-
-#### 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
-
-  <a target="_blank" href="https://www.dynamsoft.com/barcode-reader/downloads/?ver=9.6.40&utm_source=guide" title="Download the JavaScript Package">Download the JavaScript Package</a>
-
-- 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
-<script src="/dynamsoft-barcode-reader-js-9.6.40/dist/dbr.js"></script>
-```
-
-or
-
-```html
-<script src="/node_modules/dynamsoft-javascript-barcode/dist/dbr.js"></script>
-```
-
-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 <a href="https://www.dynamsoft.com/customer/license/trialLicense?ver=9.6.40&utm_source=guide&product=dbr&package=js" target="_blank">Request a Trial License</a> 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 <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Syntax" target="_blank" title="here">here</a>.
-
-- `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 <a href="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/global-interfaces.html?ver=9.6.40&utm_source=guide&&ver=latest#runtimesettings" target="_blank" title="here">here</a>.
-
-### 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
-  <div id="div-ui-container"></div>
-  ```
-
-  ```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
-  <div id="div-ui-container" style="width:100%;height:100%;">
-      <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-  </div>
-  <script>
-      (async () => {
-          let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-          await scanner.setUIElement(document.getElementById('div-ui-container'));
-          scanner.onFrameRead = results => {
-              console.log(results);
-          };
-          scanner.onUniqueRead = (txt, result) => {
-              alert(txt);
-          };
-          await scanner.show();
-      })();
-  </script>
-  ```
-
-  > 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
-    <div id="div-ui-container" style="width:100%;height:100%;">
-        <select class="dce-sel-camera"></select><br>
-        <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-    </div>
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-  ```html
-  <div id="div-ui-container">
-      <select class="dce-sel-camera"></select>
-      <select class="dce-sel-resolution"></select>
-      <br>
-      <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-  </div>
-  ```
-
-  [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
-  <select class="dce-sel-resolution">
-      <option class="dce-opt-gotResolution" value="got"></option>
-      <option data-width="1280" data-height="720">1280x720</option>
-      <option data-width="1920" data-height="1080">1920x1080</option>
-  </select>
-  ```
-
-  [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+<sup>1</sup>
-  Firefox | v52+ (v55+ on Android/iOS<sup>1</sup>)
-  Edge<sup>2</sup> | v16+
-  Safari<sup>3</sup> | v11+
-
-  <sup>1</sup> iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  <sup>2</sup> On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.
-  
-  <sup>3</sup> 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
----
-
-<!--The original doc is hosted here => https://github.com/dynamsoft-docs/barcode-reader-docs-js/blob/preview/programming/javascript/user-guide/index.md -->
-
-# 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.
-
-<video controls width="400" autoplay="false">
-    <source src="https://tst.dynamsoft.com/public/docs/dbr/javascript/How%20to%20Use%20Dynamsoft%20Barcode%20Reader%20JavaScript%20SDK%20v1.1.mp4">
-</video>
-
-In this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.
-
-<span style="font-size:20px">Table of Contents</span>
-
-- [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
-<!DOCTYPE html>
-<html>
-
-<body>
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.42/dist/dbr.js"></script>
-    <script>
-        // Specifies a license, you can visit https://www.dynamsoft.com/customer/license/trialLicense?ver=9.6.42&utm_source=guide&product=dbr&package=js to get your own trial license good for 30 days. 
-        Dynamsoft.DBR.BarcodeScanner.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
-        // Initializes and uses the SDK
-        (async () => {
-            let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-            scanner.onFrameRead = results => {
-                if (results.length > 0) console.log(results);
-            };
-            scanner.onUniqueRead = (txt, result) => {
-                alert(txt);
-            };
-            await scanner.show();
-        })();
-    </script>
-</body>
-
-</html>
-```
-
-<p align="center" style="text-align:center; white-space: normal; ">
-  <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.42/1.hello-world/1.hello-world.html" title="Code in Github" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg" alt="Code in Github" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/" title="Run via JSFiddle" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/jsfiddle.svg" alt="Run via JSFiddle" width="20" height="20" style="width:20px;height:20px;" >
-  </a>
-  <!--
-  &nbsp;
-  <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.6.42&utm_source=guide" title="Run in Dynamsoft" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/svgs/solid/circle-play.svg" alt="Run in Dynamsoft" width="20" height="20" style="width:20px;height:20px;">
-  </a>-->
-</p>
-
------
-
-#### 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 <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices" title="MediaDevices interface">MediaDevices interface</a>.
-
-- `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 <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.6.42&utm_source=guide" title="Run in Dynamsoft">the Dynamsoft Demo Server</a> or test it with <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/" title="Run in JSFiddle">JSFiddle code editor</a>. 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 <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia" title="getUserMedia">getUserMedia</a> 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: <a target="_blank" href="https://nginx.org/en/docs/http/configuring_https_servers.html" title="Configuring HTTPS servers">Configuring HTTPS servers</a>
-2. IIS: <a target="_blank" href="https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/" title="Create a Self Signed Certificate in IIS">Create a Self Signed Certificate in IIS</a>
-3. Tomcat: <a target="_blank" href="https://dzone.com/articles/setting-ssl-tomcat-5-minutes" title="Setting Up SSL on Tomcat in 5 minutes">Setting Up SSL on Tomcat in 5 minutes</a>
-4. Node.js: <a target="_blank" href="https://nodejs.org/docs/v0.4.1/api/tls.html" title="npm tls">npm tls</a>
-
-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
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.42/dist/dbr.js"></script>
-  ```
-
-- UNPKG  
-
-  ```html
-  <script src="https://unpkg.com/dynamsoft-javascript-barcode@9.6.42/dist/dbr.js"></script>
-  ```
-
-#### 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
-
-  <a target="_blank" href="https://www.dynamsoft.com/barcode-reader/downloads/?ver=9.6.42&utm_source=guide" title="Download the JavaScript Package">Download the JavaScript Package</a>
-
-- 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
-<script src="/dynamsoft-barcode-reader-js-9.6.42/dist/dbr.js"></script>
-```
-
-or
-
-```html
-<script src="/node_modules/dynamsoft-javascript-barcode/dist/dbr.js"></script>
-```
-
-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 <a href="https://www.dynamsoft.com/customer/license/trialLicense?ver=9.6.42&utm_source=guide&product=dbr&package=js" target="_blank">Request a Trial License</a> 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 <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Syntax" target="_blank" title="here">here</a>.
-
-- `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 <a href="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/global-interfaces.html?ver=9.6.42&utm_source=guide&&ver=latest#runtimesettings" target="_blank" title="here">here</a>.
-
-### 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
-  <div id="div-ui-container"></div>
-  ```
-
-  ```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
-  <div id="div-ui-container" style="width:100%;height:100%;">
-      <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-  </div>
-  <script>
-      (async () => {
-          let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-          await scanner.setUIElement(document.getElementById('div-ui-container'));
-          scanner.onFrameRead = results => {
-              console.log(results);
-          };
-          scanner.onUniqueRead = (txt, result) => {
-              alert(txt);
-          };
-          await scanner.show();
-      })();
-  </script>
-  ```
-
-  > 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
-    <div id="div-ui-container" style="width:100%;height:100%;">
-        <select class="dce-sel-camera"></select><br>
-        <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-    </div>
-  ```
-
-  [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)
-
-  ```html
-  <div id="div-ui-container">
-      <select class="dce-sel-camera"></select>
-      <select class="dce-sel-resolution"></select>
-      <br>
-      <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
-  </div>
-  ```
-
-  [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
-  <select class="dce-sel-resolution">
-      <option class="dce-opt-gotResolution" value="got"></option>
-      <option data-width="1280" data-height="720">1280x720</option>
-      <option data-width="1920" data-height="1080">1920x1080</option>
-  </select>
-  ```
-
-  [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+<sup>1</sup>
-  Firefox | v52+ (v55+ on Android/iOS<sup>1</sup>)
-  Edge<sup>2</sup> | v16+
-  Safari<sup>3</sup> | v11+
-
-  <sup>1</sup> iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
-
-  <sup>2</sup> On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.
-  
-  <sup>3</sup> 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 `<pre>` element.
-2. Manually replace each `\n` character in the result with `<br>`
-
-## 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
-<div id='scannerV' style="width:50vw;height:50vh"></div>
-<div id='cvses'></div>
-```
-
-```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
-   <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@7.6.0/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-   ```
-
-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
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.7/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-```
-
-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
-   <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@7.6.0/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-   ```
-
-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)
-
-<!--* [Process multi-page TIF or PDF files]({{site.usecases}}read-multipage-files.html?lang=js)
-
-* [Search an item with barcode]({{site.usecases}}search-with-barcode.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-reader-module.md b/programming/javascript/api-reference/barcode-reader-module.md
index 0ba5c384..799c2da4 100644
--- a/programming/javascript/api-reference/barcode-reader-module.md
+++ b/programming/javascript/api-reference/barcode-reader-module.md
@@ -40,7 +40,7 @@ This class defines common functionality in the `BarcodeReader` module. At presen
 * [OneDCodeDetails](./interfaces/oned-code-details.md)
 * [PDF417Details](./interfaces/pdf417-details.md)
 * [QRCodeDetails](./interfaces/qr-code-details.md)
-* [ScaledBarcodeImageUnit](./interfaces/scaled-barcode-image-unit.md)
+* [ScaledUpBarcodeImageUnit](./interfaces/scaled-up-barcode-image-unit.md)
 * [SimplifiedBarcodeReaderSettings](./interfaces/simplified-barcode-reader-settings.md)
 
 ## Enums
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<BarcodeScanResult>
-```
-
-**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<CapturedResult>
-```
-
-**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<EnumBarcodeFormat>;
-  duplicateForgetTime?: number;
-  removePoweredByMessage?: boolean;
-  container?: HTMLElement | string | undefined;
-  onUniqueBarcodeScanned?: (result: BarcodeResultItem) => void | Promise<void>;
-  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<EnumBarcodeFormat>` | `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<void>` | `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
-<body>
-    <div id="camera-view-container" style="width: 100%; height: 80vh"></div>
-    <script>
-      const barcodeScannerConfig = {
-        license: "YOUR_LICENSE_KEY_HERE",
-        // Defines scan behavior:
-        //   - SM_MULTI_UNIQUE: Keeps scanning and continuously collecting unique decoded barcode results.
-        //   - SM_SINGLE: Scans once a result is found.
-        scanMode: Dynamsoft.EnumScanMode.SM_MULTI_UNIQUE,
-        // The path to your custom JSON template that defines the scanning process.
-        templateFilePath:'./DBR-PresetTemplates.json',
-        // engineResourcePaths typically is only assigned when using a framework like React/Angular/Vue where the resources are not in the same location as the script reference.
-        engineResourcePaths: {rootDirectory:"https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.5.3000/dist"},
-        barcodeFormats: [Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE , Dynamsoft.DBR.EnumBarcodeFormat.BF_CODE_128],
-        removePoweredByMessage: true,
-        duplicateForgetTime: 3000,
-        showUploadImageButton: true,
-        // The container for rendering the scanner and/or result view. Note that ResultView is only valid for SM_MULTI_UNIQUE mode. If not specified, a full-viewport default UI will be created.
-        container: "#camera-view-container",
-        onUniqueBarcodeScanned: (result) => {
-        // do something with the result
-        },
-        showResultView: true,
-        scannerViewConfig: {
-          // the ResultViewConfig goes in here - see ResultViewConfig section
-        },
-        resultViewConfig: {
-          // the ResultViewConfig goes in here - see ResultViewConfig section
-        }
-      };
-      // Initialize the BarcodeScanner with the above BarcodeScannerConfig object
-      const barcodeScanner = new Dynamsoft.BarcodeScanner(barcodeScannerConfig);
-    </script>
-</body>
-```
-
-### 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<BarcodeResultItem>`]({{ 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/barcode-scanner.md b/programming/javascript/api-reference/barcode-scanner.md
index 89cd287f..324bec36 100644
--- a/programming/javascript/api-reference/barcode-scanner.md
+++ b/programming/javascript/api-reference/barcode-scanner.md
@@ -32,9 +32,11 @@ 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,
 });
 ```
 
@@ -59,8 +61,7 @@ A promise that resolves to a [`BarcodeScanResult`](#barcodescanresult).
     // Launch the scanner and wait for the result
     try {
         const result = await barcodeScanner.launch();
-        // print the BarcodeScanResult to the console
-        console.log(result); 
+        console.log(result); // print the BarcodeScanResult to the console
     } catch (error){
         console.error(error);
     }
@@ -124,18 +125,13 @@ interface BarcodeScannerConfig {
   uiPath?: string;
   barcodeFormats?: EnumBarcodeFormat | Array<EnumBarcodeFormat>;
   duplicateForgetTime?: number;
-  showPoweredByDynamsoft?: boolean;
-  autoStartCapturing? : boolean;
+  removePoweredByMessage?: boolean;
   container?: HTMLElement | string | undefined;
   onUniqueBarcodeScanned?: (result: BarcodeResultItem) => void | Promise<void>;
   showResultView?: boolean;
   showUploadImageButton?: boolean;
   scannerViewConfig?: ScannerViewConfig;
   resultViewConfig?: ResultViewConfig;
-  onInitPrepare?: () => void;
-  onInitReady?: (components: {cameraView: CameraView;cameraEnhancer: CameraEnhancer;cvRouter: CaptureVisionRouter;}) => void;
-  onCameraOpen?: (components: {cameraView: CameraView;cameraEnhancer: CameraEnhancer;cvRouter: CaptureVisionRouter;}) => void;
-  onCaptureStart?: (components: {cameraView: CameraView;cameraEnhancer: CameraEnhancer;cvRouter: CaptureVisionRouter;}) => void;
 }
 ```
 
@@ -149,18 +145,13 @@ interface BarcodeScannerConfig {
 | `uiPath` (optional) | `string` | `N/A` | Path to the custom UI (`.xml` template file) for the ScannerView.|
 | `barcodeFormats`(optional) | `EnumBarcodeFormat` \| `Array<EnumBarcodeFormat>` | `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. |
-| `showPoweredByDynamsoft`(optional) | `boolean` | `true` | Whether to show the "powered by" message. |
-| `autoStartCapturing`(optional) | `boolean` | `true` | Whether to start capturing directly after opening the camera. |
+| `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. |
-| `showResultView`(optional) | `boolean` | `true` | Whether to display a result view in SM_MULTI_UNIQUE mode. |
+| `onUniqueBarcodeScanned` | `void` \| `Promise<void>` | `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). |
-| `onUniqueBarcodeScanned` | `N/A` | `N/A` | A callback triggered when a unique barcode is scanned (only valid in SM_MULTI_UNIQUE). |
-| `onInitPrepare` | `N/A` | `N/A` | A callback function that is triggered before the scanner components are initialized. |
-| `onInitReady` | `N/A` | `N/A` | Called when the scanner components have been successfully initialized and are ready. |
-| `onCameraOpen` | `N/A` | `N/A` | Called when the camera is successfully opened for the first time or after each camera switch. |
-| `onCaptureStart` | `N/A` | `N/A` | Called when the capture process begins. |
 
 **Code Snippet**
 
@@ -177,50 +168,23 @@ interface BarcodeScannerConfig {
         // The path to your custom JSON template that defines the scanning process.
         templateFilePath:'./DBR-PresetTemplates.json',
         // engineResourcePaths typically is only assigned when using a framework like React/Angular/Vue where the resources are not in the same location as the script reference.
-        engineResourcePaths: {rootDirectory:"https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.6000/dist"},
+        engineResourcePaths: {rootDirectory:"https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.5.3000/dist"},
         barcodeFormats: [Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE , Dynamsoft.DBR.EnumBarcodeFormat.BF_CODE_128],
-        showPoweredByDynamsoft: false,
+        removePoweredByMessage: true,
         duplicateForgetTime: 3000,
         showUploadImageButton: true,
-        autoStartCapturing: true,
         // The container for rendering the scanner and/or result view. Note that ResultView is only valid for SM_MULTI_UNIQUE mode. If not specified, a full-viewport default UI will be created.
         container: "#camera-view-container",
-        scannerViewConfig: {
-          // The ResultViewConfig goes in here - see ResultViewConfig section
-        },
-        resultViewConfig: {
-          // The ResultViewConfig goes in here - see ResultViewConfig section
-        },
         onUniqueBarcodeScanned: (result) => {
-          // Do something with the result
-        },
-        onInitPrepare: () => {
-          // Do something before the barcodeScanner initialized
-        },
-        onInitReady: (components) => {
-          // Do something with the foundational components
-          // Set the scan laser to be visible in cameraView
-          components.cameraView.setScanLaserVisible(true);
-          // Set the zoom factor to 3
-          components.cameraEnhancer.setZoom({
-             factor: 3
-          });
-          // Set the scan region to a rectangle with percentage values by cameraEnhancer
-          let region = {
-            "x": 0,
-            "y": 20,
-            "width": 100,
-            "height": 60,
-            "isMeasuredInPercentage": true
-          };
-          components.cameraEnhancer.setScanRegion(region);
+        // do something with the result
         },
-        onCameraOpen: (components) => {
-          // Do something with the foundational components when the camera is successfully opened for the first time or after each camera switch
-        },
-        onCaptureStart: (components) => {
-          // Do something with the foundational components when the capture process begins
+        showResultView: true,
+        scannerViewConfig: {
+          // the ResultViewConfig goes in here - see ResultViewConfig section
         },
+        resultViewConfig: {
+          // the ResultViewConfig goes in here - see ResultViewConfig section
+        }
       };
       // Initialize the BarcodeScanner with the above BarcodeScannerConfig object
       const barcodeScanner = new Dynamsoft.BarcodeScanner(barcodeScannerConfig);
@@ -236,49 +200,19 @@ The ScannerViewConfig is used to configure the UI elements of the **BarcodeScann
 interface ScannerViewConfig {
   container?: HTMLElement | string | undefined;
   showCloseButton?: boolean;
-  mirrorFrontCamera?: boolean;
-  cameraSwitchControl?: CameraSwitchControlMode;
-  showFlashButton?: boolean;
-  customHighlightForBarcode?: (result: BarcodeResultItem) => DrawingItem;
 }
 ```
 
 | Property                | Type                           | Default Value | Description                                                     |
 | ----------------------- | ------------------------------ | --- | --------------------------------------------------------------- |
 | `container` (optional) | `HTMLElement` \| `string` \| `undefined` | `N/A` | A dedicated container for the ScannerView (video stream). |
-| `showCloseButton` (optional) | `boolean` | `true` | Determines the visibility of the "closeButton" button that allows the user to close the ScannerView. |
-| `mirrorFrontCamera` (optional) | `boolean` | `true` | Whether to mirror the camera feed when using the front-facing camera. |
-| `cameraSwitchControl` (optional) | `CameraSwitchControlMode` | `hidden` | Specifies the mode and visibility of the camera switch control, enabling users to change between cameras. |
-| `showFlashButton` (optional) | `boolean` | `false` | Controls the visibility of the "Flash" button that lets the user toggle the camera's torch. |
-| `customHighlightForBarcode` | `DrawingItem` | `N/A` | A callback function that allows customization of the visual highlight for detected barcodes. |
+| `showCloseButton` (optional) | `boolean` | `false` | Determines the visibility of the "closeButton" button that allows the user to close the ScannerView. |
 
 **Code Snippet**
 
 ```js
 const barcodeScannerViewConfig = {
-  // Hide the close button that shows up at the top right of the view
-  showCloseButton: false, 
-  // Show the flash button that lets the user toggle the camera's torch.
-  showFlashButton: true, 
-  // Shows the camera switcher that can toggle between front and back cameras.
-  cameraSwitchControl: "toggleFrontBack", 
-  // Change the highlight style for all detected barcodes
-  customHighlightForBarcode: (item) => {
-      const imageDrawingStyleId = Dynamsoft.DCE.DrawingStyleManager.createDrawingStyle({
-          lineWidth: 5, fillStyle: "rgba(0, 255, 255, 0.5)", strokeStyle: "rgba(0, 255, 255, 1)"
-      });
-      const drawingItem = new Dynamsoft.DCE.RectDrawingItem(
-          {
-              x: item.location.points[0].x,
-              y: item.location.points[0].y,
-              width: item.location.points[1].x - item.location.points[0].x,
-              height: item.location.points[2].y - item.location.points[0].y,
-              isMeasuredInPercentage: false
-          },
-          imageDrawingStyleId
-      )
-      return drawingItem;
-  },
+  showCloseButton: true // display the close button that shows up at the top right of the view
 };
 
 const barcodeScannerConfig = {
@@ -287,11 +221,6 @@ const barcodeScannerConfig = {
 };
 ```
 
-**See Also**
-
-- [drawingItem](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/api-reference/drawingitem.html)
-- [CameraSwitchControlMode](#cameraswitchcontrolmode)
-
 ### 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.
@@ -409,12 +338,9 @@ interface BarcodeScanResult {
 (async () => {
     // Launch the scanner and wait for the result
     const result = await barcodeScanner.launch();
-    // Prints the result status message to the console
-    console.log(result.status.message); 
-    // Prints the result status code to the console
-    console.log(result.status.code); 
-    // 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.
-    console.log(result.barcodeResults); 
+    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.
 })();
 ```
 
@@ -442,7 +368,7 @@ interface UtilizedTemplateNames {
 const barcodeScannerConfig = {
     //..
     utilizedTemplateNames:{
-      single: `ReadBarcodes_SpeedFirst`,
+      single: `ReadSingleBarcode`,
       multi_unique: `ReadBarcodes_SpeedFirst`,
       image: `ReadBarcodes_ReadRateFirst`,
     }
@@ -450,19 +376,6 @@ const barcodeScannerConfig = {
 }
 ```
 
-> [!NOTE]
-> Various preset templates are at your disposal for barcode reading:
-
-> | Template Name                  | Function Description                                           |
-> | ------------------------------ | -------------------------------------------------------------- |
-> | **ReadBarcodes_Default**       | Scans multiple barcodes by default setting.                    |
-> | **ReadSingleBarcode**          | Quickly scans a single barcode.                                |
-> | **ReadBarcodes_SpeedFirst**    | Prioritizes speed in scanning multiple barcodes.               |
-> | **ReadBarcodes_ReadRateFirst** | Maximizes the number of barcodes read.                         |
-> | **ReadBarcodes_Balance**       | Balances speed and quantity in reading multiple barcodes.      |
-> | **ReadDenseBarcodes**          | Specialized in reading barcodes with high information density. |
-> | **ReadDistantBarcodes**        | Capable of reading barcodes from extended distances.           |
-
 ### 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).
@@ -474,20 +387,6 @@ type ResultStatus = {
 }
 ```
 
-## Types
-
-### CameraSwitchControlMode
-
-- `"hidden"`: Hides the camera switch control entirely. Users will not be able to switch cameras manually.
-
-- `"listAll"`: List all available cameras (e.g., front, back, external cameras).
-
-- `"toggleFrontBack"`: Allows toggling only between the front and back cameras.
-
-```ts
-type CameraSwitchControlMode = "hidden" | "listAll" | "toggleFrontBack";
-```
-
 ## Enums
 
 ### EnumScanMode
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/index.md b/programming/javascript/api-reference/index.md
index e9c2160b..43bfa0c7 100644
--- a/programming/javascript/api-reference/index.md
+++ b/programming/javascript/api-reference/index.md
@@ -30,7 +30,7 @@ noTitleIndex: true
 
 ### Enums
 
-* [EnumImageSourceState]({{ site.dcvb_js_api }}core/enum-image-source-state.html?lang=js)
+* [EnumImageSourceState]({{ site.dcvb_enums }}core/image-source-state.html?lang=js)
 
 ## [DynamsoftBarcodeReader](./barcode-reader-module.html)
 
@@ -58,16 +58,16 @@ noTitleIndex: true
 * [OneDCodeDetails](./interfaces/oned-code-details.html)
 * [PDF417Details](./interfaces/pdf417-details.html)
 * [QRCodeDetails](./interfaces/qr-code-details.html)
-* [ScaledBarcodeImageUnit](./interfaces/scaled-barcode-image-unit.html)
+* [ScaledUpBarcodeImageUnit](./interfaces/scaled-up-barcode-image-unit.html)
 * [SimplifiedBarcodeReaderSettings](./interfaces/simplified-barcode-reader-settings.html)
 
 ### Enums
 
-* [EnumBarcodeFormat](./enum-barcode-format.html?lang=js)
-* [EnumDeblurMode](./enum-deblur-mode.html?lang=js)
-* [EnumExtendedBarcodeResultType](./enum-extended-barcode-result-type.html?lang=js)
-* [EnumLocalizationMode](./enum-localization-mode.html?lang=js)
-* [EnumQRCodeErrorCorrectionLevel](./enum-qr-code-error-correction-level.html?lang=js)
+* [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)
 
@@ -151,18 +151,18 @@ noTitleIndex: true
 
 ### Enums
 
-* [EnumBufferOverflowProtectionMode]({{ site.dcvb_js_api }}core/enum-buffer-overflow-protection-mode.html?lang=js)
-* [EnumCapturedResultItemType]({{ site.dcvb_js_api }}core/enum-captured-result-item-type.html?lang=js)
-* [EnumColourChannelUsageType]({{ site.dcvb_js_api }}core/enum-colour-channel-usage-type.html?lang=js)
-* [EnumCornerType]({{ site.dcvb_js_api }}core/enum-corner-type.html?lang=js)
-* [EnumErrorCode]({{ site.dcvb_js_api }}core/enum-error-code.html?lang=js)
-* [EnumGrayscaleEnhancementMode]({{ site.dcvb_js_api }}core/enum-grayscale-enhancement-mode.html?lang=js)
-* [EnumGrayscaleTransformationMode]({{ site.dcvb_js_api }}core/enum-grayscale-transformation-mode.html?lang=js)
-* [EnumImagePixelFormat]({{ site.dcvb_js_api }}core/enum-image-pixel-format.html?lang=js)
-* [EnumImageTagType]({{ site.dcvb_js_api }}core/enum-image-tag-type.html?lang=js)
-* [EnumIntermediateResultUnitType]({{ site.dcvb_js_api }}core/enum-intermediate-result-unit-type.html?lang=js)
-* [EnumRegionObjectElementType]({{ site.dcvb_js_api }}core/enum-region-object-element-type.html?lang=js)
-* [EnumSectionType]({{ site.dcvb_js_api }}core/enum-section-type.html?lang=js)
+* [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)
 
diff --git a/programming/javascript/api-reference/interfaces/candidate-barcode-zone.md b/programming/javascript/api-reference/interfaces/candidate-barcode-zone.md
deleted file mode 100644
index 0ef0911d..00000000
--- a/programming/javascript/api-reference/interfaces/candidate-barcode-zone.md
+++ /dev/null
@@ -1,43 +0,0 @@
----
-layout: default-layout
-title: interface CandidateBarcodeZone - Dynamsoft Barcode Reader Module JS Edition API Reference
-description: This page shows the JS edition of the interface CandidateBarcodeZone in Dynamsoft Barcode Reader Module.
-keywords: candidate barcode zone, JS
-needAutoGenerateSidebar: true
-noTitleIndex: true
----
-
-# CandidateBarcodeZone
-
-The `CandidateBarcodeZone` interface represents a candidate barcode zone.
-
-```typescript
-interface CandidateBarcodeZone {
-    location: Quadrilateral;
-    possibleFormats: EnumBarcodeFormat;
-}
-```
-
-## location
-
-Location of the candidate barcode zone within the image.
-
-```typescript
-location: Quadrilateral;
-```
-
-**See also**
-
-* [Quadrilateral]({{ site.dcvb_js_api }}core/basic-structures/quadrilateral.html)
-
-## possibleFormats
-
-Possible formats of the localized barcode.
-
-```typescript
-possibleFormats: EnumBarcodeFormat;
-```
-
-**See also**
-
-* [EnumBarcodeFormat]({{ site.dcv_enumerations }}barcode-reader/barcode-format.html?lang=js)
\ 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<Core.Quadrilateral>;
-}
-```
-<!-- 
-| Properties                                      | Type                         |
-| ----------------------------------------------- | ---------------------------- |
-| [candidateBarcodeZones](#candidatebarcodezones) | *Array\<Core.Quadrilateral>* | -->
-
-## 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<Core.Quadrilateral>;
-```
-
-**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<BarcodeResultItem>;
-    readonly errorCode: number;
-    readonly errorString: string;
-}
-```
-<!-- 
-| Properties                                  | Type                        |
-| ------------------------------------------- | --------------------------- |
-| [originalImageHashId](#originalimagehashid) | *string*                    |
-| [originalImageTag](#originalimagetag)       | *Core.ImageTag*             |
-| [barcodeResultItems](#barcoderesultitems)   | *Array\<BarcodeResultItem>* |
-| [errorCode](#errorcode)                     | *number*                    |
-| [errorString](#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<BarcodeResultItem>;
-```
-
-**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/decoded-barcodes-result.md b/programming/javascript/api-reference/interfaces/decoded-barcodes-result.md
index 45bda6c7..1c803771 100644
--- a/programming/javascript/api-reference/interfaces/decoded-barcodes-result.md
+++ b/programming/javascript/api-reference/interfaces/decoded-barcodes-result.md
@@ -12,10 +12,42 @@ noTitleIndex: true
 Interface DecodedBarcodesResult represents information of decoded barcodes from an image.
 
 ```typescript
-interface DecodedBarcodesResult extends CapturedResultBase{
+interface DecodedBarcodesResult {
+    readonly originalImageHashId: string;
+    readonly originalImageTag: Core.ImageTag;
     readonly barcodeResultItems: Array<BarcodeResultItem>;
+    readonly errorCode: number;
+    readonly errorString: string;
 }
 ```
+<!-- 
+| Properties                                  | Type                        |
+| ------------------------------------------- | --------------------------- |
+| [originalImageHashId](#originalimagehashid) | *string*                    |
+| [originalImageTag](#originalimagetag)       | *Core.ImageTag*             |
+| [barcodeResultItems](#barcoderesultitems)   | *Array\<BarcodeResultItem>* |
+| [errorCode](#errorcode)                     | *number*                    |
+| [errorString](#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
 
@@ -28,4 +60,19 @@ readonly barcodeResultItems: Array<BarcodeResultItem>;
 **See also**
 
 * [BarcodeResultItem]({{ site.js_api }}interfaces/barcode-result-item.html)
-* [CapturedResultBase]({{ site.dcvb_js_api }}core/basic-structures/captured-result-base.html)
\ No newline at end of file
+
+## 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;
-}
-```
-<!-- 
-| Properties              | Type               |
-| ----------------------- | ------------------ |
-| [imageData](#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;
-}
-```
-<!-- 
-| Properties                                    | Type     |
-| --------------------------------------------- | -------- |
-| [rows](#rows)                                 | *number* |
-| [columns](#columns)                           | *number* |
-| [errorCorrectionLevel](#errorcorrectionlevel) | *number* |
-| [hasLeftRowIndicator](#hasleftrowindicator)   | *number* |
-| [hasRightRowIndicator](#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/pdf417-details.md b/programming/javascript/api-reference/interfaces/pdf417-details.md
index 482196e1..71e43098 100644
--- a/programming/javascript/api-reference/interfaces/pdf417-details.md
+++ b/programming/javascript/api-reference/interfaces/pdf417-details.md
@@ -18,7 +18,6 @@ interface PDF417Details extends BarcodeDetails {
     errorCorrectionLevel: number;
     hasLeftRowIndicator: number;
     hasRightRowIndicator: number;
-    codewords: Array<String>;
 }
 ```
 <!-- 
@@ -68,12 +67,4 @@ Indicates whether the PDF417 code has a right row indicator (1 means yes, 0 mean
 
 ```typescript
 hasRightRowIndicator: number;
-```
-
-## codewords
-
-The codewords array of the PDF417 Code.
-
-```typescript
-codewords: Array<String>;
 ```
\ 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;
-}
-```
-<!-- 
-| Properties                                    | Type     |
-| --------------------------------------------- | -------- |
-| [rows](#rows)                                 | *number* |
-| [columns](#columns)                           | *number* |
-| [errorCorrectionLevel](#errorcorrectionlevel) | *number* |
-| [version](#version)                           | *number* |
-| [model](#model)                               | *number* |
-| [mode](#mode)                                 | *number* |
-| [page](#page)                                 | *number* |
-| [totalPage](#totalpage)                       | *number* |
-| [parityData](#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/index.md b/programming/javascript/index.md
index 0545c973..0a2d97c4 100644
--- a/programming/javascript/index.md
+++ b/programming/javascript/index.md
@@ -9,7 +9,7 @@ noTitleIndex: true
 breadcrumbText: JavaScript
 ---
 
-# Introduction to Dynamsoft Barcode Reader JavaScript Edition version 11.x
+# 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
 
@@ -23,9 +23,9 @@ To get a fast start, you can
 
 The following describes the highlights of DBR JavaScript edition (DBR-JS) version 10.x.
 
-# ✨BarcodeScanner – Simplified API and Built-in UI
+# ✨New in v10.5.3000: BarcodeScanner – Simplified API and Built-in UI
 
-The `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.
+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:
 
diff --git a/programming/javascript/release-notes/index.md b/programming/javascript/release-notes/index.md
index 6582a2fa..ab5e15b9 100644
--- a/programming/javascript/release-notes/index.md
+++ b/programming/javascript/release-notes/index.md
@@ -5,13 +5,10 @@ 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
 
-- [11.0.6000   (08/14/2025)](js-11.html#1106000-08142025)
-- [11.0.3000   (07/09/2025)](js-11.html#1103000-07092025)
 - [10.5.3000   (04/24/2025)](js-10.html#1053000-04242025)
 - [10.4.3100   (01/03/2025)](js-10.html#1043100-01032025)
 - [10.4.2002   (10/24/2024)](js-10.html#1042002-10242024)
diff --git a/programming/javascript/release-notes/js-11.md b/programming/javascript/release-notes/js-11.md
deleted file mode 100644
index 0a85b937..00000000
--- a/programming/javascript/release-notes/js-11.md
+++ /dev/null
@@ -1,72 +0,0 @@
----
-layout: default-layout
-title: Release Notes v11.x - Dynamsoft Barcode Reader JavaScript Edition
-description: This note features the latest updates in Barcode Reader JavaScript SDK version 11.x. New features were added along with various APIs deprecated, added, and removed.
-keywords: release notes, javascript
-needAutoGenerateSidebar: true
-needGenerateH3Content: false
-noTitleIndex: true
----
-
-# Release Notes for Dynamsoft Barcode Reader JavaScript SDK
-
-## 11.0.6000 (08/14/2025)
-
-### New
-
-- Introduced new samples:
-
-  - [`Pick One to Fill`](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/pick-one-to-fill/index.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/barcode-scanner-api-samples/scan-single-barcode/pick-one-to-fill/index.html?utm_source=sampleReadme): Pick one and auto-fill fields by simply opening the camera and scanning a group of barcodes.
-  - [`Use Customized Template`](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/use-customized-template/index.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/barcode-scanner-api-samples/scan-single-barcode/use-customized-template/index.html?utm_source=sampleReadme): Use different customized templates for scanning various barcode types.
-  - [`Batch Inventory`](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/barcode-scanner-api-samples/scan-multiple-barcodes/batch-inventory/index.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/barcode-scanner-api-samples/scan-multiple-barcodes/batch-inventory/index.html?utm_source=sampleReadme): An inventory management tool scan barcodes in batches and provide real-time analysis of the scanned data.
-  - [`Read and Parse GS1-AI`](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/use-case/read-and-parse-GS1-AI/index.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/foundational-api-samples/use-case/read-and-parse-GS1-AI/index.html?utm_source=sampleReadme): Read GS1 Application Identifier (AI) barcode and parse its structured data.
-
-- Template Version Validation: Introduced version checking for templates to prevent compatibility issues and mismatches.
-
-### Changed
-
-- License Validation Behavior: Instead of stopping execution immediately on an invalid license module, the library now continues processing and returns results from modules with valid licenses. An warning is still reported to indicate the license issue.
-
-### Fixed
-
-- Fixed various minor bugs and improved overall stability.
-
-## 11.0.3000 (07/09/2025)
-
-### [Highlights](https://www.dynamsoft.com/release-highlights/?product=dcv3.0)
-
-#### Workflow Improvements
-
-- Restructured the parameter control hierarchy at all levels for finer scope definition and more granular process management, with the stage level newly added.
-  
-#### Deep Learning Integration
-
-- Improved the reading rate of 1D barcode by introducing a new deblurring deep-learning model.
-
-#### Algorithm Enhancements
-
-- Enabled deduplication at the Region of Interest (ROI) level to consolidate results from multiple tasks.
-- Improved the `CODE_128` and `DataMatrix` DeepAnalysis algorithms for better decoding accuracy and performance.
-- Added support for new barcode types: `CODE_32`, `MATRIX_25`, `KIX`, and `TELEPEN`.
-- Added GS1 Application Identifiers (AI) support for improved code parsing capabilities.
-
-#### Engineering Optimizations
-
-- Simplified the loading and configuration of WASM resources, reducing the overall size of the WASM files.
-
-#### Updates for [BarcodeScanner](https://dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/barcode-scanner.html)
-
-- Added several new UI controls (not displayed by default).
-
-<img src="../user-guide/assets/1103000_new_control_components.png" style="display: block; margin: 0 auto;"/>
-
-- Introduced a new `"Scan and Search"` sample to simulate searching for relevant data via barcodes. [Give it a try!](https://demo.dynamsoft.com/Samples/DBR/JS/barcode-scanner-api-samples/scan-single-barcode/scan-and-search.html)
-
-<img src="../user-guide/assets/scan_and_search_sample.png" width="80%" style="display: block; margin: 0 auto;"/>
-
-- Added the `customHighlightForBarcode` API to easily customize highlights on detected barcodes.
-- Updated default values for certain parameters:
-  - The close button is now shown by default.
-  - The `resultView` is now shown by default for `multi_unique` mode.
-- Improved deduplication and billing logic for more accurate count tracking.
-- Minor bug fixes and performance improvements.
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
----
-
-<div class="filetree">
-    <div class="ds-logo"></div>
-    <div class="file">
-        <h3>Demo and Samples - DBR JavaScript Edition</h3>
-    </div>
-    <div class="children">
-        <div class="file">Hello World</div>
-        <div class="children">
-            <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Minimum necessary JavaScript code to get
-                the BarcodeScanner (video) up and running." class="button title" target="_blank"
-                     href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.31/hello-world/hello-world.html">Hello World</a> 
-                     <a
-                        target="_blank"
-                        href="https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/hello-world/hello-world.html"
-                    ><span style="text-decoration: underline;">Run it&nearrow;</span></a>
-            </div>
-            <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Decode barcodes
-                using images that are stored locally,
-                whether on mobile or desktop." class="button title" target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.31/hello-world/read-an-image.html">Read
-                    an Existing Image</a></div>
-            <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Decode video stream in an Angular
-                Application from a USB-connected or built-in camera (mobile or desktop)." class="button title"
-                     href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.4.31/hello-world/angular">Hello World in
-                    Angular (<img alt="Angular logo"
-                        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==" />)</a> 
-                        </div>
-            <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Decode video stream in a React
-                Application from a USB-connected or built-in camera (mobile or desktop)." class="button title"
-                     href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.4.31/hello-world/react">
-                    Hello World in
-                    React (<img alt="React logo"
-                        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4NDEuOSA1OTUuMyI+PGcgZmlsbD0iIzYxREFGQiI+PHBhdGggZD0iTTY2Ni4zIDI5Ni41YzAtMzIuNS00MC43LTYzLjMtMTAzLjEtODIuNCAxNC40LTYzLjYgOC0xMTQuMi0yMC4yLTEzMC40LTYuNS0zLjgtMTQuMS01LjYtMjIuNC01LjZ2MjIuM2M0LjYgMCA4LjMuOSAxMS40IDIuNiAxMy42IDcuOCAxOS41IDM3LjUgMTQuOSA3NS43LTEuMSA5LjQtMi45IDE5LjMtNS4xIDI5LjQtMTkuNi00LjgtNDEtOC41LTYzLjUtMTAuOS0xMy41LTE4LjUtMjcuNS0zNS4zLTQxLjYtNTAgMzIuNi0zMC4zIDYzLjItNDYuOSA4NC00Ni45Vjc4Yy0yNy41IDAtNjMuNSAxOS42LTk5LjkgNTMuNi0zNi40LTMzLjgtNzIuNC01My4yLTk5LjktNTMuMnYyMi4zYzIwLjcgMCA1MS40IDE2LjUgODQgNDYuNi0xNCAxNC43LTI4IDMxLjQtNDEuMyA0OS45LTIyLjYgMi40LTQ0IDYuMS02My42IDExLTIuMy0xMC00LTE5LjctNS4yLTI5LTQuNy0zOC4yIDEuMS02Ny45IDE0LjYtNzUuOCAzLTEuOCA2LjktMi42IDExLjUtMi42Vjc4LjVjLTguNCAwLTE2IDEuOC0yMi42IDUuNi0yOC4xIDE2LjItMzQuNCA2Ni43LTE5LjkgMTMwLjEtNjIuMiAxOS4yLTEwMi43IDQ5LjktMTAyLjcgODIuMyAwIDMyLjUgNDAuNyA2My4zIDEwMy4xIDgyLjQtMTQuNCA2My42LTggMTE0LjIgMjAuMiAxMzAuNCA2LjUgMy44IDE0LjEgNS42IDIyLjUgNS42IDI3LjUgMCA2My41LTE5LjYgOTkuOS01My42IDM2LjQgMzMuOCA3Mi40IDUzLjIgOTkuOSA1My4yIDguNCAwIDE2LTEuOCAyMi42LTUuNiAyOC4xLTE2LjIgMzQuNC02Ni43IDE5LjktMTMwLjEgNjItMTkuMSAxMDIuNS00OS45IDEwMi41LTgyLjN6bS0xMzAuMi02Ni43Yy0zLjcgMTIuOS04LjMgMjYuMi0xMy41IDM5LjUtNC4xLTgtOC40LTE2LTEzLjEtMjQtNC42LTgtOS41LTE1LjgtMTQuNC0yMy40IDE0LjIgMi4xIDI3LjkgNC43IDQxIDcuOXptLTQ1LjggMTA2LjVjLTcuOCAxMy41LTE1LjggMjYuMy0yNC4xIDM4LjItMTQuOSAxLjMtMzAgMi00NS4yIDItMTUuMSAwLTMwLjItLjctNDUtMS45LTguMy0xMS45LTE2LjQtMjQuNi0yNC4yLTM4LTcuNi0xMy4xLTE0LjUtMjYuNC0yMC44LTM5LjggNi4yLTEzLjQgMTMuMi0yNi44IDIwLjctMzkuOSA3LjgtMTMuNSAxNS44LTI2LjMgMjQuMS0zOC4yIDE0LjktMS4zIDMwLTIgNDUuMi0yIDE1LjEgMCAzMC4yLjcgNDUgMS45IDguMyAxMS45IDE2LjQgMjQuNiAyNC4yIDM4IDcuNiAxMy4xIDE0LjUgMjYuNCAyMC44IDM5LjgtNi4zIDEzLjQtMTMuMiAyNi44LTIwLjcgMzkuOXptMzIuMy0xM2M1LjQgMTMuNCAxMCAyNi44IDEzLjggMzkuOC0xMy4xIDMuMi0yNi45IDUuOS00MS4yIDggNC45LTcuNyA5LjgtMTUuNiAxNC40LTIzLjcgNC42LTggOC45LTE2LjEgMTMtMjQuMXpNNDIxLjIgNDMwYy05LjMtOS42LTE4LjYtMjAuMy0yNy44LTMyIDkgLjQgMTguMi43IDI3LjUuNyA5LjQgMCAxOC43LS4yIDI3LjgtLjctOSAxMS43LTE4LjMgMjIuNC0yNy41IDMyem0tNzQuNC01OC45Yy0xNC4yLTIuMS0yNy45LTQuNy00MS03LjkgMy43LTEyLjkgOC4zLTI2LjIgMTMuNS0zOS41IDQuMSA4IDguNCAxNiAxMy4xIDI0IDQuNyA4IDkuNSAxNS44IDE0LjQgMjMuNHpNNDIwLjcgMTYzYzkuMyA5LjYgMTguNiAyMC4zIDI3LjggMzItOS0uNC0xOC4yLS43LTI3LjUtLjctOS40IDAtMTguNy4yLTI3LjguNyA5LTExLjcgMTguMy0yMi40IDI3LjUtMzJ6bS03NCA1OC45Yy00LjkgNy43LTkuOCAxNS42LTE0LjQgMjMuNy00LjYgOC04LjkgMTYtMTMgMjQtNS40LTEzLjQtMTAtMjYuOC0xMy44LTM5LjggMTMuMS0zLjEgMjYuOS01LjggNDEuMi03Ljl6bS05MC41IDEyNS4yYy0zNS40LTE1LjEtNTguMy0zNC45LTU4LjMtNTAuNiAwLTE1LjcgMjIuOS0zNS42IDU4LjMtNTAuNiA4LjYtMy43IDE4LTcgMjcuNy0xMC4xIDUuNyAxOS42IDEzLjIgNDAgMjIuNSA2MC45LTkuMiAyMC44LTE2LjYgNDEuMS0yMi4yIDYwLjYtOS45LTMuMS0xOS4zLTYuNS0yOC0xMC4yek0zMTAgNDkwYy0xMy42LTcuOC0xOS41LTM3LjUtMTQuOS03NS43IDEuMS05LjQgMi45LTE5LjMgNS4xLTI5LjQgMTkuNiA0LjggNDEgOC41IDYzLjUgMTAuOSAxMy41IDE4LjUgMjcuNSAzNS4zIDQxLjYgNTAtMzIuNiAzMC4zLTYzLjIgNDYuOS04NCA0Ni45LTQuNS0uMS04LjMtMS0xMS4zLTIuN3ptMjM3LjItNzYuMmM0LjcgMzguMi0xLjEgNjcuOS0xNC42IDc1LjgtMyAxLjgtNi45IDIuNi0xMS41IDIuNi0yMC43IDAtNTEuNC0xNi41LTg0LTQ2LjYgMTQtMTQuNyAyOC0zMS40IDQxLjMtNDkuOSAyMi42LTIuNCA0NC02LjEgNjMuNi0xMSAyLjMgMTAuMSA0LjEgMTkuOCA1LjIgMjkuMXptMzguNS02Ni43Yy04LjYgMy43LTE4IDctMjcuNyAxMC4xLTUuNy0xOS42LTEzLjItNDAtMjIuNS02MC45IDkuMi0yMC44IDE2LjYtNDEuMSAyMi4yLTYwLjYgOS45IDMuMSAxOS4zIDYuNSAyOC4xIDEwLjIgMzUuNCAxNS4xIDU4LjMgMzQuOSA1OC4zIDUwLjYtLjEgMTUuNy0yMyAzNS42LTU4LjQgNTAuNnpNMzIwLjggNzguNHoiLz48Y2lyY2xlIGN4PSI0MjAuOSIgY3k9IjI5Ni41IiByPSI0NS43Ii8+PHBhdGggZD0iTTUyMC41IDc4LjF6Ii8+PC9nPjwvc3ZnPg==" />)</a>
-                        </div>
-            <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Decode video stream in a React
-                Application from a USB-connected or built-in camera (mobile or desktop)." class="button title"
-                     href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.4.31/hello-world/react-hooks">
-                    Hello World in
-                    React (using Hooks) (<img alt="React logo"
-                        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4NDEuOSA1OTUuMyI+PGcgZmlsbD0iIzYxREFGQiI+PHBhdGggZD0iTTY2Ni4zIDI5Ni41YzAtMzIuNS00MC43LTYzLjMtMTAzLjEtODIuNCAxNC40LTYzLjYgOC0xMTQuMi0yMC4yLTEzMC40LTYuNS0zLjgtMTQuMS01LjYtMjIuNC01LjZ2MjIuM2M0LjYgMCA4LjMuOSAxMS40IDIuNiAxMy42IDcuOCAxOS41IDM3LjUgMTQuOSA3NS43LTEuMSA5LjQtMi45IDE5LjMtNS4xIDI5LjQtMTkuNi00LjgtNDEtOC41LTYzLjUtMTAuOS0xMy41LTE4LjUtMjcuNS0zNS4zLTQxLjYtNTAgMzIuNi0zMC4zIDYzLjItNDYuOSA4NC00Ni45Vjc4Yy0yNy41IDAtNjMuNSAxOS42LTk5LjkgNTMuNi0zNi40LTMzLjgtNzIuNC01My4yLTk5LjktNTMuMnYyMi4zYzIwLjcgMCA1MS40IDE2LjUgODQgNDYuNi0xNCAxNC43LTI4IDMxLjQtNDEuMyA0OS45LTIyLjYgMi40LTQ0IDYuMS02My42IDExLTIuMy0xMC00LTE5LjctNS4yLTI5LTQuNy0zOC4yIDEuMS02Ny45IDE0LjYtNzUuOCAzLTEuOCA2LjktMi42IDExLjUtMi42Vjc4LjVjLTguNCAwLTE2IDEuOC0yMi42IDUuNi0yOC4xIDE2LjItMzQuNCA2Ni43LTE5LjkgMTMwLjEtNjIuMiAxOS4yLTEwMi43IDQ5LjktMTAyLjcgODIuMyAwIDMyLjUgNDAuNyA2My4zIDEwMy4xIDgyLjQtMTQuNCA2My42LTggMTE0LjIgMjAuMiAxMzAuNCA2LjUgMy44IDE0LjEgNS42IDIyLjUgNS42IDI3LjUgMCA2My41LTE5LjYgOTkuOS01My42IDM2LjQgMzMuOCA3Mi40IDUzLjIgOTkuOSA1My4yIDguNCAwIDE2LTEuOCAyMi42LTUuNiAyOC4xLTE2LjIgMzQuNC02Ni43IDE5LjktMTMwLjEgNjItMTkuMSAxMDIuNS00OS45IDEwMi41LTgyLjN6bS0xMzAuMi02Ni43Yy0zLjcgMTIuOS04LjMgMjYuMi0xMy41IDM5LjUtNC4xLTgtOC40LTE2LTEzLjEtMjQtNC42LTgtOS41LTE1LjgtMTQuNC0yMy40IDE0LjIgMi4xIDI3LjkgNC43IDQxIDcuOXptLTQ1LjggMTA2LjVjLTcuOCAxMy41LTE1LjggMjYuMy0yNC4xIDM4LjItMTQuOSAxLjMtMzAgMi00NS4yIDItMTUuMSAwLTMwLjItLjctNDUtMS45LTguMy0xMS45LTE2LjQtMjQuNi0yNC4yLTM4LTcuNi0xMy4xLTE0LjUtMjYuNC0yMC44LTM5LjggNi4yLTEzLjQgMTMuMi0yNi44IDIwLjctMzkuOSA3LjgtMTMuNSAxNS44LTI2LjMgMjQuMS0zOC4yIDE0LjktMS4zIDMwLTIgNDUuMi0yIDE1LjEgMCAzMC4yLjcgNDUgMS45IDguMyAxMS45IDE2LjQgMjQuNiAyNC4yIDM4IDcuNiAxMy4xIDE0LjUgMjYuNCAyMC44IDM5LjgtNi4zIDEzLjQtMTMuMiAyNi44LTIwLjcgMzkuOXptMzIuMy0xM2M1LjQgMTMuNCAxMCAyNi44IDEzLjggMzkuOC0xMy4xIDMuMi0yNi45IDUuOS00MS4yIDggNC45LTcuNyA5LjgtMTUuNiAxNC40LTIzLjcgNC42LTggOC45LTE2LjEgMTMtMjQuMXpNNDIxLjIgNDMwYy05LjMtOS42LTE4LjYtMjAuMy0yNy44LTMyIDkgLjQgMTguMi43IDI3LjUuNyA5LjQgMCAxOC43LS4yIDI3LjgtLjctOSAxMS43LTE4LjMgMjIuNC0yNy41IDMyem0tNzQuNC01OC45Yy0xNC4yLTIuMS0yNy45LTQuNy00MS03LjkgMy43LTEyLjkgOC4zLTI2LjIgMTMuNS0zOS41IDQuMSA4IDguNCAxNiAxMy4xIDI0IDQuNyA4IDkuNSAxNS44IDE0LjQgMjMuNHpNNDIwLjcgMTYzYzkuMyA5LjYgMTguNiAyMC4zIDI3LjggMzItOS0uNC0xOC4yLS43LTI3LjUtLjctOS40IDAtMTguNy4yLTI3LjguNyA5LTExLjcgMTguMy0yMi40IDI3LjUtMzJ6bS03NCA1OC45Yy00LjkgNy43LTkuOCAxNS42LTE0LjQgMjMuNy00LjYgOC04LjkgMTYtMTMgMjQtNS40LTEzLjQtMTAtMjYuOC0xMy44LTM5LjggMTMuMS0zLjEgMjYuOS01LjggNDEuMi03Ljl6bS05MC41IDEyNS4yYy0zNS40LTE1LjEtNTguMy0zNC45LTU4LjMtNTAuNiAwLTE1LjcgMjIuOS0zNS42IDU4LjMtNTAuNiA4LjYtMy43IDE4LTcgMjcuNy0xMC4xIDUuNyAxOS42IDEzLjIgNDAgMjIuNSA2MC45LTkuMiAyMC44LTE2LjYgNDEuMS0yMi4yIDYwLjYtOS45LTMuMS0xOS4zLTYuNS0yOC0xMC4yek0zMTAgNDkwYy0xMy42LTcuOC0xOS41LTM3LjUtMTQuOS03NS43IDEuMS05LjQgMi45LTE5LjMgNS4xLTI5LjQgMTkuNiA0LjggNDEgOC41IDYzLjUgMTAuOSAxMy41IDE4LjUgMjcuNSAzNS4zIDQxLjYgNTAtMzIuNiAzMC4zLTYzLjIgNDYuOS04NCA0Ni45LTQuNS0uMS04LjMtMS0xMS4zLTIuN3ptMjM3LjItNzYuMmM0LjcgMzguMi0xLjEgNjcuOS0xNC42IDc1LjgtMyAxLjgtNi45IDIuNi0xMS41IDIuNi0yMC43IDAtNTEuNC0xNi41LTg0LTQ2LjYgMTQtMTQuNyAyOC0zMS40IDQxLjMtNDkuOSAyMi42LTIuNCA0NC02LjEgNjMuNi0xMSAyLjMgMTAuMSA0LjEgMTkuOCA1LjIgMjkuMXptMzguNS02Ni43Yy04LjYgMy43LTE4IDctMjcuNyAxMC4xLTUuNy0xOS42LTEzLjItNDAtMjIuNS02MC45IDkuMi0yMC44IDE2LjYtNDEuMSAyMi4yLTYwLjYgOS45IDMuMSAxOS4zIDYuNSAyOC4xIDEwLjIgMzUuNCAxNS4xIDU4LjMgMzQuOSA1OC4zIDUwLjYtLjEgMTUuNy0yMyAzNS42LTU4LjQgNTAuNnpNMzIwLjggNzguNHoiLz48Y2lyY2xlIGN4PSI0MjAuOSIgY3k9IjI5Ni41IiByPSI0NS43Ii8+PHBhdGggZD0iTTUyMC41IDc4LjF6Ii8+PC9nPjwvc3ZnPg==" />)</a>
-                        </div>
-                <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Decode video stream in a Vue 3
-                Application from a USB-connected or built-in camera (mobile or desktop)." class="button title"
-                     href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.4.31/hello-world/vue">
-                    Hello World in
-                    Vue 3 (<img alt="Vue3 logo"
-                        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTk2QkI4RkE3NjE2MTFFNUE4NEU4RkIxNjQ5MTYyRDgiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTk2QkI4Rjk3NjE2MTFFNUE4NEU4RkIxNjQ5MTYyRDgiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjU2QTEyNzk3NjkyMTFFMzkxODk4RDkwQkY4Q0U0NzYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjU2QTEyN0E3NjkyMTFFMzkxODk4RDkwQkY4Q0U0NzYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5WHowqAAAXNElEQVR42uxda4xd1XVe53XvvD2eGQ/lXQcKuDwc2eFlCAGnUn7kT6T86J/+aNTgsWPchJJYciEOCQ8hF+G0hFCIHRSEqAuJBCqRaUEIEbmBppAIBGnESwZje8COZ+y587j3PLq+ffadGJix53HvPevcuz60xPjec89ZZ+39nf04+9vLSZKEFArFzHA1BAqFEkShUIIoFEoQhUIJolAoQRQKJYhCoQRRKJQgCoUSRKFQKEEUCiWIQrFo+Gv/8/YH+f/nsMWSHHMChyhxqPTTdyncWyJ3ScD/ztipiB3wXSqu6P17avN+TyFC5ggv4tRnmoxWTP1+5F+Mz17GPvPl49EKBWd3UsfXllPiso8VcYtmPba3fNuKrBVXrGFCbrdPwXndFL49ltI367roOpSUI4pGypv9s7q+ltj6JxqOQ07Bo/DgxGb2/a8cX0CnAWXJ5etz2TqdHiXHKlKj9w6i9XX8Ic41DmI8FVHhmmXk85MmRhCzJoiTWnig9LfJRHihgydxzAxJhBr7Bh/hK3yu+p9568FliTJF2aKMZfVd/kQOcKP6OBmS9+Rjm4zJ6faoeN0gOUn61MncLX4CJ+MRhe+P/dRxhfew2Df4CF/hs4jWg8vQYUKYMuWyRRkLjeHQ8YP0Z9mekVjA8Qj3VVcuoeDiXu63lkUE0ym6FA5PXBaNVr7qtPumGyPR4Bt8hK/wWUR5chn6XJYoU5StUHL8l+XEx2axhkS6yk+chJuP4rXLyOkIKJkS0B67adcqfL/0Y4pixxSysK6V8Yl9Mz7i3272NRFlhzJsu24Z5l9E9Ahmwfrpoj7uw3fZtktsRZKjIXnndlLxin7+W8ZTBwPf6I+Tg9HwxK2Ob8citbCoBoaxBxMCvsFH+CqjHCtUvLzflKWUcpwB91gupG5f9/Rtx39ZZBtmWyJtphKzHTQW0diP36b4aJmcLj/zGaSkHJPb4SWFi/tOJd8bTqd9s48VBRh4RKeUX/vjgXg8cpyCmz05xkJylxSoa8M5RF0eJaVIIkGOsg2yTc3UgpD94psiWxEOqDNYoOIXuHnGwE5AXUTFi46FTnRw4l/dwEm7/pSxcYnCF/gE3zInh52RRJkVP7/MlKFQcgCbjifHTAQBfsb2qsgBO3e1Cpf3UXBej3nRJKKrxU/rcH/pKzz4vNIQuRJTEmZklbg6EL4SPsE3GQPzinmfhbJDGQolB+r8w58abs5y8DqRt4ABeptLRR7koY9NleybEYw/MPisvF/ayT1/SvDewcnIcG32wfiCAbEvoCZyGaGsitdyz6XdTctQJq6fcT5mloNfYvu5yFZkpEz+RT0UrFoqpxVBV+vQxIrkaPnrbqdvXs6hcjbU+Jq4Nvvwd/BFRNeq2npwWfkX95iyE9p6PM72P/MhCPANTBSKu5WITHcC074Y9CUTkYglKBgcV/aVtlM5Kpp/RHFjDdfka7MP/2wG6m72661QNigjlBXKTGBtsjWKNs5atCf44Uds3xc5YD8Wknd2BxWuGjCzIxLWQzlFj+IjU108OL7bafM5sm5DDdfka/8T+9AJXyTMpqFsUEYoK5SZ0NbjVlvX500Q4Ha2A+JuCcEvhVS8qp/8MzspHhMSfO7mVPaP35BMRp9JsCQldbX+hmvxNfnamzJfqVvtWnGZoGxQRigroYs6UbfvOGHn4ORVkTaIbEWwtqg3MNO+Zql0JGCdVuCayhDuG9uJB7vp+oR17FbZc+NauCauLWLmKkqXr6NsUEYoK6GtxwY6CXXnEs0n2faIHLCPhhR8bikFKwRN+xZddHWu5a7Ol9yCZ2ZwHKdOxufGNeKRqS/hmnLWW1VMmQSrl5oyEkqOPbZu02IJAsic9sU7B+5uF9cOmqUfeLOdOaAZYb/CA+M/Ic9NxUoYMNfD/PT84f7xB807EAnrrbgMUBZt1w1SEpCIqfjF1Om5EuQNth0iu1r8tPLP76LCpX2yWpHDk2dGH018p6brtD5hOHf04cR3okOTZ0lqPVAW3gVdlMhdrfsTW6drRhDgRrYJcbeKZQxTkenvegNt6YBQwrQvOxG+P3ZHEia9TuClS9Br1XKge8XnxLlxjelzZ/2w4tijDMxyoHIsVQg1zvYPcy7KeZx4jG2zyFakFJF7Whu1XT2QvhfJeryeVNdplYPo4Pi9hKd7VVxVC8O5cH4+N65hXgoKuGfEHmWAskjGxI49Ntu6XHOCAD9ie1PcLSepjDNY00fB8m6KpSyJx/jgg9LfJEfLK40818w+LXY5e5zKaMfKl+DcIlSCZp0cd3U59igDI4+WOa2LunvfvDoD9RrcNLqAjDy3yzfrtKqbAkggSDIZmSlYxzz9a8BaJ101zF2rh3BuSTJaCKGMDEGujHbedXch0X2ebbdEkkDC6a9cQoWVguS53P0JP5xcHY1W/tppD9KxgrdAw5QxnwPn4nOukrPeqkzBJb0m9oJltLtt3a07QYD1IkMAeS7/hw0BXMhzJwXJc/eV7kuiyIN8OOGuUhLP06JUeoxz4FxiZLRouTsDM9WO2OdBRtsIgrzHtk3kgH00JO+cTipc2S9jqyCaluf2xwcnfuB6LndHuEsSzdP4N/gtzoFzSZHRIsaQQiPmidyXgttsnW0YQYDvsh2ROGBPxkMqXjNA/qlCFsnZ8UdlX+kfk0pymlnMWH2JOBfz0sWI+C3OMS1dzPphhPVWHOPC5wdMzIUOzFFHb1lwB2ARF+ZOPt0gshWBPLe/wCRZlu6CIkSei/cE0fD4g2ZbVWceyxH5WPwGvzXrrSTJaDnG7oBoGS3qaCULggCPsv1W5IAd8tzLllJwvpx1WthMIfyg9OVotHy1WVQ4V37wsfgNfkuSZLQcW8Q4lruU/RVbRykrggDXiwwN3uQWnXTa1xMkz2W/on2lndNajpNtAGePw2/MOicBMlqs+8K7GBNbjrFgGe2iX0nUgiAvs+0S2YpgndaFPVRc3SdmVanZlfGjifOiw5PrT/oGvPpG/vDkEH4jZ70Vt86rl5rYimmdP41/s3Uzc4Isup9XNxwvz+0tyNAlONPrtO6hctR+QnluKqNt52O3pxvtClhvxTH0egtmEwbBMlrUxU21OFGtCHKYbavIATv3j90z26kIea4QZRtahfhIuT0anrjH7O3rpjNVHzPIaLG3Lh8Tj5TbRQihjlNyehxTwTLarbZOiiEIcBfbPnGhMtroChXW9JN/VqeYdyPEY4nwwPj6ZCL8C1T+T61JhDqRv8MxZgwlJG2BxzEsrBmgeEzseqt9ti6SNIIA8t6wm901eFDZ66d7M4UkQ56LVgTTvvtKaRqFqoTWymjxGb6LpUzrImYcuzaOIWKJmAptPWpaB2sd+V+yvSB1wB6s7qXgwiUyBpbJdBqFq6MjU18mKCKhRsTyEbx558/wnRmYJzLiV+DYBat6JQ/MX7B1UCxBAKHy3IQrH6W7MhY9MWkUMNAN948/8Mm35/jMDIKlpC3gmBWQtsAjifkE61b36kGQP7DdL7KrVZXnXiYpjYKZxj09Gh7f4kB4yIa/8ZmU1brIIYiYIXaJ3Nbjflv3xBME+DZbSVwIzfIIK89dJkSea18Ihu+XflD9yPztCJnW5Ri5VRntpNh8giVb5ygvBIHu9yaRrchYRO6fFU0CSTPQlDLte6zshx9O3g3D3yJajySd4EDaAsQMsRPaetxk61zty+YTCXRqjf9jO19cOLnyYV+p8QffpcreMXJ7BeRgh77Ds6SIYhGbMBgB2tld1DW0nGL4VxbZfKBbdUHdhol1dl7mOi0MOjttGgWT11lAwU9r1mMSsX0oxwSxgYyWOvKXtiAvBPkV239I7GqZdVqX9FDw2V5+UoYipn2nt/WRMK3LMQlW9poYCZ7WfcrWsdwSBNggMrRYdcLdhjas0+q28lzJOc8bOU7jWLh2AwzEyLxclYm6Z2ZuBEE+YLtTZEVA9tzPdBh5biJ3q5rGD8yRjXbNAPkcm0RuyjTUqf3NQBDge2yHJFaGeDyi4tUD5J3WIXmzs8Y9NDgG3un80OCYIDZCHxqHbJ2iZiEIGmnB8twgzYIkd7vMxiBON59GLJyBQLKMdiM1qOPXyMn2f2f7X5EDdshzkUbhAtED0oZMXCAGiIXgtAW/YXusURdr9NsoufLcgmP20zKy2ErrNSNGRuunMUAshL7zABq61q/RBPkd2yNSn57+X3ZTQZA8t7H3H5p7RwwEt6KP2DrUtAQBIIUsiwt99Kf+tydFntuocVhVRltNWyBTRlumGslopRNkhO1mkRVlLCT3jHYzqyU48WSN+1ZWRou0BZDRyp3Ju9nWnaYnCHA3216JlQWy0gKy557dJSaNQn0nKNL1VrhnwTLavbbOUKsQBBApzzVpFHqsPFdIGoW6AfeG7cMwrcv3TC0io80LQZ5me07kU3WkYqSlhYvkpFGoz8C8bO7RyGjlpi14ztaVliMIIFOeizQKbpI+WdsDGfLcWvcmsaK53b4gdUW3lENZXjxrgrzNdq/IAftohbzzOql4eV/zjUUcu96K7w33KFhGi7rxVisTBEBSxWPiiqYqz71mGfmDQuS5tSIHstHyPZnd7+XKaI+RgKSxEggySWmKaXkVaSwi5xSbRmGiSdZpxVZGy/eEexMso73R1o2WJwiwk+11kQNZrNO6oo+Cc7vz39Wy07q4l+CKfnNvQu/ndVsnSAkifcCOAXq7R8W1y9JdRvI87QvfnTRtgdPeujLavBLkv9meEPnUHS2Tf1EPFT67lOKRnE77munrsrkH/+IeydPXqAO/VoLMDMhz5T2irTzXpFHoKeRPnluV0XYX0mlduTLamIRJtKUR5CDbbSIrGPfX/eUdVFyTQ3luku6OaNIW/HmH5LQFt9k6oAQ5Ab7PNiyxkmGndUhRvTNyJM9F1wrZaM9IZbQmG63MocewxIejRIKg+DaKbEXGI3KWBtT2hUFKyonUZeEfB3xkX4vsM3wXvIx/IwmMqCu0WH/B9qLIpzG6Wp/rpWBFj/x1WnaCAb4G7LPgad0XbZmTEmTukDnti0yzgZvKcwNPtDzXyGjZR5ONFincVEbbVAR5je0hkU/lkTL5F3TZzQ2EvjysJr1hH/0LuiVPTz9ky1oJsgB8iwQsN5hplISns5Hn9hXl9eurMlr2zUzrVsQuk5m0ZUxKkIXhKNsWkQN2yHNPhzx3WbqQMRZGYCOjXWZ8FDzjtsWWsRJkEfgh2zvyOvhWnovsucu75GTPtdlo4RN8i+W+s3nHli0pQRaPIXEeVeW53V46YJciz2Uf4IvxiX0juW/9h/JQ8fJCkGfZnpE5YK9QsHIJBZcIkOdW141d3Gt8EiyjfcaWqRKk6Z84kOc6duODjmzluUZGyz4g6Q18UhltaxHkXbbtIgfsRyvknQt5bobZc6dltP3Gl0SudmW7LUslSJ1mPUbFeWVUepDnDpB3SgazRtW0BXxt+ABfhE7rypyVbCKCTLF9U2QrgjQKg3b7zskGv3eI0+XsuDZ8EJy2YJMtQyVIHfEztldFDtghz728j4LzGphGoZq2gK9ZMDuwiH3ngTJ7OG+VLY8EAeTKc9ts9lwk42zEOi2st+JrYZIA1xYso12Xx4qWV4K8xPZzka3ISCrPDVY1YJ1WtfVYZWW0ctdbPW7LTAnSQHyDJCoykEYhTNdpuUsK6YDZqQ85cG5cw6y3CsWmLYBXG/NayfJMkI8oVR/KG7AfC8k7u4MKVw2kM1r1eB2RpDNXuAauJVhGe6stKyVIBrid7YA4r6o5N5BG4cxOI3mtaeWtymj53LiG4FwmKJs78lzB8k4QVIsN4ryqynN7AzP1ShXIc2tYg3GuSpJO6/aKltHK3KWmhQgCPMm2R+SAfTSkANlzV9Rw2rc6MDcyWtHZaPfYsiElSPaQOYVYiSnxiIprB8kpeGn+v8U2mZD8FjxzTpybKjqtqwQ5Od5g2yGyq4Xsued3UeHSvsW3IlUZLZ8L5xSctmCHLRMliCBgN/AJcV7F6SpbjBe8gUWkUaimLeBzmOUsU2JltOMkcbd+JQiNkYB8ErNVbPe0Nmq72i4kXMiwNUnfe+AcOJfgfCWbbVkoQQTiR2xvivPKynODNX0ULF9AGoVq2gL+Lc4hWEaL2N/XTBWq2Qgic3BYled2+ekeVfOV51az0WKNF59DsIx2XbNVpmYkyPNsuyWSBBJYf+USKsxHnlvNRsu/8WXLaHfb2CtBcoD1Ir2CPJf/wxSt2xmkupGT9c6QtoCPNdO66FfJldGub8aK1KwEeY9tm8gB+2hI3jmdVLii/+RbBdktfHAsfpPIfSm4zcZcCZIjfJftiMQBO1IQQBrrn3qCRYZ20SOOMTLacbHrrRDjW5q1EjUzQbiTTzeIbEUgz+232XNne59RfX+CbLT9omW0iHFFCZJPPMr2W5EDdshzL1tKwfkzrNOqrrfi73CMYBntKzbGpATJL64X6RXWZRVtxlnP+VgaBZO2wEu/wzGatkAJUk+8zLZLZCuCdVoXciux+rhVuXYVMD7Dd7Hc9Va7bGyVIE0Amf3kaXnuIHm9qTwXhr/xmWAZbUXk+E4JsmAcZtsqcsAOee6Z7VS08lwY/sZngmW0W21MlSBNhLvY9onzCqtIxipUuKqf3L6iMfyNz4RO6+6zsWwJ+NRawNvep8S1IhMxucie+8VT0o+6PIqPiB17rG+lCtNqBPkl2wts14gbsCONwqVLzT8Fr7d6wcawZeBS60Hm1GSSTu+a6d5EY6cEyQ5/YLtf4oCd4iQ1ma3H/TZ2SpAWwLfZSqSYK0o2ZqQEaQ1AN32T1vs54yYbMyVIC+GBVuwyLLBL+kCr3rzb4oV/vdZ/jZESZHb8iqS9F5GFp2yMlCAtjCENgcZGCTI79rPdqWH4FO60sVGCKOh7bIc0DNM4ZGNCShAFEFKOsyDVARttTJQgGoJpPMb2Gw2DicFjGgYlyExYpyHQGChBZsfv2B5p4ft/xMZAoQSZFZso3TKo1VC2965QgpwQI2w3t+B932zvXaEEOSnuZtvbQve7196zQgkyZ6zXe1UoQWbH02zPtcB9PmfvVaEEmTeG9B6VIIrZ8RbbvU18f/fae1QoQRYMJKU81oT3dYwkJj1VguQOk9REaY2Pw4323hRKkEVjJ9vrTXQ/r9t7UihBaobr9V6UIIrZ8Wu2J5rgPp6w96JQgtQcG2jmhGl5QWzvQaEEqQsOst2WY/9vs/egUILUtZIN59Dv4ZyTWwmSEyDnUx7luRtJar4qJUjT4RdsL+bI3xetzwolSMOwTn1Vgihmx2tsD+XAz4esrwolSMPxLZK9XGPS+qhQgmSCo2xbBPu3xfqoUIJkhh+yvSPQr3esbwolSOYYUp+UIIrZ8SzbM4L8ecb6pFCC6BNbWw8lSB7wLtt2AX5st74olCDikPWskfRZNSVIi2OKst2+c5P1QaEEEYuH2V7N4Lqv2msrlCDisa5FrqkEUSwIL7E93sDrPW6vqVCC5AaN0l/kVZ+iBGlxfMR2awOuc6u9lkIJkjvcwXagjuc/YK+hUILkEgnVdxeRDfYaCiVIbvEk2546nHePPbdCCZJ7rMvJORVKkEzwBtuOGp5vhz2nQgnSNMBu6uM1OM84Nedu80qQFscY1SYfx2Z7LoUSpOlwH9ubi/j9m/YcCiWIDth1YK4EaUU8z7Z7Ab/bbX+rUII0PdY36DcKJUgu8R7btnkcv83+RqEEaRncwnZkDscdsccqlCAthQrbDXM47gZ7rEIJ0nJ4lO2VE3z/ij1GoQRpWaxb4HcKJUhL4GW2XTN8vst+p1CCtDw+Oc6Y6/hEoQRpCRxm23rcv7fazxRKEIXFXZRuwBDZvxUC4GsIREHflguDkyQqaVYotIulUChBFAoliEKhBFEolCAKhRJEoVCCKBRKEIVCCaJQKJQgCoUSRKFQgigUShCFIhP8vwADACog5YM65zugAAAAAElFTkSuQmCC" />)</a>
-                </div>
-                <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Decode video stream in a Next.js
-                Application from a USB-connected or built-in camera (mobile or desktop)." class="button title"
-                     href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.4.31/hello-world/next">
-                    Hello World in
-                    Next.js (<svg width="30px" height="17px" viewBox="0 0 207 124" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Black-Next.js" transform="translate(-247.000000, -138.000000)" fill="#000000" fill-rule="nonzero"><g id="next-black" transform="translate(247.000000, 138.000000)"><g id="EXT-+-Type-something"><path d="M48.9421964,32.6320058 L87.9011585,32.6320058 L87.9011585,35.7136421 L52.5134345,35.7136421 L52.5134345,58.9070103 L85.7908813,58.9070103 L85.7908813,61.9886466 L52.5134345,61.9886466 L52.5134345,87.4526941 L88.306981,87.4526941 L88.306981,90.5343303 L48.9421964,90.5343303 L48.9421964,32.6320058 Z M91.3912326,32.6320058 L95.5306221,32.6320058 L113.8738,58.0960534 L132.622801,32.6320058 L158.124498,0.286809811 L116.22757,60.7722112 L137.817329,90.5343303 L133.51561,90.5343303 L113.8738,63.4483691 L94.1508254,90.5343303 L89.9302715,90.5343303 L111.682358,60.7722112 L91.3912326,32.6320058 Z M139.359455,35.713642 L139.359455,32.6320058 L183.756439,32.6320058 L183.756439,35.7136421 L163.302983,35.7136421 L163.302983,90.5343303 L159.731745,90.5343303 L159.731745,35.7136421 L139.359455,35.713642 Z" id="EXT"></path><polygon id="Type-something" points="0.202923647 32.6320058 4.66697141 32.6320058 66.2235778 124.303087 40.785176 90.5343303 3.93649086 37.0111732 3.77416185 90.5343303 0.202923647 90.5343303"></polygon></g><path d="M183.396622,86.5227221 C184.134938,86.5227221 184.673474,85.9601075 184.673474,85.233037 C184.673474,84.5059658 184.134938,83.9433513 183.396622,83.9433513 C182.666993,83.9433513 182.11977,84.5059658 182.11977,85.233037 C182.11977,85.9601075 182.666993,86.5227221 183.396622,86.5227221 Z M186.905793,83.1297235 C186.905793,85.2763149 188.460599,86.678523 190.727662,86.678523 C193.142388,86.678523 194.601647,85.233037 194.601647,82.7229099 L194.601647,73.8855335 L192.655968,73.8855335 L192.655968,82.7142542 C192.655968,84.1078073 191.952397,84.8521899 190.710289,84.8521899 C189.598473,84.8521899 188.842785,84.1597409 188.816727,83.1297235 L186.905793,83.1297235 Z M197.146664,83.0172011 C197.285642,85.2503478 199.153145,86.678523 201.932686,86.678523 C204.903321,86.678523 206.762139,85.1811034 206.762139,82.792155 C206.762139,80.9138876 205.702439,79.8752151 203.131364,79.2779777 L201.750279,78.9404092 C200.117298,78.5595622 199.457158,78.0488813 199.457158,77.1573541 C199.457158,76.0321243 200.482113,75.296398 202.019547,75.296398 C203.478806,75.296398 204.48639,76.0148135 204.668797,77.1660091 L206.562359,77.1660091 C206.44944,75.0626962 204.590622,73.5825873 202.045605,73.5825873 C199.309495,73.5825873 197.48542,75.0626962 197.48542,77.2871878 C197.48542,79.1221767 198.519063,80.2127835 200.786126,80.7407758 L202.401734,81.1302779 C204.060773,81.5197807 204.790402,82.091051 204.790402,83.0431676 C204.790402,84.1510859 203.643842,84.9560573 202.08035,84.9560573 C200.403939,84.9560573 199.240006,84.2030196 199.074971,83.0172011 L197.146664,83.0172011 Z" id=".JS"></path></g></g></g></svg>)</a>
-                </div>
-                <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Decode video stream in a NuxtJS
-                Application from a USB-connected or built-in camera (mobile or desktop)." class="button title"
-                     href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.4.31/hello-world/nuxt">
-                    Hello World in
-                    NuxtJS (<svg width="20px" height="17px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill-rule="nonzero" transform="translate(0 50)" fill="none"><path d="M227.92099 83.45116l-13.6889 24.10141-46.8148-82.44693L23.7037 278.17052h97.3037c0 13.31084 10.61252 24.10142 23.70371 24.10142H23.70371c-8.46771 0-16.29145-4.59601-20.5246-12.05272-4.23315-7.4567-4.23272-16.64312.00114-24.0994L146.89383 13.05492c4.23415-7.45738 12.0596-12.05138 20.5284-12.05138 8.46878 0 16.29423 4.594 20.52839 12.05138l39.97037 70.39623z" fill="#00C58E"/><path d="M331.6642 266.11981l-90.05432-158.56724-13.6889-24.10141-13.68888 24.10141-90.04445 158.56724c-4.23385 7.45629-4.23428 16.64271-.00113 24.09941 4.23314 7.4567 12.05689 12.05272 20.5246 12.05272h166.4c8.46946 0 16.29644-4.591 20.532-12.04837 4.23555-7.45736 4.23606-16.64592.00132-24.10376h.01976zM144.7111 278.17052L227.921 131.65399l83.19012 146.51653h-166.4z" fill="#2F495E"/><path d="M396.04938 290.22123c-4.23344 7.45557-12.05656 12.0507-20.52345 12.0507H311.1111c13.0912 0 23.7037-10.79057 23.7037-24.10141h40.66173L260.09877 74.98553l-18.4889 32.56704L227.921 83.45116l11.65432-20.51634c4.23416-7.45738 12.0596-12.05138 20.5284-12.05138 8.46879 0 16.29423 4.594 20.52839 12.05138l115.41728 203.185c4.23426 7.457 4.23426 16.6444 0 24.1014z" fill="#108775"/></g></svg>)</a>
-                </div>
-                <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Decode video stream in a Electron
-                Application from a USB-connected or built-in camera (desktop only)." class="button title"
-                     href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.4.31/hello-world/electron">
-                    Hello World in
-                    Electron (<img alt="Electron logo"
-                            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAABmJLR0QA/wD/AP+gvaeTAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE5LTAzLTMxVDIzOjUxOjI3KzAwOjAwzwUHXwAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOS0wMy0zMVQyMzo1MToyNyswMDowML5Yv+MAAANzSURBVDhPdZRtTFtlFMd/vbe0aymUQh1gmakjE4GhLkt0i1OBbUxXkYFbzAzGaNTEMP1gMrfMTDGonzf3kmX4zbcP7sXBkL2AG27OGESNcYVukGVAHUIUWgT6Xs9zByEz8dzcPDfPec7/+Z9z/uea0mL8x46faKej8xx+f4BQKIzTmU1ZaQm+zTU821A7f2rR7gC5cPES2xtfQ9c07HYbpFJY7XZis7OkNZ1ZWZOy98WnR6muemw+CrT5lYOHW6mrbyTXlYNLXl32VtZs4uHntlPy+BOQiBv7yr+loZEDh1pvB4oZTBQDBbBsmYdkPE46lVQuHG43q7bUk4hEuPFTL7f6/Wi6GT0jg5GRIKdOfk5V5brbIAWeUrnFKbRnKN+4CZfHw1/Dw/R3d5GIRVnicFDz1k6unj2D3eWi/9suLJlZTE1OcSvYj17xwOrms+e60SXXuvdbGOju5vql75gMjlK2fgMPPl0roEXc7OsTciamJyaobnpDznWh+Hq996BnZuU1j46MUvzIGoZ/6WMsMEB2fj7rd7zJ4JXv+f1MJ+OD1w1QBfhbZ4dgmbDY7ETCYWKxOJpqo9VqZWJokIL77sezsoLVDVs51fwufw/fJJVMYha/ZjYb9TLJk+e91wC1WC34+wNo4elpKZbOzOQk0Zl/8FRU0HVgP/acHCNwV89lEtEoiBKUGDJsNhy5ucTm5tBECuGwxGdnZ4kzTSqRYOmKFaTkNgWq9tTNfcePGW1U9VBdW1pcTM/RI5KOzTij4rWyshKikShur1dq8jO/trdR3/KhkYICuXDkkPEtVNCF2VggYDBLxGLExa/iNd9TNUyHQixfs1ZEVWkcPrb7bR6qfYZ1L70slHWDejqZEr3FjRo9uXMX5Rs2Ep4KGaNg6MR913Ie3baNovJyzu/fh7OwEEeem7EBP2tfeFHSUKnJzcIgU3Riczq50dvLj21tTIwPLSj2Mj7fVjyFBVhkVqIzM/h27+Hr9/ZitlgkOMKqunqGfrgirGSOhFVwbJyOjq8WFavqdvDwJ+x5p4WioruNTqjCVb7eRKDnIqVV1XR9vM+ogxqH0eAffPTBXnY0vaJCF0GUKUbPN75qtM62xEpaOpYvHfvz2jVMGRbmZIbUFH/5WavBYMHuAFmwEyfbOf3NefxXB5iS4uXIXP3//wT+Bb4xmi8orIo3AAAAAElFTkSuQmCC">)</a>
-                </div>
-                <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Decode video stream in a progressive web application from a USB-connected or built-in camera (mobile or desktop)." class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.4.31/hello-world/pwa">Hello World in PWA</a>
-                </div>
-                <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Decode video stream from a USB-connected or built-in camera (mobile or desktop) in a web application that uses RequireJS." class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.31/hello-world/requirejs.html">Hello World with RequireJS</a>
-                </div>
-                <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Decode video stream in a progressive web application from a USB-connected or built-in camera (mobile or desktop)." class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.4.31/hello-world/es6.html">Hello World with ES6</a>
-                </div>
-                <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Decode video stream from a USB-connected or built-in camera (mobile or desktop) in a web application that uses RequireJS." class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.31/hello-world/webview">Hello World in WebView</a>
-                </div>
-        </div>
-        <div class="file">Use Case</div>
-        <div class="children">
-            <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="up"
-                    aria-label="Read barcodes to fill a form." class="button title"
-                     href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.4.31/use-case#read-barcodes-and-fill-form-fields">Read Video and
-                    Fill a
-                    Form</a></div>
-            <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="up" aria-label="Read the PDF417 barcode on a driver's
-                license (AAMVA compliant) and parse it." class="button title"
-                     href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.4.31/use-case#read-the-pdf417-barcode-on-the-drivers-license">Read a
-                    Driver's License</a></div>
-            <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="up"
-                    aria-label="Read barcodes via camera and show result texts on the video." class="button title"
-                     href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.4.31/use-case#read-barcodes-via-camera-and-show-result-texts-on-the-video">Show Result Texts on the Video</a></div>
-            <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="up" aria-label="Find a specific item in a large 
-                collection by scanning its unique barcode." class="button title"
-                     href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.4.31/use-case#locate-an-item-via-barcode">Find Item via Barcode</a></div>
-        </div>
-        <!--<div class="file">Performance</div>-->
-        <div class="file">Others</div>
-        <div class="children">
-            <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="up"
-                    aria-label="Collect
-                        image frames which failed to be read for debugging purposes." class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.4.31/others/debug">Collect
-                        Images for Debugging</a>
-            </div>
-        </div>
-    </div>
-    <div class="children">
-        <div class="file"><a href="https://demo.dynamsoft.com/barcode-reader-js/" target="_blank">Official online Demo</a></div>
-    </div>
-
-</div>
-<style>
-:root{--balloon-border-radius: 2px; --balloon-color: rgba(16, 16, 16, 0.95); --balloon-text-color: #fff; --balloon-font-size: 12px; --balloon-move: 4px}button[aria-label][data-balloon-pos]{overflow:visible}[aria-label][data-balloon-pos]{position:relative; cursor:pointer}[aria-label][data-balloon-pos]:after{opacity:0; pointer-events:none; transition:all 0.18s ease-out 0.18s; text-indent:0; font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-weight:normal; font-style:normal; text-shadow:none; font-size:var(--balloon-font-size); background:var(--balloon-color); border-radius:2px; color:var(--balloon-text-color); border-radius:var(--balloon-border-radius); content:attr(aria-label); padding:.5em 1em; position:absolute; white-space:nowrap; z-index:10}[aria-label][data-balloon-pos]:before{width:0; height:0; border:5px solid transparent; border-top-color:var(--balloon-color); opacity:0; pointer-events:none; transition:all 0.18s ease-out 0.18s; content:""; position:absolute; z-index:10}[aria-label][data-balloon-pos]:hover:before, [aria-label][data-balloon-pos]:hover:after, [aria-label][data-balloon-pos][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-visible]:after, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:before, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:after{opacity:1; pointer-events:none}[aria-label][data-balloon-pos].font-awesome:after{font-family: FontAwesome, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif}[aria-label][data-balloon-pos][data-balloon-break]:after{white-space:pre}[aria-label][data-balloon-pos][data-balloon-break][data-balloon-length]:after{white-space:pre-line; word-break:break-word}[aria-label][data-balloon-pos][data-balloon-blunt]:before, [aria-label][data-balloon-pos][data-balloon-blunt]:after{transition:none}[aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:after{transform:translate(-50%, 0)}[aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:before{transform:translate(-50%, 0)}[aria-label][data-balloon-pos][data-balloon-pos*="-left"]:after{left:0}[aria-label][data-balloon-pos][data-balloon-pos*="-left"]:before{left:5px}[aria-label][data-balloon-pos][data-balloon-pos*="-right"]:after{right:0}[aria-label][data-balloon-pos][data-balloon-pos*="-right"]:before{right:5px}[aria-label][data-balloon-pos][data-balloon-po*="-left"]:hover:after, [aria-label][data-balloon-pos][data-balloon-po*="-left"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:after{transform:translate(0, 0)}[aria-label][data-balloon-pos][data-balloon-po*="-left"]:hover:before, [aria-label][data-balloon-pos][data-balloon-po*="-left"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:before{transform:translate(0, 0)}[aria-label][data-balloon-pos][data-balloon-pos^="up"]:before, [aria-label][data-balloon-pos][data-balloon-pos^="up"]:after{bottom:100%; transform-origin:top; transform:translate(0, var(--balloon-move))}[aria-label][data-balloon-pos][data-balloon-pos^="up"]:after{margin-bottom:10px}[aria-label][data-balloon-pos][data-balloon-pos="up"]:before, [aria-label][data-balloon-pos][data-balloon-pos="up"]:after{left:50%; transform:translate(-50%, var(--balloon-move))}[aria-label][data-balloon-pos][data-balloon-pos^="down"]:before, [aria-label][data-balloon-pos][data-balloon-pos^="down"]:after{top:100%; transform:translate(0, calc(var(--balloon-move) * -1))}[aria-label][data-balloon-pos][data-balloon-pos^="down"]:after{margin-top:10px}[aria-label][data-balloon-pos][data-balloon-pos^="down"]:before{width:0; height:0; border:5px solid transparent; border-bottom-color:var(--balloon-color)}[aria-label][data-balloon-pos][data-balloon-pos="down"]:after, [aria-label][data-balloon-pos][data-balloon-pos="down"]:before{left:50%; transform:translate(-50%, calc(var(--balloon-move) * -1))}[aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:after{transform:translate(0, -50%)}[aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:before{transform:translate(0, -50%)}[aria-label][data-balloon-pos][data-balloon-pos="left"]:after, [aria-label][data-balloon-pos][data-balloon-pos="left"]:before{right:100%; top:50%; transform:translate(var(--balloon-move), -50%)}[aria-label][data-balloon-pos][data-balloon-pos="left"]:after{margin-right:10px}[aria-label][data-balloon-pos][data-balloon-pos="left"]:before{width:0; height:0; border:5px solid transparent; border-left-color:var(--balloon-color)}[aria-label][data-balloon-pos][data-balloon-pos="right"]:after, [aria-label][data-balloon-pos][data-balloon-pos="right"]:before{left:100%; top:50%; transform:translate(calc(var(--balloon-move) * -1), -50%)}[aria-label][data-balloon-pos][data-balloon-pos="right"]:after{margin-left:10px}[aria-label][data-balloon-pos][data-balloon-pos="right"]:before{width:0; height:0; border:5px solid transparent; border-right-color:var(--balloon-color)}[aria-label][data-balloon-pos][data-balloon-length]:after{white-space:normal}[aria-label][data-balloon-pos][data-balloon-length="small"]:after{width:80px}[aria-label][data-balloon-pos][data-balloon-length="medium"]:after{width:150px}[aria-label][data-balloon-pos][data-balloon-length="large"]:after{width:260px}[aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after{width:380px}@media screen and (max-width: 768px){[aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after{width:90vw}}[aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after{width:100%}    
-.filetree {
-    font-family: "Open Sans", sans-serif;
-    text-align: left;
-    border-radius: 4px;
-    margin: 0 auto;
-    max-width: 800px;
-    padding: 16px 32px;
-}
-.filetree .ds-logo {
-    height: 3vh;
-    background: url(logo-dynamsoft-black.svg) no-repeat 0;
-}
-.filetree h3 {
-    margin: 1vh auto;
-}
-.filetree .description {
-    border: dashed 1px gray;
-    padding: 1vmin;
-}
-.filetree .file a {
-    z-index: auto;
-}
-.filetree .file {
-    display: block;
-    font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
-    letter-spacing: 0.3px;
-    line-height: 32px;
-    color: #333;
-}
-.filetree .children {
-    padding-left: 24px;
-    position: relative;
-}
-.filetree .children .file {
-    position: relative;
-}
-.filetree .children .file a {
-    z-index: auto;
-}
-.filetree .children .file::before {
-    content: '';
-    left: -18px;
-    bottom: 16px;
-    width: 16px;
-    height: 20px;
-    position: absolute;
-    border-width: 0 0 1px 1px;
-    border-style: solid;
-    border-color: #dbdbdb;
-    border-radius: 0 0 0 3px;
-}
-.filetree [aria-label] {
-    line-height: 15px;
-}
-.filetree .title img, .filetree .title svg {
-    height: 17px;
-    vertical-align: middle;
-}
-.filetree .tooltipIcon {
-    display: inline-block; 
-    width: 17px; 
-    height: 17px;
-    vertical-align: middle;
-    background: url(data:image/png; base64, iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAg5JREFUOBGVkktrE2EUhjuTSUJwExCColSwFAIFaZFSwaZ0abx110rugf4Ef0Drr3AxaTKJZNFSNwYDJbgxblQQN22xFFpF0J07Dbn1OaFnGMciZOCb833vec/9GBMXfNlstmCa5n3DMBKoDznx4XDYBmuUy2XHb2J4gWKxuAB5h2Nj0EbuVyqVH4VC4UogEJjpdruL4Nl+v/+kVqt9VFvXSSqVuhEKhXYty3pg2/ZPJfhlJpO5isPXBFipVqtfXb1kkM/nXc+u4j8X+J84t4ViyU9KCAaD83L3ful0+jqZvaQ3S5T1x6vD5iH4W7CbxnkTJx3HeeYl6V3KrNfrp/r2Snq1wfvYkikMBoPnXqXcISSIttTr9f6ZhnKl+diumzJGGrWvCpXgQQiXKPOFYn5JgAMCLZooDmWMfgL78CYajW6C3/Hr9M10vhPsSJzEZQ9UMY7M5XLXyGTa5NeWRRrHWLlMboZMZJPNhmyiKsaRbO5d+vJqtLEszREZLUuNXifJZDIci8VanU5nLRKJBOjTN9VTyiQJ7NHPuPRkgscKabWUoLLZbHbQPQ2Hww6TshUXCd4Ceyz3USZywfNlHH0go3tk9EWwiz6GEAff49wii1/CcZ3Ig7KmEFuc9zj7TLQ2zftN3RGwBJFnCTQHViyVSqdgo+8vJwoS7RFOVnlPYbSAfMc5wck2WTaUp/IMAjTZicjWFTcAAAAASUVORK5CYII=) right center no-repeat; 
-    background-size: 100%; 
-    margin-left: 5px; 
-}
-</style>
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
----
-<style>
-    /* balloon.min.css Used for tooltip styling */
-    :root{--balloon-border-radius: 2px;--balloon-color: rgba(16,16,16,0.95);--balloon-text-color: #fff;--balloon-font-size: 12px;--balloon-move: 4px}button[aria-label][data-balloon-pos]{overflow:visible}[aria-label][data-balloon-pos]{position:relative;cursor:pointer}[aria-label][data-balloon-pos]:after{opacity:0;pointer-events:none;transition:all 0.18s ease-out 0.18s;text-indent:0;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;font-weight:normal;font-style:normal;text-shadow:none;font-size:var(--balloon-font-size);background:var(--balloon-color);border-radius:2px;color:var(--balloon-text-color);border-radius:var(--balloon-border-radius);content:attr(aria-label);padding:.5em 1em;position:absolute;white-space:nowrap;z-index:10}[aria-label][data-balloon-pos]:before{width:0;height:0;border:5px solid transparent;border-top-color:var(--balloon-color);opacity:0;pointer-events:none;transition:all 0.18s ease-out 0.18s;content:"";position:absolute;z-index:10}[aria-label][data-balloon-pos]:hover:before,[aria-label][data-balloon-pos]:hover:after,[aria-label][data-balloon-pos][data-balloon-visible]:before,[aria-label][data-balloon-pos][data-balloon-visible]:after,[aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:before,[aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:after{opacity:1;pointer-events:none}[aria-label][data-balloon-pos].font-awesome:after{font-family:FontAwesome, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif}[aria-label][data-balloon-pos][data-balloon-break]:after{white-space:pre}[aria-label][data-balloon-pos][data-balloon-break][data-balloon-length]:after{white-space:pre-line;word-break:break-word}[aria-label][data-balloon-pos][data-balloon-blunt]:before,[aria-label][data-balloon-pos][data-balloon-blunt]:after{transition:none}[aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:after,[aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:after,[aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:after,[aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:after{transform:translate(-50%, 0)}[aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:before,[aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:before,[aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:before,[aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:before{transform:translate(-50%, 0)}[aria-label][data-balloon-pos][data-balloon-pos*="-left"]:after{left:0}[aria-label][data-balloon-pos][data-balloon-pos*="-left"]:before{left:5px}[aria-label][data-balloon-pos][data-balloon-pos*="-right"]:after{right:0}[aria-label][data-balloon-pos][data-balloon-pos*="-right"]:before{right:5px}[aria-label][data-balloon-pos][data-balloon-po*="-left"]:hover:after,[aria-label][data-balloon-pos][data-balloon-po*="-left"][data-balloon-visible]:after,[aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:after,[aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:after{transform:translate(0, 0)}[aria-label][data-balloon-pos][data-balloon-po*="-left"]:hover:before,[aria-label][data-balloon-pos][data-balloon-po*="-left"][data-balloon-visible]:before,[aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:before,[aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:before{transform:translate(0, 0)}[aria-label][data-balloon-pos][data-balloon-pos^="up"]:before,[aria-label][data-balloon-pos][data-balloon-pos^="up"]:after{bottom:100%;transform-origin:top;transform:translate(0, var(--balloon-move))}[aria-label][data-balloon-pos][data-balloon-pos^="up"]:after{margin-bottom:10px}[aria-label][data-balloon-pos][data-balloon-pos="up"]:before,[aria-label][data-balloon-pos][data-balloon-pos="up"]:after{left:50%;transform:translate(-50%, var(--balloon-move))}[aria-label][data-balloon-pos][data-balloon-pos^="down"]:before,[aria-label][data-balloon-pos][data-balloon-pos^="down"]:after{top:100%;transform:translate(0, calc(var(--balloon-move) * -1))}[aria-label][data-balloon-pos][data-balloon-pos^="down"]:after{margin-top:10px}[aria-label][data-balloon-pos][data-balloon-pos^="down"]:before{width:0;height:0;border:5px solid transparent;border-bottom-color:var(--balloon-color)}[aria-label][data-balloon-pos][data-balloon-pos="down"]:after,[aria-label][data-balloon-pos][data-balloon-pos="down"]:before{left:50%;transform:translate(-50%, calc(var(--balloon-move) * -1))}[aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:after,[aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:after,[aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:after,[aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:after{transform:translate(0, -50%)}[aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:before,[aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:before,[aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:before,[aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:before{transform:translate(0, -50%)}[aria-label][data-balloon-pos][data-balloon-pos="left"]:after,[aria-label][data-balloon-pos][data-balloon-pos="left"]:before{right:100%;top:50%;transform:translate(var(--balloon-move), -50%)}[aria-label][data-balloon-pos][data-balloon-pos="left"]:after{margin-right:10px}[aria-label][data-balloon-pos][data-balloon-pos="left"]:before{width:0;height:0;border:5px solid transparent;border-left-color:var(--balloon-color)}[aria-label][data-balloon-pos][data-balloon-pos="right"]:after,[aria-label][data-balloon-pos][data-balloon-pos="right"]:before{left:100%;top:50%;transform:translate(calc(var(--balloon-move) * -1), -50%)}[aria-label][data-balloon-pos][data-balloon-pos="right"]:after{margin-left:10px}[aria-label][data-balloon-pos][data-balloon-pos="right"]:before{width:0;height:0;border:5px solid transparent;border-right-color:var(--balloon-color)}[aria-label][data-balloon-pos][data-balloon-length]:after{white-space:normal}[aria-label][data-balloon-pos][data-balloon-length="small"]:after{width:80px}[aria-label][data-balloon-pos][data-balloon-length="medium"]:after{width:150px}[aria-label][data-balloon-pos][data-balloon-length="large"]:after{width:260px}[aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after{width:380px}@media screen and (max-width: 768px){[aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after{width:90vw}}[aria-label][data-balloon-pos][data-balloon-length="fit"]:after{width:100%}
-</style>
-<style>
-    .filetree {
-        text-align: left;
-        background-color: #fafafa;
-        border: 4px solid #dbdbdb;
-        border-radius: 4px;
-        margin: 0 auto;
-        max-width: 800px;
-        padding: 16px 32px;
-    }
-    
-    .filetree .ds-logo {
-        height: 3vh;
-        background: url(logo-dynamsoft-black.svg) no-repeat 0;
-    }
-    
-    .filetree h3 {
-        margin: 1vh auto;
-    }
-    
-    .filetree .file {
-        display: block;
-        font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
-        letter-spacing: 0.3px;
-        line-height: 32px;
-        color: #333;
-    }
-    
-    .filetree .children {
-        padding-left: 24px;
-        position: relative;
-    }
-    
-    .filetree .children .file {
-        position: relative;
-    }
-    
-    .filetree .children .file::before {
-        content: '';
-        left: -18px;
-        bottom: 16px;
-        width: 16px;
-        height: 20px;
-        position: absolute;
-        border-width: 0 0 1px 1px;
-        border-style: solid;
-        border-color: #dbdbdb;
-        border-radius: 0 0 0 3px;
-    }
-    
-    .filetree .button.title {
-        line-height: 15px;
-    }
-    
-    .filetree .title img,
-    .filetree .title svg {
-        height: 17px;
-        vertical-align: middle;
-    }
-    
-    .filetree .tooltipIcon {
-        display: inline-block;
-        width: 17px;
-        height: 17px;
-        vertical-align: middle;
-        background-size: 100%;
-        margin-left: 5px;
-        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAg5JREFUOBGVkktrE2EUhjuTSUJwExCColSwFAIFaZFSwaZ0abx110rugf4Ef0Drr3AxaTKJZNFSNwYDJbgxblQQN22xFFpF0J07Dbn1OaFnGMciZOCb833vec/9GBMXfNlstmCa5n3DMBKoDznx4XDYBmuUy2XHb2J4gWKxuAB5h2Nj0EbuVyqVH4VC4UogEJjpdruL4Nl+v/+kVqt9VFvXSSqVuhEKhXYty3pg2/ZPJfhlJpO5isPXBFipVqtfXb1kkM/nXc+u4j8X+J84t4ViyU9KCAaD83L3ful0+jqZvaQ3S5T1x6vD5iH4W7CbxnkTJx3HeeYl6V3KrNfrp/r2Snq1wfvYkikMBoPnXqXcISSIttTr9f6ZhnKl+diumzJGGrWvCpXgQQiXKPOFYn5JgAMCLZooDmWMfgL78CYajW6C3/Hr9M10vhPsSJzEZQ9UMY7M5XLXyGTa5NeWRRrHWLlMboZMZJPNhmyiKsaRbO5d+vJqtLEszREZLUuNXifJZDIci8VanU5nLRKJBOjTN9VTyiQJ7NHPuPRkgscKabWUoLLZbHbQPQ2Hww6TshUXCd4Ceyz3USZywfNlHH0go3tk9EWwiz6GEAff49wii1/CcZ3Ig7KmEFuc9zj7TLQ2zftN3RGwBJFnCTQHViyVSqdgo+8vJwoS7RFOVnlPYbSAfMc5wck2WTaUp/IMAjTZicjWFTcAAAAASUVORK5CYII=) right center no-repeat;
-    }
-    
-    .filetree .github {
-        display: inline-block;
-        width: 17px;
-        height: 17px;
-        vertical-align: middle;
-        background-size: 100%;
-        margin-left: 5px;
-        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAALISURBVDhPhZNrSNNRGMafzamVW8s0nWbetSw0wWtFIQlBoFTohzKioqK+VEJBhbm+BVnQByPICgksy+blgxeqeQntoqikhppadjG1i7Q5t0Ur38553QaG0A/Ozt7nvOc577n8QQtQUvaQ0rPySBkST1CHcp+WtYdulFU4M+Yzz8RQ+5jgHcQTao0tZLPbWbfbf1Jd41NKz84jeAVRZd0T1l24TfSXiwnaCOobGHIqC9M3OCzywklfVOxUnCaGOlHB0gj65XCw+D8cjt+8YGX9XEVsIrfQ0/+GhUvXb1NGzgGa/DZF3X39VPOoibp6++nL9ynKyD1IRWJc0ivy4R3M/1Uldw1IztyChLhYSIZHP6KluRW6mBRAqRBNCczOikYcx0SGcl68yE/J3Iyb9wxQlj6oRuGJozwgGRoZhadGDU2APzT+ftAs953rRSz1oZH3zkzgfP4xlN6vhkJen2ngBTRqH3ye/IqQ6CSog4OgUIgq/kFUjpnxCYyNdGGlLgCWGSt8126EctY0zQYSKUKlWtBAwrqHCharjWM574/JLHbsuxQms4XF1VERIslDHIE4gwVgXSyyJiqc4x9mMzyWaaFMTYyHse0li3KhwnMnYf00DqvNxuVLZG+12VkvOHOcNUljWzvSxHzIJ564LUfeFJ29eJX7552v6PBpPflEJ3NbEp1E+/MLqPlZB4+7SMjcReJ2nO/ES8fvxDxtoZDkrZwgY+jiSB2TQlgRS2MTk6y76Oju5fclYRP58uSHJrlTUUMIjCPPsPW0ODKJNLGpBL9oamhq5XGJ2BrBZxVVNRg5ZhPJhSvX2Gjw7SjHckuygjmTGGpt72a9s+c1G+hFvgu3iaSq3khYFEybdu6jQ6f0hOB1c9sRvYw3ZO8leAa6vxkXCvnjPGw3t8orUV5Tj+F3H/j6tVoNYiPDsHvHdhzJy3VmuQD+AtcedHvcbgpyAAAAAElFTkSuQmCC);
-    }
-</style>
-<div class="filetree">
-    <a href="https://www.dynamsoft.com/" target="_blank">
-        <div class="ds-logo"></div>
-    </a>
-    <div class="file">
-        <h3>BarcodeScanner API Samples</h3>
-    </div>
-    <div class="children">
-        <div class="file">Scan Single Barcode</div>
-        <div class="children">
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Minimum necessary 
-                JavaScript code to scan a barcode from camera."><a class="button title" href="https://demo.dynamsoft.com/Samples/DBR/JS/barcode-scanner-api-samples/scan-single-barcode/hello-world.html">Hello World</a><span id="icon001" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/barcode-scanner-api-samples/scan-single-barcode/hello-world.html" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Scan a product barcode
-                and simulate a search from a product database."><a class="button title" href="https://demo.dynamsoft.com/Samples/DBR/JS/barcode-scanner-api-samples/scan-single-barcode/scan-and-search.html">Scan and Search</a><span id="icon001" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/barcode-scanner-api-samples/scan-single-barcode/scan-and-search.html" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera and images in an Angular
-                Application."><a class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/angular">Hello World in
-                    Angular (<img alt="Angular logo"
-                        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==" />)</a>
-                <span id="icon003" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/angular" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera and images in a React
-                Application."><a class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/react">
-                    Hello World in
-                    React (<img alt="React logo"
-                        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4NDEuOSA1OTUuMyI+PGcgZmlsbD0iIzYxREFGQiI+PHBhdGggZD0iTTY2Ni4zIDI5Ni41YzAtMzIuNS00MC43LTYzLjMtMTAzLjEtODIuNCAxNC40LTYzLjYgOC0xMTQuMi0yMC4yLTEzMC40LTYuNS0zLjgtMTQuMS01LjYtMjIuNC01LjZ2MjIuM2M0LjYgMCA4LjMuOSAxMS40IDIuNiAxMy42IDcuOCAxOS41IDM3LjUgMTQuOSA3NS43LTEuMSA5LjQtMi45IDE5LjMtNS4xIDI5LjQtMTkuNi00LjgtNDEtOC41LTYzLjUtMTAuOS0xMy41LTE4LjUtMjcuNS0zNS4zLTQxLjYtNTAgMzIuNi0zMC4zIDYzLjItNDYuOSA4NC00Ni45Vjc4Yy0yNy41IDAtNjMuNSAxOS42LTk5LjkgNTMuNi0zNi40LTMzLjgtNzIuNC01My4yLTk5LjktNTMuMnYyMi4zYzIwLjcgMCA1MS40IDE2LjUgODQgNDYuNi0xNCAxNC43LTI4IDMxLjQtNDEuMyA0OS45LTIyLjYgMi40LTQ0IDYuMS02My42IDExLTIuMy0xMC00LTE5LjctNS4yLTI5LTQuNy0zOC4yIDEuMS02Ny45IDE0LjYtNzUuOCAzLTEuOCA2LjktMi42IDExLjUtMi42Vjc4LjVjLTguNCAwLTE2IDEuOC0yMi42IDUuNi0yOC4xIDE2LjItMzQuNCA2Ni43LTE5LjkgMTMwLjEtNjIuMiAxOS4yLTEwMi43IDQ5LjktMTAyLjcgODIuMyAwIDMyLjUgNDAuNyA2My4zIDEwMy4xIDgyLjQtMTQuNCA2My42LTggMTE0LjIgMjAuMiAxMzAuNCA2LjUgMy44IDE0LjEgNS42IDIyLjUgNS42IDI3LjUgMCA2My41LTE5LjYgOTkuOS01My42IDM2LjQgMzMuOCA3Mi40IDUzLjIgOTkuOSA1My4yIDguNCAwIDE2LTEuOCAyMi42LTUuNiAyOC4xLTE2LjIgMzQuNC02Ni43IDE5LjktMTMwLjEgNjItMTkuMSAxMDIuNS00OS45IDEwMi41LTgyLjN6bS0xMzAuMi02Ni43Yy0zLjcgMTIuOS04LjMgMjYuMi0xMy41IDM5LjUtNC4xLTgtOC40LTE2LTEzLjEtMjQtNC42LTgtOS41LTE1LjgtMTQuNC0yMy40IDE0LjIgMi4xIDI3LjkgNC43IDQxIDcuOXptLTQ1LjggMTA2LjVjLTcuOCAxMy41LTE1LjggMjYuMy0yNC4xIDM4LjItMTQuOSAxLjMtMzAgMi00NS4yIDItMTUuMSAwLTMwLjItLjctNDUtMS45LTguMy0xMS45LTE2LjQtMjQuNi0yNC4yLTM4LTcuNi0xMy4xLTE0LjUtMjYuNC0yMC44LTM5LjggNi4yLTEzLjQgMTMuMi0yNi44IDIwLjctMzkuOSA3LjgtMTMuNSAxNS44LTI2LjMgMjQuMS0zOC4yIDE0LjktMS4zIDMwLTIgNDUuMi0yIDE1LjEgMCAzMC4yLjcgNDUgMS45IDguMyAxMS45IDE2LjQgMjQuNiAyNC4yIDM4IDcuNiAxMy4xIDE0LjUgMjYuNCAyMC44IDM5LjgtNi4zIDEzLjQtMTMuMiAyNi44LTIwLjcgMzkuOXptMzIuMy0xM2M1LjQgMTMuNCAxMCAyNi44IDEzLjggMzkuOC0xMy4xIDMuMi0yNi45IDUuOS00MS4yIDggNC45LTcuNyA5LjgtMTUuNiAxNC40LTIzLjcgNC42LTggOC45LTE2LjEgMTMtMjQuMXpNNDIxLjIgNDMwYy05LjMtOS42LTE4LjYtMjAuMy0yNy44LTMyIDkgLjQgMTguMi43IDI3LjUuNyA5LjQgMCAxOC43LS4yIDI3LjgtLjctOSAxMS43LTE4LjMgMjIuNC0yNy41IDMyem0tNzQuNC01OC45Yy0xNC4yLTIuMS0yNy45LTQuNy00MS03LjkgMy43LTEyLjkgOC4zLTI2LjIgMTMuNS0zOS41IDQuMSA4IDguNCAxNiAxMy4xIDI0IDQuNyA4IDkuNSAxNS44IDE0LjQgMjMuNHpNNDIwLjcgMTYzYzkuMyA5LjYgMTguNiAyMC4zIDI3LjggMzItOS0uNC0xOC4yLS43LTI3LjUtLjctOS40IDAtMTguNy4yLTI3LjguNyA5LTExLjcgMTguMy0yMi40IDI3LjUtMzJ6bS03NCA1OC45Yy00LjkgNy43LTkuOCAxNS42LTE0LjQgMjMuNy00LjYgOC04LjkgMTYtMTMgMjQtNS40LTEzLjQtMTAtMjYuOC0xMy44LTM5LjggMTMuMS0zLjEgMjYuOS01LjggNDEuMi03Ljl6bS05MC41IDEyNS4yYy0zNS40LTE1LjEtNTguMy0zNC45LTU4LjMtNTAuNiAwLTE1LjcgMjIuOS0zNS42IDU4LjMtNTAuNiA4LjYtMy43IDE4LTcgMjcuNy0xMC4xIDUuNyAxOS42IDEzLjIgNDAgMjIuNSA2MC45LTkuMiAyMC44LTE2LjYgNDEuMS0yMi4yIDYwLjYtOS45LTMuMS0xOS4zLTYuNS0yOC0xMC4yek0zMTAgNDkwYy0xMy42LTcuOC0xOS41LTM3LjUtMTQuOS03NS43IDEuMS05LjQgMi45LTE5LjMgNS4xLTI5LjQgMTkuNiA0LjggNDEgOC41IDYzLjUgMTAuOSAxMy41IDE4LjUgMjcuNSAzNS4zIDQxLjYgNTAtMzIuNiAzMC4zLTYzLjIgNDYuOS04NCA0Ni45LTQuNS0uMS04LjMtMS0xMS4zLTIuN3ptMjM3LjItNzYuMmM0LjcgMzguMi0xLjEgNjcuOS0xNC42IDc1LjgtMyAxLjgtNi45IDIuNi0xMS41IDIuNi0yMC43IDAtNTEuNC0xNi41LTg0LTQ2LjYgMTQtMTQuNyAyOC0zMS40IDQxLjMtNDkuOSAyMi42LTIuNCA0NC02LjEgNjMuNi0xMSAyLjMgMTAuMSA0LjEgMTkuOCA1LjIgMjkuMXptMzguNS02Ni43Yy04LjYgMy43LTE4IDctMjcuNyAxMC4xLTUuNy0xOS42LTEzLjItNDAtMjIuNS02MC45IDkuMi0yMC44IDE2LjYtNDEuMSAyMi4yLTYwLjYgOS45IDMuMSAxOS4zIDYuNSAyOC4xIDEwLjIgMzUuNCAxNS4xIDU4LjMgMzQuOSA1OC4zIDUwLjYtLjEgMTUuNy0yMyAzNS42LTU4LjQgNTAuNnpNMzIwLjggNzguNHoiLz48Y2lyY2xlIGN4PSI0MjAuOSIgY3k9IjI5Ni41IiByPSI0NS43Ii8+PHBhdGggZD0iTTUyMC41IDc4LjF6Ii8+PC9nPjwvc3ZnPg==" />)</a>
-                <span id="icon004" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/react" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera and images in a Vue 3
-                                Application."><a class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/vue">
-                    Hello World in
-                    Vue (<img alt="Vue logo"
-                        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTk2QkI4RkE3NjE2MTFFNUE4NEU4RkIxNjQ5MTYyRDgiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTk2QkI4Rjk3NjE2MTFFNUE4NEU4RkIxNjQ5MTYyRDgiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjU2QTEyNzk3NjkyMTFFMzkxODk4RDkwQkY4Q0U0NzYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjU2QTEyN0E3NjkyMTFFMzkxODk4RDkwQkY4Q0U0NzYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5WHowqAAAXNElEQVR42uxda4xd1XVe53XvvD2eGQ/lXQcKuDwc2eFlCAGnUn7kT6T86J/+aNTgsWPchJJYciEOCQ8hF+G0hFCIHRSEqAuJBCqRaUEIEbmBppAIBGnESwZje8COZ+y587j3PLq+ffadGJix53HvPevcuz60xPjec89ZZ+39nf04+9vLSZKEFArFzHA1BAqFEkShUIIoFEoQhUIJolAoQRQKJYhCoQRRKJQgCoUSRKFQKEEUCiWIQrFo+Gv/8/YH+f/nsMWSHHMChyhxqPTTdyncWyJ3ScD/ztipiB3wXSqu6P17avN+TyFC5ggv4tRnmoxWTP1+5F+Mz17GPvPl49EKBWd3UsfXllPiso8VcYtmPba3fNuKrBVXrGFCbrdPwXndFL49ltI367roOpSUI4pGypv9s7q+ltj6JxqOQ07Bo/DgxGb2/a8cX0CnAWXJ5etz2TqdHiXHKlKj9w6i9XX8Ic41DmI8FVHhmmXk85MmRhCzJoiTWnig9LfJRHihgydxzAxJhBr7Bh/hK3yu+p9568FliTJF2aKMZfVd/kQOcKP6OBmS9+Rjm4zJ6faoeN0gOUn61MncLX4CJ+MRhe+P/dRxhfew2Df4CF/hs4jWg8vQYUKYMuWyRRkLjeHQ8YP0Z9mekVjA8Qj3VVcuoeDiXu63lkUE0ym6FA5PXBaNVr7qtPumGyPR4Bt8hK/wWUR5chn6XJYoU5StUHL8l+XEx2axhkS6yk+chJuP4rXLyOkIKJkS0B67adcqfL/0Y4pixxSysK6V8Yl9Mz7i3272NRFlhzJsu24Z5l9E9Ahmwfrpoj7uw3fZtktsRZKjIXnndlLxin7+W8ZTBwPf6I+Tg9HwxK2Ob8citbCoBoaxBxMCvsFH+CqjHCtUvLzflKWUcpwB91gupG5f9/Rtx39ZZBtmWyJtphKzHTQW0diP36b4aJmcLj/zGaSkHJPb4SWFi/tOJd8bTqd9s48VBRh4RKeUX/vjgXg8cpyCmz05xkJylxSoa8M5RF0eJaVIIkGOsg2yTc3UgpD94psiWxEOqDNYoOIXuHnGwE5AXUTFi46FTnRw4l/dwEm7/pSxcYnCF/gE3zInh52RRJkVP7/MlKFQcgCbjifHTAQBfsb2qsgBO3e1Cpf3UXBej3nRJKKrxU/rcH/pKzz4vNIQuRJTEmZklbg6EL4SPsE3GQPzinmfhbJDGQolB+r8w58abs5y8DqRt4ABeptLRR7koY9NleybEYw/MPisvF/ayT1/SvDewcnIcG32wfiCAbEvoCZyGaGsitdyz6XdTctQJq6fcT5mloNfYvu5yFZkpEz+RT0UrFoqpxVBV+vQxIrkaPnrbqdvXs6hcjbU+Jq4Nvvwd/BFRNeq2npwWfkX95iyE9p6PM72P/MhCPANTBSKu5WITHcC074Y9CUTkYglKBgcV/aVtlM5Kpp/RHFjDdfka7MP/2wG6m72661QNigjlBXKTGBtsjWKNs5atCf44Uds3xc5YD8Wknd2BxWuGjCzIxLWQzlFj+IjU108OL7bafM5sm5DDdfka/8T+9AJXyTMpqFsUEYoK5SZ0NbjVlvX500Q4Ha2A+JuCcEvhVS8qp/8MzspHhMSfO7mVPaP35BMRp9JsCQldbX+hmvxNfnamzJfqVvtWnGZoGxQRigroYs6UbfvOGHn4ORVkTaIbEWwtqg3MNO+Zql0JGCdVuCayhDuG9uJB7vp+oR17FbZc+NauCauLWLmKkqXr6NsUEYoK6GtxwY6CXXnEs0n2faIHLCPhhR8bikFKwRN+xZddHWu5a7Ol9yCZ2ZwHKdOxufGNeKRqS/hmnLWW1VMmQSrl5oyEkqOPbZu02IJAsic9sU7B+5uF9cOmqUfeLOdOaAZYb/CA+M/Ic9NxUoYMNfD/PT84f7xB807EAnrrbgMUBZt1w1SEpCIqfjF1Om5EuQNth0iu1r8tPLP76LCpX2yWpHDk2dGH018p6brtD5hOHf04cR3okOTZ0lqPVAW3gVdlMhdrfsTW6drRhDgRrYJcbeKZQxTkenvegNt6YBQwrQvOxG+P3ZHEia9TuClS9Br1XKge8XnxLlxjelzZ/2w4tijDMxyoHIsVQg1zvYPcy7KeZx4jG2zyFakFJF7Whu1XT2QvhfJeryeVNdplYPo4Pi9hKd7VVxVC8O5cH4+N65hXgoKuGfEHmWAskjGxI49Ntu6XHOCAD9ie1PcLSepjDNY00fB8m6KpSyJx/jgg9LfJEfLK40818w+LXY5e5zKaMfKl+DcIlSCZp0cd3U59igDI4+WOa2LunvfvDoD9RrcNLqAjDy3yzfrtKqbAkggSDIZmSlYxzz9a8BaJ101zF2rh3BuSTJaCKGMDEGujHbedXch0X2ebbdEkkDC6a9cQoWVguS53P0JP5xcHY1W/tppD9KxgrdAw5QxnwPn4nOukrPeqkzBJb0m9oJltLtt3a07QYD1IkMAeS7/hw0BXMhzJwXJc/eV7kuiyIN8OOGuUhLP06JUeoxz4FxiZLRouTsDM9WO2OdBRtsIgrzHtk3kgH00JO+cTipc2S9jqyCaluf2xwcnfuB6LndHuEsSzdP4N/gtzoFzSZHRIsaQQiPmidyXgttsnW0YQYDvsh2ROGBPxkMqXjNA/qlCFsnZ8UdlX+kfk0pymlnMWH2JOBfz0sWI+C3OMS1dzPphhPVWHOPC5wdMzIUOzFFHb1lwB2ARF+ZOPt0gshWBPLe/wCRZlu6CIkSei/cE0fD4g2ZbVWceyxH5WPwGvzXrrSTJaDnG7oBoGS3qaCULggCPsv1W5IAd8tzLllJwvpx1WthMIfyg9OVotHy1WVQ4V37wsfgNfkuSZLQcW8Q4lruU/RVbRykrggDXiwwN3uQWnXTa1xMkz2W/on2lndNajpNtAGePw2/MOicBMlqs+8K7GBNbjrFgGe2iX0nUgiAvs+0S2YpgndaFPVRc3SdmVanZlfGjifOiw5PrT/oGvPpG/vDkEH4jZ70Vt86rl5rYimmdP41/s3Uzc4Isup9XNxwvz+0tyNAlONPrtO6hctR+QnluKqNt52O3pxvtClhvxTH0egtmEwbBMlrUxU21OFGtCHKYbavIATv3j90z26kIea4QZRtahfhIuT0anrjH7O3rpjNVHzPIaLG3Lh8Tj5TbRQihjlNyehxTwTLarbZOiiEIcBfbPnGhMtroChXW9JN/VqeYdyPEY4nwwPj6ZCL8C1T+T61JhDqRv8MxZgwlJG2BxzEsrBmgeEzseqt9ti6SNIIA8t6wm901eFDZ66d7M4UkQ56LVgTTvvtKaRqFqoTWymjxGb6LpUzrImYcuzaOIWKJmAptPWpaB2sd+V+yvSB1wB6s7qXgwiUyBpbJdBqFq6MjU18mKCKhRsTyEbx558/wnRmYJzLiV+DYBat6JQ/MX7B1UCxBAKHy3IQrH6W7MhY9MWkUMNAN948/8Mm35/jMDIKlpC3gmBWQtsAjifkE61b36kGQP7DdL7KrVZXnXiYpjYKZxj09Gh7f4kB4yIa/8ZmU1brIIYiYIXaJ3Nbjflv3xBME+DZbSVwIzfIIK89dJkSea18Ihu+XflD9yPztCJnW5Ri5VRntpNh8giVb5ygvBIHu9yaRrchYRO6fFU0CSTPQlDLte6zshx9O3g3D3yJajySd4EDaAsQMsRPaetxk61zty+YTCXRqjf9jO19cOLnyYV+p8QffpcreMXJ7BeRgh77Ds6SIYhGbMBgB2tld1DW0nGL4VxbZfKBbdUHdhol1dl7mOi0MOjttGgWT11lAwU9r1mMSsX0oxwSxgYyWOvKXtiAvBPkV239I7GqZdVqX9FDw2V5+UoYipn2nt/WRMK3LMQlW9poYCZ7WfcrWsdwSBNggMrRYdcLdhjas0+q28lzJOc8bOU7jWLh2AwzEyLxclYm6Z2ZuBEE+YLtTZEVA9tzPdBh5biJ3q5rGD8yRjXbNAPkcm0RuyjTUqf3NQBDge2yHJFaGeDyi4tUD5J3WIXmzs8Y9NDgG3un80OCYIDZCHxqHbJ2iZiEIGmnB8twgzYIkd7vMxiBON59GLJyBQLKMdiM1qOPXyMn2f2f7X5EDdshzkUbhAtED0oZMXCAGiIXgtAW/YXusURdr9NsoufLcgmP20zKy2ErrNSNGRuunMUAshL7zABq61q/RBPkd2yNSn57+X3ZTQZA8t7H3H5p7RwwEt6KP2DrUtAQBIIUsiwt99Kf+tydFntuocVhVRltNWyBTRlumGslopRNkhO1mkRVlLCT3jHYzqyU48WSN+1ZWRou0BZDRyp3Ju9nWnaYnCHA3216JlQWy0gKy557dJSaNQn0nKNL1VrhnwTLavbbOUKsQBBApzzVpFHqsPFdIGoW6AfeG7cMwrcv3TC0io80LQZ5me07kU3WkYqSlhYvkpFGoz8C8bO7RyGjlpi14ztaVliMIIFOeizQKbpI+WdsDGfLcWvcmsaK53b4gdUW3lENZXjxrgrzNdq/IAftohbzzOql4eV/zjUUcu96K7w33KFhGi7rxVisTBEBSxWPiiqYqz71mGfmDQuS5tSIHstHyPZnd7+XKaI+RgKSxEggySWmKaXkVaSwi5xSbRmGiSdZpxVZGy/eEexMso73R1o2WJwiwk+11kQNZrNO6oo+Cc7vz39Wy07q4l+CKfnNvQu/ndVsnSAkifcCOAXq7R8W1y9JdRvI87QvfnTRtgdPeujLavBLkv9meEPnUHS2Tf1EPFT67lOKRnE77munrsrkH/+IeydPXqAO/VoLMDMhz5T2irTzXpFHoKeRPnluV0XYX0mlduTLamIRJtKUR5CDbbSIrGPfX/eUdVFyTQ3luku6OaNIW/HmH5LQFt9k6oAQ5Ab7PNiyxkmGndUhRvTNyJM9F1wrZaM9IZbQmG63MocewxIejRIKg+DaKbEXGI3KWBtT2hUFKyonUZeEfB3xkX4vsM3wXvIx/IwmMqCu0WH/B9qLIpzG6Wp/rpWBFj/x1WnaCAb4G7LPgad0XbZmTEmTukDnti0yzgZvKcwNPtDzXyGjZR5ONFincVEbbVAR5je0hkU/lkTL5F3TZzQ2EvjysJr1hH/0LuiVPTz9ky1oJsgB8iwQsN5hplISns5Hn9hXl9eurMlr2zUzrVsQuk5m0ZUxKkIXhKNsWkQN2yHNPhzx3WbqQMRZGYCOjXWZ8FDzjtsWWsRJkEfgh2zvyOvhWnovsucu75GTPtdlo4RN8i+W+s3nHli0pQRaPIXEeVeW53V46YJciz2Uf4IvxiX0juW/9h/JQ8fJCkGfZnpE5YK9QsHIJBZcIkOdW141d3Gt8EiyjfcaWqRKk6Z84kOc6duODjmzluUZGyz4g6Q18UhltaxHkXbbtIgfsRyvknQt5bobZc6dltP3Gl0SudmW7LUslSJ1mPUbFeWVUepDnDpB3SgazRtW0BXxt+ABfhE7rypyVbCKCTLF9U2QrgjQKg3b7zskGv3eI0+XsuDZ8EJy2YJMtQyVIHfEztldFDtghz728j4LzGphGoZq2gK9ZMDuwiH3ngTJ7OG+VLY8EAeTKc9ts9lwk42zEOi2st+JrYZIA1xYso12Xx4qWV4K8xPZzka3ISCrPDVY1YJ1WtfVYZWW0ctdbPW7LTAnSQHyDJCoykEYhTNdpuUsK6YDZqQ85cG5cw6y3CsWmLYBXG/NayfJMkI8oVR/KG7AfC8k7u4MKVw2kM1r1eB2RpDNXuAauJVhGe6stKyVIBrid7YA4r6o5N5BG4cxOI3mtaeWtymj53LiG4FwmKJs78lzB8k4QVIsN4ryqynN7AzP1ShXIc2tYg3GuSpJO6/aKltHK3KWmhQgCPMm2R+SAfTSkANlzV9Rw2rc6MDcyWtHZaPfYsiElSPaQOYVYiSnxiIprB8kpeGn+v8U2mZD8FjxzTpybKjqtqwQ5Od5g2yGyq4Xsued3UeHSvsW3IlUZLZ8L5xSctmCHLRMliCBgN/AJcV7F6SpbjBe8gUWkUaimLeBzmOUsU2JltOMkcbd+JQiNkYB8ErNVbPe0Nmq72i4kXMiwNUnfe+AcOJfgfCWbbVkoQQTiR2xvivPKynODNX0ULF9AGoVq2gL+Lc4hWEaL2N/XTBWq2Qgic3BYled2+ekeVfOV51az0WKNF59DsIx2XbNVpmYkyPNsuyWSBBJYf+USKsxHnlvNRsu/8WXLaHfb2CtBcoD1Ir2CPJf/wxSt2xmkupGT9c6QtoCPNdO66FfJldGub8aK1KwEeY9tm8gB+2hI3jmdVLii/+RbBdktfHAsfpPIfSm4zcZcCZIjfJftiMQBO1IQQBrrn3qCRYZ20SOOMTLacbHrrRDjW5q1EjUzQbiTTzeIbEUgz+232XNne59RfX+CbLT9omW0iHFFCZJPPMr2W5EDdshzL1tKwfkzrNOqrrfi73CMYBntKzbGpATJL64X6RXWZRVtxlnP+VgaBZO2wEu/wzGatkAJUk+8zLZLZCuCdVoXciux+rhVuXYVMD7Dd7Hc9Va7bGyVIE0Amf3kaXnuIHm9qTwXhr/xmWAZbUXk+E4JsmAcZtsqcsAOee6Z7VS08lwY/sZngmW0W21MlSBNhLvY9onzCqtIxipUuKqf3L6iMfyNz4RO6+6zsWwJ+NRawNvep8S1IhMxucie+8VT0o+6PIqPiB17rG+lCtNqBPkl2wts14gbsCONwqVLzT8Fr7d6wcawZeBS60Hm1GSSTu+a6d5EY6cEyQ5/YLtf4oCd4iQ1ma3H/TZ2SpAWwLfZSqSYK0o2ZqQEaQ1AN32T1vs54yYbMyVIC+GBVuwyLLBL+kCr3rzb4oV/vdZ/jZESZHb8iqS9F5GFp2yMlCAtjCENgcZGCTI79rPdqWH4FO60sVGCKOh7bIc0DNM4ZGNCShAFEFKOsyDVARttTJQgGoJpPMb2Gw2DicFjGgYlyExYpyHQGChBZsfv2B5p4ft/xMZAoQSZFZso3TKo1VC2965QgpwQI2w3t+B932zvXaEEOSnuZtvbQve7196zQgkyZ6zXe1UoQWbH02zPtcB9PmfvVaEEmTeG9B6VIIrZ8RbbvU18f/fae1QoQRYMJKU81oT3dYwkJj1VguQOk9REaY2Pw4323hRKkEVjJ9vrTXQ/r9t7UihBaobr9V6UIIrZ8Wu2J5rgPp6w96JQgtQcG2jmhGl5QWzvQaEEqQsOst2WY/9vs/egUILUtZIN59Dv4ZyTWwmSEyDnUx7luRtJar4qJUjT4RdsL+bI3xetzwolSMOwTn1Vgihmx2tsD+XAz4esrwolSMPxLZK9XGPS+qhQgmSCo2xbBPu3xfqoUIJkhh+yvSPQr3esbwolSOYYUp+UIIrZ8SzbM4L8ecb6pFCC6BNbWw8lSB7wLtt2AX5st74olCDikPWskfRZNSVIi2OKst2+c5P1QaEEEYuH2V7N4Lqv2msrlCDisa5FrqkEUSwIL7E93sDrPW6vqVCC5AaN0l/kVZ+iBGlxfMR2awOuc6u9lkIJkjvcwXagjuc/YK+hUILkEgnVdxeRDfYaCiVIbvEk2546nHePPbdCCZJ7rMvJORVKkEzwBtuOGp5vhz2nQgnSNMBu6uM1OM84Nedu80qQFscY1SYfx2Z7LoUSpOlwH9ubi/j9m/YcCiWIDth1YK4EaUU8z7Z7Ab/bbX+rUII0PdY36DcKJUgu8R7btnkcv83+RqEEaRncwnZkDscdsccqlCAthQrbDXM47gZ7rEIJ0nJ4lO2VE3z/ij1GoQRpWaxb4HcKJUhL4GW2XTN8vst+p1CCtDw+Oc6Y6/hEoQRpCRxm23rcv7fazxRKEIXFXZRuwBDZvxUC4GsIREHflguDkyQqaVYotIulUChBFAoliEKhBFEolCAKhRJEoVCCKBRKEIVCCaJQKJQgCoUSRKFQgigUShCFIhP8vwADACog5YM65zugAAAAAElFTkSuQmCC" />)</a>
-                <span id="icon006" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/vue" title="Check code on GitHub"></a></span>
-            </div>
-        </div>
-        <div class="file">Scan Multiple Barcodes</div>
-        <div class="children">
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Minimum necessary 
-                JavaScript code to read barcodes from camera."><a class="button title" href="https://demo.dynamsoft.com/Samples/DBR/JS/barcode-scanner-api-samples/scan-multiple-barcodes/hello-world.html">Hello World
-            </a><span id="icon001" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/barcode-scanner-api-samples/scan-multiple-barcodes/hello-world.html" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Simulates a shopping 
-                experience where users scan barcodes to add items to a dynamic cart. "><a class="button title" href="https://demo.dynamsoft.com/Samples/DBR/JS/barcode-scanner-api-samples/scan-multiple-barcodes/cart-builder.html">Scan 
-                to Cart Simulation</a><span id="icon001" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/barcode-scanner-api-samples/scan-multiple-barcodes/cart-builder.html" title="Check code on GitHub"></a></span>
-            </div>
-        </div>
-    </div>
-    <div class="file">
-        <h3>Foundational API Samples</h3>
-    </div>
-    <div class="children">
-        <div class="file">Hello World</div>
-        <div class="children">
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Minimum necessary 
-                JavaScript code to read barcodes from camera."><a class="button title" href="https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/hello-world/hello-world.html">Hello 
-                World</a><span id="icon001" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/foundational-api-samples/hello-world/hello-world.html" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Decode barcodes
-                using images that are stored locally,
-                whether on mobile or desktop."><a class="button title" href="https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/hello-world/read-an-image.html">Read
-                    an Existing
-                    Image</a><span id="icon002" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/foundational-api-samples/hello-world/read-an-image.html" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera and images in an Angular
-                Application."><a class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/angular">Hello World in
-                    Angular (<img alt="Angular logo"
-                        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==" />)</a>
-                <span id="icon003" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/angular" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera and images in a Blazor
-                Application."><a class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/blazor">Hello World in
-                    Blazor (<img alt="Blazor logo"
-                        src="data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjIyNDgiIHZpZXdCb3g9Ii0xMC4xMjAyMTg3NSAtNTMuNjA5NTEwMzYgMzM5Ljk1Mzk3NTI5IDM0My4wMjIzNTA5MyIgd2lkdGg9IjI1MDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTMwMy45MzUgODguNDc5Yy02LjU5OCA0MS4zNjItMjcuNjUzIDc5LjA0MS01OS40MiAxMDYuMzM1cy03Mi4xODUgNDIuNDMzLTExNC4wNjQgNDIuNzIzYy04LjQ4My4zMjYtMTYuOTc3LS4xOS0yNS4zNTgtMS41MzlhNzcuNzIzIDc3LjcyMyAwIDAgMSAtNjQuNjMtNzMuMjY2IDc1LjQ3OSA3NS40NzkgMCAwIDEgMjIuMTQtNTIuNzYyIDc1LjQ2IDc1LjQ2IDAgMCAxIDEwNS44ODUtLjc0OCA3NS40NzggNzUuNDc4IDAgMCAxIDIyLjg4NCA1Mi40NDNjLjMxNyAxMi41MS01LjEwMiAyMy40ODMtMTYuMjM5IDIzLjgtMTEuODk5IDAtMTcuNDc3LTguNDkxLTE3LjQ3Ny0xOS45MzR2LTMxLjc5N2ExOS40NzggMTkuNDc4IDAgMCAwIC0xOS4zMjMtMTkuNDk0aC0yNi42NTNhNDYuMzg2IDQ2LjM4NiAwIDAgMCAtMzkuMTE5IDIwLjk2MSA0Ni4zOTkgNDYuMzk5IDAgMCAwIDMxLjU4NyA3MS4yNjggNDYuMzkyIDQ2LjM5MiAwIDAgMCA0MS44LTE0LjkxMWwuOTMyLTEuMzkuOTMzIDEuNTQzYTMyLjgyIDMyLjgyIDAgMCAwIDI3Ljk4NiAxMy4zMjggMzYuOTkyIDM2Ljk5MiAwIDAgMCAzNC4yNjgtMzguNjcxIDEwMC42NCAxMDAuNjQgMCAwIDAgLTIuNzYxLTI0LjU3N2MtNC45NDMtMjIuNzM0LTE4LjEyNi00Mi44MzQtMzcuMDA4LTU2LjQyM2E5NC4xNTMgOTQuMTUzIDAgMCAwIC0xMjUuMjM2IDEzLjcxOCA5NC4xNzUgOTQuMTc1IDAgMCAwIC0yMy45MiA2My4wOTcgOTUuMzUyIDk1LjM1MiAwIDAgMCAyNy40NzMgNjUuODI0IDk1LjMzMSA5NS4zMzEgMCAwIDAgNjUuNDQ4IDI4LjM0NHM2Ljk4LjYzNSAxNC44NDkuNDU0YTIwMC45NCAyMDAuOTQgMCAwIDAgMTA3Ljc2OS0zMi4xNTVjLjQ1Ny0uMzE4LjkxNC4zMTcuNjEuNzhhMTU4LjE3NyAxNTguMTc3IDAgMCAxIC0xMjMuMjI1IDUwLjM5NiAxMTEuMTg1IDExMS4xODUgMCAwIDEgLTgwLjk2MS0zMi44NzEgMTExLjIxNSAxMTEuMjE1IDAgMCAxIC0zMi4yMTUtODEuMjMyIDExNS4wOTkgMTE1LjA5OSAwIDAgMSA0Ni4yMjMtOTIuMTcgMTEyLjcwNCAxMTIuNzA0IDAgMCAxIDY2LjQ5Ny0yMS45NTNoMzUuNzcyYTEwMC42MzcgMTAwLjYzNyAwIDAgMCA3NC4yNDctMzIuNzg0IDEuMzkgMS4zOSAwIDAgMSAuNzU1LS40MzEgMS40MTggMS40MTggMCAwIDEgMS41Mi42NjNjLjE1My4yNTcuMjIyLjU1NS4xOTcuODU0YTEwMC45MyAxMDAuOTMgMCAwIDEgLTE1LjYwOCA0NS4xNCAxLjM4NiAxLjM4NiAwIDAgMCAuMTE1IDEuNTExIDEuMzg3IDEuMzg3IDAgMCAwIDEuNDI0LjUwNyAxMDguMTU4IDEwOC4xNTggMCAwIDAgNzUuMTk4LTYyLjAxM2MuMTczLS4yNzcuNDExLS41MDcuNjk1LS42N2ExLjkwMiAxLjkwMiAwIDAgMSAxLjg2OSAwYy4yODQuMTYyLjUyMy4zOTIuNjk0LjY3YTEzNy4wOTggMTM3LjA5OCAwIDAgMSAxMy40NDcgODcuNDMyem0tMTg5Ljk2NCA0NC44NThhMjcuODIzIDI3LjgyMyAwIDAgMCAtMjcuMjkzIDMzLjI1NSAyNy44MyAyNy44MyAwIDAgMCAyMS44NjIgMjEuODY1IDI3LjgyNCAyNy44MjQgMCAwIDAgMzMuMjUxLTI3LjI5NnYtMjUuOTc3YTIuMDA3IDIuMDA3IDAgMCAwIC0xLjkwNC0xLjkwNHoiIGZpbGw9IiM3MDJhZjciLz48L3N2Zz4=" />)</a>
-                <span id="icon003" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/blazor" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera and images in a React
-                Application."><a class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/react">
-                    Hello World in
-                    React (<img alt="React logo"
-                        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4NDEuOSA1OTUuMyI+PGcgZmlsbD0iIzYxREFGQiI+PHBhdGggZD0iTTY2Ni4zIDI5Ni41YzAtMzIuNS00MC43LTYzLjMtMTAzLjEtODIuNCAxNC40LTYzLjYgOC0xMTQuMi0yMC4yLTEzMC40LTYuNS0zLjgtMTQuMS01LjYtMjIuNC01LjZ2MjIuM2M0LjYgMCA4LjMuOSAxMS40IDIuNiAxMy42IDcuOCAxOS41IDM3LjUgMTQuOSA3NS43LTEuMSA5LjQtMi45IDE5LjMtNS4xIDI5LjQtMTkuNi00LjgtNDEtOC41LTYzLjUtMTAuOS0xMy41LTE4LjUtMjcuNS0zNS4zLTQxLjYtNTAgMzIuNi0zMC4zIDYzLjItNDYuOSA4NC00Ni45Vjc4Yy0yNy41IDAtNjMuNSAxOS42LTk5LjkgNTMuNi0zNi40LTMzLjgtNzIuNC01My4yLTk5LjktNTMuMnYyMi4zYzIwLjcgMCA1MS40IDE2LjUgODQgNDYuNi0xNCAxNC43LTI4IDMxLjQtNDEuMyA0OS45LTIyLjYgMi40LTQ0IDYuMS02My42IDExLTIuMy0xMC00LTE5LjctNS4yLTI5LTQuNy0zOC4yIDEuMS02Ny45IDE0LjYtNzUuOCAzLTEuOCA2LjktMi42IDExLjUtMi42Vjc4LjVjLTguNCAwLTE2IDEuOC0yMi42IDUuNi0yOC4xIDE2LjItMzQuNCA2Ni43LTE5LjkgMTMwLjEtNjIuMiAxOS4yLTEwMi43IDQ5LjktMTAyLjcgODIuMyAwIDMyLjUgNDAuNyA2My4zIDEwMy4xIDgyLjQtMTQuNCA2My42LTggMTE0LjIgMjAuMiAxMzAuNCA2LjUgMy44IDE0LjEgNS42IDIyLjUgNS42IDI3LjUgMCA2My41LTE5LjYgOTkuOS01My42IDM2LjQgMzMuOCA3Mi40IDUzLjIgOTkuOSA1My4yIDguNCAwIDE2LTEuOCAyMi42LTUuNiAyOC4xLTE2LjIgMzQuNC02Ni43IDE5LjktMTMwLjEgNjItMTkuMSAxMDIuNS00OS45IDEwMi41LTgyLjN6bS0xMzAuMi02Ni43Yy0zLjcgMTIuOS04LjMgMjYuMi0xMy41IDM5LjUtNC4xLTgtOC40LTE2LTEzLjEtMjQtNC42LTgtOS41LTE1LjgtMTQuNC0yMy40IDE0LjIgMi4xIDI3LjkgNC43IDQxIDcuOXptLTQ1LjggMTA2LjVjLTcuOCAxMy41LTE1LjggMjYuMy0yNC4xIDM4LjItMTQuOSAxLjMtMzAgMi00NS4yIDItMTUuMSAwLTMwLjItLjctNDUtMS45LTguMy0xMS45LTE2LjQtMjQuNi0yNC4yLTM4LTcuNi0xMy4xLTE0LjUtMjYuNC0yMC44LTM5LjggNi4yLTEzLjQgMTMuMi0yNi44IDIwLjctMzkuOSA3LjgtMTMuNSAxNS44LTI2LjMgMjQuMS0zOC4yIDE0LjktMS4zIDMwLTIgNDUuMi0yIDE1LjEgMCAzMC4yLjcgNDUgMS45IDguMyAxMS45IDE2LjQgMjQuNiAyNC4yIDM4IDcuNiAxMy4xIDE0LjUgMjYuNCAyMC44IDM5LjgtNi4zIDEzLjQtMTMuMiAyNi44LTIwLjcgMzkuOXptMzIuMy0xM2M1LjQgMTMuNCAxMCAyNi44IDEzLjggMzkuOC0xMy4xIDMuMi0yNi45IDUuOS00MS4yIDggNC45LTcuNyA5LjgtMTUuNiAxNC40LTIzLjcgNC42LTggOC45LTE2LjEgMTMtMjQuMXpNNDIxLjIgNDMwYy05LjMtOS42LTE4LjYtMjAuMy0yNy44LTMyIDkgLjQgMTguMi43IDI3LjUuNyA5LjQgMCAxOC43LS4yIDI3LjgtLjctOSAxMS43LTE4LjMgMjIuNC0yNy41IDMyem0tNzQuNC01OC45Yy0xNC4yLTIuMS0yNy45LTQuNy00MS03LjkgMy43LTEyLjkgOC4zLTI2LjIgMTMuNS0zOS41IDQuMSA4IDguNCAxNiAxMy4xIDI0IDQuNyA4IDkuNSAxNS44IDE0LjQgMjMuNHpNNDIwLjcgMTYzYzkuMyA5LjYgMTguNiAyMC4zIDI3LjggMzItOS0uNC0xOC4yLS43LTI3LjUtLjctOS40IDAtMTguNy4yLTI3LjguNyA5LTExLjcgMTguMy0yMi40IDI3LjUtMzJ6bS03NCA1OC45Yy00LjkgNy43LTkuOCAxNS42LTE0LjQgMjMuNy00LjYgOC04LjkgMTYtMTMgMjQtNS40LTEzLjQtMTAtMjYuOC0xMy44LTM5LjggMTMuMS0zLjEgMjYuOS01LjggNDEuMi03Ljl6bS05MC41IDEyNS4yYy0zNS40LTE1LjEtNTguMy0zNC45LTU4LjMtNTAuNiAwLTE1LjcgMjIuOS0zNS42IDU4LjMtNTAuNiA4LjYtMy43IDE4LTcgMjcuNy0xMC4xIDUuNyAxOS42IDEzLjIgNDAgMjIuNSA2MC45LTkuMiAyMC44LTE2LjYgNDEuMS0yMi4yIDYwLjYtOS45LTMuMS0xOS4zLTYuNS0yOC0xMC4yek0zMTAgNDkwYy0xMy42LTcuOC0xOS41LTM3LjUtMTQuOS03NS43IDEuMS05LjQgMi45LTE5LjMgNS4xLTI5LjQgMTkuNiA0LjggNDEgOC41IDYzLjUgMTAuOSAxMy41IDE4LjUgMjcuNSAzNS4zIDQxLjYgNTAtMzIuNiAzMC4zLTYzLjIgNDYuOS04NCA0Ni45LTQuNS0uMS04LjMtMS0xMS4zLTIuN3ptMjM3LjItNzYuMmM0LjcgMzguMi0xLjEgNjcuOS0xNC42IDc1LjgtMyAxLjgtNi45IDIuNi0xMS41IDIuNi0yMC43IDAtNTEuNC0xNi41LTg0LTQ2LjYgMTQtMTQuNyAyOC0zMS40IDQxLjMtNDkuOSAyMi42LTIuNCA0NC02LjEgNjMuNi0xMSAyLjMgMTAuMSA0LjEgMTkuOCA1LjIgMjkuMXptMzguNS02Ni43Yy04LjYgMy43LTE4IDctMjcuNyAxMC4xLTUuNy0xOS42LTEzLjItNDAtMjIuNS02MC45IDkuMi0yMC44IDE2LjYtNDEuMSAyMi4yLTYwLjYgOS45IDMuMSAxOS4zIDYuNSAyOC4xIDEwLjIgMzUuNCAxNS4xIDU4LjMgMzQuOSA1OC4zIDUwLjYtLjEgMTUuNy0yMyAzNS42LTU4LjQgNTAuNnpNMzIwLjggNzguNHoiLz48Y2lyY2xlIGN4PSI0MjAuOSIgY3k9IjI5Ni41IiByPSI0NS43Ii8+PHBhdGggZD0iTTUyMC41IDc4LjF6Ii8+PC9nPjwvc3ZnPg==" />)</a>
-                <span id="icon004" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/react" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera and images in a React
-                Application."><a class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/react-hooks">
-                Hello World in
-                    React(using Hooks)(<img alt="React logo"
-                        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4NDEuOSA1OTUuMyI+PGcgZmlsbD0iIzYxREFGQiI+PHBhdGggZD0iTTY2Ni4zIDI5Ni41YzAtMzIuNS00MC43LTYzLjMtMTAzLjEtODIuNCAxNC40LTYzLjYgOC0xMTQuMi0yMC4yLTEzMC40LTYuNS0zLjgtMTQuMS01LjYtMjIuNC01LjZ2MjIuM2M0LjYgMCA4LjMuOSAxMS40IDIuNiAxMy42IDcuOCAxOS41IDM3LjUgMTQuOSA3NS43LTEuMSA5LjQtMi45IDE5LjMtNS4xIDI5LjQtMTkuNi00LjgtNDEtOC41LTYzLjUtMTAuOS0xMy41LTE4LjUtMjcuNS0zNS4zLTQxLjYtNTAgMzIuNi0zMC4zIDYzLjItNDYuOSA4NC00Ni45Vjc4Yy0yNy41IDAtNjMuNSAxOS42LTk5LjkgNTMuNi0zNi40LTMzLjgtNzIuNC01My4yLTk5LjktNTMuMnYyMi4zYzIwLjcgMCA1MS40IDE2LjUgODQgNDYuNi0xNCAxNC43LTI4IDMxLjQtNDEuMyA0OS45LTIyLjYgMi40LTQ0IDYuMS02My42IDExLTIuMy0xMC00LTE5LjctNS4yLTI5LTQuNy0zOC4yIDEuMS02Ny45IDE0LjYtNzUuOCAzLTEuOCA2LjktMi42IDExLjUtMi42Vjc4LjVjLTguNCAwLTE2IDEuOC0yMi42IDUuNi0yOC4xIDE2LjItMzQuNCA2Ni43LTE5LjkgMTMwLjEtNjIuMiAxOS4yLTEwMi43IDQ5LjktMTAyLjcgODIuMyAwIDMyLjUgNDAuNyA2My4zIDEwMy4xIDgyLjQtMTQuNCA2My42LTggMTE0LjIgMjAuMiAxMzAuNCA2LjUgMy44IDE0LjEgNS42IDIyLjUgNS42IDI3LjUgMCA2My41LTE5LjYgOTkuOS01My42IDM2LjQgMzMuOCA3Mi40IDUzLjIgOTkuOSA1My4yIDguNCAwIDE2LTEuOCAyMi42LTUuNiAyOC4xLTE2LjIgMzQuNC02Ni43IDE5LjktMTMwLjEgNjItMTkuMSAxMDIuNS00OS45IDEwMi41LTgyLjN6bS0xMzAuMi02Ni43Yy0zLjcgMTIuOS04LjMgMjYuMi0xMy41IDM5LjUtNC4xLTgtOC40LTE2LTEzLjEtMjQtNC42LTgtOS41LTE1LjgtMTQuNC0yMy40IDE0LjIgMi4xIDI3LjkgNC43IDQxIDcuOXptLTQ1LjggMTA2LjVjLTcuOCAxMy41LTE1LjggMjYuMy0yNC4xIDM4LjItMTQuOSAxLjMtMzAgMi00NS4yIDItMTUuMSAwLTMwLjItLjctNDUtMS45LTguMy0xMS45LTE2LjQtMjQuNi0yNC4yLTM4LTcuNi0xMy4xLTE0LjUtMjYuNC0yMC44LTM5LjggNi4yLTEzLjQgMTMuMi0yNi44IDIwLjctMzkuOSA3LjgtMTMuNSAxNS44LTI2LjMgMjQuMS0zOC4yIDE0LjktMS4zIDMwLTIgNDUuMi0yIDE1LjEgMCAzMC4yLjcgNDUgMS45IDguMyAxMS45IDE2LjQgMjQuNiAyNC4yIDM4IDcuNiAxMy4xIDE0LjUgMjYuNCAyMC44IDM5LjgtNi4zIDEzLjQtMTMuMiAyNi44LTIwLjcgMzkuOXptMzIuMy0xM2M1LjQgMTMuNCAxMCAyNi44IDEzLjggMzkuOC0xMy4xIDMuMi0yNi45IDUuOS00MS4yIDggNC45LTcuNyA5LjgtMTUuNiAxNC40LTIzLjcgNC42LTggOC45LTE2LjEgMTMtMjQuMXpNNDIxLjIgNDMwYy05LjMtOS42LTE4LjYtMjAuMy0yNy44LTMyIDkgLjQgMTguMi43IDI3LjUuNyA5LjQgMCAxOC43LS4yIDI3LjgtLjctOSAxMS43LTE4LjMgMjIuNC0yNy41IDMyem0tNzQuNC01OC45Yy0xNC4yLTIuMS0yNy45LTQuNy00MS03LjkgMy43LTEyLjkgOC4zLTI2LjIgMTMuNS0zOS41IDQuMSA4IDguNCAxNiAxMy4xIDI0IDQuNyA4IDkuNSAxNS44IDE0LjQgMjMuNHpNNDIwLjcgMTYzYzkuMyA5LjYgMTguNiAyMC4zIDI3LjggMzItOS0uNC0xOC4yLS43LTI3LjUtLjctOS40IDAtMTguNy4yLTI3LjguNyA5LTExLjcgMTguMy0yMi40IDI3LjUtMzJ6bS03NCA1OC45Yy00LjkgNy43LTkuOCAxNS42LTE0LjQgMjMuNy00LjYgOC04LjkgMTYtMTMgMjQtNS40LTEzLjQtMTAtMjYuOC0xMy44LTM5LjggMTMuMS0zLjEgMjYuOS01LjggNDEuMi03Ljl6bS05MC41IDEyNS4yYy0zNS40LTE1LjEtNTguMy0zNC45LTU4LjMtNTAuNiAwLTE1LjcgMjIuOS0zNS42IDU4LjMtNTAuNiA4LjYtMy43IDE4LTcgMjcuNy0xMC4xIDUuNyAxOS42IDEzLjIgNDAgMjIuNSA2MC45LTkuMiAyMC44LTE2LjYgNDEuMS0yMi4yIDYwLjYtOS45LTMuMS0xOS4zLTYuNS0yOC0xMC4yek0zMTAgNDkwYy0xMy42LTcuOC0xOS41LTM3LjUtMTQuOS03NS43IDEuMS05LjQgMi45LTE5LjMgNS4xLTI5LjQgMTkuNiA0LjggNDEgOC41IDYzLjUgMTAuOSAxMy41IDE4LjUgMjcuNSAzNS4zIDQxLjYgNTAtMzIuNiAzMC4zLTYzLjIgNDYuOS04NCA0Ni45LTQuNS0uMS04LjMtMS0xMS4zLTIuN3ptMjM3LjItNzYuMmM0LjcgMzguMi0xLjEgNjcuOS0xNC42IDc1LjgtMyAxLjgtNi45IDIuNi0xMS41IDIuNi0yMC43IDAtNTEuNC0xNi41LTg0LTQ2LjYgMTQtMTQuNyAyOC0zMS40IDQxLjMtNDkuOSAyMi42LTIuNCA0NC02LjEgNjMuNi0xMSAyLjMgMTAuMSA0LjEgMTkuOCA1LjIgMjkuMXptMzguNS02Ni43Yy04LjYgMy43LTE4IDctMjcuNyAxMC4xLTUuNy0xOS42LTEzLjItNDAtMjIuNS02MC45IDkuMi0yMC44IDE2LjYtNDEuMSAyMi4yLTYwLjYgOS45IDMuMSAxOS4zIDYuNSAyOC4xIDEwLjIgMzUuNCAxNS4xIDU4LjMgMzQuOSA1OC4zIDUwLjYtLjEgMTUuNy0yMyAzNS42LTU4LjQgNTAuNnpNMzIwLjggNzguNHoiLz48Y2lyY2xlIGN4PSI0MjAuOSIgY3k9IjI5Ni41IiByPSI0NS43Ii8+PHBhdGggZD0iTTUyMC41IDc4LjF6Ii8+PC9nPjwvc3ZnPg==" />)</a>
-                <span id="icon013" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/react-hooks" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera and images in a Vue 3
-                                Application."><a class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/vue">
-                    Hello World in
-                    Vue (<img alt="Vue logo"
-                        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTk2QkI4RkE3NjE2MTFFNUE4NEU4RkIxNjQ5MTYyRDgiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTk2QkI4Rjk3NjE2MTFFNUE4NEU4RkIxNjQ5MTYyRDgiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjU2QTEyNzk3NjkyMTFFMzkxODk4RDkwQkY4Q0U0NzYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjU2QTEyN0E3NjkyMTFFMzkxODk4RDkwQkY4Q0U0NzYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5WHowqAAAXNElEQVR42uxda4xd1XVe53XvvD2eGQ/lXQcKuDwc2eFlCAGnUn7kT6T86J/+aNTgsWPchJJYciEOCQ8hF+G0hFCIHRSEqAuJBCqRaUEIEbmBppAIBGnESwZje8COZ+y587j3PLq+ffadGJix53HvPevcuz60xPjec89ZZ+39nf04+9vLSZKEFArFzHA1BAqFEkShUIIoFEoQhUIJolAoQRQKJYhCoQRRKJQgCoUSRKFQKEEUCiWIQrFo+Gv/8/YH+f/nsMWSHHMChyhxqPTTdyncWyJ3ScD/ztipiB3wXSqu6P17avN+TyFC5ggv4tRnmoxWTP1+5F+Mz17GPvPl49EKBWd3UsfXllPiso8VcYtmPba3fNuKrBVXrGFCbrdPwXndFL49ltI367roOpSUI4pGypv9s7q+ltj6JxqOQ07Bo/DgxGb2/a8cX0CnAWXJ5etz2TqdHiXHKlKj9w6i9XX8Ic41DmI8FVHhmmXk85MmRhCzJoiTWnig9LfJRHihgydxzAxJhBr7Bh/hK3yu+p9568FliTJF2aKMZfVd/kQOcKP6OBmS9+Rjm4zJ6faoeN0gOUn61MncLX4CJ+MRhe+P/dRxhfew2Df4CF/hs4jWg8vQYUKYMuWyRRkLjeHQ8YP0Z9mekVjA8Qj3VVcuoeDiXu63lkUE0ym6FA5PXBaNVr7qtPumGyPR4Bt8hK/wWUR5chn6XJYoU5StUHL8l+XEx2axhkS6yk+chJuP4rXLyOkIKJkS0B67adcqfL/0Y4pixxSysK6V8Yl9Mz7i3272NRFlhzJsu24Z5l9E9Ahmwfrpoj7uw3fZtktsRZKjIXnndlLxin7+W8ZTBwPf6I+Tg9HwxK2Ob8citbCoBoaxBxMCvsFH+CqjHCtUvLzflKWUcpwB91gupG5f9/Rtx39ZZBtmWyJtphKzHTQW0diP36b4aJmcLj/zGaSkHJPb4SWFi/tOJd8bTqd9s48VBRh4RKeUX/vjgXg8cpyCmz05xkJylxSoa8M5RF0eJaVIIkGOsg2yTc3UgpD94psiWxEOqDNYoOIXuHnGwE5AXUTFi46FTnRw4l/dwEm7/pSxcYnCF/gE3zInh52RRJkVP7/MlKFQcgCbjifHTAQBfsb2qsgBO3e1Cpf3UXBej3nRJKKrxU/rcH/pKzz4vNIQuRJTEmZklbg6EL4SPsE3GQPzinmfhbJDGQolB+r8w58abs5y8DqRt4ABeptLRR7koY9NleybEYw/MPisvF/ayT1/SvDewcnIcG32wfiCAbEvoCZyGaGsitdyz6XdTctQJq6fcT5mloNfYvu5yFZkpEz+RT0UrFoqpxVBV+vQxIrkaPnrbqdvXs6hcjbU+Jq4Nvvwd/BFRNeq2npwWfkX95iyE9p6PM72P/MhCPANTBSKu5WITHcC074Y9CUTkYglKBgcV/aVtlM5Kpp/RHFjDdfka7MP/2wG6m72661QNigjlBXKTGBtsjWKNs5atCf44Uds3xc5YD8Wknd2BxWuGjCzIxLWQzlFj+IjU108OL7bafM5sm5DDdfka/8T+9AJXyTMpqFsUEYoK5SZ0NbjVlvX500Q4Ha2A+JuCcEvhVS8qp/8MzspHhMSfO7mVPaP35BMRp9JsCQldbX+hmvxNfnamzJfqVvtWnGZoGxQRigroYs6UbfvOGHn4ORVkTaIbEWwtqg3MNO+Zql0JGCdVuCayhDuG9uJB7vp+oR17FbZc+NauCauLWLmKkqXr6NsUEYoK6GtxwY6CXXnEs0n2faIHLCPhhR8bikFKwRN+xZddHWu5a7Ol9yCZ2ZwHKdOxufGNeKRqS/hmnLWW1VMmQSrl5oyEkqOPbZu02IJAsic9sU7B+5uF9cOmqUfeLOdOaAZYb/CA+M/Ic9NxUoYMNfD/PT84f7xB807EAnrrbgMUBZt1w1SEpCIqfjF1Om5EuQNth0iu1r8tPLP76LCpX2yWpHDk2dGH018p6brtD5hOHf04cR3okOTZ0lqPVAW3gVdlMhdrfsTW6drRhDgRrYJcbeKZQxTkenvegNt6YBQwrQvOxG+P3ZHEia9TuClS9Br1XKge8XnxLlxjelzZ/2w4tijDMxyoHIsVQg1zvYPcy7KeZx4jG2zyFakFJF7Whu1XT2QvhfJeryeVNdplYPo4Pi9hKd7VVxVC8O5cH4+N65hXgoKuGfEHmWAskjGxI49Ntu6XHOCAD9ie1PcLSepjDNY00fB8m6KpSyJx/jgg9LfJEfLK40818w+LXY5e5zKaMfKl+DcIlSCZp0cd3U59igDI4+WOa2LunvfvDoD9RrcNLqAjDy3yzfrtKqbAkggSDIZmSlYxzz9a8BaJ101zF2rh3BuSTJaCKGMDEGujHbedXch0X2ebbdEkkDC6a9cQoWVguS53P0JP5xcHY1W/tppD9KxgrdAw5QxnwPn4nOukrPeqkzBJb0m9oJltLtt3a07QYD1IkMAeS7/hw0BXMhzJwXJc/eV7kuiyIN8OOGuUhLP06JUeoxz4FxiZLRouTsDM9WO2OdBRtsIgrzHtk3kgH00JO+cTipc2S9jqyCaluf2xwcnfuB6LndHuEsSzdP4N/gtzoFzSZHRIsaQQiPmidyXgttsnW0YQYDvsh2ROGBPxkMqXjNA/qlCFsnZ8UdlX+kfk0pymlnMWH2JOBfz0sWI+C3OMS1dzPphhPVWHOPC5wdMzIUOzFFHb1lwB2ARF+ZOPt0gshWBPLe/wCRZlu6CIkSei/cE0fD4g2ZbVWceyxH5WPwGvzXrrSTJaDnG7oBoGS3qaCULggCPsv1W5IAd8tzLllJwvpx1WthMIfyg9OVotHy1WVQ4V37wsfgNfkuSZLQcW8Q4lruU/RVbRykrggDXiwwN3uQWnXTa1xMkz2W/on2lndNajpNtAGePw2/MOicBMlqs+8K7GBNbjrFgGe2iX0nUgiAvs+0S2YpgndaFPVRc3SdmVanZlfGjifOiw5PrT/oGvPpG/vDkEH4jZ70Vt86rl5rYimmdP41/s3Uzc4Isup9XNxwvz+0tyNAlONPrtO6hctR+QnluKqNt52O3pxvtClhvxTH0egtmEwbBMlrUxU21OFGtCHKYbavIATv3j90z26kIea4QZRtahfhIuT0anrjH7O3rpjNVHzPIaLG3Lh8Tj5TbRQihjlNyehxTwTLarbZOiiEIcBfbPnGhMtroChXW9JN/VqeYdyPEY4nwwPj6ZCL8C1T+T61JhDqRv8MxZgwlJG2BxzEsrBmgeEzseqt9ti6SNIIA8t6wm901eFDZ66d7M4UkQ56LVgTTvvtKaRqFqoTWymjxGb6LpUzrImYcuzaOIWKJmAptPWpaB2sd+V+yvSB1wB6s7qXgwiUyBpbJdBqFq6MjU18mKCKhRsTyEbx558/wnRmYJzLiV+DYBat6JQ/MX7B1UCxBAKHy3IQrH6W7MhY9MWkUMNAN948/8Mm35/jMDIKlpC3gmBWQtsAjifkE61b36kGQP7DdL7KrVZXnXiYpjYKZxj09Gh7f4kB4yIa/8ZmU1brIIYiYIXaJ3Nbjflv3xBME+DZbSVwIzfIIK89dJkSea18Ihu+XflD9yPztCJnW5Ri5VRntpNh8giVb5ygvBIHu9yaRrchYRO6fFU0CSTPQlDLte6zshx9O3g3D3yJajySd4EDaAsQMsRPaetxk61zty+YTCXRqjf9jO19cOLnyYV+p8QffpcreMXJ7BeRgh77Ds6SIYhGbMBgB2tld1DW0nGL4VxbZfKBbdUHdhol1dl7mOi0MOjttGgWT11lAwU9r1mMSsX0oxwSxgYyWOvKXtiAvBPkV239I7GqZdVqX9FDw2V5+UoYipn2nt/WRMK3LMQlW9poYCZ7WfcrWsdwSBNggMrRYdcLdhjas0+q28lzJOc8bOU7jWLh2AwzEyLxclYm6Z2ZuBEE+YLtTZEVA9tzPdBh5biJ3q5rGD8yRjXbNAPkcm0RuyjTUqf3NQBDge2yHJFaGeDyi4tUD5J3WIXmzs8Y9NDgG3un80OCYIDZCHxqHbJ2iZiEIGmnB8twgzYIkd7vMxiBON59GLJyBQLKMdiM1qOPXyMn2f2f7X5EDdshzkUbhAtED0oZMXCAGiIXgtAW/YXusURdr9NsoufLcgmP20zKy2ErrNSNGRuunMUAshL7zABq61q/RBPkd2yNSn57+X3ZTQZA8t7H3H5p7RwwEt6KP2DrUtAQBIIUsiwt99Kf+tydFntuocVhVRltNWyBTRlumGslopRNkhO1mkRVlLCT3jHYzqyU48WSN+1ZWRou0BZDRyp3Ju9nWnaYnCHA3216JlQWy0gKy557dJSaNQn0nKNL1VrhnwTLavbbOUKsQBBApzzVpFHqsPFdIGoW6AfeG7cMwrcv3TC0io80LQZ5me07kU3WkYqSlhYvkpFGoz8C8bO7RyGjlpi14ztaVliMIIFOeizQKbpI+WdsDGfLcWvcmsaK53b4gdUW3lENZXjxrgrzNdq/IAftohbzzOql4eV/zjUUcu96K7w33KFhGi7rxVisTBEBSxWPiiqYqz71mGfmDQuS5tSIHstHyPZnd7+XKaI+RgKSxEggySWmKaXkVaSwi5xSbRmGiSdZpxVZGy/eEexMso73R1o2WJwiwk+11kQNZrNO6oo+Cc7vz39Wy07q4l+CKfnNvQu/ndVsnSAkifcCOAXq7R8W1y9JdRvI87QvfnTRtgdPeujLavBLkv9meEPnUHS2Tf1EPFT67lOKRnE77munrsrkH/+IeydPXqAO/VoLMDMhz5T2irTzXpFHoKeRPnluV0XYX0mlduTLamIRJtKUR5CDbbSIrGPfX/eUdVFyTQ3luku6OaNIW/HmH5LQFt9k6oAQ5Ab7PNiyxkmGndUhRvTNyJM9F1wrZaM9IZbQmG63MocewxIejRIKg+DaKbEXGI3KWBtT2hUFKyonUZeEfB3xkX4vsM3wXvIx/IwmMqCu0WH/B9qLIpzG6Wp/rpWBFj/x1WnaCAb4G7LPgad0XbZmTEmTukDnti0yzgZvKcwNPtDzXyGjZR5ONFincVEbbVAR5je0hkU/lkTL5F3TZzQ2EvjysJr1hH/0LuiVPTz9ky1oJsgB8iwQsN5hplISns5Hn9hXl9eurMlr2zUzrVsQuk5m0ZUxKkIXhKNsWkQN2yHNPhzx3WbqQMRZGYCOjXWZ8FDzjtsWWsRJkEfgh2zvyOvhWnovsucu75GTPtdlo4RN8i+W+s3nHli0pQRaPIXEeVeW53V46YJciz2Uf4IvxiX0juW/9h/JQ8fJCkGfZnpE5YK9QsHIJBZcIkOdW141d3Gt8EiyjfcaWqRKk6Z84kOc6duODjmzluUZGyz4g6Q18UhltaxHkXbbtIgfsRyvknQt5bobZc6dltP3Gl0SudmW7LUslSJ1mPUbFeWVUepDnDpB3SgazRtW0BXxt+ABfhE7rypyVbCKCTLF9U2QrgjQKg3b7zskGv3eI0+XsuDZ8EJy2YJMtQyVIHfEztldFDtghz728j4LzGphGoZq2gK9ZMDuwiH3ngTJ7OG+VLY8EAeTKc9ts9lwk42zEOi2st+JrYZIA1xYso12Xx4qWV4K8xPZzka3ISCrPDVY1YJ1WtfVYZWW0ctdbPW7LTAnSQHyDJCoykEYhTNdpuUsK6YDZqQ85cG5cw6y3CsWmLYBXG/NayfJMkI8oVR/KG7AfC8k7u4MKVw2kM1r1eB2RpDNXuAauJVhGe6stKyVIBrid7YA4r6o5N5BG4cxOI3mtaeWtymj53LiG4FwmKJs78lzB8k4QVIsN4ryqynN7AzP1ShXIc2tYg3GuSpJO6/aKltHK3KWmhQgCPMm2R+SAfTSkANlzV9Rw2rc6MDcyWtHZaPfYsiElSPaQOYVYiSnxiIprB8kpeGn+v8U2mZD8FjxzTpybKjqtqwQ5Od5g2yGyq4Xsued3UeHSvsW3IlUZLZ8L5xSctmCHLRMliCBgN/AJcV7F6SpbjBe8gUWkUaimLeBzmOUsU2JltOMkcbd+JQiNkYB8ErNVbPe0Nmq72i4kXMiwNUnfe+AcOJfgfCWbbVkoQQTiR2xvivPKynODNX0ULF9AGoVq2gL+Lc4hWEaL2N/XTBWq2Qgic3BYled2+ekeVfOV51az0WKNF59DsIx2XbNVpmYkyPNsuyWSBBJYf+USKsxHnlvNRsu/8WXLaHfb2CtBcoD1Ir2CPJf/wxSt2xmkupGT9c6QtoCPNdO66FfJldGub8aK1KwEeY9tm8gB+2hI3jmdVLii/+RbBdktfHAsfpPIfSm4zcZcCZIjfJftiMQBO1IQQBrrn3qCRYZ20SOOMTLacbHrrRDjW5q1EjUzQbiTTzeIbEUgz+232XNne59RfX+CbLT9omW0iHFFCZJPPMr2W5EDdshzL1tKwfkzrNOqrrfi73CMYBntKzbGpATJL64X6RXWZRVtxlnP+VgaBZO2wEu/wzGatkAJUk+8zLZLZCuCdVoXciux+rhVuXYVMD7Dd7Hc9Va7bGyVIE0Amf3kaXnuIHm9qTwXhr/xmWAZbUXk+E4JsmAcZtsqcsAOee6Z7VS08lwY/sZngmW0W21MlSBNhLvY9onzCqtIxipUuKqf3L6iMfyNz4RO6+6zsWwJ+NRawNvep8S1IhMxucie+8VT0o+6PIqPiB17rG+lCtNqBPkl2wts14gbsCONwqVLzT8Fr7d6wcawZeBS60Hm1GSSTu+a6d5EY6cEyQ5/YLtf4oCd4iQ1ma3H/TZ2SpAWwLfZSqSYK0o2ZqQEaQ1AN32T1vs54yYbMyVIC+GBVuwyLLBL+kCr3rzb4oV/vdZ/jZESZHb8iqS9F5GFp2yMlCAtjCENgcZGCTI79rPdqWH4FO60sVGCKOh7bIc0DNM4ZGNCShAFEFKOsyDVARttTJQgGoJpPMb2Gw2DicFjGgYlyExYpyHQGChBZsfv2B5p4ft/xMZAoQSZFZso3TKo1VC2965QgpwQI2w3t+B932zvXaEEOSnuZtvbQve7196zQgkyZ6zXe1UoQWbH02zPtcB9PmfvVaEEmTeG9B6VIIrZ8RbbvU18f/fae1QoQRYMJKU81oT3dYwkJj1VguQOk9REaY2Pw4323hRKkEVjJ9vrTXQ/r9t7UihBaobr9V6UIIrZ8Wu2J5rgPp6w96JQgtQcG2jmhGl5QWzvQaEEqQsOst2WY/9vs/egUILUtZIN59Dv4ZyTWwmSEyDnUx7luRtJar4qJUjT4RdsL+bI3xetzwolSMOwTn1Vgihmx2tsD+XAz4esrwolSMPxLZK9XGPS+qhQgmSCo2xbBPu3xfqoUIJkhh+yvSPQr3esbwolSOYYUp+UIIrZ8SzbM4L8ecb6pFCC6BNbWw8lSB7wLtt2AX5st74olCDikPWskfRZNSVIi2OKst2+c5P1QaEEEYuH2V7N4Lqv2msrlCDisa5FrqkEUSwIL7E93sDrPW6vqVCC5AaN0l/kVZ+iBGlxfMR2awOuc6u9lkIJkjvcwXagjuc/YK+hUILkEgnVdxeRDfYaCiVIbvEk2546nHePPbdCCZJ7rMvJORVKkEzwBtuOGp5vhz2nQgnSNMBu6uM1OM84Nedu80qQFscY1SYfx2Z7LoUSpOlwH9ubi/j9m/YcCiWIDth1YK4EaUU8z7Z7Ab/bbX+rUII0PdY36DcKJUgu8R7btnkcv83+RqEEaRncwnZkDscdsccqlCAthQrbDXM47gZ7rEIJ0nJ4lO2VE3z/ij1GoQRpWaxb4HcKJUhL4GW2XTN8vst+p1CCtDw+Oc6Y6/hEoQRpCRxm23rcv7fazxRKEIXFXZRuwBDZvxUC4GsIREHflguDkyQqaVYotIulUChBFAoliEKhBFEolCAKhRJEoVCCKBRKEIVCCaJQKJQgCoUSRKFQgigUShCFIhP8vwADACog5YM65zugAAAAAElFTkSuQmCC" />)</a>
-                <span id="icon006" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/vue" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera and images in a Next.js
-                        Application." target="_blank"><a class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/next#readme">
-                    Hello World in
-                    Next.js (<svg width="30px" height="17px" viewBox="0 0 207 124" version="1.1"
-                        xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-                        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-                            <g id="Black-Next.js" transform="translate(-247.000000, -138.000000)" fill="#000000"
-                                fill-rule="nonzero">
-                                <g id="next-black" transform="translate(247.000000, 138.000000)">
-                                    <g id="EXT-+-Type-something">
-                                        <path
-                                            d="M48.9421964,32.6320058 L87.9011585,32.6320058 L87.9011585,35.7136421 L52.5134345,35.7136421 L52.5134345,58.9070103 L85.7908813,58.9070103 L85.7908813,61.9886466 L52.5134345,61.9886466 L52.5134345,87.4526941 L88.306981,87.4526941 L88.306981,90.5343303 L48.9421964,90.5343303 L48.9421964,32.6320058 Z M91.3912326,32.6320058 L95.5306221,32.6320058 L113.8738,58.0960534 L132.622801,32.6320058 L158.124498,0.286809811 L116.22757,60.7722112 L137.817329,90.5343303 L133.51561,90.5343303 L113.8738,63.4483691 L94.1508254,90.5343303 L89.9302715,90.5343303 L111.682358,60.7722112 L91.3912326,32.6320058 Z M139.359455,35.713642 L139.359455,32.6320058 L183.756439,32.6320058 L183.756439,35.7136421 L163.302983,35.7136421 L163.302983,90.5343303 L159.731745,90.5343303 L159.731745,35.7136421 L139.359455,35.713642 Z"
-                                            id="EXT"></path>
-                                        <polygon id="Type-something"
-                                            points="0.202923647 32.6320058 4.66697141 32.6320058 66.2235778 124.303087 40.785176 90.5343303 3.93649086 37.0111732 3.77416185 90.5343303 0.202923647 90.5343303">
-                                        </polygon>
-                                    </g>
-                                    <path
-                                        d="M183.396622,86.5227221 C184.134938,86.5227221 184.673474,85.9601075 184.673474,85.233037 C184.673474,84.5059658 184.134938,83.9433513 183.396622,83.9433513 C182.666993,83.9433513 182.11977,84.5059658 182.11977,85.233037 C182.11977,85.9601075 182.666993,86.5227221 183.396622,86.5227221 Z M186.905793,83.1297235 C186.905793,85.2763149 188.460599,86.678523 190.727662,86.678523 C193.142388,86.678523 194.601647,85.233037 194.601647,82.7229099 L194.601647,73.8855335 L192.655968,73.8855335 L192.655968,82.7142542 C192.655968,84.1078073 191.952397,84.8521899 190.710289,84.8521899 C189.598473,84.8521899 188.842785,84.1597409 188.816727,83.1297235 L186.905793,83.1297235 Z M197.146664,83.0172011 C197.285642,85.2503478 199.153145,86.678523 201.932686,86.678523 C204.903321,86.678523 206.762139,85.1811034 206.762139,82.792155 C206.762139,80.9138876 205.702439,79.8752151 203.131364,79.2779777 L201.750279,78.9404092 C200.117298,78.5595622 199.457158,78.0488813 199.457158,77.1573541 C199.457158,76.0321243 200.482113,75.296398 202.019547,75.296398 C203.478806,75.296398 204.48639,76.0148135 204.668797,77.1660091 L206.562359,77.1660091 C206.44944,75.0626962 204.590622,73.5825873 202.045605,73.5825873 C199.309495,73.5825873 197.48542,75.0626962 197.48542,77.2871878 C197.48542,79.1221767 198.519063,80.2127835 200.786126,80.7407758 L202.401734,81.1302779 C204.060773,81.5197807 204.790402,82.091051 204.790402,83.0431676 C204.790402,84.1510859 203.643842,84.9560573 202.08035,84.9560573 C200.403939,84.9560573 199.240006,84.2030196 199.074971,83.0172011 L197.146664,83.0172011 Z"
-                                        id=".JS"></path>
-                                </g>
-                            </g>
-                        </g>
-                    </svg>)</a><span id="icon007" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/next" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera and images in a NuxtJS
-                        Application."><a class="button title" target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/nuxt#readme">
-                    Hello World in
-                    NuxtJS (<svg width="20px" height="17px" xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 400 400">
-                        <g fill-rule="nonzero" transform="translate(0 50)" fill="none">
-                            <path
-                                d="M227.92099 83.45116l-13.6889 24.10141-46.8148-82.44693L23.7037 278.17052h97.3037c0 13.31084 10.61252 24.10142 23.70371 24.10142H23.70371c-8.46771 0-16.29145-4.59601-20.5246-12.05272-4.23315-7.4567-4.23272-16.64312.00114-24.0994L146.89383 13.05492c4.23415-7.45738 12.0596-12.05138 20.5284-12.05138 8.46878 0 16.29423 4.594 20.52839 12.05138l39.97037 70.39623z"
-                                fill="#00C58E" />
-                            <path
-                                d="M331.6642 266.11981l-90.05432-158.56724-13.6889-24.10141-13.68888 24.10141-90.04445 158.56724c-4.23385 7.45629-4.23428 16.64271-.00113 24.09941 4.23314 7.4567 12.05689 12.05272 20.5246 12.05272h166.4c8.46946 0 16.29644-4.591 20.532-12.04837 4.23555-7.45736 4.23606-16.64592.00132-24.10376h.01976zM144.7111 278.17052L227.921 131.65399l83.19012 146.51653h-166.4z"
-                                fill="#2F495E" />
-                            <path
-                                d="M396.04938 290.22123c-4.23344 7.45557-12.05656 12.0507-20.52345 12.0507H311.1111c13.0912 0 23.7037-10.79057 23.7037-24.10141h40.66173L260.09877 74.98553l-18.4889 32.56704L227.921 83.45116l11.65432-20.51634c4.23416-7.45738 12.0596-12.05138 20.5284-12.05138 8.46879 0 16.29423 4.594 20.52839 12.05138l115.41728 203.185c4.23426 7.457 4.23426 16.6444 0 24.1014z"
-                                fill="#108775" />
-                        </g>
-                    </svg>)</a><span id="icon008" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/nuxt" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera and images in a Electron
-                        Application."><a class="button title" target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/electron#readme">
-                    Hello World in
-                    Electron (<img alt="Electron logo"
-                        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAABmJLR0QA/wD/AP+gvaeTAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE5LTAzLTMxVDIzOjUxOjI3KzAwOjAwzwUHXwAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOS0wMy0zMVQyMzo1MToyNyswMDowML5Yv+MAAANzSURBVDhPdZRtTFtlFMd/vbe0aymUQh1gmakjE4GhLkt0i1OBbUxXkYFbzAzGaNTEMP1gMrfMTDGonzf3kmX4zbcP7sXBkL2AG27OGESNcYVukGVAHUIUWgT6Xs9zByEz8dzcPDfPec7/+Z9z/uea0mL8x46faKej8xx+f4BQKIzTmU1ZaQm+zTU821A7f2rR7gC5cPES2xtfQ9c07HYbpFJY7XZis7OkNZ1ZWZOy98WnR6muemw+CrT5lYOHW6mrbyTXlYNLXl32VtZs4uHntlPy+BOQiBv7yr+loZEDh1pvB4oZTBQDBbBsmYdkPE46lVQuHG43q7bUk4hEuPFTL7f6/Wi6GT0jg5GRIKdOfk5V5brbIAWeUrnFKbRnKN+4CZfHw1/Dw/R3d5GIRVnicFDz1k6unj2D3eWi/9suLJlZTE1OcSvYj17xwOrms+e60SXXuvdbGOju5vql75gMjlK2fgMPPl0roEXc7OsTciamJyaobnpDznWh+Hq996BnZuU1j46MUvzIGoZ/6WMsMEB2fj7rd7zJ4JXv+f1MJ+OD1w1QBfhbZ4dgmbDY7ETCYWKxOJpqo9VqZWJokIL77sezsoLVDVs51fwufw/fJJVMYha/ZjYb9TLJk+e91wC1WC34+wNo4elpKZbOzOQk0Zl/8FRU0HVgP/acHCNwV89lEtEoiBKUGDJsNhy5ucTm5tBECuGwxGdnZ4kzTSqRYOmKFaTkNgWq9tTNfcePGW1U9VBdW1pcTM/RI5KOzTij4rWyshKikShur1dq8jO/trdR3/KhkYICuXDkkPEtVNCF2VggYDBLxGLExa/iNd9TNUyHQixfs1ZEVWkcPrb7bR6qfYZ1L70slHWDejqZEr3FjRo9uXMX5Rs2Ep4KGaNg6MR913Ie3baNovJyzu/fh7OwEEeem7EBP2tfeFHSUKnJzcIgU3Riczq50dvLj21tTIwPLSj2Mj7fVjyFBVhkVqIzM/h27+Hr9/ZitlgkOMKqunqGfrgirGSOhFVwbJyOjq8WFavqdvDwJ+x5p4WioruNTqjCVb7eRKDnIqVV1XR9vM+ogxqH0eAffPTBXnY0vaJCF0GUKUbPN75qtM62xEpaOpYvHfvz2jVMGRbmZIbUFH/5WavBYMHuAFmwEyfbOf3NefxXB5iS4uXIXP3//wT+Bb4xmi8orIo3AAAAAElFTkSuQmCC">)</a>
-                <span id="icon009" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/electron" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera in a progressive web application."><a class="button title" href="https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/hello-world/pwa/helloworld-pwa.html">Hello World in
-                    PWA</a><span id="icon010" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/pwa" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera in a web application that uses RequireJS."><a class="button title" href="https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/hello-world/requirejs.html">Hello
-                    World with
-                    RequireJS</a><span id="icon011" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/foundational-api-samples/hello-world/requirejs.html" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera in a web application that uses ES6."><a class="button title" href="https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/hello-world/es6.html">Hello
-                    World with
-                    ES6</a><span id="icon012" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/es6.html" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera in WebView." target="_blank"><a class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/webview">
-                Hello World in
-                WebView </a><span id="icon007" class="tooltipIcon"></span>
-            <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/webview" title="Check code on GitHub"></a></span>
-        </div>
-        </div>
-        <div class="file">Use Case</div>
-        <div class="children">
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="up" aria-label="Read barcodes to fill a form."><a class="button title" href="https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/use-case/fill-a-form-with-barcode-reading.html">Read Video and
-                    Fill a
-                    Form</a><span id="icon041" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/foundational-api-samples/use-case/fill-a-form-with-barcode-reading.html" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="up" aria-label="Read the PDF417 barcode on a driver's
-                license (AAMVA compliant) and parse it."><a class="button title" href="https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/use-case/read-a-drivers-license/index.html">Read a
-                    Driver's License</a><span id="icon042" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/foundational-api-samples/use-case/read-a-drivers-license/index.html" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="up" aria-label="Read barcodes from camera and show result texts on the video."><a class="button title" href="https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/use-case/show-result-texts-on-the-video.html">Show Result Texts on the Video</a><span id="icon042" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/foundational-api-samples/use-case/show-result-texts-on-the-video.html" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="up" aria-label="Locate an item quickly by scanning barcodes."><a class="button title" href="https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/use-case/locate-an-item-with-barcode/index.html">Find Item via Barcode</a><span id="icon042" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/foundational-api-samples/use-case/locate-an-item-with-barcode/index.html" title="Check code on GitHub"></a></span>
-            </div>
-        </div>
-        <div class="file">Others</div>
-        <div class="children">
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="up" aria-label="Collect image frames which failed to be read for debugging purposes."><a class="button title" target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/others/debug">Collect
-                    Images for Debugging</a><span id="icon051" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/others/debug" title="Check code on GitHub"></a></span>
-            </div>
-        </div>
-    </div>
-    <div class="file"><span data-balloon-length="large" data-balloon-pos="up" aria-label="Official demo for Dynamsoft Barcode Reader JavaScript Edition"><a class="button title" href="https://demo.dynamsoft.com/barcode-reader-js/" target="_blank">Official Online Demo</a>
-        <span id="icon051" class="tooltipIcon"></span>
-        <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-demo" title="Check code on GitHub"></a></span>
-    </div>
-</div>
\ No newline at end of file
diff --git a/programming/javascript/samples-demos/index.md b/programming/javascript/samples-demos/index.md
index 17a9e31f..f4671783 100644
--- a/programming/javascript/samples-demos/index.md
+++ b/programming/javascript/samples-demos/index.md
@@ -7,319 +7,182 @@ breadcrumbText: Samples and Demos
 noTitleIndex: true
 needAutoGenerateSidebar: false
 ---
-<style>
-    /* balloon.min.css Used for tooltip styling */
-    :root{--balloon-border-radius: 2px;--balloon-color: rgba(16,16,16,0.95);--balloon-text-color: #fff;--balloon-font-size: 12px;--balloon-move: 4px}button[aria-label][data-balloon-pos]{overflow:visible}[aria-label][data-balloon-pos]{position:relative;cursor:pointer}[aria-label][data-balloon-pos]:after{opacity:0;pointer-events:none;transition:all 0.18s ease-out 0.18s;text-indent:0;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;font-weight:normal;font-style:normal;text-shadow:none;font-size:var(--balloon-font-size);background:var(--balloon-color);border-radius:2px;color:var(--balloon-text-color);border-radius:var(--balloon-border-radius);content:attr(aria-label);padding:.5em 1em;position:absolute;white-space:nowrap;z-index:10}[aria-label][data-balloon-pos]:before{width:0;height:0;border:5px solid transparent;border-top-color:var(--balloon-color);opacity:0;pointer-events:none;transition:all 0.18s ease-out 0.18s;content:"";position:absolute;z-index:10}[aria-label][data-balloon-pos]:hover:before,[aria-label][data-balloon-pos]:hover:after,[aria-label][data-balloon-pos][data-balloon-visible]:before,[aria-label][data-balloon-pos][data-balloon-visible]:after,[aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:before,[aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:after{opacity:1;pointer-events:none}[aria-label][data-balloon-pos].font-awesome:after{font-family:FontAwesome, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif}[aria-label][data-balloon-pos][data-balloon-break]:after{white-space:pre}[aria-label][data-balloon-pos][data-balloon-break][data-balloon-length]:after{white-space:pre-line;word-break:break-word}[aria-label][data-balloon-pos][data-balloon-blunt]:before,[aria-label][data-balloon-pos][data-balloon-blunt]:after{transition:none}[aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:after,[aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:after,[aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:after,[aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:after{transform:translate(-50%, 0)}[aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:before,[aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:before,[aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:before,[aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:before{transform:translate(-50%, 0)}[aria-label][data-balloon-pos][data-balloon-pos*="-left"]:after{left:0}[aria-label][data-balloon-pos][data-balloon-pos*="-left"]:before{left:5px}[aria-label][data-balloon-pos][data-balloon-pos*="-right"]:after{right:0}[aria-label][data-balloon-pos][data-balloon-pos*="-right"]:before{right:5px}[aria-label][data-balloon-pos][data-balloon-po*="-left"]:hover:after,[aria-label][data-balloon-pos][data-balloon-po*="-left"][data-balloon-visible]:after,[aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:after,[aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:after{transform:translate(0, 0)}[aria-label][data-balloon-pos][data-balloon-po*="-left"]:hover:before,[aria-label][data-balloon-pos][data-balloon-po*="-left"][data-balloon-visible]:before,[aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:before,[aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:before{transform:translate(0, 0)}[aria-label][data-balloon-pos][data-balloon-pos^="up"]:before,[aria-label][data-balloon-pos][data-balloon-pos^="up"]:after{bottom:100%;transform-origin:top;transform:translate(0, var(--balloon-move))}[aria-label][data-balloon-pos][data-balloon-pos^="up"]:after{margin-bottom:10px}[aria-label][data-balloon-pos][data-balloon-pos="up"]:before,[aria-label][data-balloon-pos][data-balloon-pos="up"]:after{left:50%;transform:translate(-50%, var(--balloon-move))}[aria-label][data-balloon-pos][data-balloon-pos^="down"]:before,[aria-label][data-balloon-pos][data-balloon-pos^="down"]:after{top:100%;transform:translate(0, calc(var(--balloon-move) * -1))}[aria-label][data-balloon-pos][data-balloon-pos^="down"]:after{margin-top:10px}[aria-label][data-balloon-pos][data-balloon-pos^="down"]:before{width:0;height:0;border:5px solid transparent;border-bottom-color:var(--balloon-color)}[aria-label][data-balloon-pos][data-balloon-pos="down"]:after,[aria-label][data-balloon-pos][data-balloon-pos="down"]:before{left:50%;transform:translate(-50%, calc(var(--balloon-move) * -1))}[aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:after,[aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:after,[aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:after,[aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:after{transform:translate(0, -50%)}[aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:before,[aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:before,[aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:before,[aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:before{transform:translate(0, -50%)}[aria-label][data-balloon-pos][data-balloon-pos="left"]:after,[aria-label][data-balloon-pos][data-balloon-pos="left"]:before{right:100%;top:50%;transform:translate(var(--balloon-move), -50%)}[aria-label][data-balloon-pos][data-balloon-pos="left"]:after{margin-right:10px}[aria-label][data-balloon-pos][data-balloon-pos="left"]:before{width:0;height:0;border:5px solid transparent;border-left-color:var(--balloon-color)}[aria-label][data-balloon-pos][data-balloon-pos="right"]:after,[aria-label][data-balloon-pos][data-balloon-pos="right"]:before{left:100%;top:50%;transform:translate(calc(var(--balloon-move) * -1), -50%)}[aria-label][data-balloon-pos][data-balloon-pos="right"]:after{margin-left:10px}[aria-label][data-balloon-pos][data-balloon-pos="right"]:before{width:0;height:0;border:5px solid transparent;border-right-color:var(--balloon-color)}[aria-label][data-balloon-pos][data-balloon-length]:after{white-space:normal}[aria-label][data-balloon-pos][data-balloon-length="small"]:after{width:80px}[aria-label][data-balloon-pos][data-balloon-length="medium"]:after{width:150px}[aria-label][data-balloon-pos][data-balloon-length="large"]:after{width:260px}[aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after{width:380px}@media screen and (max-width: 768px){[aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after{width:90vw}}[aria-label][data-balloon-pos][data-balloon-length="fit"]:after{width:100%}
-</style>
-<style>
-    .filetree {
-        text-align: left;
-        background-color: #fafafa;
-        border: 4px solid #dbdbdb;
-        border-radius: 4px;
-        margin: 0 auto;
-        max-width: 800px;
-        padding: 16px 32px;
-    }
-    
-    .filetree .ds-logo {
-        height: 3vh;
-        background: url(logo-dynamsoft-black.svg) no-repeat 0;
-    }
-    
-    .filetree h3 {
-        margin: 1vh auto;
-    }
-    
-    .filetree .file {
-        display: block;
-        font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
-        letter-spacing: 0.3px;
-        line-height: 32px;
-        color: #333;
-    }
-    
-    .filetree .children {
-        padding-left: 24px;
-        position: relative;
-    }
-    
-    .filetree .children .file {
-        position: relative;
-    }
-    
-    .filetree .children .file::before {
-        content: '';
-        left: -18px;
-        bottom: 16px;
-        width: 16px;
-        height: 20px;
-        position: absolute;
-        border-width: 0 0 1px 1px;
-        border-style: solid;
-        border-color: #dbdbdb;
-        border-radius: 0 0 0 3px;
-    }
-    
-    .filetree .button.title {
-        line-height: 15px;
-    }
-    
-    .filetree .title img,
-    .filetree .title svg {
-        height: 17px;
-        vertical-align: middle;
-    }
-    
-    .filetree .tooltipIcon {
-        display: inline-block;
-        width: 17px;
-        height: 17px;
-        vertical-align: middle;
-        background-size: 100%;
-        margin-left: 5px;
-        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAg5JREFUOBGVkktrE2EUhjuTSUJwExCColSwFAIFaZFSwaZ0abx110rugf4Ef0Drr3AxaTKJZNFSNwYDJbgxblQQN22xFFpF0J07Dbn1OaFnGMciZOCb833vec/9GBMXfNlstmCa5n3DMBKoDznx4XDYBmuUy2XHb2J4gWKxuAB5h2Nj0EbuVyqVH4VC4UogEJjpdruL4Nl+v/+kVqt9VFvXSSqVuhEKhXYty3pg2/ZPJfhlJpO5isPXBFipVqtfXb1kkM/nXc+u4j8X+J84t4ViyU9KCAaD83L3ful0+jqZvaQ3S5T1x6vD5iH4W7CbxnkTJx3HeeYl6V3KrNfrp/r2Snq1wfvYkikMBoPnXqXcISSIttTr9f6ZhnKl+diumzJGGrWvCpXgQQiXKPOFYn5JgAMCLZooDmWMfgL78CYajW6C3/Hr9M10vhPsSJzEZQ9UMY7M5XLXyGTa5NeWRRrHWLlMboZMZJPNhmyiKsaRbO5d+vJqtLEszREZLUuNXifJZDIci8VanU5nLRKJBOjTN9VTyiQJ7NHPuPRkgscKabWUoLLZbHbQPQ2Hww6TshUXCd4Ceyz3USZywfNlHH0go3tk9EWwiz6GEAff49wii1/CcZ3Ig7KmEFuc9zj7TLQ2zftN3RGwBJFnCTQHViyVSqdgo+8vJwoS7RFOVnlPYbSAfMc5wck2WTaUp/IMAjTZicjWFTcAAAAASUVORK5CYII=) right center no-repeat;
-    }
-    
-    .filetree .github {
-        display: inline-block;
-        width: 17px;
-        height: 17px;
-        vertical-align: middle;
-        background-size: 100%;
-        margin-left: 5px;
-        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAALISURBVDhPhZNrSNNRGMafzamVW8s0nWbetSw0wWtFIQlBoFTohzKioqK+VEJBhbm+BVnQByPICgksy+blgxeqeQntoqikhppadjG1i7Q5t0Ur38553QaG0A/Ozt7nvOc577n8QQtQUvaQ0rPySBkST1CHcp+WtYdulFU4M+Yzz8RQ+5jgHcQTao0tZLPbWbfbf1Jd41NKz84jeAVRZd0T1l24TfSXiwnaCOobGHIqC9M3OCzywklfVOxUnCaGOlHB0gj65XCw+D8cjt+8YGX9XEVsIrfQ0/+GhUvXb1NGzgGa/DZF3X39VPOoibp6++nL9ynKyD1IRWJc0ivy4R3M/1Uldw1IztyChLhYSIZHP6KluRW6mBRAqRBNCczOikYcx0SGcl68yE/J3Iyb9wxQlj6oRuGJozwgGRoZhadGDU2APzT+ftAs953rRSz1oZH3zkzgfP4xlN6vhkJen2ngBTRqH3ye/IqQ6CSog4OgUIgq/kFUjpnxCYyNdGGlLgCWGSt8126EctY0zQYSKUKlWtBAwrqHCharjWM574/JLHbsuxQms4XF1VERIslDHIE4gwVgXSyyJiqc4x9mMzyWaaFMTYyHse0li3KhwnMnYf00DqvNxuVLZG+12VkvOHOcNUljWzvSxHzIJ564LUfeFJ29eJX7552v6PBpPflEJ3NbEp1E+/MLqPlZB4+7SMjcReJ2nO/ES8fvxDxtoZDkrZwgY+jiSB2TQlgRS2MTk6y76Oju5fclYRP58uSHJrlTUUMIjCPPsPW0ODKJNLGpBL9oamhq5XGJ2BrBZxVVNRg5ZhPJhSvX2Gjw7SjHckuygjmTGGpt72a9s+c1G+hFvgu3iaSq3khYFEybdu6jQ6f0hOB1c9sRvYw3ZO8leAa6vxkXCvnjPGw3t8orUV5Tj+F3H/j6tVoNYiPDsHvHdhzJy3VmuQD+AtcedHvcbgpyAAAAAElFTkSuQmCC);
-    }
-</style>
+
 <div class="filetree">
-    <a href="https://www.dynamsoft.com/" target="_blank">
-        <div class="ds-logo"></div>
-    </a>
+    <div class="ds-logo"></div>
     <div class="file">
-        <h3>BarcodeScanner API Samples</h3>
-    </div>
-    <div class="children">
-        <div class="file">Scan Single Barcode</div>
-        <div class="children">
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Minimum necessary 
-                JavaScript code to scan a barcode from camera."><a class="button title" href="https://demo.dynamsoft.com/Samples/DBR/JS/barcode-scanner-api-samples/scan-single-barcode/hello-world.html">Hello World</a><span id="icon001" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/barcode-scanner-api-samples/scan-single-barcode/hello-world.html" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Scan a product barcode
-                and simulate a search from a product database."><a class="button title" href="https://demo.dynamsoft.com/Samples/DBR/JS/barcode-scanner-api-samples/scan-single-barcode/scan-and-search.html">Scan and Search</a><span id="icon001" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/barcode-scanner-api-samples/scan-single-barcode/scan-and-search.html" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Pick one and auto-fill
-                fields by simply opening the camera and scanning a group of barcodes."><a class="button title" href="https://demo.dynamsoft.com/Samples/DBR/JS/barcode-scanner-api-samples/scan-single-barcode/pick-one-to-fill/index.html">Pick One to Fill</a><span id="icon001" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/barcode-scanner-api-samples/scan-single-barcode/pick-one-to-fill/index.html" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Use different customized
-                templates for scanning various barcode types."><a class="button title" href="https://demo.dynamsoft.com/Samples/DBR/JS/barcode-scanner-api-samples/scan-single-barcode/use-customized-template/index.html">Use Customized Template</a><span id="icon001" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/barcode-scanner-api-samples/scan-single-barcode/use-customized-template/index.html" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera and images in an Angular
-                Application."><a class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/angular">Hello World in
-                    Angular (<img alt="Angular logo"
-                        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==" />)</a>
-                <span id="icon003" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/angular" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera and images in a React
-                Application."><a class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/react">
-                    Hello World in
-                    React (<img alt="React logo"
-                        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4NDEuOSA1OTUuMyI+PGcgZmlsbD0iIzYxREFGQiI+PHBhdGggZD0iTTY2Ni4zIDI5Ni41YzAtMzIuNS00MC43LTYzLjMtMTAzLjEtODIuNCAxNC40LTYzLjYgOC0xMTQuMi0yMC4yLTEzMC40LTYuNS0zLjgtMTQuMS01LjYtMjIuNC01LjZ2MjIuM2M0LjYgMCA4LjMuOSAxMS40IDIuNiAxMy42IDcuOCAxOS41IDM3LjUgMTQuOSA3NS43LTEuMSA5LjQtMi45IDE5LjMtNS4xIDI5LjQtMTkuNi00LjgtNDEtOC41LTYzLjUtMTAuOS0xMy41LTE4LjUtMjcuNS0zNS4zLTQxLjYtNTAgMzIuNi0zMC4zIDYzLjItNDYuOSA4NC00Ni45Vjc4Yy0yNy41IDAtNjMuNSAxOS42LTk5LjkgNTMuNi0zNi40LTMzLjgtNzIuNC01My4yLTk5LjktNTMuMnYyMi4zYzIwLjcgMCA1MS40IDE2LjUgODQgNDYuNi0xNCAxNC43LTI4IDMxLjQtNDEuMyA0OS45LTIyLjYgMi40LTQ0IDYuMS02My42IDExLTIuMy0xMC00LTE5LjctNS4yLTI5LTQuNy0zOC4yIDEuMS02Ny45IDE0LjYtNzUuOCAzLTEuOCA2LjktMi42IDExLjUtMi42Vjc4LjVjLTguNCAwLTE2IDEuOC0yMi42IDUuNi0yOC4xIDE2LjItMzQuNCA2Ni43LTE5LjkgMTMwLjEtNjIuMiAxOS4yLTEwMi43IDQ5LjktMTAyLjcgODIuMyAwIDMyLjUgNDAuNyA2My4zIDEwMy4xIDgyLjQtMTQuNCA2My42LTggMTE0LjIgMjAuMiAxMzAuNCA2LjUgMy44IDE0LjEgNS42IDIyLjUgNS42IDI3LjUgMCA2My41LTE5LjYgOTkuOS01My42IDM2LjQgMzMuOCA3Mi40IDUzLjIgOTkuOSA1My4yIDguNCAwIDE2LTEuOCAyMi42LTUuNiAyOC4xLTE2LjIgMzQuNC02Ni43IDE5LjktMTMwLjEgNjItMTkuMSAxMDIuNS00OS45IDEwMi41LTgyLjN6bS0xMzAuMi02Ni43Yy0zLjcgMTIuOS04LjMgMjYuMi0xMy41IDM5LjUtNC4xLTgtOC40LTE2LTEzLjEtMjQtNC42LTgtOS41LTE1LjgtMTQuNC0yMy40IDE0LjIgMi4xIDI3LjkgNC43IDQxIDcuOXptLTQ1LjggMTA2LjVjLTcuOCAxMy41LTE1LjggMjYuMy0yNC4xIDM4LjItMTQuOSAxLjMtMzAgMi00NS4yIDItMTUuMSAwLTMwLjItLjctNDUtMS45LTguMy0xMS45LTE2LjQtMjQuNi0yNC4yLTM4LTcuNi0xMy4xLTE0LjUtMjYuNC0yMC44LTM5LjggNi4yLTEzLjQgMTMuMi0yNi44IDIwLjctMzkuOSA3LjgtMTMuNSAxNS44LTI2LjMgMjQuMS0zOC4yIDE0LjktMS4zIDMwLTIgNDUuMi0yIDE1LjEgMCAzMC4yLjcgNDUgMS45IDguMyAxMS45IDE2LjQgMjQuNiAyNC4yIDM4IDcuNiAxMy4xIDE0LjUgMjYuNCAyMC44IDM5LjgtNi4zIDEzLjQtMTMuMiAyNi44LTIwLjcgMzkuOXptMzIuMy0xM2M1LjQgMTMuNCAxMCAyNi44IDEzLjggMzkuOC0xMy4xIDMuMi0yNi45IDUuOS00MS4yIDggNC45LTcuNyA5LjgtMTUuNiAxNC40LTIzLjcgNC42LTggOC45LTE2LjEgMTMtMjQuMXpNNDIxLjIgNDMwYy05LjMtOS42LTE4LjYtMjAuMy0yNy44LTMyIDkgLjQgMTguMi43IDI3LjUuNyA5LjQgMCAxOC43LS4yIDI3LjgtLjctOSAxMS43LTE4LjMgMjIuNC0yNy41IDMyem0tNzQuNC01OC45Yy0xNC4yLTIuMS0yNy45LTQuNy00MS03LjkgMy43LTEyLjkgOC4zLTI2LjIgMTMuNS0zOS41IDQuMSA4IDguNCAxNiAxMy4xIDI0IDQuNyA4IDkuNSAxNS44IDE0LjQgMjMuNHpNNDIwLjcgMTYzYzkuMyA5LjYgMTguNiAyMC4zIDI3LjggMzItOS0uNC0xOC4yLS43LTI3LjUtLjctOS40IDAtMTguNy4yLTI3LjguNyA5LTExLjcgMTguMy0yMi40IDI3LjUtMzJ6bS03NCA1OC45Yy00LjkgNy43LTkuOCAxNS42LTE0LjQgMjMuNy00LjYgOC04LjkgMTYtMTMgMjQtNS40LTEzLjQtMTAtMjYuOC0xMy44LTM5LjggMTMuMS0zLjEgMjYuOS01LjggNDEuMi03Ljl6bS05MC41IDEyNS4yYy0zNS40LTE1LjEtNTguMy0zNC45LTU4LjMtNTAuNiAwLTE1LjcgMjIuOS0zNS42IDU4LjMtNTAuNiA4LjYtMy43IDE4LTcgMjcuNy0xMC4xIDUuNyAxOS42IDEzLjIgNDAgMjIuNSA2MC45LTkuMiAyMC44LTE2LjYgNDEuMS0yMi4yIDYwLjYtOS45LTMuMS0xOS4zLTYuNS0yOC0xMC4yek0zMTAgNDkwYy0xMy42LTcuOC0xOS41LTM3LjUtMTQuOS03NS43IDEuMS05LjQgMi45LTE5LjMgNS4xLTI5LjQgMTkuNiA0LjggNDEgOC41IDYzLjUgMTAuOSAxMy41IDE4LjUgMjcuNSAzNS4zIDQxLjYgNTAtMzIuNiAzMC4zLTYzLjIgNDYuOS04NCA0Ni45LTQuNS0uMS04LjMtMS0xMS4zLTIuN3ptMjM3LjItNzYuMmM0LjcgMzguMi0xLjEgNjcuOS0xNC42IDc1LjgtMyAxLjgtNi45IDIuNi0xMS41IDIuNi0yMC43IDAtNTEuNC0xNi41LTg0LTQ2LjYgMTQtMTQuNyAyOC0zMS40IDQxLjMtNDkuOSAyMi42LTIuNCA0NC02LjEgNjMuNi0xMSAyLjMgMTAuMSA0LjEgMTkuOCA1LjIgMjkuMXptMzguNS02Ni43Yy04LjYgMy43LTE4IDctMjcuNyAxMC4xLTUuNy0xOS42LTEzLjItNDAtMjIuNS02MC45IDkuMi0yMC44IDE2LjYtNDEuMSAyMi4yLTYwLjYgOS45IDMuMSAxOS4zIDYuNSAyOC4xIDEwLjIgMzUuNCAxNS4xIDU4LjMgMzQuOSA1OC4zIDUwLjYtLjEgMTUuNy0yMyAzNS42LTU4LjQgNTAuNnpNMzIwLjggNzguNHoiLz48Y2lyY2xlIGN4PSI0MjAuOSIgY3k9IjI5Ni41IiByPSI0NS43Ii8+PHBhdGggZD0iTTUyMC41IDc4LjF6Ii8+PC9nPjwvc3ZnPg==" />)</a>
-                <span id="icon004" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/react" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera and images in a Vue 3
-                                Application."><a class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/vue">
-                    Hello World in
-                    Vue (<img alt="Vue logo"
-                        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTk2QkI4RkE3NjE2MTFFNUE4NEU4RkIxNjQ5MTYyRDgiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTk2QkI4Rjk3NjE2MTFFNUE4NEU4RkIxNjQ5MTYyRDgiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjU2QTEyNzk3NjkyMTFFMzkxODk4RDkwQkY4Q0U0NzYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjU2QTEyN0E3NjkyMTFFMzkxODk4RDkwQkY4Q0U0NzYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5WHowqAAAXNElEQVR42uxda4xd1XVe53XvvD2eGQ/lXQcKuDwc2eFlCAGnUn7kT6T86J/+aNTgsWPchJJYciEOCQ8hF+G0hFCIHRSEqAuJBCqRaUEIEbmBppAIBGnESwZje8COZ+y587j3PLq+ffadGJix53HvPevcuz60xPjec89ZZ+39nf04+9vLSZKEFArFzHA1BAqFEkShUIIoFEoQhUIJolAoQRQKJYhCoQRRKJQgCoUSRKFQKEEUCiWIQrFo+Gv/8/YH+f/nsMWSHHMChyhxqPTTdyncWyJ3ScD/ztipiB3wXSqu6P17avN+TyFC5ggv4tRnmoxWTP1+5F+Mz17GPvPl49EKBWd3UsfXllPiso8VcYtmPba3fNuKrBVXrGFCbrdPwXndFL49ltI367roOpSUI4pGypv9s7q+ltj6JxqOQ07Bo/DgxGb2/a8cX0CnAWXJ5etz2TqdHiXHKlKj9w6i9XX8Ic41DmI8FVHhmmXk85MmRhCzJoiTWnig9LfJRHihgydxzAxJhBr7Bh/hK3yu+p9568FliTJF2aKMZfVd/kQOcKP6OBmS9+Rjm4zJ6faoeN0gOUn61MncLX4CJ+MRhe+P/dRxhfew2Df4CF/hs4jWg8vQYUKYMuWyRRkLjeHQ8YP0Z9mekVjA8Qj3VVcuoeDiXu63lkUE0ym6FA5PXBaNVr7qtPumGyPR4Bt8hK/wWUR5chn6XJYoU5StUHL8l+XEx2axhkS6yk+chJuP4rXLyOkIKJkS0B67adcqfL/0Y4pixxSysK6V8Yl9Mz7i3272NRFlhzJsu24Z5l9E9Ahmwfrpoj7uw3fZtktsRZKjIXnndlLxin7+W8ZTBwPf6I+Tg9HwxK2Ob8citbCoBoaxBxMCvsFH+CqjHCtUvLzflKWUcpwB91gupG5f9/Rtx39ZZBtmWyJtphKzHTQW0diP36b4aJmcLj/zGaSkHJPb4SWFi/tOJd8bTqd9s48VBRh4RKeUX/vjgXg8cpyCmz05xkJylxSoa8M5RF0eJaVIIkGOsg2yTc3UgpD94psiWxEOqDNYoOIXuHnGwE5AXUTFi46FTnRw4l/dwEm7/pSxcYnCF/gE3zInh52RRJkVP7/MlKFQcgCbjifHTAQBfsb2qsgBO3e1Cpf3UXBej3nRJKKrxU/rcH/pKzz4vNIQuRJTEmZklbg6EL4SPsE3GQPzinmfhbJDGQolB+r8w58abs5y8DqRt4ABeptLRR7koY9NleybEYw/MPisvF/ayT1/SvDewcnIcG32wfiCAbEvoCZyGaGsitdyz6XdTctQJq6fcT5mloNfYvu5yFZkpEz+RT0UrFoqpxVBV+vQxIrkaPnrbqdvXs6hcjbU+Jq4Nvvwd/BFRNeq2npwWfkX95iyE9p6PM72P/MhCPANTBSKu5WITHcC074Y9CUTkYglKBgcV/aVtlM5Kpp/RHFjDdfka7MP/2wG6m72661QNigjlBXKTGBtsjWKNs5atCf44Uds3xc5YD8Wknd2BxWuGjCzIxLWQzlFj+IjU108OL7bafM5sm5DDdfka/8T+9AJXyTMpqFsUEYoK5SZ0NbjVlvX500Q4Ha2A+JuCcEvhVS8qp/8MzspHhMSfO7mVPaP35BMRp9JsCQldbX+hmvxNfnamzJfqVvtWnGZoGxQRigroYs6UbfvOGHn4ORVkTaIbEWwtqg3MNO+Zql0JGCdVuCayhDuG9uJB7vp+oR17FbZc+NauCauLWLmKkqXr6NsUEYoK6GtxwY6CXXnEs0n2faIHLCPhhR8bikFKwRN+xZddHWu5a7Ol9yCZ2ZwHKdOxufGNeKRqS/hmnLWW1VMmQSrl5oyEkqOPbZu02IJAsic9sU7B+5uF9cOmqUfeLOdOaAZYb/CA+M/Ic9NxUoYMNfD/PT84f7xB807EAnrrbgMUBZt1w1SEpCIqfjF1Om5EuQNth0iu1r8tPLP76LCpX2yWpHDk2dGH018p6brtD5hOHf04cR3okOTZ0lqPVAW3gVdlMhdrfsTW6drRhDgRrYJcbeKZQxTkenvegNt6YBQwrQvOxG+P3ZHEia9TuClS9Br1XKge8XnxLlxjelzZ/2w4tijDMxyoHIsVQg1zvYPcy7KeZx4jG2zyFakFJF7Whu1XT2QvhfJeryeVNdplYPo4Pi9hKd7VVxVC8O5cH4+N65hXgoKuGfEHmWAskjGxI49Ntu6XHOCAD9ie1PcLSepjDNY00fB8m6KpSyJx/jgg9LfJEfLK40818w+LXY5e5zKaMfKl+DcIlSCZp0cd3U59igDI4+WOa2LunvfvDoD9RrcNLqAjDy3yzfrtKqbAkggSDIZmSlYxzz9a8BaJ101zF2rh3BuSTJaCKGMDEGujHbedXch0X2ebbdEkkDC6a9cQoWVguS53P0JP5xcHY1W/tppD9KxgrdAw5QxnwPn4nOukrPeqkzBJb0m9oJltLtt3a07QYD1IkMAeS7/hw0BXMhzJwXJc/eV7kuiyIN8OOGuUhLP06JUeoxz4FxiZLRouTsDM9WO2OdBRtsIgrzHtk3kgH00JO+cTipc2S9jqyCaluf2xwcnfuB6LndHuEsSzdP4N/gtzoFzSZHRIsaQQiPmidyXgttsnW0YQYDvsh2ROGBPxkMqXjNA/qlCFsnZ8UdlX+kfk0pymlnMWH2JOBfz0sWI+C3OMS1dzPphhPVWHOPC5wdMzIUOzFFHb1lwB2ARF+ZOPt0gshWBPLe/wCRZlu6CIkSei/cE0fD4g2ZbVWceyxH5WPwGvzXrrSTJaDnG7oBoGS3qaCULggCPsv1W5IAd8tzLllJwvpx1WthMIfyg9OVotHy1WVQ4V37wsfgNfkuSZLQcW8Q4lruU/RVbRykrggDXiwwN3uQWnXTa1xMkz2W/on2lndNajpNtAGePw2/MOicBMlqs+8K7GBNbjrFgGe2iX0nUgiAvs+0S2YpgndaFPVRc3SdmVanZlfGjifOiw5PrT/oGvPpG/vDkEH4jZ70Vt86rl5rYimmdP41/s3Uzc4Isup9XNxwvz+0tyNAlONPrtO6hctR+QnluKqNt52O3pxvtClhvxTH0egtmEwbBMlrUxU21OFGtCHKYbavIATv3j90z26kIea4QZRtahfhIuT0anrjH7O3rpjNVHzPIaLG3Lh8Tj5TbRQihjlNyehxTwTLarbZOiiEIcBfbPnGhMtroChXW9JN/VqeYdyPEY4nwwPj6ZCL8C1T+T61JhDqRv8MxZgwlJG2BxzEsrBmgeEzseqt9ti6SNIIA8t6wm901eFDZ66d7M4UkQ56LVgTTvvtKaRqFqoTWymjxGb6LpUzrImYcuzaOIWKJmAptPWpaB2sd+V+yvSB1wB6s7qXgwiUyBpbJdBqFq6MjU18mKCKhRsTyEbx558/wnRmYJzLiV+DYBat6JQ/MX7B1UCxBAKHy3IQrH6W7MhY9MWkUMNAN948/8Mm35/jMDIKlpC3gmBWQtsAjifkE61b36kGQP7DdL7KrVZXnXiYpjYKZxj09Gh7f4kB4yIa/8ZmU1brIIYiYIXaJ3Nbjflv3xBME+DZbSVwIzfIIK89dJkSea18Ihu+XflD9yPztCJnW5Ri5VRntpNh8giVb5ygvBIHu9yaRrchYRO6fFU0CSTPQlDLte6zshx9O3g3D3yJajySd4EDaAsQMsRPaetxk61zty+YTCXRqjf9jO19cOLnyYV+p8QffpcreMXJ7BeRgh77Ds6SIYhGbMBgB2tld1DW0nGL4VxbZfKBbdUHdhol1dl7mOi0MOjttGgWT11lAwU9r1mMSsX0oxwSxgYyWOvKXtiAvBPkV239I7GqZdVqX9FDw2V5+UoYipn2nt/WRMK3LMQlW9poYCZ7WfcrWsdwSBNggMrRYdcLdhjas0+q28lzJOc8bOU7jWLh2AwzEyLxclYm6Z2ZuBEE+YLtTZEVA9tzPdBh5biJ3q5rGD8yRjXbNAPkcm0RuyjTUqf3NQBDge2yHJFaGeDyi4tUD5J3WIXmzs8Y9NDgG3un80OCYIDZCHxqHbJ2iZiEIGmnB8twgzYIkd7vMxiBON59GLJyBQLKMdiM1qOPXyMn2f2f7X5EDdshzkUbhAtED0oZMXCAGiIXgtAW/YXusURdr9NsoufLcgmP20zKy2ErrNSNGRuunMUAshL7zABq61q/RBPkd2yNSn57+X3ZTQZA8t7H3H5p7RwwEt6KP2DrUtAQBIIUsiwt99Kf+tydFntuocVhVRltNWyBTRlumGslopRNkhO1mkRVlLCT3jHYzqyU48WSN+1ZWRou0BZDRyp3Ju9nWnaYnCHA3216JlQWy0gKy557dJSaNQn0nKNL1VrhnwTLavbbOUKsQBBApzzVpFHqsPFdIGoW6AfeG7cMwrcv3TC0io80LQZ5me07kU3WkYqSlhYvkpFGoz8C8bO7RyGjlpi14ztaVliMIIFOeizQKbpI+WdsDGfLcWvcmsaK53b4gdUW3lENZXjxrgrzNdq/IAftohbzzOql4eV/zjUUcu96K7w33KFhGi7rxVisTBEBSxWPiiqYqz71mGfmDQuS5tSIHstHyPZnd7+XKaI+RgKSxEggySWmKaXkVaSwi5xSbRmGiSdZpxVZGy/eEexMso73R1o2WJwiwk+11kQNZrNO6oo+Cc7vz39Wy07q4l+CKfnNvQu/ndVsnSAkifcCOAXq7R8W1y9JdRvI87QvfnTRtgdPeujLavBLkv9meEPnUHS2Tf1EPFT67lOKRnE77munrsrkH/+IeydPXqAO/VoLMDMhz5T2irTzXpFHoKeRPnluV0XYX0mlduTLamIRJtKUR5CDbbSIrGPfX/eUdVFyTQ3luku6OaNIW/HmH5LQFt9k6oAQ5Ab7PNiyxkmGndUhRvTNyJM9F1wrZaM9IZbQmG63MocewxIejRIKg+DaKbEXGI3KWBtT2hUFKyonUZeEfB3xkX4vsM3wXvIx/IwmMqCu0WH/B9qLIpzG6Wp/rpWBFj/x1WnaCAb4G7LPgad0XbZmTEmTukDnti0yzgZvKcwNPtDzXyGjZR5ONFincVEbbVAR5je0hkU/lkTL5F3TZzQ2EvjysJr1hH/0LuiVPTz9ky1oJsgB8iwQsN5hplISns5Hn9hXl9eurMlr2zUzrVsQuk5m0ZUxKkIXhKNsWkQN2yHNPhzx3WbqQMRZGYCOjXWZ8FDzjtsWWsRJkEfgh2zvyOvhWnovsucu75GTPtdlo4RN8i+W+s3nHli0pQRaPIXEeVeW53V46YJciz2Uf4IvxiX0juW/9h/JQ8fJCkGfZnpE5YK9QsHIJBZcIkOdW141d3Gt8EiyjfcaWqRKk6Z84kOc6duODjmzluUZGyz4g6Q18UhltaxHkXbbtIgfsRyvknQt5bobZc6dltP3Gl0SudmW7LUslSJ1mPUbFeWVUepDnDpB3SgazRtW0BXxt+ABfhE7rypyVbCKCTLF9U2QrgjQKg3b7zskGv3eI0+XsuDZ8EJy2YJMtQyVIHfEztldFDtghz728j4LzGphGoZq2gK9ZMDuwiH3ngTJ7OG+VLY8EAeTKc9ts9lwk42zEOi2st+JrYZIA1xYso12Xx4qWV4K8xPZzka3ISCrPDVY1YJ1WtfVYZWW0ctdbPW7LTAnSQHyDJCoykEYhTNdpuUsK6YDZqQ85cG5cw6y3CsWmLYBXG/NayfJMkI8oVR/KG7AfC8k7u4MKVw2kM1r1eB2RpDNXuAauJVhGe6stKyVIBrid7YA4r6o5N5BG4cxOI3mtaeWtymj53LiG4FwmKJs78lzB8k4QVIsN4ryqynN7AzP1ShXIc2tYg3GuSpJO6/aKltHK3KWmhQgCPMm2R+SAfTSkANlzV9Rw2rc6MDcyWtHZaPfYsiElSPaQOYVYiSnxiIprB8kpeGn+v8U2mZD8FjxzTpybKjqtqwQ5Od5g2yGyq4Xsued3UeHSvsW3IlUZLZ8L5xSctmCHLRMliCBgN/AJcV7F6SpbjBe8gUWkUaimLeBzmOUsU2JltOMkcbd+JQiNkYB8ErNVbPe0Nmq72i4kXMiwNUnfe+AcOJfgfCWbbVkoQQTiR2xvivPKynODNX0ULF9AGoVq2gL+Lc4hWEaL2N/XTBWq2Qgic3BYled2+ekeVfOV51az0WKNF59DsIx2XbNVpmYkyPNsuyWSBBJYf+USKsxHnlvNRsu/8WXLaHfb2CtBcoD1Ir2CPJf/wxSt2xmkupGT9c6QtoCPNdO66FfJldGub8aK1KwEeY9tm8gB+2hI3jmdVLii/+RbBdktfHAsfpPIfSm4zcZcCZIjfJftiMQBO1IQQBrrn3qCRYZ20SOOMTLacbHrrRDjW5q1EjUzQbiTTzeIbEUgz+232XNne59RfX+CbLT9omW0iHFFCZJPPMr2W5EDdshzL1tKwfkzrNOqrrfi73CMYBntKzbGpATJL64X6RXWZRVtxlnP+VgaBZO2wEu/wzGatkAJUk+8zLZLZCuCdVoXciux+rhVuXYVMD7Dd7Hc9Va7bGyVIE0Amf3kaXnuIHm9qTwXhr/xmWAZbUXk+E4JsmAcZtsqcsAOee6Z7VS08lwY/sZngmW0W21MlSBNhLvY9onzCqtIxipUuKqf3L6iMfyNz4RO6+6zsWwJ+NRawNvep8S1IhMxucie+8VT0o+6PIqPiB17rG+lCtNqBPkl2wts14gbsCONwqVLzT8Fr7d6wcawZeBS60Hm1GSSTu+a6d5EY6cEyQ5/YLtf4oCd4iQ1ma3H/TZ2SpAWwLfZSqSYK0o2ZqQEaQ1AN32T1vs54yYbMyVIC+GBVuwyLLBL+kCr3rzb4oV/vdZ/jZESZHb8iqS9F5GFp2yMlCAtjCENgcZGCTI79rPdqWH4FO60sVGCKOh7bIc0DNM4ZGNCShAFEFKOsyDVARttTJQgGoJpPMb2Gw2DicFjGgYlyExYpyHQGChBZsfv2B5p4ft/xMZAoQSZFZso3TKo1VC2965QgpwQI2w3t+B932zvXaEEOSnuZtvbQve7196zQgkyZ6zXe1UoQWbH02zPtcB9PmfvVaEEmTeG9B6VIIrZ8RbbvU18f/fae1QoQRYMJKU81oT3dYwkJj1VguQOk9REaY2Pw4323hRKkEVjJ9vrTXQ/r9t7UihBaobr9V6UIIrZ8Wu2J5rgPp6w96JQgtQcG2jmhGl5QWzvQaEEqQsOst2WY/9vs/egUILUtZIN59Dv4ZyTWwmSEyDnUx7luRtJar4qJUjT4RdsL+bI3xetzwolSMOwTn1Vgihmx2tsD+XAz4esrwolSMPxLZK9XGPS+qhQgmSCo2xbBPu3xfqoUIJkhh+yvSPQr3esbwolSOYYUp+UIIrZ8SzbM4L8ecb6pFCC6BNbWw8lSB7wLtt2AX5st74olCDikPWskfRZNSVIi2OKst2+c5P1QaEEEYuH2V7N4Lqv2msrlCDisa5FrqkEUSwIL7E93sDrPW6vqVCC5AaN0l/kVZ+iBGlxfMR2awOuc6u9lkIJkjvcwXagjuc/YK+hUILkEgnVdxeRDfYaCiVIbvEk2546nHePPbdCCZJ7rMvJORVKkEzwBtuOGp5vhz2nQgnSNMBu6uM1OM84Nedu80qQFscY1SYfx2Z7LoUSpOlwH9ubi/j9m/YcCiWIDth1YK4EaUU8z7Z7Ab/bbX+rUII0PdY36DcKJUgu8R7btnkcv83+RqEEaRncwnZkDscdsccqlCAthQrbDXM47gZ7rEIJ0nJ4lO2VE3z/ij1GoQRpWaxb4HcKJUhL4GW2XTN8vst+p1CCtDw+Oc6Y6/hEoQRpCRxm23rcv7fazxRKEIXFXZRuwBDZvxUC4GsIREHflguDkyQqaVYotIulUChBFAoliEKhBFEolCAKhRJEoVCCKBRKEIVCCaJQKJQgCoUSRKFQgigUShCFIhP8vwADACog5YM65zugAAAAAElFTkSuQmCC" />)</a>
-                <span id="icon006" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/vue" title="Check code on GitHub"></a></span>
-            </div>
-        </div>
-        <div class="file">Scan Multiple Barcodes</div>
-        <div class="children">
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Minimum necessary 
-                JavaScript code to read barcodes from camera."><a class="button title" href="https://demo.dynamsoft.com/Samples/DBR/JS/barcode-scanner-api-samples/scan-multiple-barcodes/hello-world.html">Hello World
-            </a><span id="icon001" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/barcode-scanner-api-samples/scan-multiple-barcodes/hello-world.html" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Simulates a shopping 
-                experience where users scan barcodes to add items to a dynamic cart. "><a class="button title" href="https://demo.dynamsoft.com/Samples/DBR/JS/barcode-scanner-api-samples/scan-multiple-barcodes/cart-builder.html">Scan 
-                to Cart Simulation</a><span id="icon001" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/barcode-scanner-api-samples/scan-multiple-barcodes/cart-builder.html" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="An inventory management
-                 tool scan barcodes in batches and provide real-time analysis of the scanned data. "><a class="button title" href="https://demo.dynamsoft.com/Samples/DBR/JS/barcode-scanner-api-samples/scan-multiple-barcodes/batch-inventory/index.html">Batch Inventory</a><span id="icon001" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/barcode-scanner-api-samples/scan-multiple-barcodes/batch-inventory/index.html" title="Check code on GitHub"></a></span>
-            </div>
-        </div>
-    </div>
-    <div class="file">
-        <h3>Foundational API Samples</h3>
+        <h3>Demo and Samples - DBR JavaScript Edition</h3>
     </div>
     <div class="children">
         <div class="file">Hello World</div>
         <div class="children">
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Minimum necessary 
-                JavaScript code to read barcodes from camera."><a class="button title" href="https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/hello-world/hello-world.html">Hello 
-                World</a><span id="icon001" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/foundational-api-samples/hello-world/hello-world.html" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Decode barcodes
+            <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Minimum necessary JavaScript code to get
+                the BarcodeScanner (video) up and running." class="button title" target="_blank"
+                     href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.31/hello-world/hello-world.html">Hello World</a> 
+                     <a
+                        target="_blank"
+                        href="https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/hello-world/hello-world.html"
+                    ><span style="text-decoration: underline;">Run it&nearrow;</span></a>
+            </div>
+            <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Decode barcodes
                 using images that are stored locally,
-                whether on mobile or desktop."><a class="button title" href="https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/hello-world/read-an-image.html">Read
-                    an Existing
-                    Image</a><span id="icon002" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/foundational-api-samples/hello-world/read-an-image.html" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera and images in an Angular
-                Application."><a class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/angular">Hello World in
+                whether on mobile or desktop." class="button title" target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.31/hello-world/read-an-image.html">Read
+                    an Existing Image</a></div>
+            <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Decode video stream in an Angular
+                Application from a USB-connected or built-in camera (mobile or desktop)." class="button title"
+                     href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.4.31/hello-world/angular">Hello World in
                     Angular (<img alt="Angular logo"
-                        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==" />)</a>
-                <span id="icon003" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/angular" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera and images in a Blazor
-                Application."><a class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/blazor">Hello World in
-                    Blazor (<img alt="Blazor logo"
-                        src="data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjIyNDgiIHZpZXdCb3g9Ii0xMC4xMjAyMTg3NSAtNTMuNjA5NTEwMzYgMzM5Ljk1Mzk3NTI5IDM0My4wMjIzNTA5MyIgd2lkdGg9IjI1MDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTMwMy45MzUgODguNDc5Yy02LjU5OCA0MS4zNjItMjcuNjUzIDc5LjA0MS01OS40MiAxMDYuMzM1cy03Mi4xODUgNDIuNDMzLTExNC4wNjQgNDIuNzIzYy04LjQ4My4zMjYtMTYuOTc3LS4xOS0yNS4zNTgtMS41MzlhNzcuNzIzIDc3LjcyMyAwIDAgMSAtNjQuNjMtNzMuMjY2IDc1LjQ3OSA3NS40NzkgMCAwIDEgMjIuMTQtNTIuNzYyIDc1LjQ2IDc1LjQ2IDAgMCAxIDEwNS44ODUtLjc0OCA3NS40NzggNzUuNDc4IDAgMCAxIDIyLjg4NCA1Mi40NDNjLjMxNyAxMi41MS01LjEwMiAyMy40ODMtMTYuMjM5IDIzLjgtMTEuODk5IDAtMTcuNDc3LTguNDkxLTE3LjQ3Ny0xOS45MzR2LTMxLjc5N2ExOS40NzggMTkuNDc4IDAgMCAwIC0xOS4zMjMtMTkuNDk0aC0yNi42NTNhNDYuMzg2IDQ2LjM4NiAwIDAgMCAtMzkuMTE5IDIwLjk2MSA0Ni4zOTkgNDYuMzk5IDAgMCAwIDMxLjU4NyA3MS4yNjggNDYuMzkyIDQ2LjM5MiAwIDAgMCA0MS44LTE0LjkxMWwuOTMyLTEuMzkuOTMzIDEuNTQzYTMyLjgyIDMyLjgyIDAgMCAwIDI3Ljk4NiAxMy4zMjggMzYuOTkyIDM2Ljk5MiAwIDAgMCAzNC4yNjgtMzguNjcxIDEwMC42NCAxMDAuNjQgMCAwIDAgLTIuNzYxLTI0LjU3N2MtNC45NDMtMjIuNzM0LTE4LjEyNi00Mi44MzQtMzcuMDA4LTU2LjQyM2E5NC4xNTMgOTQuMTUzIDAgMCAwIC0xMjUuMjM2IDEzLjcxOCA5NC4xNzUgOTQuMTc1IDAgMCAwIC0yMy45MiA2My4wOTcgOTUuMzUyIDk1LjM1MiAwIDAgMCAyNy40NzMgNjUuODI0IDk1LjMzMSA5NS4zMzEgMCAwIDAgNjUuNDQ4IDI4LjM0NHM2Ljk4LjYzNSAxNC44NDkuNDU0YTIwMC45NCAyMDAuOTQgMCAwIDAgMTA3Ljc2OS0zMi4xNTVjLjQ1Ny0uMzE4LjkxNC4zMTcuNjEuNzhhMTU4LjE3NyAxNTguMTc3IDAgMCAxIC0xMjMuMjI1IDUwLjM5NiAxMTEuMTg1IDExMS4xODUgMCAwIDEgLTgwLjk2MS0zMi44NzEgMTExLjIxNSAxMTEuMjE1IDAgMCAxIC0zMi4yMTUtODEuMjMyIDExNS4wOTkgMTE1LjA5OSAwIDAgMSA0Ni4yMjMtOTIuMTcgMTEyLjcwNCAxMTIuNzA0IDAgMCAxIDY2LjQ5Ny0yMS45NTNoMzUuNzcyYTEwMC42MzcgMTAwLjYzNyAwIDAgMCA3NC4yNDctMzIuNzg0IDEuMzkgMS4zOSAwIDAgMSAuNzU1LS40MzEgMS40MTggMS40MTggMCAwIDEgMS41Mi42NjNjLjE1My4yNTcuMjIyLjU1NS4xOTcuODU0YTEwMC45MyAxMDAuOTMgMCAwIDEgLTE1LjYwOCA0NS4xNCAxLjM4NiAxLjM4NiAwIDAgMCAuMTE1IDEuNTExIDEuMzg3IDEuMzg3IDAgMCAwIDEuNDI0LjUwNyAxMDguMTU4IDEwOC4xNTggMCAwIDAgNzUuMTk4LTYyLjAxM2MuMTczLS4yNzcuNDExLS41MDcuNjk1LS42N2ExLjkwMiAxLjkwMiAwIDAgMSAxLjg2OSAwYy4yODQuMTYyLjUyMy4zOTIuNjk0LjY3YTEzNy4wOTggMTM3LjA5OCAwIDAgMSAxMy40NDcgODcuNDMyem0tMTg5Ljk2NCA0NC44NThhMjcuODIzIDI3LjgyMyAwIDAgMCAtMjcuMjkzIDMzLjI1NSAyNy44MyAyNy44MyAwIDAgMCAyMS44NjIgMjEuODY1IDI3LjgyNCAyNy44MjQgMCAwIDAgMzMuMjUxLTI3LjI5NnYtMjUuOTc3YTIuMDA3IDIuMDA3IDAgMCAwIC0xLjkwNC0xLjkwNHoiIGZpbGw9IiM3MDJhZjciLz48L3N2Zz4=" />)</a>
-                <span id="icon003" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/blazor" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera and images in a React
-                Application."><a class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/react">
+                        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==" />)</a> 
+                        </div>
+            <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Decode video stream in a React
+                Application from a USB-connected or built-in camera (mobile or desktop)." class="button title"
+                     href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.4.31/hello-world/react">
                     Hello World in
                     React (<img alt="React logo"
                         src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4NDEuOSA1OTUuMyI+PGcgZmlsbD0iIzYxREFGQiI+PHBhdGggZD0iTTY2Ni4zIDI5Ni41YzAtMzIuNS00MC43LTYzLjMtMTAzLjEtODIuNCAxNC40LTYzLjYgOC0xMTQuMi0yMC4yLTEzMC40LTYuNS0zLjgtMTQuMS01LjYtMjIuNC01LjZ2MjIuM2M0LjYgMCA4LjMuOSAxMS40IDIuNiAxMy42IDcuOCAxOS41IDM3LjUgMTQuOSA3NS43LTEuMSA5LjQtMi45IDE5LjMtNS4xIDI5LjQtMTkuNi00LjgtNDEtOC41LTYzLjUtMTAuOS0xMy41LTE4LjUtMjcuNS0zNS4zLTQxLjYtNTAgMzIuNi0zMC4zIDYzLjItNDYuOSA4NC00Ni45Vjc4Yy0yNy41IDAtNjMuNSAxOS42LTk5LjkgNTMuNi0zNi40LTMzLjgtNzIuNC01My4yLTk5LjktNTMuMnYyMi4zYzIwLjcgMCA1MS40IDE2LjUgODQgNDYuNi0xNCAxNC43LTI4IDMxLjQtNDEuMyA0OS45LTIyLjYgMi40LTQ0IDYuMS02My42IDExLTIuMy0xMC00LTE5LjctNS4yLTI5LTQuNy0zOC4yIDEuMS02Ny45IDE0LjYtNzUuOCAzLTEuOCA2LjktMi42IDExLjUtMi42Vjc4LjVjLTguNCAwLTE2IDEuOC0yMi42IDUuNi0yOC4xIDE2LjItMzQuNCA2Ni43LTE5LjkgMTMwLjEtNjIuMiAxOS4yLTEwMi43IDQ5LjktMTAyLjcgODIuMyAwIDMyLjUgNDAuNyA2My4zIDEwMy4xIDgyLjQtMTQuNCA2My42LTggMTE0LjIgMjAuMiAxMzAuNCA2LjUgMy44IDE0LjEgNS42IDIyLjUgNS42IDI3LjUgMCA2My41LTE5LjYgOTkuOS01My42IDM2LjQgMzMuOCA3Mi40IDUzLjIgOTkuOSA1My4yIDguNCAwIDE2LTEuOCAyMi42LTUuNiAyOC4xLTE2LjIgMzQuNC02Ni43IDE5LjktMTMwLjEgNjItMTkuMSAxMDIuNS00OS45IDEwMi41LTgyLjN6bS0xMzAuMi02Ni43Yy0zLjcgMTIuOS04LjMgMjYuMi0xMy41IDM5LjUtNC4xLTgtOC40LTE2LTEzLjEtMjQtNC42LTgtOS41LTE1LjgtMTQuNC0yMy40IDE0LjIgMi4xIDI3LjkgNC43IDQxIDcuOXptLTQ1LjggMTA2LjVjLTcuOCAxMy41LTE1LjggMjYuMy0yNC4xIDM4LjItMTQuOSAxLjMtMzAgMi00NS4yIDItMTUuMSAwLTMwLjItLjctNDUtMS45LTguMy0xMS45LTE2LjQtMjQuNi0yNC4yLTM4LTcuNi0xMy4xLTE0LjUtMjYuNC0yMC44LTM5LjggNi4yLTEzLjQgMTMuMi0yNi44IDIwLjctMzkuOSA3LjgtMTMuNSAxNS44LTI2LjMgMjQuMS0zOC4yIDE0LjktMS4zIDMwLTIgNDUuMi0yIDE1LjEgMCAzMC4yLjcgNDUgMS45IDguMyAxMS45IDE2LjQgMjQuNiAyNC4yIDM4IDcuNiAxMy4xIDE0LjUgMjYuNCAyMC44IDM5LjgtNi4zIDEzLjQtMTMuMiAyNi44LTIwLjcgMzkuOXptMzIuMy0xM2M1LjQgMTMuNCAxMCAyNi44IDEzLjggMzkuOC0xMy4xIDMuMi0yNi45IDUuOS00MS4yIDggNC45LTcuNyA5LjgtMTUuNiAxNC40LTIzLjcgNC42LTggOC45LTE2LjEgMTMtMjQuMXpNNDIxLjIgNDMwYy05LjMtOS42LTE4LjYtMjAuMy0yNy44LTMyIDkgLjQgMTguMi43IDI3LjUuNyA5LjQgMCAxOC43LS4yIDI3LjgtLjctOSAxMS43LTE4LjMgMjIuNC0yNy41IDMyem0tNzQuNC01OC45Yy0xNC4yLTIuMS0yNy45LTQuNy00MS03LjkgMy43LTEyLjkgOC4zLTI2LjIgMTMuNS0zOS41IDQuMSA4IDguNCAxNiAxMy4xIDI0IDQuNyA4IDkuNSAxNS44IDE0LjQgMjMuNHpNNDIwLjcgMTYzYzkuMyA5LjYgMTguNiAyMC4zIDI3LjggMzItOS0uNC0xOC4yLS43LTI3LjUtLjctOS40IDAtMTguNy4yLTI3LjguNyA5LTExLjcgMTguMy0yMi40IDI3LjUtMzJ6bS03NCA1OC45Yy00LjkgNy43LTkuOCAxNS42LTE0LjQgMjMuNy00LjYgOC04LjkgMTYtMTMgMjQtNS40LTEzLjQtMTAtMjYuOC0xMy44LTM5LjggMTMuMS0zLjEgMjYuOS01LjggNDEuMi03Ljl6bS05MC41IDEyNS4yYy0zNS40LTE1LjEtNTguMy0zNC45LTU4LjMtNTAuNiAwLTE1LjcgMjIuOS0zNS42IDU4LjMtNTAuNiA4LjYtMy43IDE4LTcgMjcuNy0xMC4xIDUuNyAxOS42IDEzLjIgNDAgMjIuNSA2MC45LTkuMiAyMC44LTE2LjYgNDEuMS0yMi4yIDYwLjYtOS45LTMuMS0xOS4zLTYuNS0yOC0xMC4yek0zMTAgNDkwYy0xMy42LTcuOC0xOS41LTM3LjUtMTQuOS03NS43IDEuMS05LjQgMi45LTE5LjMgNS4xLTI5LjQgMTkuNiA0LjggNDEgOC41IDYzLjUgMTAuOSAxMy41IDE4LjUgMjcuNSAzNS4zIDQxLjYgNTAtMzIuNiAzMC4zLTYzLjIgNDYuOS04NCA0Ni45LTQuNS0uMS04LjMtMS0xMS4zLTIuN3ptMjM3LjItNzYuMmM0LjcgMzguMi0xLjEgNjcuOS0xNC42IDc1LjgtMyAxLjgtNi45IDIuNi0xMS41IDIuNi0yMC43IDAtNTEuNC0xNi41LTg0LTQ2LjYgMTQtMTQuNyAyOC0zMS40IDQxLjMtNDkuOSAyMi42LTIuNCA0NC02LjEgNjMuNi0xMSAyLjMgMTAuMSA0LjEgMTkuOCA1LjIgMjkuMXptMzguNS02Ni43Yy04LjYgMy43LTE4IDctMjcuNyAxMC4xLTUuNy0xOS42LTEzLjItNDAtMjIuNS02MC45IDkuMi0yMC44IDE2LjYtNDEuMSAyMi4yLTYwLjYgOS45IDMuMSAxOS4zIDYuNSAyOC4xIDEwLjIgMzUuNCAxNS4xIDU4LjMgMzQuOSA1OC4zIDUwLjYtLjEgMTUuNy0yMyAzNS42LTU4LjQgNTAuNnpNMzIwLjggNzguNHoiLz48Y2lyY2xlIGN4PSI0MjAuOSIgY3k9IjI5Ni41IiByPSI0NS43Ii8+PHBhdGggZD0iTTUyMC41IDc4LjF6Ii8+PC9nPjwvc3ZnPg==" />)</a>
-                <span id="icon004" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/react" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera and images in a React
-                Application."><a class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/react-hooks">
-                Hello World in
-                    React(using Hooks)(<img alt="React logo"
+                        </div>
+            <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Decode video stream in a React
+                Application from a USB-connected or built-in camera (mobile or desktop)." class="button title"
+                     href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.4.31/hello-world/react-hooks">
+                    Hello World in
+                    React (using Hooks) (<img alt="React logo"
                         src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4NDEuOSA1OTUuMyI+PGcgZmlsbD0iIzYxREFGQiI+PHBhdGggZD0iTTY2Ni4zIDI5Ni41YzAtMzIuNS00MC43LTYzLjMtMTAzLjEtODIuNCAxNC40LTYzLjYgOC0xMTQuMi0yMC4yLTEzMC40LTYuNS0zLjgtMTQuMS01LjYtMjIuNC01LjZ2MjIuM2M0LjYgMCA4LjMuOSAxMS40IDIuNiAxMy42IDcuOCAxOS41IDM3LjUgMTQuOSA3NS43LTEuMSA5LjQtMi45IDE5LjMtNS4xIDI5LjQtMTkuNi00LjgtNDEtOC41LTYzLjUtMTAuOS0xMy41LTE4LjUtMjcuNS0zNS4zLTQxLjYtNTAgMzIuNi0zMC4zIDYzLjItNDYuOSA4NC00Ni45Vjc4Yy0yNy41IDAtNjMuNSAxOS42LTk5LjkgNTMuNi0zNi40LTMzLjgtNzIuNC01My4yLTk5LjktNTMuMnYyMi4zYzIwLjcgMCA1MS40IDE2LjUgODQgNDYuNi0xNCAxNC43LTI4IDMxLjQtNDEuMyA0OS45LTIyLjYgMi40LTQ0IDYuMS02My42IDExLTIuMy0xMC00LTE5LjctNS4yLTI5LTQuNy0zOC4yIDEuMS02Ny45IDE0LjYtNzUuOCAzLTEuOCA2LjktMi42IDExLjUtMi42Vjc4LjVjLTguNCAwLTE2IDEuOC0yMi42IDUuNi0yOC4xIDE2LjItMzQuNCA2Ni43LTE5LjkgMTMwLjEtNjIuMiAxOS4yLTEwMi43IDQ5LjktMTAyLjcgODIuMyAwIDMyLjUgNDAuNyA2My4zIDEwMy4xIDgyLjQtMTQuNCA2My42LTggMTE0LjIgMjAuMiAxMzAuNCA2LjUgMy44IDE0LjEgNS42IDIyLjUgNS42IDI3LjUgMCA2My41LTE5LjYgOTkuOS01My42IDM2LjQgMzMuOCA3Mi40IDUzLjIgOTkuOSA1My4yIDguNCAwIDE2LTEuOCAyMi42LTUuNiAyOC4xLTE2LjIgMzQuNC02Ni43IDE5LjktMTMwLjEgNjItMTkuMSAxMDIuNS00OS45IDEwMi41LTgyLjN6bS0xMzAuMi02Ni43Yy0zLjcgMTIuOS04LjMgMjYuMi0xMy41IDM5LjUtNC4xLTgtOC40LTE2LTEzLjEtMjQtNC42LTgtOS41LTE1LjgtMTQuNC0yMy40IDE0LjIgMi4xIDI3LjkgNC43IDQxIDcuOXptLTQ1LjggMTA2LjVjLTcuOCAxMy41LTE1LjggMjYuMy0yNC4xIDM4LjItMTQuOSAxLjMtMzAgMi00NS4yIDItMTUuMSAwLTMwLjItLjctNDUtMS45LTguMy0xMS45LTE2LjQtMjQuNi0yNC4yLTM4LTcuNi0xMy4xLTE0LjUtMjYuNC0yMC44LTM5LjggNi4yLTEzLjQgMTMuMi0yNi44IDIwLjctMzkuOSA3LjgtMTMuNSAxNS44LTI2LjMgMjQuMS0zOC4yIDE0LjktMS4zIDMwLTIgNDUuMi0yIDE1LjEgMCAzMC4yLjcgNDUgMS45IDguMyAxMS45IDE2LjQgMjQuNiAyNC4yIDM4IDcuNiAxMy4xIDE0LjUgMjYuNCAyMC44IDM5LjgtNi4zIDEzLjQtMTMuMiAyNi44LTIwLjcgMzkuOXptMzIuMy0xM2M1LjQgMTMuNCAxMCAyNi44IDEzLjggMzkuOC0xMy4xIDMuMi0yNi45IDUuOS00MS4yIDggNC45LTcuNyA5LjgtMTUuNiAxNC40LTIzLjcgNC42LTggOC45LTE2LjEgMTMtMjQuMXpNNDIxLjIgNDMwYy05LjMtOS42LTE4LjYtMjAuMy0yNy44LTMyIDkgLjQgMTguMi43IDI3LjUuNyA5LjQgMCAxOC43LS4yIDI3LjgtLjctOSAxMS43LTE4LjMgMjIuNC0yNy41IDMyem0tNzQuNC01OC45Yy0xNC4yLTIuMS0yNy45LTQuNy00MS03LjkgMy43LTEyLjkgOC4zLTI2LjIgMTMuNS0zOS41IDQuMSA4IDguNCAxNiAxMy4xIDI0IDQuNyA4IDkuNSAxNS44IDE0LjQgMjMuNHpNNDIwLjcgMTYzYzkuMyA5LjYgMTguNiAyMC4zIDI3LjggMzItOS0uNC0xOC4yLS43LTI3LjUtLjctOS40IDAtMTguNy4yLTI3LjguNyA5LTExLjcgMTguMy0yMi40IDI3LjUtMzJ6bS03NCA1OC45Yy00LjkgNy43LTkuOCAxNS42LTE0LjQgMjMuNy00LjYgOC04LjkgMTYtMTMgMjQtNS40LTEzLjQtMTAtMjYuOC0xMy44LTM5LjggMTMuMS0zLjEgMjYuOS01LjggNDEuMi03Ljl6bS05MC41IDEyNS4yYy0zNS40LTE1LjEtNTguMy0zNC45LTU4LjMtNTAuNiAwLTE1LjcgMjIuOS0zNS42IDU4LjMtNTAuNiA4LjYtMy43IDE4LTcgMjcuNy0xMC4xIDUuNyAxOS42IDEzLjIgNDAgMjIuNSA2MC45LTkuMiAyMC44LTE2LjYgNDEuMS0yMi4yIDYwLjYtOS45LTMuMS0xOS4zLTYuNS0yOC0xMC4yek0zMTAgNDkwYy0xMy42LTcuOC0xOS41LTM3LjUtMTQuOS03NS43IDEuMS05LjQgMi45LTE5LjMgNS4xLTI5LjQgMTkuNiA0LjggNDEgOC41IDYzLjUgMTAuOSAxMy41IDE4LjUgMjcuNSAzNS4zIDQxLjYgNTAtMzIuNiAzMC4zLTYzLjIgNDYuOS04NCA0Ni45LTQuNS0uMS04LjMtMS0xMS4zLTIuN3ptMjM3LjItNzYuMmM0LjcgMzguMi0xLjEgNjcuOS0xNC42IDc1LjgtMyAxLjgtNi45IDIuNi0xMS41IDIuNi0yMC43IDAtNTEuNC0xNi41LTg0LTQ2LjYgMTQtMTQuNyAyOC0zMS40IDQxLjMtNDkuOSAyMi42LTIuNCA0NC02LjEgNjMuNi0xMSAyLjMgMTAuMSA0LjEgMTkuOCA1LjIgMjkuMXptMzguNS02Ni43Yy04LjYgMy43LTE4IDctMjcuNyAxMC4xLTUuNy0xOS42LTEzLjItNDAtMjIuNS02MC45IDkuMi0yMC44IDE2LjYtNDEuMSAyMi4yLTYwLjYgOS45IDMuMSAxOS4zIDYuNSAyOC4xIDEwLjIgMzUuNCAxNS4xIDU4LjMgMzQuOSA1OC4zIDUwLjYtLjEgMTUuNy0yMyAzNS42LTU4LjQgNTAuNnpNMzIwLjggNzguNHoiLz48Y2lyY2xlIGN4PSI0MjAuOSIgY3k9IjI5Ni41IiByPSI0NS43Ii8+PHBhdGggZD0iTTUyMC41IDc4LjF6Ii8+PC9nPjwvc3ZnPg==" />)</a>
-                <span id="icon013" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/react-hooks" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera and images in a Vue 3
-                                Application."><a class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/vue">
+                        </div>
+                <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Decode video stream in a Vue 3
+                Application from a USB-connected or built-in camera (mobile or desktop)." class="button title"
+                     href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.4.31/hello-world/vue">
                     Hello World in
-                    Vue (<img alt="Vue logo"
+                    Vue 3 (<img alt="Vue3 logo"
                         src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTk2QkI4RkE3NjE2MTFFNUE4NEU4RkIxNjQ5MTYyRDgiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTk2QkI4Rjk3NjE2MTFFNUE4NEU4RkIxNjQ5MTYyRDgiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjU2QTEyNzk3NjkyMTFFMzkxODk4RDkwQkY4Q0U0NzYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjU2QTEyN0E3NjkyMTFFMzkxODk4RDkwQkY4Q0U0NzYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5WHowqAAAXNElEQVR42uxda4xd1XVe53XvvD2eGQ/lXQcKuDwc2eFlCAGnUn7kT6T86J/+aNTgsWPchJJYciEOCQ8hF+G0hFCIHRSEqAuJBCqRaUEIEbmBppAIBGnESwZje8COZ+y587j3PLq+ffadGJix53HvPevcuz60xPjec89ZZ+39nf04+9vLSZKEFArFzHA1BAqFEkShUIIoFEoQhUIJolAoQRQKJYhCoQRRKJQgCoUSRKFQKEEUCiWIQrFo+Gv/8/YH+f/nsMWSHHMChyhxqPTTdyncWyJ3ScD/ztipiB3wXSqu6P17avN+TyFC5ggv4tRnmoxWTP1+5F+Mz17GPvPl49EKBWd3UsfXllPiso8VcYtmPba3fNuKrBVXrGFCbrdPwXndFL49ltI367roOpSUI4pGypv9s7q+ltj6JxqOQ07Bo/DgxGb2/a8cX0CnAWXJ5etz2TqdHiXHKlKj9w6i9XX8Ic41DmI8FVHhmmXk85MmRhCzJoiTWnig9LfJRHihgydxzAxJhBr7Bh/hK3yu+p9568FliTJF2aKMZfVd/kQOcKP6OBmS9+Rjm4zJ6faoeN0gOUn61MncLX4CJ+MRhe+P/dRxhfew2Df4CF/hs4jWg8vQYUKYMuWyRRkLjeHQ8YP0Z9mekVjA8Qj3VVcuoeDiXu63lkUE0ym6FA5PXBaNVr7qtPumGyPR4Bt8hK/wWUR5chn6XJYoU5StUHL8l+XEx2axhkS6yk+chJuP4rXLyOkIKJkS0B67adcqfL/0Y4pixxSysK6V8Yl9Mz7i3272NRFlhzJsu24Z5l9E9Ahmwfrpoj7uw3fZtktsRZKjIXnndlLxin7+W8ZTBwPf6I+Tg9HwxK2Ob8citbCoBoaxBxMCvsFH+CqjHCtUvLzflKWUcpwB91gupG5f9/Rtx39ZZBtmWyJtphKzHTQW0diP36b4aJmcLj/zGaSkHJPb4SWFi/tOJd8bTqd9s48VBRh4RKeUX/vjgXg8cpyCmz05xkJylxSoa8M5RF0eJaVIIkGOsg2yTc3UgpD94psiWxEOqDNYoOIXuHnGwE5AXUTFi46FTnRw4l/dwEm7/pSxcYnCF/gE3zInh52RRJkVP7/MlKFQcgCbjifHTAQBfsb2qsgBO3e1Cpf3UXBej3nRJKKrxU/rcH/pKzz4vNIQuRJTEmZklbg6EL4SPsE3GQPzinmfhbJDGQolB+r8w58abs5y8DqRt4ABeptLRR7koY9NleybEYw/MPisvF/ayT1/SvDewcnIcG32wfiCAbEvoCZyGaGsitdyz6XdTctQJq6fcT5mloNfYvu5yFZkpEz+RT0UrFoqpxVBV+vQxIrkaPnrbqdvXs6hcjbU+Jq4Nvvwd/BFRNeq2npwWfkX95iyE9p6PM72P/MhCPANTBSKu5WITHcC074Y9CUTkYglKBgcV/aVtlM5Kpp/RHFjDdfka7MP/2wG6m72661QNigjlBXKTGBtsjWKNs5atCf44Uds3xc5YD8Wknd2BxWuGjCzIxLWQzlFj+IjU108OL7bafM5sm5DDdfka/8T+9AJXyTMpqFsUEYoK5SZ0NbjVlvX500Q4Ha2A+JuCcEvhVS8qp/8MzspHhMSfO7mVPaP35BMRp9JsCQldbX+hmvxNfnamzJfqVvtWnGZoGxQRigroYs6UbfvOGHn4ORVkTaIbEWwtqg3MNO+Zql0JGCdVuCayhDuG9uJB7vp+oR17FbZc+NauCauLWLmKkqXr6NsUEYoK6GtxwY6CXXnEs0n2faIHLCPhhR8bikFKwRN+xZddHWu5a7Ol9yCZ2ZwHKdOxufGNeKRqS/hmnLWW1VMmQSrl5oyEkqOPbZu02IJAsic9sU7B+5uF9cOmqUfeLOdOaAZYb/CA+M/Ic9NxUoYMNfD/PT84f7xB807EAnrrbgMUBZt1w1SEpCIqfjF1Om5EuQNth0iu1r8tPLP76LCpX2yWpHDk2dGH018p6brtD5hOHf04cR3okOTZ0lqPVAW3gVdlMhdrfsTW6drRhDgRrYJcbeKZQxTkenvegNt6YBQwrQvOxG+P3ZHEia9TuClS9Br1XKge8XnxLlxjelzZ/2w4tijDMxyoHIsVQg1zvYPcy7KeZx4jG2zyFakFJF7Whu1XT2QvhfJeryeVNdplYPo4Pi9hKd7VVxVC8O5cH4+N65hXgoKuGfEHmWAskjGxI49Ntu6XHOCAD9ie1PcLSepjDNY00fB8m6KpSyJx/jgg9LfJEfLK40818w+LXY5e5zKaMfKl+DcIlSCZp0cd3U59igDI4+WOa2LunvfvDoD9RrcNLqAjDy3yzfrtKqbAkggSDIZmSlYxzz9a8BaJ101zF2rh3BuSTJaCKGMDEGujHbedXch0X2ebbdEkkDC6a9cQoWVguS53P0JP5xcHY1W/tppD9KxgrdAw5QxnwPn4nOukrPeqkzBJb0m9oJltLtt3a07QYD1IkMAeS7/hw0BXMhzJwXJc/eV7kuiyIN8OOGuUhLP06JUeoxz4FxiZLRouTsDM9WO2OdBRtsIgrzHtk3kgH00JO+cTipc2S9jqyCaluf2xwcnfuB6LndHuEsSzdP4N/gtzoFzSZHRIsaQQiPmidyXgttsnW0YQYDvsh2ROGBPxkMqXjNA/qlCFsnZ8UdlX+kfk0pymlnMWH2JOBfz0sWI+C3OMS1dzPphhPVWHOPC5wdMzIUOzFFHb1lwB2ARF+ZOPt0gshWBPLe/wCRZlu6CIkSei/cE0fD4g2ZbVWceyxH5WPwGvzXrrSTJaDnG7oBoGS3qaCULggCPsv1W5IAd8tzLllJwvpx1WthMIfyg9OVotHy1WVQ4V37wsfgNfkuSZLQcW8Q4lruU/RVbRykrggDXiwwN3uQWnXTa1xMkz2W/on2lndNajpNtAGePw2/MOicBMlqs+8K7GBNbjrFgGe2iX0nUgiAvs+0S2YpgndaFPVRc3SdmVanZlfGjifOiw5PrT/oGvPpG/vDkEH4jZ70Vt86rl5rYimmdP41/s3Uzc4Isup9XNxwvz+0tyNAlONPrtO6hctR+QnluKqNt52O3pxvtClhvxTH0egtmEwbBMlrUxU21OFGtCHKYbavIATv3j90z26kIea4QZRtahfhIuT0anrjH7O3rpjNVHzPIaLG3Lh8Tj5TbRQihjlNyehxTwTLarbZOiiEIcBfbPnGhMtroChXW9JN/VqeYdyPEY4nwwPj6ZCL8C1T+T61JhDqRv8MxZgwlJG2BxzEsrBmgeEzseqt9ti6SNIIA8t6wm901eFDZ66d7M4UkQ56LVgTTvvtKaRqFqoTWymjxGb6LpUzrImYcuzaOIWKJmAptPWpaB2sd+V+yvSB1wB6s7qXgwiUyBpbJdBqFq6MjU18mKCKhRsTyEbx558/wnRmYJzLiV+DYBat6JQ/MX7B1UCxBAKHy3IQrH6W7MhY9MWkUMNAN948/8Mm35/jMDIKlpC3gmBWQtsAjifkE61b36kGQP7DdL7KrVZXnXiYpjYKZxj09Gh7f4kB4yIa/8ZmU1brIIYiYIXaJ3Nbjflv3xBME+DZbSVwIzfIIK89dJkSea18Ihu+XflD9yPztCJnW5Ri5VRntpNh8giVb5ygvBIHu9yaRrchYRO6fFU0CSTPQlDLte6zshx9O3g3D3yJajySd4EDaAsQMsRPaetxk61zty+YTCXRqjf9jO19cOLnyYV+p8QffpcreMXJ7BeRgh77Ds6SIYhGbMBgB2tld1DW0nGL4VxbZfKBbdUHdhol1dl7mOi0MOjttGgWT11lAwU9r1mMSsX0oxwSxgYyWOvKXtiAvBPkV239I7GqZdVqX9FDw2V5+UoYipn2nt/WRMK3LMQlW9poYCZ7WfcrWsdwSBNggMrRYdcLdhjas0+q28lzJOc8bOU7jWLh2AwzEyLxclYm6Z2ZuBEE+YLtTZEVA9tzPdBh5biJ3q5rGD8yRjXbNAPkcm0RuyjTUqf3NQBDge2yHJFaGeDyi4tUD5J3WIXmzs8Y9NDgG3un80OCYIDZCHxqHbJ2iZiEIGmnB8twgzYIkd7vMxiBON59GLJyBQLKMdiM1qOPXyMn2f2f7X5EDdshzkUbhAtED0oZMXCAGiIXgtAW/YXusURdr9NsoufLcgmP20zKy2ErrNSNGRuunMUAshL7zABq61q/RBPkd2yNSn57+X3ZTQZA8t7H3H5p7RwwEt6KP2DrUtAQBIIUsiwt99Kf+tydFntuocVhVRltNWyBTRlumGslopRNkhO1mkRVlLCT3jHYzqyU48WSN+1ZWRou0BZDRyp3Ju9nWnaYnCHA3216JlQWy0gKy557dJSaNQn0nKNL1VrhnwTLavbbOUKsQBBApzzVpFHqsPFdIGoW6AfeG7cMwrcv3TC0io80LQZ5me07kU3WkYqSlhYvkpFGoz8C8bO7RyGjlpi14ztaVliMIIFOeizQKbpI+WdsDGfLcWvcmsaK53b4gdUW3lENZXjxrgrzNdq/IAftohbzzOql4eV/zjUUcu96K7w33KFhGi7rxVisTBEBSxWPiiqYqz71mGfmDQuS5tSIHstHyPZnd7+XKaI+RgKSxEggySWmKaXkVaSwi5xSbRmGiSdZpxVZGy/eEexMso73R1o2WJwiwk+11kQNZrNO6oo+Cc7vz39Wy07q4l+CKfnNvQu/ndVsnSAkifcCOAXq7R8W1y9JdRvI87QvfnTRtgdPeujLavBLkv9meEPnUHS2Tf1EPFT67lOKRnE77munrsrkH/+IeydPXqAO/VoLMDMhz5T2irTzXpFHoKeRPnluV0XYX0mlduTLamIRJtKUR5CDbbSIrGPfX/eUdVFyTQ3luku6OaNIW/HmH5LQFt9k6oAQ5Ab7PNiyxkmGndUhRvTNyJM9F1wrZaM9IZbQmG63MocewxIejRIKg+DaKbEXGI3KWBtT2hUFKyonUZeEfB3xkX4vsM3wXvIx/IwmMqCu0WH/B9qLIpzG6Wp/rpWBFj/x1WnaCAb4G7LPgad0XbZmTEmTukDnti0yzgZvKcwNPtDzXyGjZR5ONFincVEbbVAR5je0hkU/lkTL5F3TZzQ2EvjysJr1hH/0LuiVPTz9ky1oJsgB8iwQsN5hplISns5Hn9hXl9eurMlr2zUzrVsQuk5m0ZUxKkIXhKNsWkQN2yHNPhzx3WbqQMRZGYCOjXWZ8FDzjtsWWsRJkEfgh2zvyOvhWnovsucu75GTPtdlo4RN8i+W+s3nHli0pQRaPIXEeVeW53V46YJciz2Uf4IvxiX0juW/9h/JQ8fJCkGfZnpE5YK9QsHIJBZcIkOdW141d3Gt8EiyjfcaWqRKk6Z84kOc6duODjmzluUZGyz4g6Q18UhltaxHkXbbtIgfsRyvknQt5bobZc6dltP3Gl0SudmW7LUslSJ1mPUbFeWVUepDnDpB3SgazRtW0BXxt+ABfhE7rypyVbCKCTLF9U2QrgjQKg3b7zskGv3eI0+XsuDZ8EJy2YJMtQyVIHfEztldFDtghz728j4LzGphGoZq2gK9ZMDuwiH3ngTJ7OG+VLY8EAeTKc9ts9lwk42zEOi2st+JrYZIA1xYso12Xx4qWV4K8xPZzka3ISCrPDVY1YJ1WtfVYZWW0ctdbPW7LTAnSQHyDJCoykEYhTNdpuUsK6YDZqQ85cG5cw6y3CsWmLYBXG/NayfJMkI8oVR/KG7AfC8k7u4MKVw2kM1r1eB2RpDNXuAauJVhGe6stKyVIBrid7YA4r6o5N5BG4cxOI3mtaeWtymj53LiG4FwmKJs78lzB8k4QVIsN4ryqynN7AzP1ShXIc2tYg3GuSpJO6/aKltHK3KWmhQgCPMm2R+SAfTSkANlzV9Rw2rc6MDcyWtHZaPfYsiElSPaQOYVYiSnxiIprB8kpeGn+v8U2mZD8FjxzTpybKjqtqwQ5Od5g2yGyq4Xsued3UeHSvsW3IlUZLZ8L5xSctmCHLRMliCBgN/AJcV7F6SpbjBe8gUWkUaimLeBzmOUsU2JltOMkcbd+JQiNkYB8ErNVbPe0Nmq72i4kXMiwNUnfe+AcOJfgfCWbbVkoQQTiR2xvivPKynODNX0ULF9AGoVq2gL+Lc4hWEaL2N/XTBWq2Qgic3BYled2+ekeVfOV51az0WKNF59DsIx2XbNVpmYkyPNsuyWSBBJYf+USKsxHnlvNRsu/8WXLaHfb2CtBcoD1Ir2CPJf/wxSt2xmkupGT9c6QtoCPNdO66FfJldGub8aK1KwEeY9tm8gB+2hI3jmdVLii/+RbBdktfHAsfpPIfSm4zcZcCZIjfJftiMQBO1IQQBrrn3qCRYZ20SOOMTLacbHrrRDjW5q1EjUzQbiTTzeIbEUgz+232XNne59RfX+CbLT9omW0iHFFCZJPPMr2W5EDdshzL1tKwfkzrNOqrrfi73CMYBntKzbGpATJL64X6RXWZRVtxlnP+VgaBZO2wEu/wzGatkAJUk+8zLZLZCuCdVoXciux+rhVuXYVMD7Dd7Hc9Va7bGyVIE0Amf3kaXnuIHm9qTwXhr/xmWAZbUXk+E4JsmAcZtsqcsAOee6Z7VS08lwY/sZngmW0W21MlSBNhLvY9onzCqtIxipUuKqf3L6iMfyNz4RO6+6zsWwJ+NRawNvep8S1IhMxucie+8VT0o+6PIqPiB17rG+lCtNqBPkl2wts14gbsCONwqVLzT8Fr7d6wcawZeBS60Hm1GSSTu+a6d5EY6cEyQ5/YLtf4oCd4iQ1ma3H/TZ2SpAWwLfZSqSYK0o2ZqQEaQ1AN32T1vs54yYbMyVIC+GBVuwyLLBL+kCr3rzb4oV/vdZ/jZESZHb8iqS9F5GFp2yMlCAtjCENgcZGCTI79rPdqWH4FO60sVGCKOh7bIc0DNM4ZGNCShAFEFKOsyDVARttTJQgGoJpPMb2Gw2DicFjGgYlyExYpyHQGChBZsfv2B5p4ft/xMZAoQSZFZso3TKo1VC2965QgpwQI2w3t+B932zvXaEEOSnuZtvbQve7196zQgkyZ6zXe1UoQWbH02zPtcB9PmfvVaEEmTeG9B6VIIrZ8RbbvU18f/fae1QoQRYMJKU81oT3dYwkJj1VguQOk9REaY2Pw4323hRKkEVjJ9vrTXQ/r9t7UihBaobr9V6UIIrZ8Wu2J5rgPp6w96JQgtQcG2jmhGl5QWzvQaEEqQsOst2WY/9vs/egUILUtZIN59Dv4ZyTWwmSEyDnUx7luRtJar4qJUjT4RdsL+bI3xetzwolSMOwTn1Vgihmx2tsD+XAz4esrwolSMPxLZK9XGPS+qhQgmSCo2xbBPu3xfqoUIJkhh+yvSPQr3esbwolSOYYUp+UIIrZ8SzbM4L8ecb6pFCC6BNbWw8lSB7wLtt2AX5st74olCDikPWskfRZNSVIi2OKst2+c5P1QaEEEYuH2V7N4Lqv2msrlCDisa5FrqkEUSwIL7E93sDrPW6vqVCC5AaN0l/kVZ+iBGlxfMR2awOuc6u9lkIJkjvcwXagjuc/YK+hUILkEgnVdxeRDfYaCiVIbvEk2546nHePPbdCCZJ7rMvJORVKkEzwBtuOGp5vhz2nQgnSNMBu6uM1OM84Nedu80qQFscY1SYfx2Z7LoUSpOlwH9ubi/j9m/YcCiWIDth1YK4EaUU8z7Z7Ab/bbX+rUII0PdY36DcKJUgu8R7btnkcv83+RqEEaRncwnZkDscdsccqlCAthQrbDXM47gZ7rEIJ0nJ4lO2VE3z/ij1GoQRpWaxb4HcKJUhL4GW2XTN8vst+p1CCtDw+Oc6Y6/hEoQRpCRxm23rcv7fazxRKEIXFXZRuwBDZvxUC4GsIREHflguDkyQqaVYotIulUChBFAoliEKhBFEolCAKhRJEoVCCKBRKEIVCCaJQKJQgCoUSRKFQgigUShCFIhP8vwADACog5YM65zugAAAAAElFTkSuQmCC" />)</a>
-                <span id="icon006" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/vue" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera and images in a Next.js
-                        Application." target="_blank"><a class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/next#readme">
+                </div>
+                <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Decode video stream in a Next.js
+                Application from a USB-connected or built-in camera (mobile or desktop)." class="button title"
+                     href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.4.31/hello-world/next">
                     Hello World in
-                    Next.js (<svg width="30px" height="17px" viewBox="0 0 207 124" version="1.1"
-                        xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-                        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-                            <g id="Black-Next.js" transform="translate(-247.000000, -138.000000)" fill="#000000"
-                                fill-rule="nonzero">
-                                <g id="next-black" transform="translate(247.000000, 138.000000)">
-                                    <g id="EXT-+-Type-something">
-                                        <path
-                                            d="M48.9421964,32.6320058 L87.9011585,32.6320058 L87.9011585,35.7136421 L52.5134345,35.7136421 L52.5134345,58.9070103 L85.7908813,58.9070103 L85.7908813,61.9886466 L52.5134345,61.9886466 L52.5134345,87.4526941 L88.306981,87.4526941 L88.306981,90.5343303 L48.9421964,90.5343303 L48.9421964,32.6320058 Z M91.3912326,32.6320058 L95.5306221,32.6320058 L113.8738,58.0960534 L132.622801,32.6320058 L158.124498,0.286809811 L116.22757,60.7722112 L137.817329,90.5343303 L133.51561,90.5343303 L113.8738,63.4483691 L94.1508254,90.5343303 L89.9302715,90.5343303 L111.682358,60.7722112 L91.3912326,32.6320058 Z M139.359455,35.713642 L139.359455,32.6320058 L183.756439,32.6320058 L183.756439,35.7136421 L163.302983,35.7136421 L163.302983,90.5343303 L159.731745,90.5343303 L159.731745,35.7136421 L139.359455,35.713642 Z"
-                                            id="EXT"></path>
-                                        <polygon id="Type-something"
-                                            points="0.202923647 32.6320058 4.66697141 32.6320058 66.2235778 124.303087 40.785176 90.5343303 3.93649086 37.0111732 3.77416185 90.5343303 0.202923647 90.5343303">
-                                        </polygon>
-                                    </g>
-                                    <path
-                                        d="M183.396622,86.5227221 C184.134938,86.5227221 184.673474,85.9601075 184.673474,85.233037 C184.673474,84.5059658 184.134938,83.9433513 183.396622,83.9433513 C182.666993,83.9433513 182.11977,84.5059658 182.11977,85.233037 C182.11977,85.9601075 182.666993,86.5227221 183.396622,86.5227221 Z M186.905793,83.1297235 C186.905793,85.2763149 188.460599,86.678523 190.727662,86.678523 C193.142388,86.678523 194.601647,85.233037 194.601647,82.7229099 L194.601647,73.8855335 L192.655968,73.8855335 L192.655968,82.7142542 C192.655968,84.1078073 191.952397,84.8521899 190.710289,84.8521899 C189.598473,84.8521899 188.842785,84.1597409 188.816727,83.1297235 L186.905793,83.1297235 Z M197.146664,83.0172011 C197.285642,85.2503478 199.153145,86.678523 201.932686,86.678523 C204.903321,86.678523 206.762139,85.1811034 206.762139,82.792155 C206.762139,80.9138876 205.702439,79.8752151 203.131364,79.2779777 L201.750279,78.9404092 C200.117298,78.5595622 199.457158,78.0488813 199.457158,77.1573541 C199.457158,76.0321243 200.482113,75.296398 202.019547,75.296398 C203.478806,75.296398 204.48639,76.0148135 204.668797,77.1660091 L206.562359,77.1660091 C206.44944,75.0626962 204.590622,73.5825873 202.045605,73.5825873 C199.309495,73.5825873 197.48542,75.0626962 197.48542,77.2871878 C197.48542,79.1221767 198.519063,80.2127835 200.786126,80.7407758 L202.401734,81.1302779 C204.060773,81.5197807 204.790402,82.091051 204.790402,83.0431676 C204.790402,84.1510859 203.643842,84.9560573 202.08035,84.9560573 C200.403939,84.9560573 199.240006,84.2030196 199.074971,83.0172011 L197.146664,83.0172011 Z"
-                                        id=".JS"></path>
-                                </g>
-                            </g>
-                        </g>
-                    </svg>)</a><span id="icon007" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/next" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera and images in a NuxtJS
-                        Application."><a class="button title" target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/nuxt#readme">
+                    Next.js (<svg width="30px" height="17px" viewBox="0 0 207 124" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Black-Next.js" transform="translate(-247.000000, -138.000000)" fill="#000000" fill-rule="nonzero"><g id="next-black" transform="translate(247.000000, 138.000000)"><g id="EXT-+-Type-something"><path d="M48.9421964,32.6320058 L87.9011585,32.6320058 L87.9011585,35.7136421 L52.5134345,35.7136421 L52.5134345,58.9070103 L85.7908813,58.9070103 L85.7908813,61.9886466 L52.5134345,61.9886466 L52.5134345,87.4526941 L88.306981,87.4526941 L88.306981,90.5343303 L48.9421964,90.5343303 L48.9421964,32.6320058 Z M91.3912326,32.6320058 L95.5306221,32.6320058 L113.8738,58.0960534 L132.622801,32.6320058 L158.124498,0.286809811 L116.22757,60.7722112 L137.817329,90.5343303 L133.51561,90.5343303 L113.8738,63.4483691 L94.1508254,90.5343303 L89.9302715,90.5343303 L111.682358,60.7722112 L91.3912326,32.6320058 Z M139.359455,35.713642 L139.359455,32.6320058 L183.756439,32.6320058 L183.756439,35.7136421 L163.302983,35.7136421 L163.302983,90.5343303 L159.731745,90.5343303 L159.731745,35.7136421 L139.359455,35.713642 Z" id="EXT"></path><polygon id="Type-something" points="0.202923647 32.6320058 4.66697141 32.6320058 66.2235778 124.303087 40.785176 90.5343303 3.93649086 37.0111732 3.77416185 90.5343303 0.202923647 90.5343303"></polygon></g><path d="M183.396622,86.5227221 C184.134938,86.5227221 184.673474,85.9601075 184.673474,85.233037 C184.673474,84.5059658 184.134938,83.9433513 183.396622,83.9433513 C182.666993,83.9433513 182.11977,84.5059658 182.11977,85.233037 C182.11977,85.9601075 182.666993,86.5227221 183.396622,86.5227221 Z M186.905793,83.1297235 C186.905793,85.2763149 188.460599,86.678523 190.727662,86.678523 C193.142388,86.678523 194.601647,85.233037 194.601647,82.7229099 L194.601647,73.8855335 L192.655968,73.8855335 L192.655968,82.7142542 C192.655968,84.1078073 191.952397,84.8521899 190.710289,84.8521899 C189.598473,84.8521899 188.842785,84.1597409 188.816727,83.1297235 L186.905793,83.1297235 Z M197.146664,83.0172011 C197.285642,85.2503478 199.153145,86.678523 201.932686,86.678523 C204.903321,86.678523 206.762139,85.1811034 206.762139,82.792155 C206.762139,80.9138876 205.702439,79.8752151 203.131364,79.2779777 L201.750279,78.9404092 C200.117298,78.5595622 199.457158,78.0488813 199.457158,77.1573541 C199.457158,76.0321243 200.482113,75.296398 202.019547,75.296398 C203.478806,75.296398 204.48639,76.0148135 204.668797,77.1660091 L206.562359,77.1660091 C206.44944,75.0626962 204.590622,73.5825873 202.045605,73.5825873 C199.309495,73.5825873 197.48542,75.0626962 197.48542,77.2871878 C197.48542,79.1221767 198.519063,80.2127835 200.786126,80.7407758 L202.401734,81.1302779 C204.060773,81.5197807 204.790402,82.091051 204.790402,83.0431676 C204.790402,84.1510859 203.643842,84.9560573 202.08035,84.9560573 C200.403939,84.9560573 199.240006,84.2030196 199.074971,83.0172011 L197.146664,83.0172011 Z" id=".JS"></path></g></g></g></svg>)</a>
+                </div>
+                <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Decode video stream in a NuxtJS
+                Application from a USB-connected or built-in camera (mobile or desktop)." class="button title"
+                     href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.4.31/hello-world/nuxt">
                     Hello World in
-                    NuxtJS (<svg width="20px" height="17px" xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 400 400">
-                        <g fill-rule="nonzero" transform="translate(0 50)" fill="none">
-                            <path
-                                d="M227.92099 83.45116l-13.6889 24.10141-46.8148-82.44693L23.7037 278.17052h97.3037c0 13.31084 10.61252 24.10142 23.70371 24.10142H23.70371c-8.46771 0-16.29145-4.59601-20.5246-12.05272-4.23315-7.4567-4.23272-16.64312.00114-24.0994L146.89383 13.05492c4.23415-7.45738 12.0596-12.05138 20.5284-12.05138 8.46878 0 16.29423 4.594 20.52839 12.05138l39.97037 70.39623z"
-                                fill="#00C58E" />
-                            <path
-                                d="M331.6642 266.11981l-90.05432-158.56724-13.6889-24.10141-13.68888 24.10141-90.04445 158.56724c-4.23385 7.45629-4.23428 16.64271-.00113 24.09941 4.23314 7.4567 12.05689 12.05272 20.5246 12.05272h166.4c8.46946 0 16.29644-4.591 20.532-12.04837 4.23555-7.45736 4.23606-16.64592.00132-24.10376h.01976zM144.7111 278.17052L227.921 131.65399l83.19012 146.51653h-166.4z"
-                                fill="#2F495E" />
-                            <path
-                                d="M396.04938 290.22123c-4.23344 7.45557-12.05656 12.0507-20.52345 12.0507H311.1111c13.0912 0 23.7037-10.79057 23.7037-24.10141h40.66173L260.09877 74.98553l-18.4889 32.56704L227.921 83.45116l11.65432-20.51634c4.23416-7.45738 12.0596-12.05138 20.5284-12.05138 8.46879 0 16.29423 4.594 20.52839 12.05138l115.41728 203.185c4.23426 7.457 4.23426 16.6444 0 24.1014z"
-                                fill="#108775" />
-                        </g>
-                    </svg>)</a><span id="icon008" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/nuxt" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera and images in a Electron
-                        Application."><a class="button title" target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/electron#readme">
+                    NuxtJS (<svg width="20px" height="17px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill-rule="nonzero" transform="translate(0 50)" fill="none"><path d="M227.92099 83.45116l-13.6889 24.10141-46.8148-82.44693L23.7037 278.17052h97.3037c0 13.31084 10.61252 24.10142 23.70371 24.10142H23.70371c-8.46771 0-16.29145-4.59601-20.5246-12.05272-4.23315-7.4567-4.23272-16.64312.00114-24.0994L146.89383 13.05492c4.23415-7.45738 12.0596-12.05138 20.5284-12.05138 8.46878 0 16.29423 4.594 20.52839 12.05138l39.97037 70.39623z" fill="#00C58E"/><path d="M331.6642 266.11981l-90.05432-158.56724-13.6889-24.10141-13.68888 24.10141-90.04445 158.56724c-4.23385 7.45629-4.23428 16.64271-.00113 24.09941 4.23314 7.4567 12.05689 12.05272 20.5246 12.05272h166.4c8.46946 0 16.29644-4.591 20.532-12.04837 4.23555-7.45736 4.23606-16.64592.00132-24.10376h.01976zM144.7111 278.17052L227.921 131.65399l83.19012 146.51653h-166.4z" fill="#2F495E"/><path d="M396.04938 290.22123c-4.23344 7.45557-12.05656 12.0507-20.52345 12.0507H311.1111c13.0912 0 23.7037-10.79057 23.7037-24.10141h40.66173L260.09877 74.98553l-18.4889 32.56704L227.921 83.45116l11.65432-20.51634c4.23416-7.45738 12.0596-12.05138 20.5284-12.05138 8.46879 0 16.29423 4.594 20.52839 12.05138l115.41728 203.185c4.23426 7.457 4.23426 16.6444 0 24.1014z" fill="#108775"/></g></svg>)</a>
+                </div>
+                <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Decode video stream in a Electron
+                Application from a USB-connected or built-in camera (desktop only)." class="button title"
+                     href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.4.31/hello-world/electron">
                     Hello World in
                     Electron (<img alt="Electron logo"
-                        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAABmJLR0QA/wD/AP+gvaeTAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE5LTAzLTMxVDIzOjUxOjI3KzAwOjAwzwUHXwAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOS0wMy0zMVQyMzo1MToyNyswMDowML5Yv+MAAANzSURBVDhPdZRtTFtlFMd/vbe0aymUQh1gmakjE4GhLkt0i1OBbUxXkYFbzAzGaNTEMP1gMrfMTDGonzf3kmX4zbcP7sXBkL2AG27OGESNcYVukGVAHUIUWgT6Xs9zByEz8dzcPDfPec7/+Z9z/uea0mL8x46faKej8xx+f4BQKIzTmU1ZaQm+zTU821A7f2rR7gC5cPES2xtfQ9c07HYbpFJY7XZis7OkNZ1ZWZOy98WnR6muemw+CrT5lYOHW6mrbyTXlYNLXl32VtZs4uHntlPy+BOQiBv7yr+loZEDh1pvB4oZTBQDBbBsmYdkPE46lVQuHG43q7bUk4hEuPFTL7f6/Wi6GT0jg5GRIKdOfk5V5brbIAWeUrnFKbRnKN+4CZfHw1/Dw/R3d5GIRVnicFDz1k6unj2D3eWi/9suLJlZTE1OcSvYj17xwOrms+e60SXXuvdbGOju5vql75gMjlK2fgMPPl0roEXc7OsTciamJyaobnpDznWh+Hq996BnZuU1j46MUvzIGoZ/6WMsMEB2fj7rd7zJ4JXv+f1MJ+OD1w1QBfhbZ4dgmbDY7ETCYWKxOJpqo9VqZWJokIL77sezsoLVDVs51fwufw/fJJVMYha/ZjYb9TLJk+e91wC1WC34+wNo4elpKZbOzOQk0Zl/8FRU0HVgP/acHCNwV89lEtEoiBKUGDJsNhy5ucTm5tBECuGwxGdnZ4kzTSqRYOmKFaTkNgWq9tTNfcePGW1U9VBdW1pcTM/RI5KOzTij4rWyshKikShur1dq8jO/trdR3/KhkYICuXDkkPEtVNCF2VggYDBLxGLExa/iNd9TNUyHQixfs1ZEVWkcPrb7bR6qfYZ1L70slHWDejqZEr3FjRo9uXMX5Rs2Ep4KGaNg6MR913Ie3baNovJyzu/fh7OwEEeem7EBP2tfeFHSUKnJzcIgU3Riczq50dvLj21tTIwPLSj2Mj7fVjyFBVhkVqIzM/h27+Hr9/ZitlgkOMKqunqGfrgirGSOhFVwbJyOjq8WFavqdvDwJ+x5p4WioruNTqjCVb7eRKDnIqVV1XR9vM+ogxqH0eAffPTBXnY0vaJCF0GUKUbPN75qtM62xEpaOpYvHfvz2jVMGRbmZIbUFH/5WavBYMHuAFmwEyfbOf3NefxXB5iS4uXIXP3//wT+Bb4xmi8orIo3AAAAAElFTkSuQmCC">)</a>
-                <span id="icon009" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/electron" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera in a progressive web application."><a class="button title" href="https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/hello-world/pwa/helloworld-pwa.html">Hello World in
-                    PWA</a><span id="icon010" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/pwa" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera in a web application that uses RequireJS."><a class="button title" href="https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/hello-world/requirejs.html">Hello
-                    World with
-                    RequireJS</a><span id="icon011" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/foundational-api-samples/hello-world/requirejs.html" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera in a web application that uses ES6."><a class="button title" href="https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/hello-world/es6.html">Hello
-                    World with
-                    ES6</a><span id="icon012" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/es6.html" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera in WebView." target="_blank"><a class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/webview">
-                Hello World in
-                WebView </a><span id="icon007" class="tooltipIcon"></span>
-            <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/webview" title="Check code on GitHub"></a></span>
-        </div>
+                            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAABmJLR0QA/wD/AP+gvaeTAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE5LTAzLTMxVDIzOjUxOjI3KzAwOjAwzwUHXwAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOS0wMy0zMVQyMzo1MToyNyswMDowML5Yv+MAAANzSURBVDhPdZRtTFtlFMd/vbe0aymUQh1gmakjE4GhLkt0i1OBbUxXkYFbzAzGaNTEMP1gMrfMTDGonzf3kmX4zbcP7sXBkL2AG27OGESNcYVukGVAHUIUWgT6Xs9zByEz8dzcPDfPec7/+Z9z/uea0mL8x46faKej8xx+f4BQKIzTmU1ZaQm+zTU821A7f2rR7gC5cPES2xtfQ9c07HYbpFJY7XZis7OkNZ1ZWZOy98WnR6muemw+CrT5lYOHW6mrbyTXlYNLXl32VtZs4uHntlPy+BOQiBv7yr+loZEDh1pvB4oZTBQDBbBsmYdkPE46lVQuHG43q7bUk4hEuPFTL7f6/Wi6GT0jg5GRIKdOfk5V5brbIAWeUrnFKbRnKN+4CZfHw1/Dw/R3d5GIRVnicFDz1k6unj2D3eWi/9suLJlZTE1OcSvYj17xwOrms+e60SXXuvdbGOju5vql75gMjlK2fgMPPl0roEXc7OsTciamJyaobnpDznWh+Hq996BnZuU1j46MUvzIGoZ/6WMsMEB2fj7rd7zJ4JXv+f1MJ+OD1w1QBfhbZ4dgmbDY7ETCYWKxOJpqo9VqZWJokIL77sezsoLVDVs51fwufw/fJJVMYha/ZjYb9TLJk+e91wC1WC34+wNo4elpKZbOzOQk0Zl/8FRU0HVgP/acHCNwV89lEtEoiBKUGDJsNhy5ucTm5tBECuGwxGdnZ4kzTSqRYOmKFaTkNgWq9tTNfcePGW1U9VBdW1pcTM/RI5KOzTij4rWyshKikShur1dq8jO/trdR3/KhkYICuXDkkPEtVNCF2VggYDBLxGLExa/iNd9TNUyHQixfs1ZEVWkcPrb7bR6qfYZ1L70slHWDejqZEr3FjRo9uXMX5Rs2Ep4KGaNg6MR913Ie3baNovJyzu/fh7OwEEeem7EBP2tfeFHSUKnJzcIgU3Riczq50dvLj21tTIwPLSj2Mj7fVjyFBVhkVqIzM/h27+Hr9/ZitlgkOMKqunqGfrgirGSOhFVwbJyOjq8WFavqdvDwJ+x5p4WioruNTqjCVb7eRKDnIqVV1XR9vM+ogxqH0eAffPTBXnY0vaJCF0GUKUbPN75qtM62xEpaOpYvHfvz2jVMGRbmZIbUFH/5WavBYMHuAFmwEyfbOf3NefxXB5iS4uXIXP3//wT+Bb4xmi8orIo3AAAAAElFTkSuQmCC">)</a>
+                </div>
+                <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Decode video stream in a progressive web application from a USB-connected or built-in camera (mobile or desktop)." class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.4.31/hello-world/pwa">Hello World in PWA</a>
+                </div>
+                <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Decode video stream from a USB-connected or built-in camera (mobile or desktop) in a web application that uses RequireJS." class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.31/hello-world/requirejs.html">Hello World with RequireJS</a>
+                </div>
+                <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Decode video stream in a progressive web application from a USB-connected or built-in camera (mobile or desktop)." class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.4.31/hello-world/es6.html">Hello World with ES6</a>
+                </div>
+                <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="down" aria-label="Decode video stream from a USB-connected or built-in camera (mobile or desktop) in a web application that uses RequireJS." class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.31/hello-world/webview">Hello World in WebView</a>
+                </div>
         </div>
         <div class="file">Use Case</div>
         <div class="children">
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="up" aria-label="Read barcodes to fill a form."><a class="button title" href="https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/use-case/fill-a-form-with-barcode-reading.html">Read Video and
+            <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="up"
+                    aria-label="Read barcodes to fill a form." class="button title"
+                     href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.4.31/use-case#read-barcodes-and-fill-form-fields">Read Video and
                     Fill a
-                    Form</a><span id="icon041" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/foundational-api-samples/use-case/fill-a-form-with-barcode-reading.html" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="up" aria-label="Read the PDF417 barcode on a driver's
-                license (AAMVA compliant) and parse it."><a class="button title" href="https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/use-case/read-a-drivers-license/index.html">Read a
-                    Driver's License</a><span id="icon042" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/foundational-api-samples/use-case/read-a-drivers-license/index.html" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="up" aria-label="Read barcodes from camera and show result texts on the video."><a class="button title" href="https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/use-case/show-result-texts-on-the-video.html">Show Result Texts on the Video</a><span id="icon042" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/foundational-api-samples/use-case/show-result-texts-on-the-video.html" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="up" aria-label="Locate an item quickly by scanning barcodes."><a class="button title" href="https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/use-case/locate-an-item-with-barcode/index.html">Find Item via Barcode</a><span id="icon042" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/foundational-api-samples/use-case/locate-an-item-with-barcode/index.html" title="Check code on GitHub"></a></span>
-            </div>
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="up" aria-label="Read the GS1-AI barcode and parse it."><a class="button title" href="https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/use-case/read-and-parse-GS1-AI/index.html">Read the GS1-AI Barcode and Parse It</a><span id="icon042" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/foundational-api-samples/use-case/read-and-parse-GS1-AI/index.html" title="Check code on GitHub"></a></span>
-            </div>
+                    Form</a></div>
+            <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="up" aria-label="Read the PDF417 barcode on a driver's
+                license (AAMVA compliant) and parse it." class="button title"
+                     href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.4.31/use-case#read-the-pdf417-barcode-on-the-drivers-license">Read a
+                    Driver's License</a></div>
+            <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="up"
+                    aria-label="Read barcodes via camera and show result texts on the video." class="button title"
+                     href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.4.31/use-case#read-barcodes-via-camera-and-show-result-texts-on-the-video">Show Result Texts on the Video</a></div>
+            <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="up" aria-label="Find a specific item in a large 
+                collection by scanning its unique barcode." class="button title"
+                     href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.4.31/use-case#locate-an-item-via-barcode">Find Item via Barcode</a></div>
         </div>
+        <!--<div class="file">Performance</div>-->
         <div class="file">Others</div>
         <div class="children">
-            <div class="file"><span data-balloon-length="large" data-balloon-pos="up" aria-label="Collect image frames which failed to be read for debugging purposes."><a class="button title" target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/others/debug">Collect
-                    Images for Debugging</a><span id="icon051" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/others/debug" title="Check code on GitHub"></a></span>
+            <div class="file"><a data-balloon-length="xlarge" data-balloon-pos="up"
+                    aria-label="Collect
+                        image frames which failed to be read for debugging purposes." class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.4.31/others/debug">Collect
+                        Images for Debugging</a>
             </div>
         </div>
     </div>
-    <div class="file"><span data-balloon-length="large" data-balloon-pos="up" aria-label="Official demo for Dynamsoft Barcode Reader JavaScript Edition"><a class="button title" href="https://demo.dynamsoft.com/barcode-reader-js/" target="_blank">Official Online Demo</a>
-        <span id="icon051" class="tooltipIcon"></span>
-        <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-demo" title="Check code on GitHub"></a></span>
+    <div class="children">
+        <div class="file"><a href="https://demo.dynamsoft.com/barcode-reader-js/" target="_blank">Official online Demo</a></div>
     </div>
-</div>
\ No newline at end of file
+
+</div>
+<style>
+:root{--balloon-border-radius: 2px; --balloon-color: rgba(16, 16, 16, 0.95); --balloon-text-color: #fff; --balloon-font-size: 12px; --balloon-move: 4px}button[aria-label][data-balloon-pos]{overflow:visible}[aria-label][data-balloon-pos]{position:relative; cursor:pointer}[aria-label][data-balloon-pos]:after{opacity:0; pointer-events:none; transition:all 0.18s ease-out 0.18s; text-indent:0; font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-weight:normal; font-style:normal; text-shadow:none; font-size:var(--balloon-font-size); background:var(--balloon-color); border-radius:2px; color:var(--balloon-text-color); border-radius:var(--balloon-border-radius); content:attr(aria-label); padding:.5em 1em; position:absolute; white-space:nowrap; z-index:10}[aria-label][data-balloon-pos]:before{width:0; height:0; border:5px solid transparent; border-top-color:var(--balloon-color); opacity:0; pointer-events:none; transition:all 0.18s ease-out 0.18s; content:""; position:absolute; z-index:10}[aria-label][data-balloon-pos]:hover:before, [aria-label][data-balloon-pos]:hover:after, [aria-label][data-balloon-pos][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-visible]:after, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:before, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:after{opacity:1; pointer-events:none}[aria-label][data-balloon-pos].font-awesome:after{font-family: FontAwesome, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif}[aria-label][data-balloon-pos][data-balloon-break]:after{white-space:pre}[aria-label][data-balloon-pos][data-balloon-break][data-balloon-length]:after{white-space:pre-line; word-break:break-word}[aria-label][data-balloon-pos][data-balloon-blunt]:before, [aria-label][data-balloon-pos][data-balloon-blunt]:after{transition:none}[aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:after{transform:translate(-50%, 0)}[aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:before{transform:translate(-50%, 0)}[aria-label][data-balloon-pos][data-balloon-pos*="-left"]:after{left:0}[aria-label][data-balloon-pos][data-balloon-pos*="-left"]:before{left:5px}[aria-label][data-balloon-pos][data-balloon-pos*="-right"]:after{right:0}[aria-label][data-balloon-pos][data-balloon-pos*="-right"]:before{right:5px}[aria-label][data-balloon-pos][data-balloon-po*="-left"]:hover:after, [aria-label][data-balloon-pos][data-balloon-po*="-left"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:after{transform:translate(0, 0)}[aria-label][data-balloon-pos][data-balloon-po*="-left"]:hover:before, [aria-label][data-balloon-pos][data-balloon-po*="-left"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:before{transform:translate(0, 0)}[aria-label][data-balloon-pos][data-balloon-pos^="up"]:before, [aria-label][data-balloon-pos][data-balloon-pos^="up"]:after{bottom:100%; transform-origin:top; transform:translate(0, var(--balloon-move))}[aria-label][data-balloon-pos][data-balloon-pos^="up"]:after{margin-bottom:10px}[aria-label][data-balloon-pos][data-balloon-pos="up"]:before, [aria-label][data-balloon-pos][data-balloon-pos="up"]:after{left:50%; transform:translate(-50%, var(--balloon-move))}[aria-label][data-balloon-pos][data-balloon-pos^="down"]:before, [aria-label][data-balloon-pos][data-balloon-pos^="down"]:after{top:100%; transform:translate(0, calc(var(--balloon-move) * -1))}[aria-label][data-balloon-pos][data-balloon-pos^="down"]:after{margin-top:10px}[aria-label][data-balloon-pos][data-balloon-pos^="down"]:before{width:0; height:0; border:5px solid transparent; border-bottom-color:var(--balloon-color)}[aria-label][data-balloon-pos][data-balloon-pos="down"]:after, [aria-label][data-balloon-pos][data-balloon-pos="down"]:before{left:50%; transform:translate(-50%, calc(var(--balloon-move) * -1))}[aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:after{transform:translate(0, -50%)}[aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:before{transform:translate(0, -50%)}[aria-label][data-balloon-pos][data-balloon-pos="left"]:after, [aria-label][data-balloon-pos][data-balloon-pos="left"]:before{right:100%; top:50%; transform:translate(var(--balloon-move), -50%)}[aria-label][data-balloon-pos][data-balloon-pos="left"]:after{margin-right:10px}[aria-label][data-balloon-pos][data-balloon-pos="left"]:before{width:0; height:0; border:5px solid transparent; border-left-color:var(--balloon-color)}[aria-label][data-balloon-pos][data-balloon-pos="right"]:after, [aria-label][data-balloon-pos][data-balloon-pos="right"]:before{left:100%; top:50%; transform:translate(calc(var(--balloon-move) * -1), -50%)}[aria-label][data-balloon-pos][data-balloon-pos="right"]:after{margin-left:10px}[aria-label][data-balloon-pos][data-balloon-pos="right"]:before{width:0; height:0; border:5px solid transparent; border-right-color:var(--balloon-color)}[aria-label][data-balloon-pos][data-balloon-length]:after{white-space:normal}[aria-label][data-balloon-pos][data-balloon-length="small"]:after{width:80px}[aria-label][data-balloon-pos][data-balloon-length="medium"]:after{width:150px}[aria-label][data-balloon-pos][data-balloon-length="large"]:after{width:260px}[aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after{width:380px}@media screen and (max-width: 768px){[aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after{width:90vw}}[aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after{width:100%}    
+.filetree {
+    font-family: "Open Sans", sans-serif;
+    text-align: left;
+    border-radius: 4px;
+    margin: 0 auto;
+    max-width: 800px;
+    padding: 16px 32px;
+}
+.filetree .ds-logo {
+    height: 3vh;
+    background: url(logo-dynamsoft-black.svg) no-repeat 0;
+}
+.filetree h3 {
+    margin: 1vh auto;
+}
+.filetree .description {
+    border: dashed 1px gray;
+    padding: 1vmin;
+}
+.filetree .file a {
+    z-index: auto;
+}
+.filetree .file {
+    display: block;
+    font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
+    letter-spacing: 0.3px;
+    line-height: 32px;
+    color: #333;
+}
+.filetree .children {
+    padding-left: 24px;
+    position: relative;
+}
+.filetree .children .file {
+    position: relative;
+}
+.filetree .children .file a {
+    z-index: auto;
+}
+.filetree .children .file::before {
+    content: '';
+    left: -18px;
+    bottom: 16px;
+    width: 16px;
+    height: 20px;
+    position: absolute;
+    border-width: 0 0 1px 1px;
+    border-style: solid;
+    border-color: #dbdbdb;
+    border-radius: 0 0 0 3px;
+}
+.filetree [aria-label] {
+    line-height: 15px;
+}
+.filetree .title img, .filetree .title svg {
+    height: 17px;
+    vertical-align: middle;
+}
+.filetree .tooltipIcon {
+    display: inline-block; 
+    width: 17px; 
+    height: 17px;
+    vertical-align: middle;
+    background: url(data:image/png; base64, iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAg5JREFUOBGVkktrE2EUhjuTSUJwExCColSwFAIFaZFSwaZ0abx110rugf4Ef0Drr3AxaTKJZNFSNwYDJbgxblQQN22xFFpF0J07Dbn1OaFnGMciZOCb833vec/9GBMXfNlstmCa5n3DMBKoDznx4XDYBmuUy2XHb2J4gWKxuAB5h2Nj0EbuVyqVH4VC4UogEJjpdruL4Nl+v/+kVqt9VFvXSSqVuhEKhXYty3pg2/ZPJfhlJpO5isPXBFipVqtfXb1kkM/nXc+u4j8X+J84t4ViyU9KCAaD83L3ful0+jqZvaQ3S5T1x6vD5iH4W7CbxnkTJx3HeeYl6V3KrNfrp/r2Snq1wfvYkikMBoPnXqXcISSIttTr9f6ZhnKl+diumzJGGrWvCpXgQQiXKPOFYn5JgAMCLZooDmWMfgL78CYajW6C3/Hr9M10vhPsSJzEZQ9UMY7M5XLXyGTa5NeWRRrHWLlMboZMZJPNhmyiKsaRbO5d+vJqtLEszREZLUuNXifJZDIci8VanU5nLRKJBOjTN9VTyiQJ7NHPuPRkgscKabWUoLLZbHbQPQ2Hww6TshUXCd4Ceyz3USZywfNlHH0go3tk9EWwiz6GEAff49wii1/CcZ3Ig7KmEFuc9zj7TLQ2zftN3RGwBJFnCTQHViyVSqdgo+8vJwoS7RFOVnlPYbSAfMc5wck2WTaUp/IMAjTZicjWFTcAAAAASUVORK5CYII=) right center no-repeat; 
+    background-size: 100%; 
+    margin-left: 5px; 
+}
+</style>
diff --git a/programming/javascript/upgrade-guide/10to11.md b/programming/javascript/upgrade-guide/10to11.md
deleted file mode 100644
index e036d73c..00000000
--- a/programming/javascript/upgrade-guide/10to11.md
+++ /dev/null
@@ -1,75 +0,0 @@
----
-layout: default-layout
-title: Upgrade guide for version 10 to 11 - Dynamsoft Barcode Reader JavaScript Edition
-description: This page shows how to upgrade Dynamsoft Barcode Reader JavaScript SDK from version 10 to 11.
-keywords: user guide, upgrade, javascript, js
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/upgrade-guide/10to11.html
----
-
-# How to Upgrade DBR-JS from v10.x to v11.x
-
-## Reference the latest version of the dynamsoft-barcode-reader-bundle
-
-To use version 11, include the following script in your HTML:
-
-```html
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.6000/dist/dbr.bundle.js"></script>
-```
-
-## APIs changes introduced in v11
-
-### BarcodeScanner API Changes
-
-Several properties have been renamed or had their default values changed. Please review the table below and update your implementation accordingly if you rely on the previous defaults.
-
-| Property                                | Old Default | New Default | Notes                                                          |
-| --------------------------------------- | ----------- | ----------- | -------------------------------------------------------------- |
-| `removePoweredByMessage` *(deprecated)* | `false`     | —           | Replaced by `showPoweredByDynamsoft`                           |
-| `showPoweredByDynamsoft`                | `false`     | `true`      | Controls whether the "Powered by Dynamsoft" label is displayed |
-| `showCloseButton`                       | `false`     | `true`      | Controls whether the close button is shown in the scannerView  |
-| `showResultView`                        | `false`     | `true`      | Controls whether the result view is shown                      |
-
-> [!NOTE]
-> If your project depends on the previous default behavior, you must explicitly set these properties to maintain compatibility.
-
-### Foundational API Changes
-
-#### loadWasm() Simplified
-
-The loadWasm() function no longer requires any parameters. Simply call loadWasm() without arguments.
-
-```javascript
-Dynamsoft.Core.CoreModule.loadWasm();
-```
-
-#### engineResourcePaths Simplified
-
-There is no longer a need to define `engineResourcePaths` for different modules. Resource management has been centralized and streamlined.
-
-```javascript
-// To specify the path for rootDirectory
-Dynamsoft.Core.CoreModule.engineResourcePaths.rootDirectory = "https://cdn.jsdelivr.net/npm/";
-```
-
-> [!NOTE]
-> Remove unnecessary parameters from `loadWasm()` calls.
-> 
-> Eliminate any redundant configuration of `engineResourcePaths`.
-
-### Upgrade your template
-
-The template system is upgraded. The template you used for the previous version can’t be directly recognized by the new version. Please use the [template upgrade tool](https://www.dynamsoft.com/tools/template-upgrade/) to upgrade your template.
-
-## From version 9.x or earlier
-
-The Dynamsoft Barcode Reader JavaScript edition has been refactored to integrate with DynamsoftCaptureVision (DCV) architecture since version 10. To understand the advantages of this new architecture, please refer to these resources:
-
-* [Overview of Dynamsoft Capture Vision](https://www.dynamsoft.com/capture-vision/docs/core/introduction/)
-* [Dynamsoft Capture Vision Framework Details](https://www.dynamsoft.com/capture-vision/docs/core/architecture/)
-
-> [!IMPORTANT]
-> 
-> Dynamsoft’s ongoing feature development is based on the new DCV architecture. By upgrading to v11, you’ll gain access to improved performance and new capabilities.
-
-Due to the architectural changes, **a significant rewrite of your existing code is required**. we recommend you to follow the [User Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/barcode-scanner.html) and re-write your codes.
\ No newline at end of file
diff --git a/programming/javascript/upgrade-guide/7-notice.md b/programming/javascript/upgrade-guide/7-notice.md
deleted file mode 100644
index ac9d9b45..00000000
--- a/programming/javascript/upgrade-guide/7-notice.md
+++ /dev/null
@@ -1,43 +0,0 @@
----
-layout: default-layout
-title: END OF SUPPORT for version 7 of Dynamsoft Barcode Reader JavaScript Edition
-description: Dynamsoft Barcode Reader JavaScript Edition v7.x maintenance is ending on 2023/12/31, upgrade is recommended.
-keywords: user guide, upgrade, javascript, js, v7, end of support
-needAutoGenerateSidebar: true
-permalink: /programming/javascript/upgrade-guide/7-notice.html
-noTitleIndex: true
----
-
-# Dynamsoft Barcode Reader JavaScript Edition Version 7.x Will Reach End of Support on December 31st 2023
-
-First released on August 09th, 2019, Dynamsoft Barcode Reader JavaScript Edition Version 7.x (DBR-JS 7) had 11 minor updates in total. Version 7.6.0 was the final version of DBR-JS 7 and it was released on September 1st, 2020.
-
-Based on Dynamsoft Lifetime Support Policy, Dynamsoft is committed to providing maintenance and support for all Dynamsoft product releases for TWO years from their general availability date.
-
-DBR-JS 7 was well accepted by hundreds of customers and we extended its maintenance and support after it had reached TWO years on August 31st, 2022. However, it will reach end of support by end of this year. This means that Dynamsoft will no longer be providing updates, bug fixes, or technical support for this version beyond 2023/12/31.
-
-Since the date is fast approaching, our system will stop serving new licenses for DBR-JS 7, including validity extensions or quota extensions. The license server that supports DBR-JS 7 will be taken offline by end of 2024. If you already have a license for DBR-JS 7 beyond that time and would like to keep using it, you can [contact us](https://www.dynamsoft.com/contact/).
-
-## Upgrade is recommended
-
-If you are still using DBR-JS 7, We strongly recommend that you upgrade to our latest v9.6, which offers many new features and improvements.
-
-### What's New?
-
-- Improved recognition success rate and speed for linear barcodes
-- Faster processing of continuous video frames
-- Improved camera control, especially on android devices. For example, auto zoom and auto focus.
-- Support for many more barcode types including Pharma Code, Code 11, MSI, etc.
-- Other features and bug fixes
-
-### Try Online Demo
-
-We invite you to try our [online demo](https://demo.dynamsoft.com/barcode-reader-js) to see the latest version in action.
-
-### Free Upgrade from v7 to v9
-
-If you have a subscription license, the upgrade is free of charge. Otherwise, you can [contact us](https://www.dynamsoft.com/contact/) for a paid upgrade.
-
-We understand that upgrading to a new version can be a significant undertaking. Our support team is available to assist you if you encounter any issues during the upgrade process.
-
-[Step by step upgrade guide >](7to9.md)
\ No newline at end of file
diff --git a/programming/javascript/upgrade-guide/7to9.md b/programming/javascript/upgrade-guide/7to9.md
deleted file mode 100644
index fb440dbf..00000000
--- a/programming/javascript/upgrade-guide/7to9.md
+++ /dev/null
@@ -1,115 +0,0 @@
----
-layout: default-layout
-title: Upgrade guide for version 7 to 9 - Dynamsoft Barcode Reader JavaScript Edition
-description: This page shows how to upgrade Dynamsoft Barcode Reader JavaScript SDK from version 7 to 9.
-keywords: user guide, upgrade, javascript, js
-needAutoGenerateSidebar: true
-pageStartVer: 8.4
-permalink: /programming/javascript/upgrade-guide/7to9.html
-noTitleIndex: false
----
-
-# How to Upgrade DBR-JS From v7.x To v9.x 
-
-## Change your license
-
-   Your v7.x license is not compatible with v9.x, you must [Contact Dynamsoft Sales Team](mailto:sales@dynamsoft.com) to acquire a new license key. If you have a subscription license or you have valid maintenance for a perpetual license, the upgrade is free of charge.
-
-## Update the version number if you are using a **CDN**
-
-   ```html
-   <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.42/dist/dbr.js"></script>
-   ```
-
-   > If you have deployed the library files to your own server, [download the latest version](https://www.dynamsoft.com/barcode-reader/downloads/?utm_source=upgradeguide) and replace the old files.
-
-## Update the API you use for licensing the SDK
-
-   In v7.x, you probably licensed the SDK with "data-productKeys" like this:
-
-   ```html
-   <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@7.x/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
-   ```
-
-   In v9.x, use the API `license` instead:
-
-   ```html
-   <script>
-      Dynamsoft.DBR.BarcodeScanner.license = 'YOUR-NEW-LICENSE-KEY';
-      //...
-   </script>
-   ```
-
-## Breaking 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 make a global change from `Dynamsoft` to `Dynamsoft.DBR` in your code.
-
-### API Changes
-
-After changing the namespace, check your code and see if you are using any of the APIs in the first column below. If found, change them to the equivalent shown in the second column:
-
-| API Name | Notes |
-|:-:|:-:|
-| `Dynamsoft.DBR.detectEnvironment()` | Use `Dynamsoft.DBR.BarcodeReader.detectEnvironment()` instead. |
-| `Dynamsoft.DBR.engineResourcePath` | Use `Dynamsoft.DBR.BarcodeReader.engineResourcePath` instead. |
-| `Dynamsoft.DBR.isLoaded()` | Use `Dynamsoft.DBR.BarcodeReader.isWasmLoaded()` instead. |
-| `Dynamsoft.DBR.loadWasm()` | Use `Dynamsoft.DBR.BarcodeReader.loadWasm()` instead. |
-| `Dynamsoft.DBR.productKeys` | Use `Dynamsoft.DBR.BarcodeReader.license` instead. |
-| `Dynamsoft.DBR.version` | Use `Dynamsoft.DBR.BarcodeReader.version` instead. |
-| `destroy()` | Use `destroyContext()` instead. |
-| `bDestroyed` | Use `isContextDestroyed()` instead. |
-| `onUnduplicatedRead` | Use `onUniqueRead` instead. |
-| `bPlaySoundOnSuccessfulRead` | Use `whenToPlaySoundforSuccessfulRead` in `ScanSettings` instead. |
-| `soundOnSuccessfulRead` | Use `soundOnSuccessfullRead` in `ScanSettings` instead. |
-| `bSaveOriCanvas` | Use `ifSaveOriginalImageInACanvas` instead. |
-| `oriCanvas` | Use `getOriginalImageInACanvas()` instead. |
-
-### `deblurLevel` is Deprecated
-
-`deblurLevel` has been replaced with `deblurModes`.
-
-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);
-```
-
-### Changed Class Names of the Built-in UI elements
-
-If you manipulated any of the built-in UI elements which are located by their class names, you need to update the class name(s) used in your code.
-
-| v7.x in **dbr.scanner.html** | v9.x in **dbr.ui.html**|
-|:-:|:-:|
-| `dbrScanner-bg-loading` | `dce-bg-loading` |
-| `dbrScanner-bg-camera` | `dce-bg-camera` |
-| `dbrScanner-video` | `dce-video` |
-| `dbrScanner-cvs-scanarea` | `dce-scanarea` |
-| `dbrScanner-scanlight` | `dce-scanlight` |
-| `dbrScanner-sel-camera` | `dce-sel-camera` |
-| `dbrScanner-sel-resolutio` | `dce-sel-resolution` |
-| `dbrScanner-btn-close` | `dce-btn-close` |
-
-### Other changes
-
-The file **dbr.scanner.html** has been renamed to **dbr.ui.html**.
-
-If you are still having issue with the upgrade, please [contact us](https://www.dynamsoft.com/contact/).
diff --git a/programming/javascript/upgrade-guide/8to9.md b/programming/javascript/upgrade-guide/8to9.md
deleted file mode 100644
index da5ab207..00000000
--- a/programming/javascript/upgrade-guide/8to9.md
+++ /dev/null
@@ -1,79 +0,0 @@
----
-layout: default-layout
-title: Upgrade guide to version 9 - Dynamsoft Barcode Reader JavaScript Edition
-description: This page shows how to upgrade Dynamsoft Barcode Reader JavaScript SDK up till v9.x.
-keywords: user guide, upgrade, javascript, js
-needAutoGenerateSidebar: true
-pageStartVer: 8.4
-permalink: /programming/javascript/upgrade-guide/8to9.html
----
-
-# How to Upgrade DBR-JS from v8.x to v9.x
-
-1. Update the version number if you are using a **CDN**:
-
-   ```html
-   <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.3.33/dist/dbr.js"></script>
-   ```
-
-   > If you have deployed the library files to your own server, [download the latest version](https://www.dynamsoft.com/barcode-reader/downloads/?utm_source=upgradeguide) and replace the old files.
-
-2. Update the API you use for licensing the SDK
-
-Previously, you might have used the APIs `productKeys`, `handshakeCode`, `organizationID` and `sessionPassword`, etc. In v9.0.0+, use the API `license` instead.
-
-* If you used an offline license before, simply pass that license key using the API `license`.
-* If you used an online license before, you can log in the [customer portal](https://www.dynamsoft.com/customer/license/fullLicense) and check the according license key to be used with the API `license`.
-
-[Contact Dynamsoft Sales Team](mailto:sales@dynamsoft.com) for more information.
-
-### Breaking changes introduced in v9.0.0
-
-* The following APIs are renamed:
-
-| Old API | New API |
-|:-:|:-:|
-| `onUnduplicatedRead` | `onUniqueRead` |
-| `outputSettingsToString()` | `outputRuntimeSettingsToString()` |
-| `Dynamsoft.DBR.BarcodeReader.isLoaded()` | `Dynamsoft.DBR.BarcodeReader.isWasmLoaded()` |
-
-* The following APIs are removed:
-
-| API Name | Notes |
-|:-:|:-:|
-| `Dynamsoft.DBR.browserInfo` | Use `Dynamsoft.DBR.BarcodeReader.browserInfo` instead. |
-| `Dynamsoft.DBR.detectEnvironment()` | Use `Dynamsoft.DBR.BarcodeReader.detectEnvironment()` instead. |
-| `Dynamsoft.DBR.deviceFriendlyName` | Use `Dynamsoft.DBR.BarcodeReader.deviceFriendlyName` instead. |
-| `Dynamsoft.DBR.engineResourcePath` | Use `Dynamsoft.DBR.BarcodeReader.engineResourcePath` instead. |
-| `Dynamsoft.DBR.handshakeCode` | Use `Dynamsoft.DBR.BarcodeReader.license` instead. |
-| `Dynamsoft.DBR.isLoaded()` | Use `Dynamsoft.DBR.BarcodeReader.isWasmLoaded()` instead. |
-| `Dynamsoft.DBR.licenseServer` | Use  `Dynamsoft.DBR.BarcodeReader.license` instead. |
-| `Dynamsoft.DBR.loadWasm()` | Use `Dynamsoft.DBR.BarcodeReader.loadWasm()` instead. |
-| `Dynamsoft.DBR.organizationID` | Use `Dynamsoft.DBR.BarcodeReader.license` instead. |
-| `Dynamsoft.DBR.productKeys` | Use `Dynamsoft.DBR.BarcodeReader.license` instead. |
-| `Dynamsoft.DBR.sessionPassword` | Use `Dynamsoft.DBR.BarcodeReader.license` instead. |
-| `Dynamsoft.DBR.version` | Use `Dynamsoft.DBR.BarcodeReader.version` instead. |
-
-* The following APIs are moved:
-
-| API Name | Notes |
-|:-:|:-:|
-| `whenToPlaySoundforSuccessfulRead` | Moved to [ScanSettings](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/interface/ScanSettings.html). |
-| `soundOnSuccessfullRead` | Moved to [ScanSettings](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/interface/ScanSettings.html). |
-| `whenToVibrateforSuccessfulRead` | Moved to [ScanSettings](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/interface/ScanSettings.html). |
-| `vibrateDuration` | Moved to [ScanSettings](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/interface/ScanSettings.html). |
-
-* The file **dbr.scanner.html** has been renamed to **dbr.ui.html**.
-
-### Breaking changes introduced in v8.8.0
-
-The class names of the built-in UI elements changed in v8.8.0+:
-
-| Previous versions | v8.8.0+ |
-|:-:|:-:|
-| `dbrScanner-bg-loading` | `dce-bg-loading` |
-| `dbrScanner-bg-camera` | `dce-bg-camera` |
-| `dbrScanner-video` | `dce-video` |
-| `dbrScanner-sel-camera` | `dce-sel-camera` |
-| `dbrScanner-sel-resolutio` | `dce-sel-resolution` |
-| `dbrScanner-btn-close` | `dce-btn-close` |
diff --git a/programming/javascript/upgrade-guide/index.md b/programming/javascript/upgrade-guide/index.md
index dc9c8dd7..1bd7ee8f 100644
--- a/programming/javascript/upgrade-guide/index.md
+++ b/programming/javascript/upgrade-guide/index.md
@@ -10,6 +10,3 @@ permalink: /programming/javascript/upgrade-guide/index.html
 # Upgrade Guide
 
 * [Upgrade from version 9 to 10](./9to10.md)
-* [Upgrade from version 8 to 9](./8to9.md)
-* [Upgrade from version 7 to 9](./7to9.md)
-* [END OF SUPPORT NOTICE for version 7](./7-notice.md)
diff --git a/programming/javascript/user-guide/barcode-scanner-customization.md b/programming/javascript/user-guide/barcode-scanner-customization.md
deleted file mode 100644
index 507e5342..00000000
--- a/programming/javascript/user-guide/barcode-scanner-customization.md
+++ /dev/null
@@ -1,200 +0,0 @@
----
-layout: default-layout
-needAutoGenerateSidebar: true
-needGenerateH3Content: true
-noTitleIndex: true
-title: Customizations - Dynamsoft Barcode Scanner v11.0.6000 JavaScript Edition
-keywords: Documentation, Barcode Scanner, Dynamsoft Barcode Scanner JavaScript Edition, customization
-description: Dynamsoft Barcode Scanner customization
----
-
-# Customize Your BarcodeScanner
-
-- [Specify the barcode format](#specify-the-barcode-format)
-- [Use customized template](#use-customized-template)
-- [Config the pre-built UIs](#config-the-pre-built-uis)
-- [Use BarcodeScanner in frameworks](#use-barcodescanner-in-frameworks)
-
-## Specify the barcode format
-
-Specifying the target barcode formats not only speeds up the recognition process but also improves accuracy. This is one of the most common customization needs. BarcodeScanner provides two ways to specify the barcode formats. For example, if your target formats are `QR_CODE` and `CODE_128`:
-
-> [!NOTE]
-> See [all supported barcode formats](https://dynamsoft.com/barcode-reader/barcode-types/).
-
-### Option 1: Set via BarcodeScannerConfig
-
-Add the following configuration in [`BarcodeScannerConfig`]({{ site.js_api }}barcode-scanner.html#barcodescannerconfig):
-
-```js
-const barcodeScanner = new Dynamsoft.BarcodeScanner({
-  // ...
-  barcodeFormats:[Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE , Dynamsoft.DBR.EnumBarcodeFormat.BF_CODE_128],
-  // ...
-});
-```
-
-### Option 2: Specify in a template file
-
-The benefit of this approach is that the template file can be reused across different platforms or programming languages, ensuring performance consistency across scenarios. To do this, follow these steps:
-
-1. Open `dist\DBR-PresetTemplates.json` in your code editor. This file contains all the preset templates related to barcode reading.
-
-2. Add the `BarcodeFormatIds` to the `BarcodeReaderTaskSettingOptions` object.
-
-3. Update `BarcodeFormatIds` as shown below. You can get barcode format strings [here](https://www.dynamsoft.com/capture-vision/docs/core/enums/barcode-reader/barcode-format.html).
-
-<img src="./assets/updateBarcodeFormat.png" alt="description" style="display: block; margin: 0 auto; width: 70%;"/>
-
-Refer to [`Use customized template`](#use-customized-template) for more details.
-
-> [!IMPORTANT]
-> Due to the powerful customization capabilities, the number of configurable parameters in the templates is extensive and relatively complex. feel free to [contact us](https://www.dynamsoft.com/contact/) if you need help creating a custom template.
-
-## Use customized template
-
-In more complex scenarios—such as blurred, damaged, curved, or unevenly lit barcodes—you might need a custom template to perform specific image processing steps. BarcodeScannerConfig provides a property to load a template file, allowing you to customize the algorithm’s processing workflow.
-
-> [!WARNING]
-> This operation will overwrite the built-in templates.
-
-```js
-  const barcodeScannerConfig = {
-    // The path to your custom JSON template that defines the scanning process.
-    templateFilePath:'path/to/DBR-PresetTemplates.json'
-    };
-  // Initialize the BarcodeScanner with the above BarcodeScannerConfig object
-  const barcodeScanner = new Dynamsoft.BarcodeScanner(barcodeScannerConfig);
-```
-
-## Config the Pre-built UIs
-
-The built-in UI of `BarcodeScanner` is composed of `BarcodeScannerView` and `BarcodeResultView`. In `MULTI_UNIQUE` mode, `BarcodeResultView` is shown by default to ensure the essential workflow can proceed. Other UI components can be shown or hidden manually through `barcodeScannerConfig`. Let's break down these two Views:
-
-### BarcodeScannerView
-
-The `BarcodeScannerView` is composed of the following UI elements:
-
-<img src="./assets/scannerView1103000.png" alt="description" style="display: block; margin: 0 auto; width: 35%;"/>
-
-1. **Camera View**: The Camera View is the camera viewfinder UI component within the `BarcodeScannerView`. This viewfinder occupies the majority of the space within the `BarcodeScannerView` to give the user a clear view and precise control of the image being scanned.
-
-2. **Load Image Button**: This button allows the user to scan a file of a barcode-containing image from the device's local storage. You can decide whether to show or hide the button by [showUploadImageButton]({{ site.js_api }}barcode-scanner.html#barcodescannerconfig) property.
-
-3. **Close Scanner Button**: This button closes the Barcode Scanner, return a [`BarcodeScanResult`]({{ site.js_api }}barcode-scanner.html#barcodescanresult) object and destroys the **`BarcodeScanner`** instance. You can decide whether to show or hide the button by [showCloseButton]({{ site.js_api }}barcode-scanner.html#scannerviewconfig) property.
-
-4. **Flash Button**: This button allows the user to toggle the camera's torch. You can decide whether to show or hide the button by [showFlashButton]({{ site.js_api }}barcode-scanner.html#barcodescannerconfig) property.
-
-5. **Camera Switch Button**: This button allows the users to change between cameras. You can specify the mode and visibility of the camera switch control by [cameraSwitchControl]({{ site.js_api }}barcode-scanner.html#scannerviewconfig) property.
-
-### BarcodeResultView (MULTI_UNIQUE mode only)
-
-Here is a quick breakdown of the `MULTI_UNIQUE` UI elements of the `BarcodeResultView` view:
-
-<img src="./assets/resultView.png" alt="description" style="display: block; margin: 0 auto; width: 35%;"/>
-
-1. **Barcode Results List**: The list used to display the decoding results.The list is updated whenever a new barcode is successfully decoded, or the same code is detected again after a specific [duplicateForgetTime]({{ site.js_api }}barcode-scanner.html#barcodescannerconfig).
-
-2. **Clear Button**: The button on the bottom left, which clears all elements of the current `Barcode Results List`. You can change the style of the Button with [BarcodeResultViewToolbarButtonsConfig]({{ site.js_api }}barcode-scanner.html#barcoderesultviewtoolbarbuttonsconfig).
-
-3. **Done Button**: The button on the bottom right, which closes the Barcode Scanner, return a [`BarcodeScanResult`]({{ site.js_api }}barcode-scanner.html#barcodescanresult) object that includes all unique barcodes and destroys the **`BarcodeScanner`** instance. You can change the style of the Button with [BarcodeResultViewToolbarButtonsConfig]({{ site.js_api }}barcode-scanner.html#barcoderesultviewtoolbarbuttonsconfig).
-
-### Manually modify the UI file
-
-Another way to fully customize the UI is by directly editing the `.xml` file. In the `dist/` directory, you'll find the `barcode-scanner.ui.xml` file, which is the default UI for the `BarcodeScanner`. 
-
-> [!NOTE]
-> Although it is essentially HTML, using a .xml extension can help prevent compatibility issues with the Live Server plugin.
-
-You can make a copy of it and apply your own modifications. For example, to double the size of the `UploadImage` icon, you can edit the file like this:
-
-```xml
-<template>
-<!-- ... -->
-    <!-- <svg id="upload-image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 26 26"> -->
-    <svg id="upload-image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" viewBox="0 0 26 26">
-<!-- ... -->        
-</template>
-```
-
-Once you've made your changes, just set the new `uiPath` in the configuration. If everything is configured correctly, the updated UI will appear the next time you refresh the page.
-
-```js
-    const barcodeScanner = new Dynamsoft.BarcodeScanner({
-      //...
-      uiPath: "path/to/new-barcode-scanner.ui.xml?v=<your-update-version>",
-      //...
-    });
-```
-
-## Use BarcodeScanner in frameworks
-
-Integrating `BarcodeScanner` into frameworks like `Angular`, `React`, and `Vue` is a little different compared to native usage. You can also refer to [the ready-made samples for popular frameworks](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode) directly without reading this guide.
-
-### Installation
-
-Open the terminal from your project root and install **Dynamsoft Barcode Reader SDK** with the following command:
-
-```sh
-npm install dynamsoft-barcode-reader-bundle@11.0.6000 -E
-```
-
-### Component for video decoding
-
-Here’s how to quickly set up a video barcode scanner using the `BarcodeScanner` class:
-
-```ts
-    const config = {
-      license: "YOUR-LICENSE-KEY",  // Replace with your license key
-    }
-    const barcodeScanner = new BarcodeScanner(config);
-    barcodeScanner.launch().then((result)=>{
-      console.log(result); // Handle the decoding result here
-    });
-```
-
-#### Define the resource paths
-
-To ensure stability, especially in environments with limited internet access, it’s a good idea to **host all required resources locally** (e.g., under the dist/ folder).
-Below is an example using the official CDN — feel free to replace it with your own path:
-
-```ts
-    const config = {
-      license: "YOUR-LICENSE-KEY",
-      // Configures the paths where the .wasm files and other necessary resources for modules are located.
-      engineResourcePaths: {
-        // Using jsDelivr CDN as an example
-        rootDirectory: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.6000/dist/",
-      },
-      // Path to the UI (.xml template file).
-      uiPath: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.6000/dist/barcode-scanner.ui.xml",
-    };
-```
-
-#### Set up the video container
-
-Specify the container where the scanner UI should be rendered:
-
-```ts
-    const config = {
-      container: ".barcode-scanner-view", // CSS selector for the scanner container
-    };
-```
-
-Make sure your HTML includes the corresponding element:
-
-```html
-<div class="barcode-scanner-view"></div>
-```
-
-The above steps cover the key considerations when using the `BarcodeScanner` component within a modern JavaScript framework. To recap:
-
-- Install the SDK with an exact version to avoid compatibility issues.
-
-- Define resource paths explicitly — either via CDN or local dist/ folder — to ensure consistent loading behavior.
-
-- Configure and launch the scanner using the provided component API.
-
-- Set up a container element to properly display the scanner UI.
-
-By following these best practices, you'll ensure a stable and reliable integration of `BarcodeScanner` into your application.
\ No newline at end of file
diff --git a/programming/javascript/user-guide/barcode-scanner-v11.0.3000.md b/programming/javascript/user-guide/barcode-scanner-v11.0.3000.md
deleted file mode 100644
index b6e4977b..00000000
--- a/programming/javascript/user-guide/barcode-scanner-v11.0.3000.md
+++ /dev/null
@@ -1,230 +0,0 @@
----
-layout: default-layout
-needAutoGenerateSidebar: true
-needGenerateH3Content: true
-noTitleIndex: true
-title: User Guide - Dynamsoft Barcode Scanner v11.0.3000 JavaScript Edition
-keywords: Documentation, Barcode Scanner, Dynamsoft Barcode Scanner JavaScript Edition,
-description: Dynamsoft Barcode Scanner User Guide
----
-
-# Build a Web-Based Barcode Scanner Using Just a Few Lines of JavaScript
-
-This user guide provides a step-by-step walkthrough of a "Hello World" web application using the `BarcodeScanner` JavaScript Edition.
-
-The `BarcodeScanner` class offers the following features:
-
-- High-level APIs that deliver core functionality with a single line of code.
-
-- Pre-built UI components for fast and easy integration.
-
-- Intuitive configuration objects that streamline both algorithm and UI setup.
-
-We recommend using this guide as a reference when creating your own application. If you are looking for a fully customizable barcode decoding library, you are welcome to use the [Foundational APIs](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/index.html). Before starting, ensure the **basic requirements** are met.
-
-<!-- 
-Thanks to its simplified APIs and built-in UI for video streaming, you can implement basic scanning functionality with just one line of code:
-
-```js
-new Dynamsoft.BarcodeScanner().launch().then(result=>alert(result.barcodeResults[0].text));
-```
-
-<p align="center" style="text-align:center; white-space: normal; ">
-  <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/csm2f9wb/" title="Run via JSFiddle" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/jsfiddle.svg" alt="Run via JSFiddle" width="20" height="20" style="width:20px;height:20px;" >
-  </a>
-</p> 
--->
-
-- Internet connection
-- A supported browser
-- Camera access
-
-> [!TIP]
-> Please refer to [system requirements](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/faq/system-requirement.html) for more details.
-
-## License
-
-When getting started with Barcode Scanner, we recommend getting your own 30-day trial license.
-
-<!-- ### Trial License
-
-When getting started with Barcode Scanner, we recommend [getting your own 30-day trial license](https://www.dynamsoft.com/customer/license/trialLicense/?product=dbr&utm_source=guide&package=js) -->
-
-{% include trialLicense.html %}
-
-<!-- > [!IMPORTANT]
-> The trial license can be renewed via the [customer portal](https://www.dynamsoft.com/customer/license/trialLicense/?product=dbr&utm_source=guide&package=js) twice, each time for another 15 days, giving you a total of 60 days to develop your own application using the solution. Please contact the [Dynamsoft Support Team](https://www.dynamsoft.com/company/contact/) if you need more time for a full evaluation.
-
-### Full License
-
-If you are fully satisfied with the solution and would like to move forward with a full license, please contact the [Dynamsoft Sales Team](https://www.dynamsoft.com/company/contact/). -->
-
-## Quick Start: Hello World Example
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <body>
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.3000/dist/dbr.bundle.js"></script>
-    <script>
-      // Initialize the Dynamsoft Barcode Scanner
-      const barcodeScanner = new Dynamsoft.BarcodeScanner({
-        // Please don't forget to replace YOUR_LICENSE_KEY_HERE
-        license: "YOUR_LICENSE_KEY_HERE",
-      });
-      (async () => {
-        // Launch the scanner and wait for the result
-        const result = await barcodeScanner.launch();
-        // Display the first detected barcode's text in an alert
-        if (result.barcodeResults.length) {
-            alert(result.barcodeResults[0].text);
-        }
-      })();
-    </script>
-  </body>
-</html>
-```
-
-<p align="center" style="text-align:center; white-space: normal; ">
-  <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.30/barcode-scanner-api-samples/scan-single-barcode/hello-world.html" title="Code in Github" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg" alt="Code in Github" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/gcqjf5r7/" title="Run via JSFiddle" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/jsfiddle.svg" alt="Run via JSFiddle" width="20" height="20" style="width:20px;height:20px;" >
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/barcode-scanner-api-samples/scan-single-barcode/hello-world.html?ver=11.0.30&utm_source=guide" title="Run in Dynamsoft" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/svgs/solid/circle-play.svg" alt="Run in Dynamsoft" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-</p>
-
-### Step 1: Setting up the HTML and Including the Barcode Scanner
-
-As outlined earlier, this guide will help you create a simple Hello World barcode scanning application using vanilla JavaScript. The full sample code is also available in the [GitHub repository](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v11.0.30).
-
-The first step before writing the code is to include the SDK in your application. You can simply include the SDK by using the precompiled script.
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <body>
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.3000/dist/dbr.bundle.js"></script>
-  </body>
-</html>
-```
-
-In this example, we include the precompiled Barcode Scanner SDK script via public CDN in the header.
-
-<div class="multi-panel-switching-prefix"></div>
-
-<div class="multi-panel-start"></div>
-<div class="multi-panel-title">Use a public CDN</div>
-
-The simplest way to include the SDK is to use either the [**jsDelivr**](https://jsdelivr.com/) or [**UNPKG**](https://unpkg.com/) CDN.
-
-- jsDelivr
-
-  ```html
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.3000/dist/dbr.bundle.js"></script>
-  ```
-
-- UNPKG
-
-  ```html
-  <script src="https://unpkg.com/dynamsoft-barcode-reader-bundle@11.0.3000/dist/dbr.bundle.js"></script>
-  ```
-
-When using a framework such as **React**, **Vue** or **Angular**, we recommend adding the package as a dependency using a package manager such as **npm** or **yarn**:
-
-  ```sh
-  npm i dynamsoft-barcode-reader-bundle@11.0.3000
-  # or
-  yarn add dynamsoft-barcode-reader-bundle@11.0.3000
-  ```
-
-As for package managers like **npm** or **yarn**, you likely need to specify the location of the engine files as a link to a CDN. Please see the [BarcodeScannerConfig API](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/barcode-scanner.html#barcodescannerconfig) for a code snippet on how to set the `engineResourcePaths`.
-<div class="multi-panel-end"></div>
-
-<div class="multi-panel-start"></div>
-<div class="multi-panel-title">Host the SDK yourself</div>
-
-Alternatively, you may choose to download the SDK and host the files on your own server or preferred CDN. This approach provides better control over versioning and availability.
-
-- From the website
-
-  [Download Dynamsoft Barcode Reader JavaScript Package](https://www.dynamsoft.com/barcode-reader/downloads/?ver=11.0.30&utm_source=guide&product=dbr&package=js)
-
-  The resources are located in the `./dist/` directory.
-
-- From npm
-
-  ```sh
-  npm i dynamsoft-barcode-reader-bundle@11.0.3000
-  ```
-
-  The resources are located at the path `node_modules/<pkg>`, without `@<version>`. You can copy it elsewhere and add `@<version>` tag.
-  
-  > [!IMPORTANT]
-  > Since "node_modules" is reserved for Node.js dependencies, and in our case the package is used only as static resources, we recommend either renaming the "node_modules" folder or moving the "dynamsoft-" packages to a dedicated folder for static resources in your project to facilitate self-hosting.
-
-You can typically include SDK like this:
-
-```html
-<script src="path/to/dynamsoft-barcode-reader-bundle@11.0.3000/dist/dbr.bundle.js"></script>
-```
-<div class="multi-panel-end"></div>
-
-<div class="multi-panel-switching-end"></div>
-
-Barcode Scanner comes with a **Ready-to-Use UI**. When the Barcode Scanner launches, it creates a container which it populates with the **Ready-to-Use UI**.
-
-### Step 2: Initializing the Barcode Scanner
-
-```js
-// Initialize the Dynamsoft Barcode Scanner
-const barcodescanner = new Dynamsoft.BarcodeScanner({
-  // Please don't forget to replace YOUR_LICENSE_KEY_HERE
-  license: "YOUR_LICENSE_KEY_HERE", 
-});
-```
-
-This is the **simplest** way to initialize the Barcode Scanner. The configuration object must include a valid **license** key. Without it, the scanner will fail to launch and display an error. For help obtaining a license, see the [licensing](#license) section.
-
-> [!TIP]
-> By default, the `BarcodeScanner` scans a single barcode at a time. However, it also supports a `MULTI_UNIQUE` scanning mode, which continuously scans and accumulates unique results in real time. You can enable this mode by modifying the [`BarcodeScannerConfig`](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/barcode-scanner.html#barcodescannerconfig) as follows:
-
-```js
-// Initialize the Dynamsoft Barcode Scanner in MULTI_UNIQUE mode
-const barcodescanner = new Dynamsoft.BarcodeScanner({
-  license: "YOUR_LICENSE_KEY_HERE",
-  scanMode: Dynamsoft.EnumScanMode.SM_MULTI_UNIQUE,
-});
-```
-
-### Step 3: Launching the Barcode Scanner
-
-```js
-(async () => {
-  // Launch the scanner and wait for the result
-  const result = await barcodescanner.launch();
-  // Display the first detected barcode's text in an alert
-  if (result.barcodeResults.length) {
-      alert(result.barcodeResults[0].text);
-  }
-})();
-```
-
-Now that the Barcode Scanner has been initialized and configured, it is ready to be launched! Upon launch, the Barcode Scanner presents the main **`BarcodeScannerView`** UI in its container on the page, and is ready to start scanning. By default, we use the `SINGLE` scanning mode, which means only one decoding result will be included in the final result. In the code above, we directly alerted the successfully decoded barcode text on the page.
-
-> [!NOTE]
-> In the Hello World sample, after a successfully decoding process, the scanner closes and the user is met with an empty page. In order to open the scanner again, the user must refresh the page. You may choose to implement a more user-friendly behavior in a production environment, such as presenting the user with an option to re-open the Barcode Scanner upon closing it.
-
-## Next Steps
-
-Now that you've implemented the basic functionality, here are some recommended next steps to further explore the capabilities of the Barcode Scanner
-
-1. Learn how to [Customize the Barcode Scanner](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/barcode-scanner-customization.html)
-2. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=11.0.3000)
-3. Learn about the [APIs of BarcodeScanner](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/barcode-scanner.html?ver=11.0.3000)
diff --git a/programming/javascript/user-guide/barcode-scanner.md b/programming/javascript/user-guide/barcode-scanner.md
deleted file mode 100644
index 8461318a..00000000
--- a/programming/javascript/user-guide/barcode-scanner.md
+++ /dev/null
@@ -1,230 +0,0 @@
----
-layout: default-layout
-needAutoGenerateSidebar: true
-needGenerateH3Content: true
-noTitleIndex: true
-title: User Guide - Dynamsoft Barcode Scanner v11.0.6000 JavaScript Edition
-keywords: Documentation, Barcode Scanner, Dynamsoft Barcode Scanner JavaScript Edition,
-description: Dynamsoft Barcode Scanner User Guide
----
-
-# Build a Web-Based Barcode Scanner Using Just a Few Lines of JavaScript
-
-This user guide provides a step-by-step walkthrough of a "Hello World" web application using the `BarcodeScanner` JavaScript Edition.
-
-The `BarcodeScanner` class offers the following features:
-
-- High-level APIs that deliver core functionality with a single line of code.
-
-- Pre-built UI components for fast and easy integration.
-
-- Intuitive configuration objects that streamline both algorithm and UI setup.
-
-We recommend using this guide as a reference when creating your own application. If you are looking for a fully customizable barcode decoding library, you are welcome to use the [Foundational APIs](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/index.html). Before starting, ensure the **basic requirements** are met.
-
-<!-- 
-Thanks to its simplified APIs and built-in UI for video streaming, you can implement basic scanning functionality with just one line of code:
-
-```js
-new Dynamsoft.BarcodeScanner().launch().then(result=>alert(result.barcodeResults[0].text));
-```
-
-<p align="center" style="text-align:center; white-space: normal; ">
-  <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/csm2f9wb/" title="Run via JSFiddle" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/jsfiddle.svg" alt="Run via JSFiddle" width="20" height="20" style="width:20px;height:20px;" >
-  </a>
-</p> 
--->
-
-- Internet connection
-- A supported browser
-- Camera access
-
-> [!TIP]
-> Please refer to [system requirements](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/faq/system-requirement.html) for more details.
-
-## License
-
-When getting started with Barcode Scanner, we recommend getting your own 30-day trial license.
-
-<!-- ### Trial License
-
-When getting started with Barcode Scanner, we recommend [getting your own 30-day trial license](https://www.dynamsoft.com/customer/license/trialLicense/?product=dbr&utm_source=guide&package=js) -->
-
-{% include trialLicense.html %}
-
-<!-- > [!IMPORTANT]
-> The trial license can be renewed via the [customer portal](https://www.dynamsoft.com/customer/license/trialLicense/?product=dbr&utm_source=guide&package=js) twice, each time for another 15 days, giving you a total of 60 days to develop your own application using the solution. Please contact the [Dynamsoft Support Team](https://www.dynamsoft.com/company/contact/) if you need more time for a full evaluation.
-
-### Full License
-
-If you are fully satisfied with the solution and would like to move forward with a full license, please contact the [Dynamsoft Sales Team](https://www.dynamsoft.com/company/contact/). -->
-
-## Quick Start: Hello World Example
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <body>
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.6000/dist/dbr.bundle.js"></script>
-    <script>
-      // Initialize the Dynamsoft Barcode Scanner
-      const barcodeScanner = new Dynamsoft.BarcodeScanner({
-        // Please don't forget to replace YOUR_LICENSE_KEY_HERE
-        license: "YOUR_LICENSE_KEY_HERE",
-      });
-      (async () => {
-        // Launch the scanner and wait for the result
-        const result = await barcodeScanner.launch();
-        // Display the first detected barcode's text in an alert
-        if (result.barcodeResults.length) {
-            alert(result.barcodeResults[0].text);
-        }
-      })();
-    </script>
-  </body>
-</html>
-```
-
-<p align="center" style="text-align:center; white-space: normal; ">
-  <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.60/barcode-scanner-api-samples/scan-single-barcode/hello-world.html" title="Code in Github" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg" alt="Code in Github" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/gcqjf5r7/" title="Run via JSFiddle" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/jsfiddle.svg" alt="Run via JSFiddle" width="20" height="20" style="width:20px;height:20px;" >
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/barcode-scanner-api-samples/scan-single-barcode/hello-world.html?ver=11.0.60&utm_source=guide" title="Run in Dynamsoft" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/svgs/solid/circle-play.svg" alt="Run in Dynamsoft" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-</p>
-
-### Step 1: Setting up the HTML and Including the Barcode Scanner
-
-As outlined earlier, this guide will help you create a simple Hello World barcode scanning application using vanilla JavaScript. The full sample code is also available in the [GitHub repository](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v11.0.60).
-
-The first step before writing the code is to include the SDK in your application. You can simply include the SDK by using the precompiled script.
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <body>
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.6000/dist/dbr.bundle.js"></script>
-  </body>
-</html>
-```
-
-In this example, we include the precompiled Barcode Scanner SDK script via public CDN in the header.
-
-<div class="multi-panel-switching-prefix"></div>
-
-<div class="multi-panel-start"></div>
-<div class="multi-panel-title">Use a public CDN</div>
-
-The simplest way to include the SDK is to use either the [**jsDelivr**](https://jsdelivr.com/) or [**UNPKG**](https://unpkg.com/) CDN.
-
-- jsDelivr
-
-  ```html
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.6000/dist/dbr.bundle.js"></script>
-  ```
-
-- UNPKG
-
-  ```html
-  <script src="https://unpkg.com/dynamsoft-barcode-reader-bundle@11.0.6000/dist/dbr.bundle.js"></script>
-  ```
-
-When using a framework such as **React**, **Vue** or **Angular**, we recommend adding the package as a dependency using a package manager such as **npm** or **yarn**:
-
-  ```sh
-  npm i dynamsoft-barcode-reader-bundle@11.0.6000
-  # or
-  yarn add dynamsoft-barcode-reader-bundle@11.0.6000
-  ```
-
-As for package managers like **npm** or **yarn**, you likely need to specify the location of the engine files as a link to a CDN. Please see the [BarcodeScannerConfig API](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/barcode-scanner.html#barcodescannerconfig) for a code snippet on how to set the `engineResourcePaths`.
-<div class="multi-panel-end"></div>
-
-<div class="multi-panel-start"></div>
-<div class="multi-panel-title">Host the SDK yourself</div>
-
-Alternatively, you may choose to download the SDK and host the files on your own server or preferred CDN. This approach provides better control over versioning and availability.
-
-- From the website
-
-  [Download Dynamsoft Barcode Reader JavaScript Package](https://www.dynamsoft.com/barcode-reader/downloads/?ver=11.0.60&utm_source=guide&product=dbr&package=js)
-
-  The resources are located in the `./dist/` directory.
-
-- From npm
-
-  ```sh
-  npm i dynamsoft-barcode-reader-bundle@11.0.6000
-  ```
-
-  The resources are located at the path `node_modules/<pkg>`, without `@<version>`. You can copy it elsewhere and add `@<version>` tag.
-  
-  > [!IMPORTANT]
-  > Since "node_modules" is reserved for Node.js dependencies, and in our case the package is used only as static resources, we recommend either renaming the "node_modules" folder or moving the "dynamsoft-" packages to a dedicated folder for static resources in your project to facilitate self-hosting.
-
-You can typically include SDK like this:
-
-```html
-<script src="path/to/dynamsoft-barcode-reader-bundle@11.0.6000/dist/dbr.bundle.js"></script>
-```
-<div class="multi-panel-end"></div>
-
-<div class="multi-panel-switching-end"></div>
-
-Barcode Scanner comes with a **Ready-to-Use UI**. When the Barcode Scanner launches, it creates a container which it populates with the **Ready-to-Use UI**.
-
-### Step 2: Initializing the Barcode Scanner
-
-```js
-// Initialize the Dynamsoft Barcode Scanner
-const barcodescanner = new Dynamsoft.BarcodeScanner({
-  // Please don't forget to replace YOUR_LICENSE_KEY_HERE
-  license: "YOUR_LICENSE_KEY_HERE", 
-});
-```
-
-This is the **simplest** way to initialize the Barcode Scanner. The configuration object must include a valid **license** key. Without it, the scanner will fail to launch and display an error. For help obtaining a license, see the [licensing](#license) section.
-
-> [!TIP]
-> By default, the `BarcodeScanner` scans a single barcode at a time. However, it also supports a `MULTI_UNIQUE` scanning mode, which continuously scans and accumulates unique results in real time. You can enable this mode by modifying the [`BarcodeScannerConfig`](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/barcode-scanner.html#barcodescannerconfig) as follows:
-
-```js
-// Initialize the Dynamsoft Barcode Scanner in MULTI_UNIQUE mode
-const barcodescanner = new Dynamsoft.BarcodeScanner({
-  license: "YOUR_LICENSE_KEY_HERE",
-  scanMode: Dynamsoft.EnumScanMode.SM_MULTI_UNIQUE,
-});
-```
-
-### Step 3: Launching the Barcode Scanner
-
-```js
-(async () => {
-  // Launch the scanner and wait for the result
-  const result = await barcodescanner.launch();
-  // Display the first detected barcode's text in an alert
-  if (result.barcodeResults.length) {
-      alert(result.barcodeResults[0].text);
-  }
-})();
-```
-
-Now that the Barcode Scanner has been initialized and configured, it is ready to be launched! Upon launch, the Barcode Scanner presents the main **`BarcodeScannerView`** UI in its container on the page, and is ready to start scanning. By default, we use the `SINGLE` scanning mode, which means only one decoding result will be included in the final result. In the code above, we directly alerted the successfully decoded barcode text on the page.
-
-> [!NOTE]
-> In the Hello World sample, after a successfully decoding process, the scanner closes and the user is met with an empty page. In order to open the scanner again, the user must refresh the page. You may choose to implement a more user-friendly behavior in a production environment, such as presenting the user with an option to re-open the Barcode Scanner upon closing it.
-
-## Next Steps
-
-Now that you've implemented the basic functionality, here are some recommended next steps to further explore the capabilities of the Barcode Scanner
-
-1. Learn how to [Customize the Barcode Scanner](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/barcode-scanner-customization.html)
-2. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=11.0.6000)
-3. Learn about the [APIs of BarcodeScanner](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/barcode-scanner.html?ver=11.0.6000)
diff --git a/programming/javascript/user-guide/index-v10.0.20.md b/programming/javascript/user-guide/index-v10.0.20.md
deleted file mode 100644
index d7379677..00000000
--- a/programming/javascript/user-guide/index-v10.0.20.md
+++ /dev/null
@@ -1,766 +0,0 @@
----
-layout: default-layout
-title: v10.0.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-v10.0.20.html
-schema: schemas/dynamsoft-facilitates-mit-research-schema.json
----
-
-<!--The original doc is hosted here => https://github.com/dynamsoft-docs/barcode-reader-docs-js/blob/main/programming/javascript/user-guide/index.md -->
-
-# 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-barcode-reader.svg)
-![downloads](https://img.shields.io/npm/dm/dynamsoft-barcode-reader.svg)
-![jsdelivr](https://img.shields.io/jsdelivr/npm/hm/dynamsoft-barcode-reader.svg)
-![vulnerabilities](https://img.shields.io/snyk/vulnerabilities/npm/dynamsoft-barcode-reader.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.
-
-<span style="font-size:20px">Table of Contents</span>
-
-- [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)
-    - [Prepare the SDK](#prepare-the-sdk)
-      - [Specify the license](#specify-the-license)
-      - [Specify the location of the "engine" files (optional)](#specify-the-location-of-the-engine-files-optional)
-    - [Set up and start image processing](#set-up-and-start-image-processing)
-      - [Preload the module](#preload-the-module)
-      - [Create a CaptureVisionRouter object](#create-a-capturevisionrouter-object)
-      - [Connect an image source](#connect-an-image-source)
-      - [Register a result receiver](#register-a-result-receiver)
-      - [Start the process](#start-the-process)
-    - [Customize the process](#customize-the-process)
-      - [Adjust the preset template settings](#adjust-the-preset-template-settings)
-        - [Change barcode settings](#change-barcode-settings)
-        - [Retrieve the original image](#retrieve-the-original-image)
-        - [Change reading frequency to save power](#change-reading-frequency-to-save-power)
-        - [Specify a scan region](#specify-a-scan-region)
-      - [Edit the preset templates directly](#edit-the-preset-templates-directly)
-      - [Filter the results (Important)](#filter-the-results-important)
-        - [Option 1: Verify results across multiple frames](#option-1-verify-results-across-multiple-frames)
-        - [Option 2: Eliminate redundant results detected within a short time frame](#option-2-eliminate-redundant-results-detected-within-a-short-time-frame)
-      - [Add feedback](#add-feedback)
-    - [Customize the UI](#customize-the-ui)
-  - [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 - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.0.20/hello-world/hello-world.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html?ver=10.0.20&utm_source=guide)
-- Angular App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.0.20/hello-world/angular) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/angular/dist/angular/?ver=10.0.20&utm_source=guide)
-- React App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.0.20/hello-world/react) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/react/build/?ver=10.0.20&utm_source=guide)
-- Vue App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.0.20/hello-world/vue) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/vue/dist/?ver=10.0.20&utm_source=guide)
-- PWA App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.0.20/hello-world/pwa) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/pwa/helloworld-pwa.html?ver=10.0.20&utm_source=guide)
-- WebView in Android and iOS - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.0.20/hello-world/webview)
-- Read Driver Licenses - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.0.20/use-case/read-a-drivers-license.html) \| [Run](https://demo.dynamsoft.com/samples/dbr/js/use-case/read-a-drivers-license.html?ver=10.0.20&utm_source=guide)
-- Fill A Form - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.0.20/use-case/fill-a-form-with-barcode-reading.html) \| [Run](https://demo.dynamsoft.com/samples/dbr/js/use-case/fill-a-form-with-barcode-reading.html?ver=10.0.20&utm_source=guide)
-- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.0.20/use-case/show-result-texts-on-the-video.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/use-case/show-result-texts-on-the-video.html?ver=10.0.20&utm_source=guide)
-- Debug Camera and Collect Video Frame - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.0.20/others/debug)
-
-You can also:
-
-- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=10.0.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=10.0.20&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.0.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
-<!DOCTYPE html>
-<html>
-<body>
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.32/dist/core.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-license@3.0.20/dist/license.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-utility@1.0.21/dist/utility.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.0.20/dist/dbr.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.0.31/dist/cvr.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.1/dist/dce.js"></script>
-<div id="camera-view-container" style="width: 100%; height: 60vh"></div>
-<textarea id="results" style="width: 100%; min-height: 10vh; font-size: 3vmin; overflow: auto" disabled></textarea>
-<script>
-  Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
-  (async () => {
-    let cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
-
-    let cameraView = await Dynamsoft.DCE.CameraView.createInstance();
-    let cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
-    document.querySelector("#camera-view-container").append(cameraView.getUIElement());
-    cvRouter.setInput(cameraEnhancer);
-
-    const resultsContainer = document.querySelector("#results");
-    cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => {
-      if (result.barcodeResultItems.length > 0) {
-        resultsContainer.textContent = '';
-        for (let item of result.barcodeResultItems) {
-          resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
-        }
-      }
-    }});
-
-    let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
-    filter.enableResultCrossVerification(Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE, true);
-    filter.enableResultDeduplication(Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE, true);
-    await cvRouter.addResultFilter(filter);
-
-    await cameraEnhancer.open();
-    await cvRouter.startCapturing("ReadSingleBarcode");
-  })();
-</script>
-</body>
-</html>
-```
-
-<!--TOM: Update the code links-->
-
-<p align="center" style="text-align:center; white-space: normal; ">
-  <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.0.20/hello-world/hello-world.html" title="Code in Github" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg" alt="Code in Github" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/csm2f9wb/" title="Run via JSFiddle" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/jsfiddle.svg" alt="Run via JSFiddle" width="20" height="20" style="width:20px;height:20px;" >
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html?ver=10.0.20&utm_source=guide" title="Run in Dynamsoft" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/svgs/solid/circle-play.svg" alt="Run in Dynamsoft" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-</p>
-
------
-
-#### About the code
-
-- `Dynamsoft.License.LicenseManager.initLicense()`: This method initializes the license for using the SDK in the application. Note that the string "**DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9**" used in this example points to an online license that requires a network connection to work. Read more on [Specify the license](#specify-the-license).
-
-- `Dynamsoft.CVR.CaptureVisionRouter.createInstance()`: This method creates a `CaptureVisionRouter` object `cvRouter` which controls the entire process in three steps:
-  - **Retrieve Images from the Image Source**
-    - `cvRouter` connects to the image source through the [ImageSourceAdapter](https://www.dynamsoft.com/capture-vision/docs/core/architecture/input.html#image-source-adapter?lang=js) interface with the method `setInput()`.
-      ```js
-      cvRouter.setInput(cameraEnhancer);
-      ```
-    > The image source in our case is a [CameraEnhancer](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/user-guide/index.html) object created with `Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView)`
-  - **Coordinate Image-Processing Tasks**
-    - The coordination happens behind the scenes. `cvRouter` starts the process by specifying a preset template "ReadSingleBarcode" in the method `startCapturing()`.
-      ```js
-      cvRouter.startCapturing("ReadSingleBarcode");
-      ```
-  - **Dispatch Results to Listening Objects**
-    - The processing results are returned through the [CapturedResultReceiver](https://www.dynamsoft.com/capture-vision/docs/core/architecture/output.html#captured-result-receiver?lang=js) interface. The `CapturedResultReceiver` object is registered to `cvRouter` via the method `addResultReceiver()`. For more information, please check out [Register a result receiver](#register-a-result-receiver).
-      ```js
-      cvRouter.addResultReceiver({/*The-CapturedResultReceiver-Object"*/});
-      ```
-    - Also note that reading from video is extremely fast and there could be many duplicate results. We can use a [filter](#filter-the-results-important) with result deduplication enabled to filter out the duplicate results. The object is registered to `cvRouter` via the method `addResultFilter()`.
-      ```js
-      cvRouter.addResultFilter(filter);
-      ```
-
-> Read more on [Capture Vision Router](https://www.dynamsoft.com/capture-vision/docs/core/architecture/#capture-vision-router).
-
-### Run the example
-
-You can run the example deployed to [the Dynamsoft Demo Server](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html?ver=10.0.20&utm_source=guide) or test it with [JSFiddle code editor](https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/). 
-
-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 show up under the video and the barcode location will be highlighted in the video feed.
-
-Alternatively, you can test locally by copying and pasting the code shown above into a local file (e.g. "hello-world.html") and opening it in your browser.
-
-*Note*:
-
-If you open the web page as `file:///` or `http://` , the camera may not work correctly because the [MediaDevices: getUserMedia()](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) method only works in secure contexts (HTTPS), in some or all supporting browsers.
-
-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](https://nginx.org/en/docs/http/configuring_https_servers.html)
-2. IIS: [How to create a Self Signed Certificate in IIS](https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/)
-3. Tomcat: [Setting Up SSL on Tomcat in 5 minutes](https://dzone.com/articles/setting-ssl-tomcat-5-minutes)
-4. Node.js: [npm tls](https://nodejs.org/docs/v0.4.1/api/tls.html)
-
-If the test doesn't go as expected, you can [contact us](https://www.dynamsoft.com/company/contact/?ver=10.0.20&utm_source=guide&product=dbr&package=js).
-
-## Building your own page
-
-### Include the SDK
-
-To utilize the SDK, the initial step involves including the corresponding resource files:
-
-* `core.js` encompasses common classes, interfaces, and enumerations that are shared across all Dynamsoft SDKs.
-* `license.js` introduces the `LicenseManager` class, which manages the licensing for all Dynamsoft SDKs.
-* `utility.js` encompasses auxiliary classes that are shared among all Dynamsoft SDKs.
-* `dbr.js` defines interfaces and enumerations specifically tailored to the barcode reader module.
-* `cvr.js` introduces the `CaptureVisionRouter` class, which governs the entire image processing workflow.
-* `dce.js` comprises classes that offer camera support and basic user interface functionalities.
-
-#### 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
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.32/dist/core.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-license@3.0.20/dist/license.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-utility@1.0.21/dist/utility.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.0.20/dist/dbr.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.0.31/dist/cvr.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.1/dist/dce.js"></script>
-  ```
-
-- UNPKG  
-
-  ```html
-  <script src="https://unpkg.com/dynamsoft-core@3.0.32/dist/core.js"></script>
-  <script src="https://unpkg.com/dynamsoft-license@3.0.20/dist/license.js"></script>
-  <script src="https://unpkg.com/dynamsoft-utility@1.0.21/dist/utility.js"></script>
-  <script src="https://unpkg.com/dynamsoft-barcode-reader@10.0.20/dist/dbr.js"></script>
-  <script src="https://unpkg.com/dynamsoft-capture-vision-router@2.0.31/dist/cvr.js"></script>
-  <script src="https://unpkg.com/dynamsoft-camera-enhancer@4.0.1/dist/dce.js"></script>
-  ```
-
-In some rare cases (such as some restricted areas), you might not be able to access the CDN. If this happens, you can use the following files for the test.
-
-- https://download2.dynamsoft.com/packages/dynamsoft-core@3.0.32/dist/core.js
-- https://download2.dynamsoft.com/packages/dynamsoft-license@3.0.20/dist/license.js
-- https://download2.dynamsoft.com/packages/dynamsoft-utility@1.0.21/dist/utility.js
-- https://download2.dynamsoft.com/packages/dynamsoft-barcode-reader@10.0.20/dist/dbr.js
-- https://download2.dynamsoft.com/packages/dynamsoft-capture-vision-router@2.0.31/dist/cvr.js
-- https://download2.dynamsoft.com/packages/dynamsoft-camera-enhancer@4.0.1/dist/dce.js
-
-However, please **DO NOT** use `download2.dynamsoft.com` resources in a production application as they are for temporary testing purposes only. Instead, you can try hosting the SDK yourself.
-
-#### 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 Dynamsoft Barcode Reader JavaScript Package](https://www.dynamsoft.com/barcode-reader/downloads/?ver=10.0.20&utm_source=guide&product=dbr&package=js)
-
-- yarn
-
-  ```cmd
-  yarn add dynamsoft-core@3.0.32 --save
-  yarn add dynamsoft-license@3.0.20 --save
-  yarn add dynamsoft-utility@1.0.21 --save
-  yarn add dynamsoft-barcode-reader@10.0.20 --save
-  yarn add dynamsoft-capture-vision-router@2.0.31 --save
-  yarn add dynamsoft-camera-enhancer@4.0.1 --save
-  yarn add dynamsoft-capture-vision-std@1.0.0 --save
-  yarn add dynamsoft-image-processing@2.0.30 --save
-  ```
-
-- npm
-
-  ```cmd
-  npm install dynamsoft-core@3.0.32 --save
-  npm install dynamsoft-license@3.0.20 --save
-  npm install dynamsoft-utility@1.0.21 --save
-  npm install dynamsoft-barcode-reader@10.0.20 --save
-  npm install dynamsoft-capture-vision-router@2.0.31 --save
-  npm install dynamsoft-camera-enhancer@4.0.1 --save
-  npm install dynamsoft-capture-vision-std@1.0.0 --save
-  npm install dynamsoft-image-processing@2.0.30 --save
-  ```
-
-Depending on how you downloaded the SDK and how you intend to use it, you can typically include it like this:
-
-```html
-<script src="./dynamsoft/distributables/dynamsoft-core@3.0.32/dist/core.js"></script>
-<script src="./dynamsoft/distributables/dynamsoft-license@3.0.20/dist/license.js"></script>
-<script src="./dynamsoft/distributables/dynamsoft-utility@1.0.21/dist/utility.js"></script>
-<script src="./dynamsoft/distributables/dynamsoft-barcode-reader@10.0.20/dist/dbr.js"></script>
-<script src="./dynamsoft/distributables/dynamsoft-capture-vision-router@2.0.31/dist/cvr.js"></script>
-<script src="./dynamsoft/distributables/dynamsoft-camera-enhancer@4.0.1/dist/dce.js"></script>
-```
-
-or
-
-```html
-<script src="/node_modules/dynamsoft-core/dist/core.js"></script>
-<script src="/node_modules/dynamsoft-license/dist/license.js"></script>
-<script src="/node_modules/dynamsoft-utility/dist/utility.js"></script>
-<script src="/node_modules/dynamsoft-barcode-reader/dist/dbr.js"></script>
-<script src="/node_modules/dynamsoft-capture-vision-router/dist/cvr.js"></script>
-<script src="/node_modules/dynamsoft-camera-enhancer/dist/dce.js"></script>
-```
-
-or
-
-```typescript
-import { CoreModule, EnumCapturedResultItemType } from 'dynamsoft-core'
-import { LicenseManager } from 'dynamsoft-license';
-import { CapturedResultReceiver, CaptureVisionRouter, type SimplifiedCaptureVisionSettings } from "dynamsoft-capture-vision-router";
-import { CameraEnhancer, CameraView } from "dynamsoft-camera-enhancer";
-import { DecodedBarcodesResult } from 'dynamsoft-barcode-reader';
-import { MultiFrameResultCrossFilter } from 'dynamsoft-utility';
-```
-
-*Note*:
-
-* Certain legacy web application servers may lack support for the `application/wasm` mimetype for .wasm files. To address this, you have two options:
-  1. Upgrade your web application server to one that supports the `application/wasm` mimetype.
-  2. Manually define the mimetype on your server. You can refer to the following resources for guidance:
-     1. [Apache](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Apache_Configuration_htaccess#media_types_and_character_encodings)
-     2. [IIS](https://docs.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/mimemap)
-     3. [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).
-
-### Prepare the SDK
-
-Before using the SDK, you need to configure a few things.
-
-#### Specify the license
-
-To enable the SDK's functionality, you must provide a valid license. Utilize the API function initLicense to set your license key.
-
-```javascript
-Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
-```
-
-As previously stated, the key "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" serves as a test license valid for 24 hours, applicable to any newly authorized browser. To test the SDK further, you can request a 30-day free trial license via the <a href="https://www.dynamsoft.com/customer/license/trialLicense?ver=10.0.20&utm_source=guide&product=dbr&package=js" target="_blank">Request a Trial License</a> link.
-
-> Upon registering a Dynamsoft account and obtaining the SDK package from the official website, Dynamsoft will automatically create a 30-day free trial license and embed the corresponding license key into all the provided SDK samples.
-
-#### Specify the location of the "engine" files (optional)
-
-This is usually only required with frameworks like Angular or React, etc. where the referenced JavaScript files such as `cvr.js`, `dbr.js` are 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 `Dynamsoft.Core.CoreModule.engineResourcePaths`:
-
-```javascript
-//The following code uses the jsDelivr CDN, feel free to change it to your own location of these files
-Dynamsoft.Core.CoreModule.engineResourcePaths.core = "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.32/dist/";
-Dynamsoft.Core.CoreModule.engineResourcePaths.license = "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.0.20/dist/";
-Dynamsoft.Core.CoreModule.engineResourcePaths.dbr = "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.0.20/dist/";
-Dynamsoft.Core.CoreModule.engineResourcePaths.cvr = "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.0.31/dist/";
-Dynamsoft.Core.CoreModule.engineResourcePaths.dce = "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.1/dist/";
-Dynamsoft.Core.CoreModule.engineResourcePaths.std = "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.0.0/dist/";
-Dynamsoft.Core.CoreModule.engineResourcePaths.dip = "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.0.30/dist/"
-```
-
-### Set up and start image processing
-
-#### Preload the module
-
-The image processing logic is encapsulated within .wasm library files, and these files may require some time for downloading. To enhance the speed, we advise utilizing the following method to preload the libraries.
-
-```js
-// Preload the .wasm files
-await Dynamsoft.Core.CoreModule.loadWasm(["cvr", "dbr"]);
-```
-
-#### Create a CaptureVisionRouter object
-
-To use the SDK, we first create a `CaptureVisionRouter` object.
-
-```javascript
-Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
-
-let cvRouter = null;
-try {
-    cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
-} catch (ex) {
-    console.error(ex);
-}
-```
-
-*Tip*:
-
-When creating a `CaptureVisionRouter` 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 `tempRouter` in the following code
-
-```javascript
-Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
-
-let tempRouter = null;
-let cvRouter = null;
-
-document.getElementById('btn-scan').addEventListener('click', async () => {
-    try {
-        cvRouter = await (tempRouter = tempRouter || Dynamsoft.CVR.CaptureVisionRouter.createInstance());
-    } catch (ex) {
-        console.error(ex);
-    }
-});
-```
-
-#### Connect an image source
-
-The `CaptureVisionRouter` object, denoted as `cvRouter`, is responsible for handling images provided by an image source. In our scenario, we aim to detect barcodes directly from a live video stream. To facilitate this, we initialize a `CameraEnhancer` object, identified as `cameraEnhancer`, which is specifically designed to capture image frames from the video feed and subsequently forward them to `cvRouter`.
-
-To enable video streaming on the webpage, we create a `CameraView` object referred to as `cameraView`, which is then passed to `cameraEnhancer`, and its content is displayed on the webpage.
-
-```html
-<div id="camera-view-container" style="width: 100%; height: 100vh"></div>
-```
-
-```javascript
-let cameraView = await Dynamsoft.DCE.CameraView.createInstance();
-let cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
-document.querySelector("#camera-view-container").append(cameraView.getUIElement());
-cvRouter.setInput(cameraEnhancer);
-```
-
-#### Register a result receiver
-
-Once the image processing is complete, the results are sent to all the registered `CapturedResultReceiver` objects. Each `CapturedResultReceiver` object may encompass one or multiple callback functions associated with various result types. In our particular case, our focus is on identifying barcodes within the images, so it's sufficient to define the callback function `onDecodedBarcodesReceived`:
-
-```javascript
-const resultsContainer = document.querySelector("#results");
-const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver();
-resultReceiver.onDecodedBarcodesReceived = (result) => {
-  if (result.barcodeResultItems.length > 0) {
-    resultsContainer.textContent = '';
-    for (let item of result.barcodeResultItems) {
-        // In this example, the barcode result is shown on the page beneath the video
-      resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
-    }
-  }
-};
-cvRouter.addResultReceiver(resultReceiver);
-```
-
-You can also write code like this. It is the same.
-
-```javascript
-const resultsContainer = document.querySelector("#results");
-cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => {
-  if (result.barcodeResultItems.length > 0) {
-    resultsContainer.textContent = '';
-    for (let item of result.barcodeResultItems) {
-        // In this example, the barcode result is shown on the page beneath the video
-      resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
-    }
-  }
-}});
-```
-
-Check out [CapturedResultReceiver](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/core/basic-structures/captured-result-receiver.html) for more information.
-
-#### Start the process
-
-With the setup now complete, we can proceed to process the images in two straightforward steps:
-
-1. Initiate the image source to commence image acquisition. In our scenario, we invoke the `open()` method on `cameraEnhancer` to initiate video streaming and simultaneously initiate the collection of images. These collected images will be dispatched to `cvRouter` as per its request.
-2. Define a preset template to commence image processing. In our case, we utilize the "ReadSingleBarcode" template, specifically tailored for processing images containing a single barcode.
-
-```javascript
-await cameraEnhancer.open();
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
-
-*Note*:
-
-* `cvRouter` is engineered to consistently request images from the image source.
-* Various preset templates are at your disposal for barcode reading:
-
-| Template Name                  | Function Description                                           |
-| ------------------------------ | -------------------------------------------------------------- |
-| **ReadBarcodes_Default**       | Scans a single barcode.                                        |
-| **ReadSingleBarcode**          | Quickly scans a single barcode.                                |
-| **ReadBarcodes_SpeedFirst**    | Prioritizes speed in scanning multiple barcodes.               |
-| **ReadBarcodes_ReadRateFirst** | Maximizes the number of barcodes read.                         |
-| **ReadBarcodes_Balance**       | Balances speed and quantity in reading multiple barcodes.      |
-| **ReadDenseBarcodes**          | Specialized in reading barcodes with high information density. |
-| **ReadDistantBarcodes**        | Capable of reading barcodes from extended distances.           |
-
-### Customize the process
-
-#### Adjust the preset template settings
-
-When making adjustments to some basic tasks, we often only need to modify [SimplifiedCaptureVisionSettings](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/capture-vision-router/interfaces/simplified-capture-vision-settings.html).
-
-##### Change barcode settings
-
-The preset templates can be updated to meet different requirements. For example, the following code limits the barcode format to QR code.
-
-```javascript
-let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.barcodeSettings.barcodeFormatIds =
-  Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
-await cvRouter.updateSettings("ReadSingleBarcode", settings);
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
-
-For a list of adjustable barcode settings, check out [SimplifiedBarcodeReaderSettings](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/interfaces/simplified-barcode-reader-settings.html).
-
-##### Retrieve the original image
-
-Additionally, we have the option to modify the template to retrieve the original image containing the barcode.
-
-```javascript
-let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.capturedResultItemTypes |= 
-  Dynamsoft.Core.EnumCapturedResultItemType.CRIT_ORIGINAL_IMAGE;
-await cvRouter.updateSettings("ReadSingleBarcode", settings);
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
-
-Limit the barcode format to QR code, and retrieve the original image containing the barcode, at the same time.
-
-```javascript
-let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.capturedResultItemTypes = 
-  Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE |
-  Dynamsoft.Core.EnumCapturedResultItemType.CRIT_ORIGINAL_IMAGE;
-await cvRouter.updateSettings("ReadSingleBarcode", settings);
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
-
-Please be aware that it is necessary to update the `CapturedResultReceiver` object to obtain the original image. For instance:
-
-```javascript
-resultReceiver.onCapturedResultReceived = (result) => {
-  let barcodes = result.items.filter((item) =>
-    item.type === Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE
-  );
-  if (barcodes.length > 0) {
-    let image = result.items.filter((item) =>
-      item.type === Dynamsoft.Core.EnumCapturedResultItemType.CRIT_ORIGINAL_IMAGE
-    )[0].imageData;
-    // The image that we found the barcode(s) on.
-  }
-};
-```
-
-##### Change reading frequency to save power
-
-The SDK is initially configured to process images sequentially without any breaks. Although this setup maximizes performance, it can lead to elevated power consumption, potentially causing the device to overheat. In many cases, it's possible to reduce the reading speed while still satisfying business requirements. The following code snippet illustrates how to adjust the SDK to process an image every 500 milliseconds:
-
-> Please bear in mind that in the following code, if an image's processing time is shorter than 500 milliseconds, the SDK will wait for the full 500 milliseconds before proceeding to process the next image. Conversely, if an image's processing time exceeds 500 milliseconds, the subsequent image will be processed immediately upon completion.
-
-```javascript
-let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.minImageCaptureInterval = 500;
-await cvRouter.updateSettings("ReadSingleBarcode", settings);
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
-
-##### Specify a scan region
-
-You can use the parameter `roi` (region of interest) together with the parameter `roiMeasuredInPercentage` to configure the SDK to only read a specific region on the image frames. For example, the following code limits the reading in the center 25%( = 50% * 50%) of the image frames:
-
-```javascript
-let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.roiMeasuredInPercentage = true;
-settings.roi.points = [
-  { x: 25, y: 25 },
-  { x: 75, y: 25 },
-  { x: 75, y: 75 },
-  { x: 25, y: 75 },
-];
-await cvRouter.updateSettings("ReadSingleBarcode", settings);
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
-
-While the code above accomplishes the task, a more effective approach is to restrict the scan region directly at the image source, as demonstrated in the following code snippet.
-
-> * With the region configured at the image source, the images are cropped right before they are gathered for processing, eliminating the necessity to modify the processing settings further.
-> * `cameraEnhancer` elevates interactivity by overlaying a mask on the video, providing a clear delineation of the scanning region.
-> * See also: [CameraEnhancer::setScanRegion](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/api-reference/acquisition.html#setscanregion)
-
-```javascript
-cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
-cameraEnhancer.setScanRegion({
-  x: 25,
-  y: 25,
-  width: 50,
-  height: 50,
-  isMeasuredInPercentage: true,
-});
-```
-
-<!--
-* Specify the maximum time allowed for processing each image
-
-You can set the maximum time allowed for processing a single image with the property `timeout`.
-
-> Please be aware that the SDK will cease processing an image if its processing time exceeds the duration specified by the `timeout` parameter. It should not be confused with the previously discussed parameter, `minImageCaptureInterval`.
-
-```javascript
-let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.timeout = 500;
-await cvRouter.updateSettings("ReadSingleBarcode", settings);
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
--->
-
-#### Edit the preset templates directly
-
-The preset templates have a lot more settings that can be customized to best suit your use case. If you [download the SDK from Dynamsoft website](https://www.dynamsoft.com/barcode-reader/downloads/1000003-confirmation/), you can find the templates under
-
-* "/dynamsoft-barcode-reader-js-10.0.20/dynamsoft/resources/barcode-reader/templates/"
-
-Upon completing the template editing, you can invoke the `initSettings` method and provide it with the template path as an argument.
-
-```javascript
-await cvRouter.initSettings("PATH-TO-THE-FILE"); //e.g. "https://your-website/ReadSingleBarcode.json")
-await cvRouter.startCapturing("ReadSingleBarcode"); // Make sure the name matches one of the CaptureVisionTemplates in the
-```
-
-#### Filter the results (Important)
-
-While processing video frames, it's common for the same barcode to be detected multiple times. To enhance the user experience, we can use [MultiFrameResultCrossFilter](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/utility/multi-frame-result-cross-filter.html) object, having two options currently at our disposal:
-
-##### Option 1: Verify results across multiple frames
-
-```js
-let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
-filter.enableResultCrossVerification(Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE, true);
-await cvRouter.addResultFilter(filter);
-```
-
-*Note*:
-
-* `enableResultCrossVerification` was designed to cross-validate the outcomes across various frames in a video streaming scenario, enhancing the reliability of the final results. This validation is particularly crucial for barcodes with limited error correction capabilities, such as 1D codes.
-
-##### Option 2: Eliminate redundant results detected within a short time frame
-
-```js
-let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
-filter.enableResultDeduplication(Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE, true);
-await cvRouter.addResultFilter(filter);
-```
-
-*Note*:
-
-* `enableResultDeduplication` was designed to prevent high usage in video streaming scenarios, addressing the repetitive processing of the same code within a short period of time.
-
-Initially, the filter is set to forget a result 3 seconds after it is first received. During this time frame, if an identical result appears, it is ignored.
-
-> It's important to know that in version 9.x or earlier, the occurrence of an identical result would reset the timer, thus reinitiating the 3-second count at that point. However, in version 10.0.20 and later, an identical result no longer resets the timer but is instead disregarded, and the duration count continues uninterrupted.
-
-Under certain circumstances, this duration can be extended with the method `setDuplicateForgetTime()`.
-
-```js
-let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
-filter.setDuplicateForgetTime(5000); // Extend the duration to 5 seconds.
-await cvRouter.addResultFilter(filter);
-```
-
-You can also enable both options at the same time:
-
-```js
-let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
-filter.enableResultCrossVerification(Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE, true);
-filter.enableResultDeduplication(Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE, true);
-filter.setDuplicateForgetTime(5000);
-await cvRouter.addResultFilter(filter);
-```
-
-#### Add feedback
-
-When a barcode is detected within the video stream, its position is immediately displayed within the video. Furthermore, utilizing the "Dynamsoft Camera Enhancer" SDK, we can introduce feedback mechanisms, such as emitting a "beep" sound or triggering a "vibration".
-
-The following code snippet adds a "beep" sound for when a barcode is found:
-
-```js
-const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver();
-resultReceiver.onDecodedBarcodesReceived = (result) => {
-  if (result.barcodeResultItems.length > 0) {
-    Dynamsoft.DCE.Feedback.beep();
-  }
-};
-cvRouter.addResultReceiver(resultReceiver);
-```
-
-### Customize the UI
-
-The UI is part of the auxiliary SDK "Dynamsoft Camera Enhancer", read more on how to [customize the UI](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/user-guide/index.html#customize-the-ui).
-
-## 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=10.0.20](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=10.0.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 required for in-browser video streaming.
-
-- `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    | v78+<sup>1</sup> |
-  |   Firefox    | v62+<sup>1</sup> |
-  |     Edge     |       v79+       |
-  |    Safari    |       v14+       |
-
-  <sup>1</sup> devices running iOS needs to be on iOS 14.3+ for camera video streaming to work in Chrome, Firefox or other Apps using webviews.
-
-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/index.html?ver=10.0.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/index.html](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/index.html?ver=10.0.20&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=10.0.20)
-2. Learn about the [APIs of the SDK](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/index.html?ver=10.0.20)
diff --git a/programming/javascript/user-guide/index-v10.0.21.md b/programming/javascript/user-guide/index-v10.0.21.md
deleted file mode 100644
index 7da425c2..00000000
--- a/programming/javascript/user-guide/index-v10.0.21.md
+++ /dev/null
@@ -1,799 +0,0 @@
----
-layout: default-layout
-title: v10.0.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
-schema: schemas/dynamsoft-facilitates-mit-research-schema.json
----
-
-<!--The original doc is hosted here => https://github.com/dynamsoft-docs/barcode-reader-docs-js/blob/main/programming/javascript/user-guide/index.md -->
-
-# 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-barcode-reader.svg)
-![downloads](https://img.shields.io/npm/dm/dynamsoft-barcode-reader.svg)
-![jsdelivr](https://img.shields.io/jsdelivr/npm/hm/dynamsoft-barcode-reader.svg)
-
-![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)
-
-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.
-
-<span style="font-size:20px">Table of Contents</span>
-
-- [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 (optional)](#host-the-sdk-yourself-optional)
-    - [Prepare the SDK](#prepare-the-sdk)
-      - [Specify the license](#specify-the-license)
-      - [Specify the location of the "engine" files (optional)](#specify-the-location-of-the-engine-files-optional)
-    - [Set up and start image processing](#set-up-and-start-image-processing)
-      - [Preload the module](#preload-the-module)
-      - [Create a CaptureVisionRouter object](#create-a-capturevisionrouter-object)
-      - [Connect an image source](#connect-an-image-source)
-      - [Register a result receiver](#register-a-result-receiver)
-      - [Start the process](#start-the-process)
-    - [Customize the process](#customize-the-process)
-      - [Adjust the preset template settings](#adjust-the-preset-template-settings)
-        - [Change barcode settings](#change-barcode-settings)
-        - [Retrieve the original image](#retrieve-the-original-image)
-        - [Change reading frequency to save power](#change-reading-frequency-to-save-power)
-        - [Specify a scan region](#specify-a-scan-region)
-      - [Edit the preset templates directly](#edit-the-preset-templates-directly)
-      - [Filter the results (Important)](#filter-the-results-important)
-        - [Option 1: Verify results across multiple frames](#option-1-verify-results-across-multiple-frames)
-        - [Option 2: Eliminate redundant results detected within a short time frame](#option-2-eliminate-redundant-results-detected-within-a-short-time-frame)
-      - [Add feedback](#add-feedback)
-    - [Customize the UI](#customize-the-ui)
-  - [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 - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.0.21/hello-world/hello-world.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html?ver=10.0.21&utm_source=guide)
-- Angular App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.0.21/hello-world/angular) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/angular/dist/angular/?ver=10.0.21&utm_source=guide)
-- React App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.0.21/hello-world/react) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/react/build/?ver=10.0.21&utm_source=guide)
-- Vue App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.0.21/hello-world/vue) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/vue/dist/?ver=10.0.21&utm_source=guide)
-- PWA App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.0.21/hello-world/pwa) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/pwa/helloworld-pwa.html?ver=10.0.21&utm_source=guide)
-- WebView in Android and iOS - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.0.21/hello-world/webview)
-- Read Driver Licenses - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.0.21/use-case/read-a-drivers-license.html) \| [Run](https://demo.dynamsoft.com/samples/dbr/js/use-case/read-a-drivers-license.html?ver=10.0.21&utm_source=guide)
-- Fill A Form - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.0.21/use-case/fill-a-form-with-barcode-reading.html) \| [Run](https://demo.dynamsoft.com/samples/dbr/js/use-case/fill-a-form-with-barcode-reading.html?ver=10.0.21&utm_source=guide)
-- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.0.21/use-case/show-result-texts-on-the-video.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/use-case/show-result-texts-on-the-video.html?ver=10.0.21&utm_source=guide)
-- Debug Camera and Collect Video Frame - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.0.21/others/debug)
-
-You can also:
-
-- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=10.0.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=10.0.21&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.0.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
-<!DOCTYPE html>
-<html>
-<body>
-<div id="camera-view-container" style="width: 100%; height: 60vh"></div>
-<textarea id="results" style="width: 100%; min-height: 10vh; font-size: 3vmin; overflow: auto" disabled></textarea>
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.0.21/dist/dbr.bundle.js"></script>
-<script>
-  Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
-  (async () => {
-    let cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
-
-    let cameraView = await Dynamsoft.DCE.CameraView.createInstance();
-    let cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
-    document.querySelector("#camera-view-container").append(cameraView.getUIElement());
-    cvRouter.setInput(cameraEnhancer);
-
-    const resultsContainer = document.querySelector("#results");
-    cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => {
-      if (result.barcodeResultItems.length > 0) {
-        resultsContainer.textContent = '';
-        for (let item of result.barcodeResultItems) {
-          resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
-        }
-      }
-    }});
-
-    let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
-    filter.enableResultCrossVerification(
-      Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE, true
-    );
-    filter.enableResultDeduplication(
-      Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE, true
-    );
-    await cvRouter.addResultFilter(filter);
-
-    await cameraEnhancer.open();
-    await cvRouter.startCapturing("ReadSingleBarcode");
-  })();
-</script>
-</body>
-</html>
-```
-
-<!--TOM: Update the code links-->
-
-<p align="center" style="text-align:center; white-space: normal; ">
-  <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.0.21/hello-world/hello-world.html" title="Code in Github" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg" alt="Code in Github" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/csm2f9wb/" title="Run via JSFiddle" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/jsfiddle.svg" alt="Run via JSFiddle" width="20" height="20" style="width:20px;height:20px;" >
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html?ver=10.0.21&utm_source=guide" title="Run in Dynamsoft" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/svgs/solid/circle-play.svg" alt="Run in Dynamsoft" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-</p>
-
------
-
-#### About the code
-
-- `Dynamsoft.License.LicenseManager.initLicense()`: This method initializes the license for using the SDK in the application. Note that the string "**DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9**" used in this example points to an online license that requires a network connection to work. Read more on [Specify the license](#specify-the-license).
-
-- `Dynamsoft.CVR.CaptureVisionRouter.createInstance()`: This method creates a `CaptureVisionRouter` object `cvRouter` which controls the entire process in three steps:
-  - **Retrieve Images from the Image Source**
-    - `cvRouter` connects to the image source through the [ImageSourceAdapter](https://www.dynamsoft.com/capture-vision/docs/core/architecture/input.html#image-source-adapter?lang=js) interface with the method `setInput()`.
-      ```js
-      cvRouter.setInput(cameraEnhancer);
-      ```
-    > The image source in our case is a [CameraEnhancer](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/user-guide/index.html) object created with `Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView)`
-  - **Coordinate Image-Processing Tasks**
-    - The coordination happens behind the scenes. `cvRouter` starts the process by specifying a preset template "ReadSingleBarcode" in the method `startCapturing()`.
-      ```js
-      cvRouter.startCapturing("ReadSingleBarcode");
-      ```
-  - **Dispatch Results to Listening Objects**
-    - The processing results are returned through the [CapturedResultReceiver](https://www.dynamsoft.com/capture-vision/docs/core/architecture/output.html#captured-result-receiver?lang=js) interface. The `CapturedResultReceiver` object is registered to `cvRouter` via the method `addResultReceiver()`. For more information, please check out [Register a result receiver](#register-a-result-receiver).
-      ```js
-      cvRouter.addResultReceiver({/*The-CapturedResultReceiver-Object"*/});
-      ```
-    - Also note that reading from video is extremely fast and there could be many duplicate results. We can use a [filter](#filter-the-results-important) with result deduplication enabled to filter out the duplicate results. The object is registered to `cvRouter` via the method `addResultFilter()`.
-      ```js
-      cvRouter.addResultFilter(filter);
-      ```
-
-> Read more on [Capture Vision Router](https://www.dynamsoft.com/capture-vision/docs/core/architecture/#capture-vision-router).
-
-### Run the example
-
-You can run the example deployed to [the Dynamsoft Demo Server](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html?ver=10.0.21&utm_source=guide) or test it with [JSFiddle code editor](https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/). 
-
-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 show up under the video and the barcode location will be highlighted in the video feed.
-
-Alternatively, you can test locally by copying and pasting the code shown above into a local file (e.g. "hello-world.html") and opening it in your browser.
-
-*Note*:
-
-If you open the web page as `file:///` or `http://` , the camera may not work correctly because the [MediaDevices: getUserMedia()](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) method only works in secure contexts (HTTPS), in some or all supporting browsers.
-
-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](https://nginx.org/en/docs/http/configuring_https_servers.html)
-2. IIS: [How to create a Self Signed Certificate in IIS](https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/)
-3. Tomcat: [Setting Up SSL on Tomcat in 5 minutes](https://dzone.com/articles/setting-ssl-tomcat-5-minutes)
-4. Node.js: [npm tls](https://nodejs.org/docs/v0.4.1/api/tls.html)
-
-If the test doesn't go as expected, you can [contact us](https://www.dynamsoft.com/company/contact/?ver=10.0.21&utm_source=guide&product=dbr&package=js).
-
-## Building your own page
-
-### Include the SDK
-
-To utilize the SDK, the initial step involves including the corresponding resource files:
-
-* `core.js` encompasses common classes, interfaces, and enumerations that are shared across all Dynamsoft SDKs.
-* `license.js` introduces the `LicenseManager` class, which manages the licensing for all Dynamsoft SDKs.
-* `utility.js` encompasses auxiliary classes that are shared among all Dynamsoft SDKs.
-* `dbr.js` defines interfaces and enumerations specifically tailored to the barcode reader module.
-* `cvr.js` introduces the `CaptureVisionRouter` class, which governs the entire image processing workflow.
-* `dce.js` comprises classes that offer camera support and basic user interface functionalities.
-
-For simplification, starting from version 10.0.21, we introduced `dbr.bundle.js`. Including this file is equivalent to incorporating all six packages.
-
-#### 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
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.33/dist/core.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-license@3.0.40/dist/license.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-utility@1.0.21/dist/utility.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.0.21/dist/dbr.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.0.32/dist/cvr.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.1/dist/dce.js"></script>
-  ```
-
-  Or just
-
-  ```html
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.0.21/dist/dbr.bundle.js"></script>
-  ```
-
-- UNPKG  
-
-  ```html
-  <script src="https://unpkg.com/dynamsoft-core@3.0.33/dist/core.js"></script>
-  <script src="https://unpkg.com/dynamsoft-license@3.0.40/dist/license.js"></script>
-  <script src="https://unpkg.com/dynamsoft-utility@1.0.21/dist/utility.js"></script>
-  <script src="https://unpkg.com/dynamsoft-barcode-reader@10.0.21/dist/dbr.js"></script>
-  <script src="https://unpkg.com/dynamsoft-capture-vision-router@2.0.32/dist/cvr.js"></script>
-  <script src="https://unpkg.com/dynamsoft-camera-enhancer@4.0.1/dist/dce.js"></script>
-  ```
-
-  Or just
-
-  ```html
-  <script src="https://unpkg.com/dynamsoft-barcode-reader@10.0.21/dist/dbr.bundle.js"></script>
-  ```
-
-In some rare cases (such as some restricted areas), you might not be able to access the CDN. If this happens, you can use the following files for the test.
-
-- https://download2.dynamsoft.com/packages/dynamsoft-core@3.0.33/dist/core.js
-- https://download2.dynamsoft.com/packages/dynamsoft-license@3.0.40/dist/license.js
-- https://download2.dynamsoft.com/packages/dynamsoft-utility@1.0.21/dist/utility.js
-- https://download2.dynamsoft.com/packages/dynamsoft-barcode-reader@10.0.21/dist/dbr.js
-- https://download2.dynamsoft.com/packages/dynamsoft-capture-vision-router@2.0.32/dist/cvr.js
-- https://download2.dynamsoft.com/packages/dynamsoft-camera-enhancer@4.0.1/dist/dce.js
-- or bundle: https://download2.dynamsoft.com/packages/dynamsoft-barcode-reader@10.0.21/dist/dbr.bundle.js
-
-However, please **DO NOT** use `download2.dynamsoft.com` resources in a production application as they are for temporary testing purposes only. Instead, you can try hosting the SDK yourself.
-
-#### Host the SDK yourself (optional)
-
-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 Dynamsoft Barcode Reader JavaScript Package](https://www.dynamsoft.com/barcode-reader/downloads/?ver=10.0.21&utm_source=guide&product=dbr&package=js)
-
-- yarn
-
-  ```cmd
-  yarn add dynamsoft-core@3.0.33 --save
-  yarn add dynamsoft-license@3.0.40 --save
-  yarn add dynamsoft-utility@1.0.21 --save
-  yarn add dynamsoft-barcode-reader@10.0.21 --save
-  yarn add dynamsoft-capture-vision-router@2.0.32 --save
-  yarn add dynamsoft-camera-enhancer@4.0.1 --save
-  yarn add dynamsoft-capture-vision-std@1.0.0 --save
-  yarn add dynamsoft-image-processing@2.0.30 --save
-  ```
-
-- npm
-
-  ```cmd
-  npm install dynamsoft-core@3.0.33 --save
-  npm install dynamsoft-license@3.0.40 --save
-  npm install dynamsoft-utility@1.0.21 --save
-  npm install dynamsoft-barcode-reader@10.0.21 --save
-  npm install dynamsoft-capture-vision-router@2.0.32 --save
-  npm install dynamsoft-camera-enhancer@4.0.1 --save
-  npm install dynamsoft-capture-vision-std@1.0.0 --save
-  npm install dynamsoft-image-processing@2.0.30 --save
-  ```
-
-Depending on how you downloaded the SDK and how you intend to use it, you can typically include it like this
-
-- From the website
-
-  ```html
-  <script src="./dynamsoft/distributables/dynamsoft-core@3.0.33/dist/core.js"></script>
-  <script src="./dynamsoft/distributables/dynamsoft-license@3.0.40/dist/license.js"></script>
-  <script src="./dynamsoft/distributables/dynamsoft-utility@1.0.21/dist/utility.js"></script>
-  <script src="./dynamsoft/distributables/dynamsoft-barcode-reader@10.0.21/dist/dbr.js"></script>
-  <script src="./dynamsoft/distributables/dynamsoft-capture-vision-router@2.0.32/dist/cvr.js"></script>
-  <script src="./dynamsoft/distributables/dynamsoft-camera-enhancer@4.0.1/dist/dce.js"></script>
-  ```
-
-  Or just
-
-  ```html
-  <script src="./dynamsoft/distributables/dynamsoft-barcode-reader@10.0.21/dist/dbr.bundle.js"></script>
-  ```
-
-- yarn or npm
-
-  ```html
-  <script src="/node_modules/dynamsoft-core/dist/core.js"></script>
-  <script src="/node_modules/dynamsoft-license/dist/license.js"></script>
-  <script src="/node_modules/dynamsoft-utility/dist/utility.js"></script>
-  <script src="/node_modules/dynamsoft-barcode-reader/dist/dbr.js"></script>
-  <script src="/node_modules/dynamsoft-capture-vision-router/dist/cvr.js"></script>
-  <script src="/node_modules/dynamsoft-camera-enhancer/dist/dce.js"></script>
-  ```
-
-  Or just
-
-  ```html
-  <script src="/node_modules/dynamsoft-barcode-reader/dist/dbr.bundle.js"></script>
-  ```
-
-*Note*:
-
-* Certain legacy web application servers may lack support for the `application/wasm` mimetype for .wasm files. To address this, you have two options:
-  1. Upgrade your web application server to one that supports the `application/wasm` mimetype.
-  2. Manually define the mimetype on your server. You can refer to the following resources for guidance:
-     1. [Apache](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Apache_Configuration_htaccess#media_types_and_character_encodings)
-     2. [IIS](https://docs.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/mimemap)
-     3. [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).
-
-### Prepare the SDK
-
-Before using the SDK, you need to configure a few things.
-
-#### Specify the license
-
-To enable the SDK's functionality, you must provide a valid license. Utilize the API function initLicense to set your license key.
-
-```javascript
-Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
-```
-
-As previously stated, the key "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" serves as a test license valid for 24 hours, applicable to any newly authorized browser. To test the SDK further, you can request a 30-day free trial license via the <a href="https://www.dynamsoft.com/customer/license/trialLicense?ver=10.0.21&utm_source=guide&product=dbr&package=js" target="_blank">Request a Trial License</a> link.
-
-> Upon registering a Dynamsoft account and obtaining the SDK package from the official website, Dynamsoft will automatically create a 30-day free trial license and embed the corresponding license key into all the provided SDK samples.
-
-#### Specify the location of the "engine" files (optional)
-
-This is usually only required with frameworks like Angular or React, etc. where the referenced JavaScript files such as `cvr.js`, `dbr.js` are 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 `Dynamsoft.Core.CoreModule.engineResourcePaths`:
-
-```javascript
-//The following code uses the jsDelivr CDN, feel free to change it to your own location of these files
-Object.assign(Dynamsoft.Core.CoreModule.engineResourcePaths, {
-  std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.0.0/dist/",
-  dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.0.30/dist/",
-  core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.33/dist/",
-  license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.0.40/dist/",
-  cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.0.32/dist/",
-  dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.0.21/dist/",
-  dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.1/dist/"
-});
-```
-
-### Set up and start image processing
-
-#### Preload the module
-
-The image processing logic is encapsulated within .wasm library files, and these files may require some time for downloading. To enhance the speed, we advise utilizing the following method to preload the libraries.
-
-```js
-// Preload the .wasm files
-await Dynamsoft.Core.CoreModule.loadWasm(["cvr", "dbr"]);
-```
-
-#### Create a CaptureVisionRouter object
-
-To use the SDK, we first create a `CaptureVisionRouter` object.
-
-```javascript
-Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
-
-let cvRouter = null;
-try {
-    cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
-} catch (ex) {
-    console.error(ex);
-}
-```
-
-*Tip*:
-
-When creating a `CaptureVisionRouter` 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 `pRouter` in the following code:
-
-```javascript
-Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
-
-let pCvRouter = null; // promise of router
-let cvRouter = null;
-
-document.getElementById('btn-scan').addEventListener('click', async () => {
-    try {
-        cvRouter = await (pCvRouter = pCvRouter || Dynamsoft.CVR.CaptureVisionRouter.createInstance());
-    } catch (ex) {
-        console.error(ex);
-    }
-});
-```
-
-#### Connect an image source
-
-The `CaptureVisionRouter` object, denoted as `cvRouter`, is responsible for handling images provided by an image source. In our scenario, we aim to detect barcodes directly from a live video stream. To facilitate this, we initialize a `CameraEnhancer` object, identified as `cameraEnhancer`, which is specifically designed to capture image frames from the video feed and subsequently forward them to `cvRouter`.
-
-To enable video streaming on the webpage, we create a `CameraView` object referred to as `cameraView`, which is then passed to `cameraEnhancer`, and its content is displayed on the webpage.
-
-```html
-<div id="camera-view-container" style="width: 100%; height: 100vh"></div>
-```
-
-```javascript
-let cameraView = await Dynamsoft.DCE.CameraView.createInstance();
-let cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
-document.querySelector("#camera-view-container").append(cameraView.getUIElement());
-cvRouter.setInput(cameraEnhancer);
-```
-
-#### Register a result receiver
-
-Once the image processing is complete, the results are sent to all the registered `CapturedResultReceiver` objects. Each `CapturedResultReceiver` object may encompass one or multiple callback functions associated with various result types. In our particular case, our focus is on identifying barcodes within the images, so it's sufficient to define the callback function `onDecodedBarcodesReceived`:
-
-```javascript
-const resultsContainer = document.querySelector("#results");
-const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver();
-resultReceiver.onDecodedBarcodesReceived = (result) => {
-  if (result.barcodeResultItems.length > 0) {
-    resultsContainer.textContent = '';
-    for (let item of result.barcodeResultItems) {
-      // In this example, the barcode result is shown on the page beneath the video
-      resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
-    }
-  }
-};
-cvRouter.addResultReceiver(resultReceiver);
-```
-
-You can also write code like this. It is the same.
-
-```javascript
-const resultsContainer = document.querySelector("#results");
-cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => {
-  if (result.barcodeResultItems.length > 0) {
-    resultsContainer.textContent = '';
-    for (let item of result.barcodeResultItems) {
-      // In this example, the barcode result is shown on the page beneath the video
-      resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
-    }
-  }
-}});
-```
-
-Check out [CapturedResultReceiver](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/capture-vision-router/captured-result-receiver.html) for more information.
-
-#### Start the process
-
-With the setup now complete, we can proceed to process the images in two straightforward steps:
-
-1. Initiate the image source to commence image acquisition. In our scenario, we invoke the `open()` method on `cameraEnhancer` to initiate video streaming and simultaneously initiate the collection of images. These collected images will be dispatched to `cvRouter` as per its request.
-2. Define a preset template to commence image processing. In our case, we utilize the "ReadSingleBarcode" template, specifically tailored for processing images containing a single barcode.
-
-```javascript
-await cameraEnhancer.open();
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
-
-*Note*:
-
-* `cvRouter` is engineered to consistently request images from the image source.
-* Various preset templates are at your disposal for barcode reading:
-
-| Template Name                  | Function Description                                           |
-| ------------------------------ | -------------------------------------------------------------- |
-| **ReadBarcodes_Default**       | Scans a single barcode.                                        |
-| **ReadSingleBarcode**          | Quickly scans a single barcode.                                |
-| **ReadBarcodes_SpeedFirst**    | Prioritizes speed in scanning multiple barcodes.               |
-| **ReadBarcodes_ReadRateFirst** | Maximizes the number of barcodes read.                         |
-| **ReadBarcodes_Balance**       | Balances speed and quantity in reading multiple barcodes.      |
-| **ReadDenseBarcodes**          | Specialized in reading barcodes with high information density. |
-| **ReadDistantBarcodes**        | Capable of reading barcodes from extended distances.           |
-
-Read more on the [preset CaptureVisionTemplates](./preset-templates.md).
-
-### Customize the process
-
-#### Adjust the preset template settings
-
-When making adjustments to some basic tasks, we often only need to modify [SimplifiedCaptureVisionSettings](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/capture-vision-router/interfaces/simplified-capture-vision-settings.html).
-
-##### Change barcode settings
-
-The preset templates can be updated to meet different requirements. For example, the following code limits the barcode format to QR code.
-
-```javascript
-let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.barcodeSettings.barcodeFormatIds =
-  Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
-await cvRouter.updateSettings("ReadSingleBarcode", settings);
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
-
-For a list of adjustable barcode settings, check out [SimplifiedBarcodeReaderSettings](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/interfaces/simplified-barcode-reader-settings.html).
-
-##### Retrieve the original image
-
-Additionally, we have the option to modify the template to retrieve the original image containing the barcode.
-
-```javascript
-let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.capturedResultItemTypes |= 
-  Dynamsoft.Core.EnumCapturedResultItemType.CRIT_ORIGINAL_IMAGE;
-await cvRouter.updateSettings("ReadSingleBarcode", settings);
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
-
-Limit the barcode format to QR code, and retrieve the original image containing the barcode, at the same time.
-
-```javascript
-let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.capturedResultItemTypes = 
-  Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE |
-  Dynamsoft.Core.EnumCapturedResultItemType.CRIT_ORIGINAL_IMAGE;
-await cvRouter.updateSettings("ReadSingleBarcode", settings);
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
-
-Please be aware that it is necessary to update the `CapturedResultReceiver` object to obtain the original image. For instance:
-
-```javascript
-resultReceiver.onCapturedResultReceived = (result) => {
-  let barcodes = result.items.filter((item) =>
-      item.type === Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE
-  );
-  if (barcodes.length > 0) {
-    let image = result.items.filter(
-      (item) =>
-        item.type ===
-        Dynamsoft.Core.EnumCapturedResultItemType.CRIT_ORIGINAL_IMAGE
-    )[0].imageData;
-    // The image that we found the barcode(s) on.
-  }
-};
-```
-
-##### Change reading frequency to save power
-
-The SDK is initially configured to process images sequentially without any breaks. Although this setup maximizes performance, it can lead to elevated power consumption, potentially causing the device to overheat. In many cases, it's possible to reduce the reading speed while still satisfying business requirements. The following code snippet illustrates how to adjust the SDK to process an image every 500 milliseconds:
-
-> Please bear in mind that in the following code, if an image's processing time is shorter than 500 milliseconds, the SDK will wait for the full 500 milliseconds before proceeding to process the next image. Conversely, if an image's processing time exceeds 500 milliseconds, the subsequent image will be processed immediately upon completion.
-
-```javascript
-let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.minImageCaptureInterval = 500;
-await cvRouter.updateSettings("ReadSingleBarcode", settings);
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
-
-##### Specify a scan region
-
-You can use the parameter `roi` (region of interest) together with the parameter `roiMeasuredInPercentage` to configure the SDK to only read a specific region on the image frames. For example, the following code limits the reading in the center 25%( = 50% * 50%) of the image frames:
-
-```javascript
-let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.roiMeasuredInPercentage = true;
-settings.roi.points = [
-  { x: 25, y: 25 },
-  { x: 75, y: 25 },
-  { x: 75, y: 75 },
-  { x: 25, y: 75 },
-];
-await cvRouter.updateSettings("ReadSingleBarcode", settings);
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
-
-While the code above accomplishes the task, a more effective approach is to restrict the scan region directly at the image source, as demonstrated in the following code snippet.
-
-> * With the region configured at the image source, the images are cropped right before they are gathered for processing, eliminating the necessity to modify the processing settings further.
-> * `cameraEnhancer` elevates interactivity by overlaying a mask on the video, providing a clear delineation of the scanning region.
-> * See also: [CameraEnhancer::setScanRegion](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/api-reference/acquisition.html#setscanregion)
-
-```javascript
-cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
-cameraEnhancer.setScanRegion({
-  x: 25,
-  y: 25,
-  width: 50,
-  height: 50,
-  isMeasuredInPercentage: true,
-});
-```
-
-<!--
-* Specify the maximum time allowed for processing each image
-
-You can set the maximum time allowed for processing a single image with the property `timeout`.
-
-> Please be aware that the SDK will cease processing an image if its processing time exceeds the duration specified by the `timeout` parameter. It should not be confused with the previously discussed parameter, `minImageCaptureInterval`.
-
-```javascript
-let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.timeout = 500;
-await cvRouter.updateSettings("ReadSingleBarcode", settings);
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
--->
-
-#### Edit the preset templates directly
-
-The preset templates have a lot more settings that can be customized to best suit your use case. If you [download the SDK from Dynamsoft website](https://www.dynamsoft.com/barcode-reader/downloads/1000003-confirmation/), you can find the templates under
-
-* "/dynamsoft-barcode-reader-js-10.0.21/dynamsoft/resources/barcode-reader/templates/"
-
-Upon completing the template editing, you can invoke the `initSettings` method and provide it with the template path as an argument.
-
-```javascript
-await cvRouter.initSettings("PATH-TO-THE-FILE"); //e.g. "https://your-website/ReadSingleBarcode.json")
-await cvRouter.startCapturing("ReadSingleBarcode"); // Make sure the name matches one of the CaptureVisionTemplates in the
-```
-
-#### Filter the results (Important)
-
-While processing video frames, it's common for the same barcode to be detected multiple times. To enhance the user experience, we can use [MultiFrameResultCrossFilter](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/utility/multi-frame-result-cross-filter.html) object, having two options currently at our disposal:
-
-##### Option 1: Verify results across multiple frames
-
-```js
-let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
-filter.enableResultCrossVerification(
-  Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE, true
-);
-await cvRouter.addResultFilter(filter);
-```
-
-*Note*:
-
-* `enableResultCrossVerification` was designed to cross-validate the outcomes across various frames in a video streaming scenario, enhancing the reliability of the final results. This validation is particularly crucial for barcodes with limited error correction capabilities, such as 1D codes.
-
-##### Option 2: Eliminate redundant results detected within a short time frame
-
-```js
-let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
-filter.enableResultDeduplication(
-  Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE, true
-);
-await cvRouter.addResultFilter(filter);
-```
-
-*Note*:
-
-* `enableResultDeduplication` was designed to prevent high usage in video streaming scenarios, addressing the repetitive processing of the same code within a short period of time.
-
-Initially, the filter is set to forget a result 3 seconds after it is first received. During this time frame, if an identical result appears, it is ignored.
-
-> It's important to know that in version 9.x or earlier, the occurrence of an identical result would reset the timer, thus reinitiating the 3-second count at that point. However, in version 10.0.21 and later, an identical result no longer resets the timer but is instead disregarded, and the duration count continues uninterrupted.
-
-Under certain circumstances, this duration can be extended with the method `setDuplicateForgetTime()`.
-
-```js
-let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
-filter.setDuplicateForgetTime(5000); // Extend the duration to 5 seconds.
-await cvRouter.addResultFilter(filter);
-```
-
-You can also enable both options at the same time:
-
-```js
-let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
-filter.enableResultCrossVerification(
-  Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE, true
-);
-filter.enableResultDeduplication(
-  Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE, true
-);
-filter.setDuplicateForgetTime(5000);
-await cvRouter.addResultFilter(filter);
-```
-
-#### Add feedback
-
-When a barcode is detected within the video stream, its position is immediately displayed within the video. Furthermore, utilizing the "Dynamsoft Camera Enhancer" SDK, we can introduce feedback mechanisms, such as emitting a "beep" sound or triggering a "vibration".
-
-The following code snippet adds a "beep" sound for when a barcode is found:
-
-```js
-const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver();
-resultReceiver.onDecodedBarcodesReceived = (result) => {
-  if (result.barcodeResultItems.length > 0) {
-    Dynamsoft.DCE.Feedback.beep();
-  }
-};
-cvRouter.addResultReceiver(resultReceiver);
-```
-
-### Customize the UI
-
-The UI is part of the auxiliary SDK "Dynamsoft Camera Enhancer", read more on how to [customize the UI](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/user-guide/index.html#customize-the-ui).
-
-## 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=10.0.21](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=10.0.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 required for in-browser video streaming.
-
-- `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    | v78+<sup>1</sup> |
-  |   Firefox    | v62+<sup>1</sup> |
-  |     Edge     |       v79+       |
-  |    Safari    |       v14+       |
-
-  <sup>1</sup> devices running iOS needs to be on iOS 14.3+ for camera video streaming to work in Chrome, Firefox or other Apps using webviews.
-
-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/index.html?ver=10.0.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/index.html](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/index.html?ver=10.0.21&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=10.0.21)
-2. Learn about the [APIs of the SDK](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/index.html?ver=10.0.21)
diff --git a/programming/javascript/user-guide/index-v10.2.1000.md b/programming/javascript/user-guide/index-v10.2.1000.md
deleted file mode 100644
index ba3fddf6..00000000
--- a/programming/javascript/user-guide/index-v10.2.1000.md
+++ /dev/null
@@ -1,745 +0,0 @@
----
-layout: default-layout
-title: v10.2.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
-schema: schemas/dynamsoft-facilitates-mit-research-schema.json
----
-
-<!--The original doc is hosted here => https://github.com/dynamsoft-docs/barcode-reader-docs-js/blob/main/programming/javascript/user-guide/index.md -->
-
-# 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-barcode-reader.svg)
-![downloads](https://img.shields.io/npm/dm/dynamsoft-barcode-reader.svg)
-![jsdelivr](https://img.shields.io/jsdelivr/npm/hm/dynamsoft-barcode-reader.svg)
-
-![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)
-
-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.
-
-<span style="font-size:20px">Table of Contents</span>
-
-- [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 (optional)](#host-the-sdk-yourself-optional)
-    - [Prepare the SDK](#prepare-the-sdk)
-      - [Specify the license](#specify-the-license)
-      - [Specify the location of the "engine" files (optional)](#specify-the-location-of-the-engine-files-optional)
-    - [Set up and start image processing](#set-up-and-start-image-processing)
-      - [Preload the module](#preload-the-module)
-      - [Create a CaptureVisionRouter object](#create-a-capturevisionrouter-object)
-      - [Connect an image source](#connect-an-image-source)
-      - [Register a result receiver](#register-a-result-receiver)
-      - [Start the process](#start-the-process)
-    - [Customize the process](#customize-the-process)
-      - [Adjust the preset template settings](#adjust-the-preset-template-settings)
-        - [Change barcode settings](#change-barcode-settings)
-        - [Retrieve the original image](#retrieve-the-original-image)
-        - [Change reading frequency to save power](#change-reading-frequency-to-save-power)
-        - [Specify a scan region](#specify-a-scan-region)
-      - [Edit the preset templates directly](#edit-the-preset-templates-directly)
-      - [Filter the results (Important)](#filter-the-results-important)
-        - [Option 1: Verify results across multiple frames](#option-1-verify-results-across-multiple-frames)
-        - [Option 2: Eliminate redundant results detected within a short time frame](#option-2-eliminate-redundant-results-detected-within-a-short-time-frame)
-      - [Add feedback](#add-feedback)
-    - [Customize the UI](#customize-the-ui)
-  - [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 - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.2.10/hello-world/hello-world.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html?ver=10.2.10&utm_source=guide)
-- Angular App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.2.10/hello-world/angular) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/angular/dist/dbrjs-sample-angular/browser/?ver=10.2.10&utm_source=guide)
-- React App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.2.10/hello-world/react) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/react/build/?ver=10.2.10&utm_source=guide)
-- Vue App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.2.10/hello-world/vue) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/vue/dist/?ver=10.2.10&utm_source=guide)
-- PWA App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.2.10/hello-world/pwa) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/pwa/helloworld-pwa.html?ver=10.2.10&utm_source=guide)
-- WebView in Android and iOS - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.2.10/hello-world/webview)
-- Read Driver Licenses - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.2.10/use-case/read-a-drivers-license/index.html) \| [Run](https://demo.dynamsoft.com/samples/dbr/js/use-case/read-a-drivers-license/index.html?ver=10.2.10&utm_source=guide)
-- Fill A Form - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.2.10/use-case/fill-a-form-with-barcode-reading.html) \| [Run](https://demo.dynamsoft.com/samples/dbr/js/use-case/fill-a-form-with-barcode-reading.html?ver=10.2.10&utm_source=guide)
-- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.2.10/use-case/show-result-texts-on-the-video.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/use-case/show-result-texts-on-the-video.html?ver=10.2.10&utm_source=guide)
-- Debug Camera and Collect Video Frame - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.2.10/others/debug)
-
-You can also:
-
-- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=10.2.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=10.2.10&utm_source=guide) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.2.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
-<!DOCTYPE html>
-<html>
-<body>
-<div id="camera-view-container" style="width: 100%; height: 60vh"></div>
-<textarea id="results" style="width: 100%; min-height: 10vh; font-size: 3vmin; overflow: auto" disabled></textarea>
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.2.1000/dist/dbr.bundle.js"></script>
-<script>
-  Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
-  Dynamsoft.Core.CoreModule.loadWasm(["dbr"]);
-  (async () => {
-    let cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
-
-    let cameraView = await Dynamsoft.DCE.CameraView.createInstance();
-    let cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
-    document.querySelector("#camera-view-container").append(cameraView.getUIElement());
-    cvRouter.setInput(cameraEnhancer);
-
-    const resultsContainer = document.querySelector("#results");
-    cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => {
-      if (result.barcodeResultItems.length > 0) {
-        resultsContainer.textContent = '';
-        for (let item of result.barcodeResultItems) {
-          resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
-        }
-      }
-    }});
-
-    let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
-    filter.enableResultCrossVerification("barcode", true);
-    filter.enableResultDeduplication("barcode", true);
-    await cvRouter.addResultFilter(filter);
-
-    await cameraEnhancer.open();
-    await cvRouter.startCapturing("ReadSingleBarcode");
-  })();
-</script>
-</body>
-</html>
-```
-
-<!--TOM: Update the code links-->
-
-<p align="center" style="text-align:center; white-space: normal; ">
-  <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.2.10/hello-world/hello-world.html" title="Code in Github" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg" alt="Code in Github" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/csm2f9wb/" title="Run via JSFiddle" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/jsfiddle.svg" alt="Run via JSFiddle" width="20" height="20" style="width:20px;height:20px;" >
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html?ver=10.2.10&utm_source=guide" title="Run in Dynamsoft" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/svgs/solid/circle-play.svg" alt="Run in Dynamsoft" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-</p>
-
------
-
-#### About the code
-
-- `Dynamsoft.License.LicenseManager.initLicense()`: This method initializes the license for using the SDK in the application. Note that the string "**DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9**" used in this example points to an online license that requires a network connection to work. Read more on [Specify the license](#specify-the-license).
-
-- `Dynamsoft.Core.CoreModule.loadWasm(["dbr"])`: This is an optional code. Used to load wasm resources in advance, reducing latency between video playing and barcode decoding.
-
-- `Dynamsoft.CVR.CaptureVisionRouter.createInstance()`: This method creates a `CaptureVisionRouter` object `cvRouter` which controls the entire process in three steps:
-  - **Retrieve Images from the Image Source**
-    - `cvRouter` connects to the image source through the [ImageSourceAdapter](https://www.dynamsoft.com/capture-vision/docs/core/architecture/input.html#image-source-adapter?lang=js) interface with the method `setInput()`.
-      ```js
-      cvRouter.setInput(cameraEnhancer);
-      ```
-    > The image source in our case is a [CameraEnhancer](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/user-guide/index.html) object created with `Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView)`
-  - **Coordinate Image-Processing Tasks**
-    - The coordination happens behind the scenes. `cvRouter` starts the process by specifying a preset template "ReadSingleBarcode" in the method `startCapturing()`.
-      ```js
-      cvRouter.startCapturing("ReadSingleBarcode");
-      ```
-  - **Dispatch Results to Listening Objects**
-    - The processing results are returned through the [CapturedResultReceiver](https://www.dynamsoft.com/capture-vision/docs/core/architecture/output.html#captured-result-receiver?lang=js) interface. The `CapturedResultReceiver` object is registered to `cvRouter` via the method `addResultReceiver()`. For more information, please check out [Register a result receiver](#register-a-result-receiver).
-      ```js
-      cvRouter.addResultReceiver({/*The-CapturedResultReceiver-Object"*/});
-      ```
-    - Also note that reading from video is extremely fast and there could be many duplicate results. We can use a [filter](#filter-the-results-important) with result deduplication enabled to filter out the duplicate results. The object is registered to `cvRouter` via the method `addResultFilter()`.
-      ```js
-      cvRouter.addResultFilter(filter);
-      ```
-
-> Read more on [Capture Vision Router](https://www.dynamsoft.com/capture-vision/docs/core/architecture/#capture-vision-router).
-
-### Run the example
-
-You can run the example deployed to [the Dynamsoft Demo Server](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html?ver=10.2.10&utm_source=guide) or test it with [JSFiddle code editor](https://jsfiddle.net/DynamsoftTeam/csm2f9wb/). 
-
-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 show up under the video and the barcode location will be highlighted in the video feed.
-
-Alternatively, you can test locally by copying and pasting the code shown above into a local file (e.g. "hello-world.html") and opening it in your browser.
-
-*Note*:
-
-If you open the web page as `file:///` or `http://` , the camera may not work correctly because the [MediaDevices: getUserMedia()](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) method only works in secure contexts (HTTPS), in some or all supporting browsers.
-
-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](https://nginx.org/en/docs/http/configuring_https_servers.html)
-2. IIS: [How to create a Self Signed Certificate in IIS](https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/)
-3. Tomcat: [Setting Up SSL on Tomcat in 5 minutes](https://dzone.com/articles/setting-ssl-tomcat-5-minutes)
-4. Node.js: [npm tls](https://nodejs.org/docs/v0.4.1/api/tls.html)
-
-If the test doesn't go as expected, you can [contact us](https://www.dynamsoft.com/company/contact/?ver=10.2.10&utm_source=guide&product=dbr&package=js).
-
-## Building your own page
-
-### Include the SDK
-
-To utilize the SDK, the initial step involves including the corresponding resource files:
-
-* `core.js` encompasses common classes, interfaces, and enumerations shared across all Dynamsoft SDKs.
-* `license.js` introduces the `LicenseManager` class, which manages the licensing for all Dynamsoft SDKs.
-* `utility.js` encompasses auxiliary classes shared among all Dynamsoft SDKs.
-* `dbr.js` defines interfaces and enumerations tailored to the barcode reader module.
-* `cvr.js` introduces the `CaptureVisionRouter` class, which governs the entire image processing workflow.
-* `dce.js` comprises classes that offer camera support and basic user interface functionalities.
-
-To simplify things, starting from version 10.0.21, we introduced `dbr.bundle.js`, which combines all six of the above files. In the following chapters, we will use `dbr.bundle.js`.
-
-#### 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
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.2.1000/dist/dbr.bundle.js"></script>
-  ```
-
-- UNPKG
-
-  ```html
-  <script src="https://unpkg.com/dynamsoft-barcode-reader-bundle@10.2.1000/dist/dbr.bundle.js"></script>
-  ```
-
-- In some rare cases (such as some restricted areas), you might not be able to access the CDN. If this happens, you can use the following files for the test.
-
-  ```html
-  <script src="https://download2.dynamsoft.com/packages/dynamsoft-barcode-reader-bundle@10.2.1000/dist/dbr.bundle.js"></script>
-  ```
-
-  However, please **DO NOT** use `download2.dynamsoft.com` resources in a production application as they are for temporary testing purposes only. Instead, you can try hosting the SDK yourself.
-
-- In frameworks like React and Vue, you may want to add the package as a dependency.
-
-  ```sh
-  npm i dynamsoft-barcode-reader-bundle@10.2.1000 -E
-  # or
-  yarn add dynamsoft-barcode-reader-bundle@10.2.1000 -E
-  ```
-
-  NOTE that in frameworks, you need to [specify the engineResourcePaths](#specify-the-location-of-the-engine-files-optional).
-
-#### Host the SDK yourself (optional)
-
-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.
-
-There are two options for downloading the SDK, and the usage for each is slightly different
-
-- From the website
-
-  [Download Dynamsoft Barcode Reader JavaScript Package](https://www.dynamsoft.com/barcode-reader/downloads/?ver=10.2.10&utm_source=guide&product=dbr&package=js)
-
-  The resources are located at path `dynamsoft/distributables/<pkg>@<version>`, you can typically include it like this:
-
-  ```html
-  <script src="dynamsoft/distributables/dynamsoft-barcode-reader-bundle@10.2.1000/dist/dbr.bundle.js"></script>
-  ```
-
-- npm
-
-  ```sh
-  npm i dynamsoft-barcode-reader-bundle@10.2.1000 -E
-  # Compared with using CDN, you need to set up more resources.
-  npm i dynamsoft-capture-vision-std@1.2.10 -E
-  npm i dynamsoft-image-processing@2.2.30 -E
-  ```
-
-  The resources are located at the path `node_modules/<pkg>`, without `@<version>`, so the script would be like:
-
-  ```html
-  <script src="node_modules/dynamsoft-barcode-reader-bundle/dist/dbr.bundle.js"></script>
-  ```
-  
-  Since the version tags (`@<version>`) are missing, you need to [specify the engineResourcePaths](#specify-the-location-of-the-engine-files-optional) so that the SDK can find the resources correctly.
-
-  > To avoid confusion, we suggest renaming "node_modules" or moving "dynamsoft-" packages elsewhere for self-hosting, as "node_modules" is reserved for Node.js dependencies.
-
-*Note*:
-
-* Certain legacy web application servers may lack support for the `application/wasm` mimetype for .wasm files. To address this, you have two options:
-  1. Upgrade your web application server to one that supports the `application/wasm` mimetype.
-  2. Manually define the mimetype on your server. You can refer to the following resources for guidance:
-     1. [Apache](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Apache_Configuration_htaccess#media_types_and_character_encodings)
-     2. [IIS](https://docs.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/mimemap)
-     3. [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).
-
-### Prepare the SDK
-
-Before using the SDK, you need to configure a few things.
-
-#### Specify the license
-
-To enable the SDK's functionality, you must provide a valid license. Utilize the API function initLicense to set your license key.
-
-```javascript
-Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
-```
-
-As previously stated, the key "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" serves as a test license valid for 24 hours, applicable to any newly authorized browser. To test the SDK further, you can request a 30-day free trial license via the <a href="https://www.dynamsoft.com/customer/license/trialLicense?ver=10.2.10&utm_source=guide&product=dbr&package=js" target="_blank">Request a Trial License</a> link.
-
-> Upon registering a Dynamsoft account and obtaining the SDK package from the official website, Dynamsoft will automatically create a 30-day free trial license and embed the corresponding license key into all the provided SDK samples.
-
-#### Specify the location of the "engine" files (optional)
-
-This is usually only required with frameworks like Angular or React, etc. where the referenced JavaScript files such as `cvr.js`, `dbr.js` are 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 `Dynamsoft.Core.CoreModule.engineResourcePaths`:
-
-```javascript
-//The following code uses the jsDelivr CDN, feel free to change it to your own location of these files
-Object.assign(Dynamsoft.Core.CoreModule.engineResourcePaths, {
-  std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.2.10/dist/",
-  dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.2.30/dist/",
-  core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.30/dist/",
-  license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.21/dist/",
-  cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.30/dist/",
-  dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.2.10/dist/",
-  dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.3/dist/"
-});
-```
-
-### Set up and start image processing
-
-#### Preload the module
-
-The image processing logic is encapsulated within .wasm library files, and these files may require some time for downloading. To enhance the speed, we advise utilizing the following method to preload the libraries.
-
-```js
-// Preload the .wasm files
-await Dynamsoft.Core.CoreModule.loadWasm(["dbr"]);
-```
-
-#### Create a CaptureVisionRouter object
-
-To use the SDK, we first create a `CaptureVisionRouter` object.
-
-```javascript
-Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
-
-let cvRouter = null;
-try {
-    cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
-} catch (ex) {
-    console.error(ex);
-}
-```
-
-*Tip*:
-
-When creating a `CaptureVisionRouter` 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 `pCvRouter` in the following code:
-
-```javascript
-Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
-
-let pCvRouter = null; // The helper variable which is a promise of cvRouter
-let cvRouter = null;
-
-document.getElementById('btn-scan').addEventListener('click', async () => {
-    try {
-        cvRouter = await (pCvRouter = pCvRouter || Dynamsoft.CVR.CaptureVisionRouter.createInstance());
-    } catch (ex) {
-        console.error(ex);
-    }
-});
-```
-
-#### Connect an image source
-
-The `CaptureVisionRouter` object, denoted as `cvRouter`, is responsible for handling images provided by an image source. In our scenario, we aim to detect barcodes directly from a live video stream. To facilitate this, we initialize a `CameraEnhancer` object, identified as `cameraEnhancer`, which is specifically designed to capture image frames from the video feed and subsequently forward them to `cvRouter`.
-
-To enable video streaming on the webpage, we create a `CameraView` object referred to as `cameraView`, which is then passed to `cameraEnhancer`, and its content is displayed on the webpage.
-
-```html
-<div id="camera-view-container" style="width: 100%; height: 100vh"></div>
-```
-
-```javascript
-let cameraView = await Dynamsoft.DCE.CameraView.createInstance();
-let cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
-document.querySelector("#camera-view-container").append(cameraView.getUIElement());
-cvRouter.setInput(cameraEnhancer);
-```
-
-#### Register a result receiver
-
-Once the image processing is complete, the results are sent to all the registered `CapturedResultReceiver` objects. Each `CapturedResultReceiver` object may encompass one or multiple callback functions associated with various result types. In our particular case, our focus is on identifying barcodes within the images, so it's sufficient to define the callback function `onDecodedBarcodesReceived`:
-
-```javascript
-const resultsContainer = document.querySelector("#results");
-const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver();
-resultReceiver.onDecodedBarcodesReceived = (result) => {
-  if (result.barcodeResultItems.length > 0) {
-    resultsContainer.textContent = '';
-    for (let item of result.barcodeResultItems) {
-      // In this example, the barcode results are displayed on the page below the video.
-      resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
-    }
-  }
-};
-cvRouter.addResultReceiver(resultReceiver);
-```
-
-You can also write code like this. It is the same.
-
-```javascript
-const resultsContainer = document.querySelector("#results");
-cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => {
-  if (result.barcodeResultItems.length > 0) {
-    resultsContainer.textContent = '';
-    for (let item of result.barcodeResultItems) {
-      // In this example, the barcode results are displayed on the page below the video.
-      resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
-    }
-  }
-}});
-```
-
-Check out [CapturedResultReceiver](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/capture-vision-router/captured-result-receiver.html) for more information.
-
-#### Start the process
-
-With the setup now complete, we can proceed to process the images in two straightforward steps:
-
-1. Initiate the image source to commence image acquisition. In our scenario, we invoke the `open()` method on `cameraEnhancer` to initiate video streaming and simultaneously initiate the collection of images. These collected images will be dispatched to `cvRouter` as per its request.
-2. Define a preset template to commence image processing. In our case, we utilize the "ReadSingleBarcode" template, specifically tailored for processing images containing a single barcode.
-
-```javascript
-await cameraEnhancer.open();
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
-
-*Note*:
-
-* `cvRouter` is engineered to consistently request images from the image source.
-* Various preset templates are at your disposal for barcode reading:
-
-| Template Name                  | Function Description                                           |
-| ------------------------------ | -------------------------------------------------------------- |
-| **ReadBarcodes_Default**       | Scans a single barcode.                                        |
-| **ReadSingleBarcode**          | Quickly scans a single barcode.                                |
-| **ReadBarcodes_SpeedFirst**    | Prioritizes speed in scanning multiple barcodes.               |
-| **ReadBarcodes_ReadRateFirst** | Maximizes the number of barcodes read.                         |
-| **ReadBarcodes_Balance**       | Balances speed and quantity in reading multiple barcodes.      |
-| **ReadDenseBarcodes**          | Specialized in reading barcodes with high information density. |
-| **ReadDistantBarcodes**        | Capable of reading barcodes from extended distances.           |
-
-Read more on the [preset CaptureVisionTemplates](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/capture-vision-router/preset-templates.html).
-
-### Customize the process
-
-#### Adjust the preset template settings
-
-When making adjustments to some basic tasks, we often only need to modify [SimplifiedCaptureVisionSettings](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/capture-vision-router/interfaces/simplified-capture-vision-settings.html).
-
-##### Change barcode settings
-
-The preset templates can be updated to meet different requirements. For example, the following code limits the barcode format to QR code.
-
-```javascript
-let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.barcodeSettings.barcodeFormatIds =
-  Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
-await cvRouter.updateSettings("ReadSingleBarcode", settings);
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
-
-For a list of adjustable barcode settings, check out [SimplifiedBarcodeReaderSettings](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/interfaces/simplified-barcode-reader-settings.html).
-
-##### Retrieve the original image
-
-Additionally, we have the option to modify the template to retrieve the original image containing the barcode.
-
-```javascript
-let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.capturedResultItemTypes |= 
-  Dynamsoft.Core.EnumCapturedResultItemType.CRIT_ORIGINAL_IMAGE;
-await cvRouter.updateSettings("ReadSingleBarcode", settings);
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
-
-Limit the barcode format to QR code, and retrieve the original image containing the barcode, at the same time.
-
-```javascript
-let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.capturedResultItemTypes = 
-  Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE |
-  Dynamsoft.Core.EnumCapturedResultItemType.CRIT_ORIGINAL_IMAGE;
-await cvRouter.updateSettings("ReadSingleBarcode", settings);
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
-
-Please be aware that it is necessary to update the `CapturedResultReceiver` object to obtain the original image. For instance:
-
-```javascript
-const EnumCRIT = Dynamsoft.Core.EnumCapturedResultItemType;
-resultReceiver.onCapturedResultReceived = (result) => {
-  let barcodes = result.items.filter(item => item.type === EnumCRIT.CRIT_BARCODE);
-  if (barcodes.length > 0) {
-    // Use a filter to get the image on which barcodes are found.
-    let image = result.items.filter(
-      item => item.type === EnumCRIT.CRIT_ORIGINAL_IMAGE
-    )[0].imageData;
-  }
-};
-```
-
-##### Change reading frequency to save power
-
-The SDK is initially configured to process images sequentially without any breaks. Although this setup maximizes performance, it can lead to elevated power consumption, potentially causing the device to overheat. In many cases, it's possible to reduce the reading speed while still satisfying business requirements. The following code snippet illustrates how to adjust the SDK to process an image every 500 milliseconds:
-
-> Please bear in mind that in the following code, if an image's processing time is shorter than 500 milliseconds, the SDK will wait for the full 500 milliseconds before proceeding to process the next image. Conversely, if an image's processing time exceeds 500 milliseconds, the subsequent image will be processed immediately upon completion.
-
-```javascript
-let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.minImageCaptureInterval = 500;
-await cvRouter.updateSettings("ReadSingleBarcode", settings);
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
-
-##### Specify a scan region
-
-We can specify a scan region to allow the SDK to process only part of the image, improving processing speed. The code snippet below demonstrates how to do this using the `cameraEnhancer` image source.
-
-```javascript
-cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
-// In this example, we set the scan region to cover the central 25% of the image.
-cameraEnhancer.setScanRegion({
-  x: 25,
-  y: 25,
-  width: 50,
-  height: 50,
-  isMeasuredInPercentage: true,
-});
-```
-
-*Note*:
-
-1. By configuring the region at the image source, images are cropped before processing, removing the need to adjust any further processing settings.
-2. `cameraEnhancer` enhances interactivity by overlaying a mask on the video, clearly marking the scanning region.
-
-*See Also*:
-
-[CameraEnhancer::setScanRegion](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/api-reference/acquisition.html#setscanregion)
-
-<!-- Since DCE is always used, no need to use this approach
-
-
-You can use the parameter `roi` (region of interest) together with the parameter `roiMeasuredInPercentage` to configure the SDK to only read a specific region on the image frames. For example, the following code limits the reading in the center 25%( = 50% * 50%) of the image frames:
-
-```javascript
-let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.roiMeasuredInPercentage = true;
-settings.roi.points = [
-  { x: 25, y: 25 },
-  { x: 75, y: 25 },
-  { x: 75, y: 75 },
-  { x: 25, y: 75 },
-];
-await cvRouter.updateSettings("ReadSingleBarcode", settings);
-await cvRouter.startCapturing("ReadSingleBarcode");
-``` -->
-
-
-<!--
-* Specify the maximum time allowed for processing each image
-
-You can set the maximum time allowed for processing a single image with the property `timeout`.
-
-> Please be aware that the SDK will cease processing an image if its processing time exceeds the duration specified by the `timeout` parameter. It should not be confused with the previously discussed parameter, `minImageCaptureInterval`.
-
-```javascript
-let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.timeout = 500;
-await cvRouter.updateSettings("ReadSingleBarcode", settings);
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
--->
-
-#### Edit the preset templates directly
-
-The preset templates have many more settings that can be customized to suit your use case best. If you [download the SDK from Dynamsoft website](https://www.dynamsoft.com/barcode-reader/downloads/1000003-confirmation/), you can find the templates under
-
-* "/dynamsoft-barcode-reader-js-10.2.10/dynamsoft/resources/barcode-reader/templates/"
-
-Upon completing the template editing, you can invoke the `initSettings` method and provide it with the template path as an argument.
-
-```javascript
-await cvRouter.initSettings("PATH-TO-THE-FILE"); // E.g. "https://your-website/ReadSingleBarcode.json")
-await cvRouter.startCapturing("ReadSingleBarcode"); // Make sure the name matches one of the CaptureVisionTemplates in the template JSON file.
-```
-
-#### Filter the results (Important)
-
-While processing video frames, it's common for the same barcode to be detected multiple times. To enhance the user experience, we can use [MultiFrameResultCrossFilter](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/utility/multi-frame-result-cross-filter.html) object, having two options currently at our disposal:
-
-##### Option 1: Verify results across multiple frames
-
-```js
-let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
-filter.enableResultCrossVerification("barcode", true);
-await cvRouter.addResultFilter(filter);
-```
-
-*Note*:
-
-* `enableResultCrossVerification` was designed to cross-validate the outcomes across various frames in a video streaming scenario, enhancing the reliability of the final results. This validation is particularly crucial for barcodes with limited error correction capabilities, such as 1D codes.
-
-##### Option 2: Eliminate redundant results detected within a short time frame
-
-```js
-let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
-filter.enableResultDeduplication("barcode", true);
-await cvRouter.addResultFilter(filter);
-```
-
-*Note*:
-
-* `enableResultDeduplication` was designed to prevent high usage in video streaming scenarios, addressing the repetitive processing of the same code within a short period of time.
-
-Initially, the filter is set to forget a result 3 seconds after it is first received. During this time frame, if an identical result appears, it is ignored.
-
-> It's important to know that in version 9.x or earlier, the occurrence of an identical result would reset the timer, thus reinitiating the 3-second count at that point. However, in version 10.2.10 and later, an identical result no longer resets the timer but is instead disregarded, and the duration count continues uninterrupted.
-
-Under certain circumstances, this duration can be extended with the method `setDuplicateForgetTime()`.
-
-```js
-let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
-filter.setDuplicateForgetTime(5000); // Extend the duration to 5 seconds.
-await cvRouter.addResultFilter(filter);
-```
-
-You can also enable both options at the same time:
-
-```js
-let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
-filter.enableResultCrossVerification("barcode", true);
-filter.enableResultDeduplication("barcode", true);
-filter.setDuplicateForgetTime(5000);
-await cvRouter.addResultFilter(filter);
-```
-
-#### Add feedback
-
-When a barcode is detected within the video stream, its position is immediately displayed within the video. Furthermore, utilizing the "Dynamsoft Camera Enhancer" SDK, we can introduce feedback mechanisms, such as emitting a "beep" sound or triggering a "vibration".
-
-The following code snippet adds a "beep" sound for when a barcode is found:
-
-```js
-const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver();
-resultReceiver.onDecodedBarcodesReceived = (result) => {
-  if (result.barcodeResultItems.length > 0) {
-    Dynamsoft.DCE.Feedback.beep();
-  }
-};
-cvRouter.addResultReceiver(resultReceiver);
-```
-
-### Customize the UI
-
-The UI is part of the auxiliary SDK "Dynamsoft Camera Enhancer", read more on how to [customize the UI](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/user-guide/index.html#customize-the-ui).
-
-## 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=10.2.10](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=10.2.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 required for in-browser video streaming.
-
-- `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    | v78+<sup>1</sup> |
-  |   Firefox    | v62+<sup>1</sup> |
-  |     Edge     |       v79+       |
-  |    Safari    |       v14+       |
-
-  <sup>1</sup> devices running iOS needs to be on iOS 14.3+ for camera video streaming to work in Chrome, Firefox or other Apps using webviews.
-
-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/index.html?ver=10.2.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/index.html](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/index.html?ver=10.2.10&utm_source=guide).
-
-## Next Steps
-
-Now that you have got the SDK integrated, you can choose to move forward in the following directions
-
-1. Learn how to [Use in Framework](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-in-framework.html)
-2. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=10.2.10)
-3. Learn about the [APIs of the SDK](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/index.html?ver=10.2.10)
diff --git a/programming/javascript/user-guide/index-v10.4.2002.md b/programming/javascript/user-guide/index-v10.4.2002.md
deleted file mode 100644
index 664038c6..00000000
--- a/programming/javascript/user-guide/index-v10.4.2002.md
+++ /dev/null
@@ -1,741 +0,0 @@
----
-layout: default-layout
-title: v10.4.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
-schema: schemas/dynamsoft-facilitates-mit-research-schema.json
----
-
-<!--The original doc is hosted here => https://github.com/dynamsoft-docs/barcode-reader-docs-js/blob/main/programming/javascript/user-guide/index.md -->
-
-# 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-barcode-reader.svg)
-![downloads](https://img.shields.io/npm/dm/dynamsoft-barcode-reader.svg)
-![jsdelivr](https://img.shields.io/jsdelivr/npm/hm/dynamsoft-barcode-reader.svg)
-
-![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)
-
-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.
-
-<span style="font-size:20px">Table of Contents</span>
-
-- [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)
-  - [Preparing the SDK](#preparing-the-sdk)
-    - [Step 1: Include the SDK](#step-1-include-the-sdk)
-      - [Option 1: Use a public CDN](#option-1-use-a-public-cdn)
-      - [Option 2: Host the SDK yourself (optional)](#option-2-host-the-sdk-yourself-optional)
-    - [Step 2: Prepare the SDK](#step-2-prepare-the-sdk)
-      - [1. Specify the license](#1-specify-the-license)
-      - [2. \[Optional\] Specify the location of the "engine" files](#2-optional-specify-the-location-of-the-engine-files)
-  - [Using the SDK](#using-the-sdk)
-    - [Step 1: Preload the module](#step-1-preload-the-module)
-    - [Step 2: Create a CaptureVisionRouter object](#step-2-create-a-capturevisionrouter-object)
-    - [Step 3: Connect an image source](#step-3-connect-an-image-source)
-    - [Step 4: Register a result receiver](#step-4-register-a-result-receiver)
-    - [Step 5: Start process video frames](#step-5-start-process-video-frames)
-  - [Customizing the process](#customizing-the-process)
-    - [1. Adjust the preset template settings](#1-adjust-the-preset-template-settings)
-      - [1.1. Change barcode settings](#11-change-barcode-settings)
-      - [1.2. Retrieve the original image](#12-retrieve-the-original-image)
-      - [1.3. Change reading frequency to save power](#13-change-reading-frequency-to-save-power)
-      - [1.4. Specify a scan region](#14-specify-a-scan-region)
-    - [2. Edit the preset templates directly](#2-edit-the-preset-templates-directly)
-    - [3. \[Important\] Filter the results](#3-important-filter-the-results)
-      - [Method 1: Verify results across multiple frames](#method-1-verify-results-across-multiple-frames)
-      - [Method 2: Eliminate redundant results detected within a short time frame](#method-2-eliminate-redundant-results-detected-within-a-short-time-frame)
-    - [4. Add feedback](#4-add-feedback)
-  - [Customizing the UI](#customizing-the-ui)
-  - [Documentation](#documentation)
-    - [API Reference](#api-reference)
-    - [How to Upgrade](#how-to-upgrade)
-    - [Release Notes](#release-notes)
-  - [Next Steps](#next-steps)
-
-**Popular Examples**
-
-- Hello World - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.30/hello-world/hello-world.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html?ver=10.4.30&utm_source=guide)
-- Angular App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.30/hello-world/angular)
-- React App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.30/hello-world/react)
-- Vue App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.30/hello-world/vue)
-- PWA App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.30/hello-world/pwa) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/pwa/helloworld-pwa.html?ver=10.4.30&utm_source=guide)
-- WebView in Android and iOS - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.4.30/hello-world/webview)
-- Read Driver Licenses - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.30/use-case/read-a-drivers-license/index.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/use-case/read-a-drivers-license/index.html?ver=10.4.30&utm_source=guide)
-- Fill A Form - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.30/use-case/fill-a-form-with-barcode-reading.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/use-case/fill-a-form-with-barcode-reading.html?ver=10.4.30&utm_source=guide)
-- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.30/use-case/show-result-texts-on-the-video.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/use-case/show-result-texts-on-the-video.html?ver=10.4.30&utm_source=guide)
-- Debug Camera and Collect Video Frame - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.30/others/debug)
-
-You can also:
-
-- Try the Official Demo - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/) \| [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=10.4.30&utm_source=guide)
-- Try Online Examples - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.4.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
-  - Camera access
-
-### Understand the code
-
-The complete code of the "Hello World" example is shown below
-
-```html
-<!DOCTYPE html>
-<html>
-<body>
-<div id="camera-view-container" style="width: 100%; height: 60vh"></div>
-<textarea id="results" style="width: 100%; min-height: 10vh; font-size: 3vmin; overflow: auto" disabled></textarea>
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.4.2002/dist/dbr.bundle.js"></script>
-<script>
-  Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
-  Dynamsoft.Core.CoreModule.loadWasm(["dbr"]);
-  (async () => {
-    let cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
-
-    let cameraView = await Dynamsoft.DCE.CameraView.createInstance();
-    let cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
-    document.querySelector("#camera-view-container").append(cameraView.getUIElement());
-    cvRouter.setInput(cameraEnhancer);
-
-    const resultsContainer = document.querySelector("#results");
-    cvRouter.addResultReceiver({ onCapturedResultReceived: (result) => {
-      if (result.barcodeResultItems?.length) {
-        resultsContainer.textContent = '';
-        for (let item of result.barcodeResultItems) {
-          resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
-        }
-      }
-    }});
-
-    let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
-    filter.enableResultCrossVerification("barcode", true);
-    filter.enableResultDeduplication("barcode", true);
-    await cvRouter.addResultFilter(filter);
-
-    await cameraEnhancer.open();
-    await cvRouter.startCapturing("ReadSingleBarcode");
-  })();
-</script>
-</body>
-</html>
-```
-
-<!--TOM: Update the code links-->
-
-<p align="center" style="text-align:center; white-space: normal; ">
-  <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/hello-world/hello-world.html" title="Code in Github" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg" alt="Code in Github" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/csm2f9wb/" title="Run via JSFiddle" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/jsfiddle.svg" alt="Run via JSFiddle" width="20" height="20" style="width:20px;height:20px;" >
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html?ver=10.4.20&utm_source=guide" title="Run in Dynamsoft" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/svgs/solid/circle-play.svg" alt="Run in Dynamsoft" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-</p>
-
------
-
-#### About the code
-
-- `Dynamsoft.License.LicenseManager.initLicense()`: This method initializes the license for using the SDK in the application. Note that the string "**DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9**" used in this example points to an online license that requires a network connection to work. Read more on [Specify the license](#specify-the-license).
-
-- `Dynamsoft.Core.CoreModule.loadWasm(["dbr"])`: This is an optional code. Used to load wasm resources in advance, reducing latency between video playing and barcode decoding.
-
-- `Dynamsoft.CVR.CaptureVisionRouter.createInstance()`: This method creates a `CaptureVisionRouter` object `cvRouter` which controls the entire process in three steps:
-  - **Retrieve Images from the Image Source**
-    - `cvRouter` connects to the image source through the [ImageSourceAdapter](https://www.dynamsoft.com/capture-vision/docs/core/architecture/input.html#image-source-adapter?lang=js) interface with the method `setInput()`.
-      ```js
-      cvRouter.setInput(cameraEnhancer);
-      ```
-    > The image source in our case is a [CameraEnhancer](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/user-guide/index.html) object created with `Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView)`
-  - **Coordinate Image-Processing Tasks**
-    - The coordination happens behind the scenes. `cvRouter` starts the process by specifying a preset template "ReadSingleBarcode" in the method `startCapturing()`.
-      ```js
-      cvRouter.startCapturing("ReadSingleBarcode");
-      ```
-  - **Dispatch Results to Listening Objects**
-    - The processing results are returned through the [CapturedResultReceiver](https://www.dynamsoft.com/capture-vision/docs/core/architecture/output.html#captured-result-receiver?lang=js) interface. The `CapturedResultReceiver` object is registered to `cvRouter` via the method `addResultReceiver()`. For more information, please check out [Register a result receiver](#register-a-result-receiver).
-      ```js
-      cvRouter.addResultReceiver({/*The-CapturedResultReceiver-Object"*/});
-      ```
-    - Also note that reading from video is extremely fast and there could be many duplicate results. We can use a [filter](#filter-the-results-important) with result deduplication enabled to filter out the duplicate results. The object is registered to `cvRouter` via the method `addResultFilter()`.
-      ```js
-      cvRouter.addResultFilter(filter);
-      ```
-
-> Read more on [Capture Vision Router](https://www.dynamsoft.com/capture-vision/docs/core/architecture/#capture-vision-router).
-
-### Run the example
-
-You can run the example deployed to [the Dynamsoft Demo Server](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html?ver=10.4.30&utm_source=guide) or test it with [JSFiddle code editor](https://jsfiddle.net/DynamsoftTeam/csm2f9wb/). 
-
-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 show up under the video and the barcode location will be highlighted in the video feed.
-
-Alternatively, you can test locally by copying and pasting the code shown above into a local file (e.g. "hello-world.html") and opening it in your browser.
-
-> *Secure Contexts*:
->
-> If you open the web page as `http://` , our SDK may not work correctly because the [MediaDevices: getUserMedia()](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) and other methods only work in [secure contexts](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts) (HTTPS, `localhost`, `127.0.0.1`, `file://`), in some or all supporting browsers.
->
-> Regarding configuring https on your server, these guides for [nginx](https://nginx.org/en/docs/http/configuring_https_servers.html) / [IIS](https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/) / [tomcat](https://dzone.com/articles/setting-ssl-tomcat-5-minutes) / [nodejs](https://nodejs.org/docs/v0.4.1/api/tls.html) might help.
->
-> If the test doesn't go as expected, you can [contact us](https://www.dynamsoft.com/company/contact/?ver=10.4.20&utm_source=guide&product=dbr&package=js).
-
-## Preparing the SDK
-
-### Step 1: Include the SDK
-
-#### Option 1: 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
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.4.2002/dist/dbr.bundle.js"></script>
-  ```
-
-- UNPKG
-
-  ```html
-  <script src="https://unpkg.com/dynamsoft-barcode-reader-bundle@10.4.2002/dist/dbr.bundle.js"></script>
-  ```
-
-- In some rare cases (such as some restricted areas), you might not be able to access the CDN. If this happens, you can use the following files for the test.
-
-  ```html
-  <script src="https://download2.dynamsoft.com/packages/dynamsoft-barcode-reader-bundle@10.4.2002/dist/dbr.bundle.js"></script>
-  ```
-
-  However, please **DO NOT** use `download2.dynamsoft.com` resources in a production application as they are for temporary testing purposes only. Instead, you can try hosting the SDK yourself.
-
-- In frameworks like React, Vue and Angular, you may want to add the package as a dependency.
-
-  ```sh
-  npm i dynamsoft-barcode-reader-bundle@10.4.2002 -E
-  # or
-  yarn add dynamsoft-barcode-reader-bundle@10.4.2002 -E
-  ```
-
-  NOTE that in frameworks, you need to [specify the engineResourcePaths](#specify-the-location-of-the-engine-files-optional).
-
-#### Option 2: Host the SDK yourself (optional)
-
-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.
-
-- From the website
-
-  [Download Dynamsoft Barcode Reader JavaScript Package](https://www.dynamsoft.com/barcode-reader/downloads/?ver=10.4.20&utm_source=guide&product=dbr&package=js)
-
-  The resources are located at path `dynamsoft/distributables/<pkg>@<version>`.
-
-- From npm
-
-  ```sh
-  npm i dynamsoft-barcode-reader-bundle@10.4.2002 -E
-  # Compared with using CDN, you need to set up more resources.
-  npm i dynamsoft-capture-vision-std@1.4.10 -E
-  npm i dynamsoft-image-processing@2.4.20 -E
-  ```
-
-  The resources are located at the path `node_modules/<pkg>`, without `@<version>`. You must copy "dynamsoft-xxx" packages elsewhere and add `@<version>`. The `<version>` can be obtained from `package.json` of each package. Another thing to do is to [specify the engineResourcePaths](#2-optional-specify-the-location-of-the-engine-files) so that the SDK can correctly locate the resources.
-  > Since "node_modules" is reserved for Node.js dependencies, and in our case the package is used only as static resources, we recommend either renaming the "node_modules" folder or moving the "dynamsoft-" packages to a dedicated folder for static resources in your project to facilitate self-hosting.
-
-You can typically include SDK like this:
-
-```html
-<script src="path/to/dynamsoft-barcode-reader-bundle@10.4.2002/dist/dbr.bundle.js"></script>
-```
-
-*Note*:
-
-* Certain legacy web application servers may lack support for the `application/wasm` mimetype for .wasm files. To address this, you have two options:
-  1. Upgrade your web application server to one that supports the `application/wasm` mimetype.
-  2. Manually define the mimetype on your server. You can refer to the guides for [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.
-
-  ```
-  Cache-Control: max-age=31536000
-  ```
-
-  Reference: [Cache-Control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control).
-
-### Step 2: Prepare the SDK
-
-Before using the SDK, you need to configure a few things.
-
-#### 1. Specify the license
-
-To enable the SDK's functionality, you must provide a valid license. Utilize the API function initLicense to set your license key.
-
-```javascript
-Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
-```
-
-As previously stated, the key "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" serves as a test license valid for 24 hours, applicable to any newly authorized browser. To test the SDK further, you can request a 30-day free trial license via the <a href="https://www.dynamsoft.com/customer/license/trialLicense?ver=10.4.20&utm_source=guide&product=dbr&package=js" target="_blank">Request a Trial License</a> link.
-
-> Upon registering a Dynamsoft account and obtaining the SDK package from the official website, Dynamsoft will automatically create a 30-day free trial license and embed the corresponding license key into all the provided SDK samples.
-
-#### 2. [Optional] Specify the location of the "engine" files
-
-This is usually only required with frameworks like Angular, React or Vue.
-
-The purpose is to tell the SDK where to find the engine files (\*.worker.js, \*.wasm.js and \*.wasm, etc.).
-
-```ts
-// in framework
-import { CoreModule } from "dynamsoft-barcode-reader-bundle";
-CoreModule.engineResourcePaths.rootDirectory = "https://cdn.jsdelivr.net/npm/";
-```
-```js
-// in pure js
-Dynamsoft.Core.CoreModule.engineResourcePaths.rootDirectory = "https://cdn.jsdelivr.net/npm/";
-```
-These code uses the jsDelivr CDN as an example, feel free to change it to your own location.
-
-## Using the SDK
-
-### Step 1: Preload the module
-
-The image processing logic is encapsulated within .wasm library files, and these files may require some time for downloading. To enhance the speed, we advise utilizing the following method to preload the libraries.
-
-```js
-// Preload the .wasm files
-await Dynamsoft.Core.CoreModule.loadWasm(["dbr"]);
-```
-
-### Step 2: Create a CaptureVisionRouter object
-
-To use the SDK, we first create a `CaptureVisionRouter` object.
-
-```javascript
-Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
-
-let cvRouter = null;
-try {
-    cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
-} catch (ex) {
-    console.error(ex);
-}
-```
-
-*Tip*:
-
-When creating a `CaptureVisionRouter` 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 `pCvRouter` in the following code:
-
-```javascript
-Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
-
-let pCvRouter = null; // The helper variable which is a promise of cvRouter
-let cvRouter = null;
-
-document.getElementById('btn-scan').addEventListener('click', async () => {
-    try {
-        cvRouter = await (pCvRouter = pCvRouter || Dynamsoft.CVR.CaptureVisionRouter.createInstance());
-    } catch (ex) {
-        console.error(ex);
-    }
-});
-```
-
-### Step 3: Connect an image source
-
-The `CaptureVisionRouter` object, denoted as `cvRouter`, is responsible for handling images provided by an image source. In our scenario, we aim to detect barcodes directly from a live video stream. To facilitate this, we initialize a `CameraEnhancer` object, identified as `cameraEnhancer`, which is specifically designed to capture image frames from the video feed and subsequently forward them to `cvRouter`.
-
-To enable video streaming on the webpage, we create a `CameraView` object referred to as `cameraView`, which is then passed to `cameraEnhancer`, and its content is displayed on the webpage.
-
-```html
-<div id="camera-view-container" style="width: 100%; height: 100vh"></div>
-```
-
-```javascript
-let cameraView = await Dynamsoft.DCE.CameraView.createInstance();
-let cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
-document.querySelector("#camera-view-container").append(cameraView.getUIElement());
-cvRouter.setInput(cameraEnhancer);
-```
-
-### Step 4: Register a result receiver
-
-Once the image processing is complete, the results are sent to all the registered `CapturedResultReceiver` objects. Each `CapturedResultReceiver` object may encompass one or multiple callback functions associated with various result types. This time we use `onCapturedResultReceived`:
-<!--In our particular case, our focus is on identifying barcodes within the images, so it's sufficient to define the callback function `onDecodedBarcodesReceived`:-->
-
-```javascript
-const resultsContainer = document.querySelector("#results");
-const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver();
-resultReceiver.onCapturedResultReceived = (result) => {
-  if (result.barcodeResultItems?.length) {
-    resultsContainer.textContent = '';
-    for (let item of result.barcodeResultItems) {
-      // In this example, the barcode results are displayed on the page below the video.
-      resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
-    }
-  }
-};
-cvRouter.addResultReceiver(resultReceiver);
-```
-
-You can also write code like this. It is the same.
-
-```javascript
-const resultsContainer = document.querySelector("#results");
-cvRouter.addResultReceiver({ onCapturedResultReceived: (result) => {
-  if (result.barcodeResultItems?.length) {
-    resultsContainer.textContent = '';
-    for (let item of result.barcodeResultItems) {
-      // In this example, the barcode results are displayed on the page below the video.
-      resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
-    }
-  }
-}});
-```
-
-Check out [CapturedResultReceiver](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/capture-vision-router/captured-result-receiver.html) for more information.
-
-### Step 5: Start process video frames
-
-With the setup now complete, we can proceed to process the images in two straightforward steps:
-
-1. Initiate the image source to commence image acquisition. In our scenario, we invoke the `open()` method on `cameraEnhancer` to initiate video streaming and simultaneously initiate the collection of images. These collected images will be dispatched to `cvRouter` as per its request.
-2. Define a preset template to commence image processing. In our case, we utilize the "ReadSingleBarcode" template, specifically tailored for processing images containing a single barcode.
-
-```javascript
-await cameraEnhancer.open();
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
-
-*Note*:
-
-* `cvRouter` is engineered to consistently request images from the image source.
-* Various preset templates are at your disposal for barcode reading:
-
-| Template Name                  | Function Description                                           |
-| ------------------------------ | -------------------------------------------------------------- |
-| **ReadBarcodes_Default**       | Scans multiple barcodes by default setting.                    |
-| **ReadSingleBarcode**          | Quickly scans a single barcode.                                |
-| **ReadBarcodes_SpeedFirst**    | Prioritizes speed in scanning multiple barcodes.               |
-| **ReadBarcodes_ReadRateFirst** | Maximizes the number of barcodes read.                         |
-| **ReadBarcodes_Balance**       | Balances speed and quantity in reading multiple barcodes.      |
-| **ReadDenseBarcodes**          | Specialized in reading barcodes with high information density. |
-| **ReadDistantBarcodes**        | Capable of reading barcodes from extended distances.           |
-
-Read more on the [preset CaptureVisionTemplates](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/capture-vision-router/preset-templates.html).
-
-## Customizing the process
-
-### 1. Adjust the preset template settings
-
-When making adjustments to some basic tasks, we often only need to modify [SimplifiedCaptureVisionSettings](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/capture-vision-router/interfaces/simplified-capture-vision-settings.html).
-
-#### 1.1. Change barcode settings
-
-The preset templates can be updated to meet different requirements. For example, the following code limits the barcode format to QR code.
-
-```javascript
-let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.barcodeSettings.barcodeFormatIds =
-  Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
-await cvRouter.updateSettings("ReadSingleBarcode", settings);
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
-
-For a list of adjustable barcode settings, check out [SimplifiedBarcodeReaderSettings](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/interfaces/simplified-barcode-reader-settings.html).
-
-#### 1.2. Retrieve the original image
-
-Additionally, we have the option to modify the template to retrieve the original image containing the barcode.
-
-```javascript
-let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.capturedResultItemTypes |= 
-  Dynamsoft.Core.EnumCapturedResultItemType.CRIT_ORIGINAL_IMAGE;
-await cvRouter.updateSettings("ReadSingleBarcode", settings);
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
-
-Limit the barcode format to QR code, and retrieve the original image containing the barcode, at the same time.
-
-```javascript
-let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.capturedResultItemTypes = 
-  Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE |
-  Dynamsoft.Core.EnumCapturedResultItemType.CRIT_ORIGINAL_IMAGE;
-await cvRouter.updateSettings("ReadSingleBarcode", settings);
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
-
-Please be aware that it is necessary to update the `CapturedResultReceiver` object to obtain the original image. For instance:
-
-```javascript
-const EnumCRIT = Dynamsoft.Core.EnumCapturedResultItemType;
-resultReceiver.onCapturedResultReceived = (result) => {
-  if (result.barcodeResultItems?.length) {
-    // Use a filter to get the image on which barcodes are found.
-    let image = result.items.filter(
-      item => item.type === EnumCRIT.CRIT_ORIGINAL_IMAGE
-    )[0].imageData;
-  }
-};
-```
-
-#### 1.3. Change reading frequency to save power
-
-The SDK is initially configured to process images sequentially without any breaks. Although this setup maximizes performance, it can lead to elevated power consumption, potentially causing the device to overheat. In many cases, it's possible to reduce the reading speed while still satisfying business requirements. The following code snippet illustrates how to adjust the SDK to process an image every 500 milliseconds:
-
-> Please bear in mind that in the following code, if an image's processing time is shorter than 500 milliseconds, the SDK will wait for the full 500 milliseconds before proceeding to process the next image. Conversely, if an image's processing time exceeds 500 milliseconds, the subsequent image will be processed immediately upon completion.
-
-```javascript
-let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.minImageCaptureInterval = 500;
-await cvRouter.updateSettings("ReadSingleBarcode", settings);
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
-
-#### 1.4. Specify a scan region
-
-We can specify a scan region to allow the SDK to process only part of the image, improving processing speed. The code snippet below demonstrates how to do this using the `cameraEnhancer` image source.
-
-```javascript
-cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
-// In this example, we set the scan region to cover the central 25% of the image.
-cameraEnhancer.setScanRegion({
-  x: 25,
-  y: 25,
-  width: 50,
-  height: 50,
-  isMeasuredInPercentage: true,
-});
-```
-
-*Note*:
-
-1. By configuring the region at the image source, images are cropped before processing, removing the need to adjust any further processing settings.
-2. `cameraEnhancer` enhances interactivity by overlaying a mask on the video, clearly marking the scanning region.
-
-*See Also*:
-
-[CameraEnhancer::setScanRegion](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/api-reference/acquisition.html#setscanregion)
-
-<!-- Since DCE is always used, no need to use this approach
-
-
-You can use the parameter `roi` (region of interest) together with the parameter `roiMeasuredInPercentage` to configure the SDK to only read a specific region on the image frames. For example, the following code limits the reading in the center 25%( = 50% * 50%) of the image frames:
-
-```javascript
-let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.roiMeasuredInPercentage = true;
-settings.roi.points = [
-  { x: 25, y: 25 },
-  { x: 75, y: 25 },
-  { x: 75, y: 75 },
-  { x: 25, y: 75 },
-];
-await cvRouter.updateSettings("ReadSingleBarcode", settings);
-await cvRouter.startCapturing("ReadSingleBarcode");
-``` -->
-
-
-<!--
-* Specify the maximum time allowed for processing each image
-
-You can set the maximum time allowed for processing a single image with the property `timeout`.
-
-> Please be aware that the SDK will cease processing an image if its processing time exceeds the duration specified by the `timeout` parameter. It should not be confused with the previously discussed parameter, `minImageCaptureInterval`.
-
-```javascript
-let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.timeout = 500;
-await cvRouter.updateSettings("ReadSingleBarcode", settings);
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
--->
-
-### 2. Edit the preset templates directly
-
-The preset templates have many more settings that can be customized to suit your use case best. If you [download the SDK from Dynamsoft website](https://www.dynamsoft.com/barcode-reader/downloads/1000003-confirmation/), you can find the templates under
-
-* "/dynamsoft-barcode-reader-js-10.4.2002/dynamsoft/templates/"
-
-Upon completing the template editing, you can invoke the `initSettings` method and provide it with the template path as an argument.
-
-```javascript
-await cvRouter.initSettings("PATH-TO-THE-FILE"); // E.g. "https://your-website/ReadSingleBarcode.json")
-await cvRouter.startCapturing("ReadSingleBarcode"); // Make sure the name matches one of the CaptureVisionTemplates in the template JSON file.
-```
-
-### 3. [Important] Filter the results
-
-When processing video frames, the same barcode is often detected multiple times. To improve the user experience, we can use the [MultiFrameResultCrossFilter](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/utility/multi-frame-result-cross-filter.html) object. This object provides two methods for handling duplicate detections, which can be used independently or together, depending on what best suits your application needs:
-
-#### Method 1: Verify results across multiple frames
-
-```js
-let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
-filter.enableResultCrossVerification("barcode", true);
-await cvRouter.addResultFilter(filter);
-```
-
-*Note*:
-
-* `enableResultCrossVerification` was designed to cross-validate the outcomes across various frames in a video streaming scenario, enhancing the reliability of the final results. This validation is particularly crucial for barcodes with limited error correction capabilities, such as 1D codes.
-
-#### Method 2: Eliminate redundant results detected within a short time frame
-
-```js
-let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
-filter.enableResultDeduplication("barcode", true);
-await cvRouter.addResultFilter(filter);
-```
-
-*Note*:
-
-* `enableResultDeduplication` was designed to prevent high usage in video streaming scenarios, addressing the repetitive processing of the same code within a short period of time.
-
-Initially, the filter is set to forget a result 3 seconds after it is first received. During this time frame, if an identical result appears, it is ignored.
-
-> It's important to know that in version 9.x or earlier, the occurrence of an identical result would reset the timer, thus reinitiating the 3-second count at that point. However, in version 10.2.10 and later, an identical result no longer resets the timer but is instead disregarded, and the duration count continues uninterrupted.
-
-Under certain circumstances, this duration can be extended with the method `setDuplicateForgetTime()`.
-
-```js
-let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
-filter.setDuplicateForgetTime(5000); // Extend the duration to 5 seconds.
-await cvRouter.addResultFilter(filter);
-```
-
-You can also enable both options at the same time:
-
-```js
-let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
-filter.enableResultCrossVerification("barcode", true);
-filter.enableResultDeduplication("barcode", true);
-filter.setDuplicateForgetTime(5000);
-await cvRouter.addResultFilter(filter);
-```
-
-### 4. Add feedback
-
-When a barcode is detected within the video stream, its position is immediately displayed within the video. Furthermore, utilizing the "Dynamsoft Camera Enhancer" SDK, we can introduce feedback mechanisms, such as emitting a "beep" sound or triggering a "vibration".
-
-The following code snippet adds a "beep" sound for when a barcode is found:
-
-```js
-const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver();
-resultReceiver.onDecodedBarcodesReceived = (result) => {
-  if (result.barcodeResultItems.length > 0) {
-    Dynamsoft.DCE.Feedback.beep();
-  }
-};
-cvRouter.addResultReceiver(resultReceiver);
-```
-
-## Customizing the UI
-
-```javascript
-// Create a CameraView instance with default settings
-let cameraView = await Dynamsoft.DCE.CameraView.createInstance();
-// Create a CameraView instance with a specified HTML file path, typically a local or remote URL
-let cameraView1 = await Dynamsoft.DCE.CameraView.createInstance('@engineResourcePath/dce.mobile-native.ui.html');
-// Create a CameraView instance within a specified DOM element
-let cameraView2 = await Dynamsoft.DCE.CameraView.createInstance(document.getElementById('my-ui'));
-// Create a CameraView instance using a custom UI file path
-let cameraView3 = await Dynamsoft.DCE.CameraView.createInstance('url/to/my/ui.html');
-
-// Get the UI element associated with the cameraView instance
-let uiElement = cameraView.getUIElement();
-// Remove the camera selection dropdown from the CameraView's UI element
-uiElement.shadowRoot.querySelector('.dce-sel-camera').remove();
-// Remove the resolution selection dropdown from the CameraView's UI element
-uiElement.shadowRoot.querySelector('.dce-sel-resolution').remove();
-```
-
-The UI is part of the auxiliary SDK "Dynamsoft Camera Enhancer", read more on how to [customize the UI](https://www.dynamsoft.com/barcode-reader/docs/core/programming/features/ui-customization-js.html?lang=js).
-
-## Documentation
-
-### API Reference
-
-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=10.4.2002](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=10.4.2002).
-
-<!--  Compatibility is basically not an issue. Pls remove to another place
-
-## 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 required for in-browser video streaming.
-
-- `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    | v78+<sup>1</sup> |
-  |   Firefox    | v68+<sup>1</sup> |
-  |     Edge     |       v79+       |
-  |    Safari    |       v14+       |
-
-  <sup>1</sup> devices running iOS needs to be on iOS 14.3+ for camera video streaming to work in Chrome, Firefox or other Apps using webviews.
-
-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/index.html?ver=10.4.2002&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/index.html](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/index.html?ver=10.4.20&utm_source=guide).
-
-## Next Steps
-
-Now that you have got the SDK integrated, you can choose to move forward in the following directions
-
-1. Learn how to [Use in Framework](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-in-framework.html)
-2. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=10.4.20)
-3. Learn about the [APIs of the SDK](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/index.html?ver=10.4.2002)
diff --git a/programming/javascript/user-guide/index-v10.4.3100.md b/programming/javascript/user-guide/index-v10.4.3100.md
deleted file mode 100644
index fcbc317b..00000000
--- a/programming/javascript/user-guide/index-v10.4.3100.md
+++ /dev/null
@@ -1,753 +0,0 @@
----
-layout: default-layout
-title: v10.4.3100 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
-schema: schemas/dynamsoft-facilitates-mit-research-schema.json
----
-
-<!--The original doc is hosted here => https://github.com/dynamsoft-docs/barcode-reader-docs-js/blob/main/programming/javascript/user-guide/index.md -->
-
-# 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-barcode-reader.svg)
-![downloads](https://img.shields.io/npm/dm/dynamsoft-barcode-reader.svg)
-![jsdelivr](https://img.shields.io/jsdelivr/npm/hm/dynamsoft-barcode-reader.svg)
-
-![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)
-
-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.
-
-<span style="font-size:20px">Table of Contents</span>
-
-- [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)
-  - [Preparing the SDK](#preparing-the-sdk)
-    - [Step 1: Include the SDK](#step-1-include-the-sdk)
-    - [Step 2: Prepare the SDK](#step-2-prepare-the-sdk)
-      - [1. Specify the license](#1-specify-the-license)
-      - [2. \[Optional\] Specify the location of the "engine" files](#2-optional-specify-the-location-of-the-engine-files)
-  - [Using the SDK](#using-the-sdk)
-    - [Step 1: Preload the module](#step-1-preload-the-module)
-    - [Step 2: Create a CaptureVisionRouter object](#step-2-create-a-capturevisionrouter-object)
-    - [Step 3: Connect an image source](#step-3-connect-an-image-source)
-    - [Step 4: Register a result receiver](#step-4-register-a-result-receiver)
-    - [Step 5: Start process video frames](#step-5-start-process-video-frames)
-  - [Customizing the process](#customizing-the-process)
-    - [1. Adjust the preset template settings](#1-adjust-the-preset-template-settings)
-      - [1.1. Change barcode settings](#11-change-barcode-settings)
-      - [1.2. Retrieve the original image](#12-retrieve-the-original-image)
-      - [1.3. Change reading frequency to save power](#13-change-reading-frequency-to-save-power)
-      - [1.4. Specify a scan region](#14-specify-a-scan-region)
-    - [2. Edit the preset templates directly](#2-edit-the-preset-templates-directly)
-    - [3. \[Important\] Filter the results](#3-important-filter-the-results)
-      - [Method 1: Verify results across multiple frames](#method-1-verify-results-across-multiple-frames)
-      - [Method 2: Eliminate redundant results detected within a short time frame](#method-2-eliminate-redundant-results-detected-within-a-short-time-frame)
-    - [4. Add feedback](#4-add-feedback)
-  - [Customizing the UI](#customizing-the-ui)
-  - [Documentation](#documentation)
-    - [API Reference](#api-reference)
-    - [How to Upgrade](#how-to-upgrade)
-    - [Release Notes](#release-notes)
-  - [Next Steps](#next-steps)
-
-**Popular Examples**
-
-- Hello World - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.31/hello-world/hello-world.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html?ver=10.4.31&utm_source=guide)
-- Angular App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.31/hello-world/angular)
-- React App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.31/hello-world/react)
-- Vue App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.31/hello-world/vue)
-- PWA App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.31/hello-world/pwa) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/pwa/helloworld-pwa.html?ver=10.4.31&utm_source=guide)
-- WebView in Android and iOS - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.4.31/hello-world/webview)
-- Read Driver Licenses - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.31/use-case/read-a-drivers-license/index.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/use-case/read-a-drivers-license/index.html?ver=10.4.31&utm_source=guide)
-- Fill A Form - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.31/use-case/fill-a-form-with-barcode-reading.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/use-case/fill-a-form-with-barcode-reading.html?ver=10.4.31&utm_source=guide)
-- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.31/use-case/show-result-texts-on-the-video.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/use-case/show-result-texts-on-the-video.html?ver=10.4.31&utm_source=guide)
-- Debug Camera and Collect Video Frame - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.31/others/debug)
-
-You can also:
-
-- Try the Official Demo - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/) \| [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=10.4.31&utm_source=guide)
-- Try Online Examples - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.4.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
-  - Camera access
-
-> Please refer to [system requirements](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/faq/system-requirement.html) for more details.
-
-### Understand the code
-
-The complete code of the "Hello World" example is shown below
-
-```html
-<!DOCTYPE html>
-<html>
-<body>
-<div id="camera-view-container" style="width: 100%; height: 60vh"></div>
-<textarea id="results" style="width: 100%; min-height: 10vh; font-size: 3vmin; overflow: auto" disabled></textarea>
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.4.3100/dist/dbr.bundle.js"></script>
-<script>
-  Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
-  Dynamsoft.Core.CoreModule.loadWasm(["dbr"]);
-  (async () => {
-    let cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
-
-    let cameraView = await Dynamsoft.DCE.CameraView.createInstance();
-    let cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
-    document.querySelector("#camera-view-container").append(cameraView.getUIElement());
-    cvRouter.setInput(cameraEnhancer);
-
-    const resultsContainer = document.querySelector("#results");
-    cvRouter.addResultReceiver({ onCapturedResultReceived: (result) => {
-      if (result.barcodeResultItems?.length) {
-        resultsContainer.textContent = '';
-        for (let item of result.barcodeResultItems) {
-          resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
-        }
-      }
-    }});
-
-    let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
-    filter.enableResultCrossVerification("barcode", true);
-    filter.enableResultDeduplication("barcode", true);
-    await cvRouter.addResultFilter(filter);
-
-    await cameraEnhancer.open();
-    await cvRouter.startCapturing("ReadSingleBarcode");
-  })();
-</script>
-</body>
-</html>
-```
-
-<!--TOM: Update the code links-->
-
-<p align="center" style="text-align:center; white-space: normal; ">
-  <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.31/hello-world/hello-world.html" title="Code in Github" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg" alt="Code in Github" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/csm2f9wb/" title="Run via JSFiddle" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/jsfiddle.svg" alt="Run via JSFiddle" width="20" height="20" style="width:20px;height:20px;" >
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html?ver=10.4.31&utm_source=guide" title="Run in Dynamsoft" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/svgs/solid/circle-play.svg" alt="Run in Dynamsoft" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-</p>
-
------
-
-#### About the code
-
-- `Dynamsoft.License.LicenseManager.initLicense()`: This method initializes the license for using the SDK in the application. Note that the string "**DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9**" used in this example points to an online license that requires a network connection to work. Read more on [Specify the license](#1-specify-the-license).
-
-- `Dynamsoft.Core.CoreModule.loadWasm(["dbr"])`: This is an optional code. Used to load wasm resources in advance, reducing latency between video playing and barcode decoding.
-
-- `Dynamsoft.CVR.CaptureVisionRouter.createInstance()`: This method creates a `CaptureVisionRouter` object `cvRouter` which controls the entire process in three steps:
-  - **Retrieve Images from the Image Source**
-    - `cvRouter` connects to the image source through the [ImageSourceAdapter](https://www.dynamsoft.com/capture-vision/docs/core/architecture/input.html#image-source-adapter?lang=js) interface with the method `setInput()`.
-      ```js
-      cvRouter.setInput(cameraEnhancer);
-      ```
-    > The image source in our case is a [CameraEnhancer](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/user-guide/index.html) object created with `Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView)`
-  - **Coordinate Image-Processing Tasks**
-    - The coordination happens behind the scenes. `cvRouter` starts the process by specifying a preset template "ReadSingleBarcode" in the method `startCapturing()`.
-      ```js
-      cvRouter.startCapturing("ReadSingleBarcode");
-      ```
-  - **Dispatch Results to Listening Objects**
-    - The processing results are returned through the [CapturedResultReceiver](https://www.dynamsoft.com/capture-vision/docs/core/architecture/output.html#captured-result-receiver?lang=js) interface. The `CapturedResultReceiver` object is registered to `cvRouter` via the method `addResultReceiver()`. For more information, please check out [Register a result receiver](#step-4-register-a-result-receiver).
-      ```js
-      cvRouter.addResultReceiver({/*The-CapturedResultReceiver-Object"*/});
-      ```
-    - Also note that reading from video is extremely fast and there could be many duplicate results. We can use a [filter](#3-important-filter-the-results) with result deduplication enabled to filter out the duplicate results. The object is registered to `cvRouter` via the method `addResultFilter()`.
-      ```js
-      cvRouter.addResultFilter(filter);
-      ```
-
-> Read more on [Capture Vision Router](https://www.dynamsoft.com/capture-vision/docs/core/architecture/#capture-vision-router).
-
-### Run the example
-
-You can run the example deployed to [the Dynamsoft Demo Server](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html?ver=10.4.31&utm_source=guide) or test it with [JSFiddle code editor](https://jsfiddle.net/DynamsoftTeam/csm2f9wb/). 
-
-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 show up under the video and the barcode location will be highlighted in the video feed.
-
-Alternatively, you can test locally by copying and pasting the code shown above into a local file (e.g. "hello-world.html") and opening it in your browser.
-
-> *Secure Contexts*:
->
-> If you open the web page as `http://` , our SDK may not work correctly because the [MediaDevices: getUserMedia()](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) and other methods only work in [secure contexts](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts) (HTTPS, `localhost`, `127.0.0.1`, `file://`), in some or all supporting browsers.
->
-> Regarding configuring https on your server, these guides for [nginx](https://nginx.org/en/docs/http/configuring_https_servers.html) / [IIS](https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/) / [tomcat](https://dzone.com/articles/setting-ssl-tomcat-5-minutes) / [nodejs](https://nodejs.org/docs/v0.4.1/api/tls.html) might help.
->
-> If the test doesn't go as expected, you can [contact us](https://www.dynamsoft.com/company/contact/?ver=10.4.31&utm_source=guide&product=dbr&package=js).
-
-## Preparing the SDK
-
-### Step 1: Include the SDK
-
-<div class="multi-panel-switching-prefix"></div>
-<!-- 
-- [Use a public CDN](#useapubliccdn)
-- [Host the SDK yourself](#hostthesdkyourself) -->
-
-<div class="multi-panel-start"></div>
-<div class="multi-panel-title">Use a public CDN</div>
-
-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
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.4.3100/dist/dbr.bundle.js"></script>
-  ```
-
-- UNPKG
-
-  ```html
-  <script src="https://unpkg.com/dynamsoft-barcode-reader-bundle@10.4.3100/dist/dbr.bundle.js"></script>
-  ```
-
-<!-- - In some rare cases (such as some restricted areas), you might not be able to access the CDN. If this happens, you can use the following files for the test.
-
-  ```html
-  <script src="https://download2.dynamsoft.com/packages/dynamsoft-barcode-reader-bundle@10.4.3100/dist/dbr.bundle.js"></script>
-  ```
-
-  However, please **DO NOT** use `download2.dynamsoft.com` resources in a production application as they are for temporary testing purposes only. Instead, you can try hosting the SDK yourself. -->
-
-- In frameworks like React, Vue and Angular, you may want to add the package as a dependency.
-
-  ```sh
-  npm i dynamsoft-barcode-reader-bundle@10.4.3100 -E
-  # or
-  yarn add dynamsoft-barcode-reader-bundle@10.4.3100 -E
-  ```
-
-  NOTE that in frameworks, you need to [specify the location of the engine files](#2-optional-specify-the-location-of-the-engine-files).
-<div class="multi-panel-end"></div>
-
-<div class="multi-panel-start"></div>
-<div class="multi-panel-title">Host the SDK yourself</div>
-
-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.
-
-- From the website
-
-  [Download Dynamsoft Barcode Reader JavaScript Package](https://www.dynamsoft.com/barcode-reader/downloads/?ver=10.4.31&utm_source=guide&product=dbr&package=js)
-
-  The resources are located at path `dynamsoft/distributables/<pkg>@<version>`.
-
-- From npm
-
-  ```sh
-  npm i dynamsoft-barcode-reader-bundle@10.4.3100 -E
-  # Compared with using CDN, you need to set up more resources.
-  npm i dynamsoft-capture-vision-std@1.4.21 -E
-  npm i dynamsoft-image-processing@2.4.31 -E
-  ```
-
-  The resources are located at the path `node_modules/<pkg>`, without `@<version>`. You must copy "dynamsoft-xxx" packages elsewhere and add `@<version>`. The `<version>` can be obtained from `package.json` of each package. Another thing to do is to [specify the engineResourcePaths](#2-optional-specify-the-location-of-the-engine-files) so that the SDK can correctly locate the resources.
-  > Since "node_modules" is reserved for Node.js dependencies, and in our case the package is used only as static resources, we recommend either renaming the "node_modules" folder or moving the "dynamsoft-" packages to a dedicated folder for static resources in your project to facilitate self-hosting.
-
-You can typically include SDK like this:
-
-```html
-<script src="path/to/dynamsoft-barcode-reader-bundle@10.4.3100/dist/dbr.bundle.js"></script>
-```
-<div class="multi-panel-end"></div>
-
-<div class="multi-panel-switching-end"></div>
-
-*Note*:
-
-* Certain legacy web application servers may lack support for the `application/wasm` mimetype for .wasm files. To address this, you have two options:
-  1. Upgrade your web application server to one that supports the `application/wasm` mimetype.
-  2. Manually define the mimetype on your server. You can refer to the guides for [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.
-
-  ```
-  Cache-Control: max-age=31536000
-  ```
-
-  Reference: [Cache-Control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control).
-
-### Step 2: Prepare the SDK
-
-Before using the SDK, you need to configure a few things.
-
-#### 1. Specify the license
-
-To enable the SDK's functionality, you must provide a valid license. Utilize the API function initLicense to set your license key.
-
-```javascript
-Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
-```
-
-As previously stated, the key "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" serves as a test license valid for 24 hours, applicable to any newly authorized browser. To test the SDK further, you can request a 30-day free trial license via the <a href="https://www.dynamsoft.com/customer/license/trialLicense?ver=10.4.31&utm_source=guide&product=dbr&package=js" target="_blank">Request a Trial License</a> link.
-
-> Upon registering a Dynamsoft account and obtaining the SDK package from the official website, Dynamsoft will automatically create a 30-day free trial license and embed the corresponding license key into all the provided SDK samples.
-
-#### 2. [Optional] Specify the location of the "engine" files
-
-This is usually only required with frameworks like Angular, React or Vue.
-
-The purpose is to tell the SDK where to find the engine files (\*.worker.js, \*.wasm.js and \*.wasm, etc.).
-
-```ts
-// in framework
-import { CoreModule } from "dynamsoft-barcode-reader-bundle";
-CoreModule.engineResourcePaths.rootDirectory = "https://cdn.jsdelivr.net/npm/";
-```
-```js
-// in pure js
-Dynamsoft.Core.CoreModule.engineResourcePaths.rootDirectory = "https://cdn.jsdelivr.net/npm/";
-```
-These code uses the jsDelivr CDN as an example, feel free to change it to your own location.
-
-## Using the SDK
-
-### Step 1: Preload the module
-
-The image processing logic is encapsulated within .wasm library files, and these files may require some time for downloading. To enhance the speed, we advise utilizing the following method to preload the libraries.
-
-```js
-// Preload the .wasm files
-await Dynamsoft.Core.CoreModule.loadWasm(["dbr"]);
-```
-
-### Step 2: Create a CaptureVisionRouter object
-
-To use the SDK, we first create a `CaptureVisionRouter` object.
-
-```javascript
-Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
-
-let cvRouter = null;
-try {
-    cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
-} catch (ex) {
-    console.error(ex);
-}
-```
-
-*Tip*:
-
-When creating a `CaptureVisionRouter` 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 `pCvRouter` in the following code:
-
-```javascript
-Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
-
-let pCvRouter = null; // The helper variable which is a promise of cvRouter
-let cvRouter = null;
-
-document.getElementById('btn-scan').addEventListener('click', async () => {
-    try {
-        cvRouter = await (pCvRouter = pCvRouter || Dynamsoft.CVR.CaptureVisionRouter.createInstance());
-    } catch (ex) {
-        console.error(ex);
-    }
-});
-```
-
-### Step 3: Connect an image source
-
-The `CaptureVisionRouter` object, denoted as `cvRouter`, is responsible for handling images provided by an image source. In our scenario, we aim to detect barcodes directly from a live video stream. To facilitate this, we initialize a `CameraEnhancer` object, identified as `cameraEnhancer`, which is specifically designed to capture image frames from the video feed and subsequently forward them to `cvRouter`.
-
-To enable video streaming on the webpage, we create a `CameraView` object referred to as `cameraView`, which is then passed to `cameraEnhancer`, and its content is displayed on the webpage.
-
-```html
-<div id="camera-view-container" style="width: 100%; height: 100vh"></div>
-```
-
-```javascript
-let cameraView = await Dynamsoft.DCE.CameraView.createInstance();
-let cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
-document.querySelector("#camera-view-container").append(cameraView.getUIElement());
-cvRouter.setInput(cameraEnhancer);
-```
-
-### Step 4: Register a result receiver
-
-Once the image processing is complete, the results are sent to all the registered `CapturedResultReceiver` objects. Each `CapturedResultReceiver` object may encompass one or multiple callback functions associated with various result types. This time we use `onCapturedResultReceived`:
-<!--In our particular case, our focus is on identifying barcodes within the images, so it's sufficient to define the callback function `onDecodedBarcodesReceived`:-->
-
-```javascript
-const resultsContainer = document.querySelector("#results");
-const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver();
-resultReceiver.onCapturedResultReceived = (result) => {
-  if (result.barcodeResultItems?.length) {
-    resultsContainer.textContent = '';
-    for (let item of result.barcodeResultItems) {
-      // In this example, the barcode results are displayed on the page below the video.
-      resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
-    }
-  }
-};
-cvRouter.addResultReceiver(resultReceiver);
-```
-
-You can also write code like this. It is the same.
-
-```javascript
-const resultsContainer = document.querySelector("#results");
-cvRouter.addResultReceiver({ onCapturedResultReceived: (result) => {
-  if (result.barcodeResultItems?.length) {
-    resultsContainer.textContent = '';
-    for (let item of result.barcodeResultItems) {
-      // In this example, the barcode results are displayed on the page below the video.
-      resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
-    }
-  }
-}});
-```
-
-Check out [CapturedResultReceiver](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/capture-vision-router/captured-result-receiver.html) for more information.
-
-### Step 5: Start process video frames
-
-With the setup now complete, we can proceed to process the images in two straightforward steps:
-
-1. Initiate the image source to commence image acquisition. In our scenario, we invoke the `open()` method on `cameraEnhancer` to initiate video streaming and simultaneously initiate the collection of images. These collected images will be dispatched to `cvRouter` as per its request.
-2. Define a preset template to commence image processing. In our case, we utilize the "ReadSingleBarcode" template, specifically tailored for processing images containing a single barcode.
-
-```javascript
-await cameraEnhancer.open();
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
-
-*Note*:
-
-* `cvRouter` is engineered to consistently request images from the image source.
-* Various preset templates are at your disposal for barcode reading:
-
-| Template Name                  | Function Description                                           |
-| ------------------------------ | -------------------------------------------------------------- |
-| **ReadBarcodes_Default**       | Scans multiple barcodes by default setting.                    |
-| **ReadSingleBarcode**          | Quickly scans a single barcode.                                |
-| **ReadBarcodes_SpeedFirst**    | Prioritizes speed in scanning multiple barcodes.               |
-| **ReadBarcodes_ReadRateFirst** | Maximizes the number of barcodes read.                         |
-| **ReadBarcodes_Balance**       | Balances speed and quantity in reading multiple barcodes.      |
-| **ReadDenseBarcodes**          | Specialized in reading barcodes with high information density. |
-| **ReadDistantBarcodes**        | Capable of reading barcodes from extended distances.           |
-
-Read more on the [preset CaptureVisionTemplates](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/capture-vision-router/preset-templates.html).
-
-## Customizing the process
-
-### 1. Adjust the preset template settings
-
-When making adjustments to some basic tasks, we often only need to modify [SimplifiedCaptureVisionSettings](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/capture-vision-router/interfaces/simplified-capture-vision-settings.html).
-
-#### 1.1. Change barcode settings
-
-The preset templates can be updated to meet different requirements. For example, the following code limits the barcode format to QR code.
-
-```javascript
-let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.barcodeSettings.barcodeFormatIds =
-  Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
-await cvRouter.updateSettings("ReadSingleBarcode", settings);
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
-
-For a list of adjustable barcode settings, check out [SimplifiedBarcodeReaderSettings](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/interfaces/simplified-barcode-reader-settings.html) and [EnumBarcodeFormat](https://www.dynamsoft.com/capture-vision/docs/core/enums/barcode-reader/barcode-format.html?lang=js&product=dbr).
-
-#### 1.2. Retrieve the original image
-
-Additionally, we have the option to modify the template to retrieve the original image containing the barcode.
-
-```javascript
-let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.capturedResultItemTypes |= 
-  Dynamsoft.Core.EnumCapturedResultItemType.CRIT_ORIGINAL_IMAGE;
-await cvRouter.updateSettings("ReadSingleBarcode", settings);
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
-
-Limit the barcode format to QR code, and retrieve the original image containing the barcode, at the same time.
-
-```javascript
-let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.capturedResultItemTypes = 
-  Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE |
-  Dynamsoft.Core.EnumCapturedResultItemType.CRIT_ORIGINAL_IMAGE;
-await cvRouter.updateSettings("ReadSingleBarcode", settings);
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
-
-Please be aware that it is necessary to update the `CapturedResultReceiver` object to obtain the original image. For instance:
-
-```javascript
-const EnumCRIT = Dynamsoft.Core.EnumCapturedResultItemType;
-resultReceiver.onCapturedResultReceived = (result) => {
-  if (result.barcodeResultItems?.length) {
-    // Use a filter to get the image on which barcodes are found.
-    let image = result.items.filter(
-      item => item.type === EnumCRIT.CRIT_ORIGINAL_IMAGE
-    )[0].imageData;
-  }
-};
-```
-
-#### 1.3. Change reading frequency to save power
-
-The SDK is initially configured to process images sequentially without any breaks. Although this setup maximizes performance, it can lead to elevated power consumption, potentially causing the device to overheat. In many cases, it's possible to reduce the reading speed while still satisfying business requirements. The following code snippet illustrates how to adjust the SDK to process an image every 500 milliseconds:
-
-> Please bear in mind that in the following code, if an image's processing time is shorter than 500 milliseconds, the SDK will wait for the full 500 milliseconds before proceeding to process the next image. Conversely, if an image's processing time exceeds 500 milliseconds, the subsequent image will be processed immediately upon completion.
-
-```javascript
-let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.minImageCaptureInterval = 500;
-await cvRouter.updateSettings("ReadSingleBarcode", settings);
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
-
-#### 1.4. Specify a scan region
-
-We can specify a scan region to allow the SDK to process only part of the image, improving processing speed. The code snippet below demonstrates how to do this using the `cameraEnhancer` image source.
-
-```javascript
-cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
-// In this example, we set the scan region to cover the central 25% of the image.
-cameraEnhancer.setScanRegion({
-  x: 25,
-  y: 25,
-  width: 50,
-  height: 50,
-  isMeasuredInPercentage: true,
-});
-```
-
-*Note*:
-
-1. By configuring the region at the image source, images are cropped before processing, removing the need to adjust any further processing settings.
-2. `cameraEnhancer` enhances interactivity by overlaying a mask on the video, clearly marking the scanning region.
-
-*See Also*:
-
-[CameraEnhancer::setScanRegion](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/api-reference/acquisition.html#setscanregion)
-
-<!-- Since DCE is always used, no need to use this approach
-
-
-You can use the parameter `roi` (region of interest) together with the parameter `roiMeasuredInPercentage` to configure the SDK to only read a specific region on the image frames. For example, the following code limits the reading in the center 25%( = 50% * 50%) of the image frames:
-
-```javascript
-let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.roiMeasuredInPercentage = true;
-settings.roi.points = [
-  { x: 25, y: 25 },
-  { x: 75, y: 25 },
-  { x: 75, y: 75 },
-  { x: 25, y: 75 },
-];
-await cvRouter.updateSettings("ReadSingleBarcode", settings);
-await cvRouter.startCapturing("ReadSingleBarcode");
-``` -->
-
-
-<!--
-* Specify the maximum time allowed for processing each image
-
-You can set the maximum time allowed for processing a single image with the property `timeout`.
-
-> Please be aware that the SDK will cease processing an image if its processing time exceeds the duration specified by the `timeout` parameter. It should not be confused with the previously discussed parameter, `minImageCaptureInterval`.
-
-```javascript
-let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.timeout = 500;
-await cvRouter.updateSettings("ReadSingleBarcode", settings);
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
--->
-
-### 2. Edit the preset templates directly
-
-The preset templates have many more settings that can be customized to suit your use case best. If you [download the SDK from Dynamsoft website](https://www.dynamsoft.com/barcode-reader/downloads/1000003-confirmation/), you can find the templates under
-
-* "/dynamsoft-barcode-reader-js-10.4.3100/dynamsoft/templates/"
-
-Upon completing the template editing, you can invoke the `initSettings` method and provide it with the template path as an argument.
-
-```javascript
-await cvRouter.initSettings("PATH-TO-THE-FILE"); // E.g. "https://your-website/ReadSingleBarcode.json")
-await cvRouter.startCapturing("ReadSingleBarcode"); // Make sure the name matches one of the CaptureVisionTemplates in the template JSON file.
-```
-
-### 3. [Important] Filter the results
-
-When processing video frames, the same barcode is often detected multiple times. To improve the user experience, we can use the [MultiFrameResultCrossFilter](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/utility/multi-frame-result-cross-filter.html) object. This object provides two methods for handling duplicate detections, which can be used independently or together, depending on what best suits your application needs:
-
-#### Method 1: Verify results across multiple frames
-
-```js
-let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
-filter.enableResultCrossVerification("barcode", true);
-await cvRouter.addResultFilter(filter);
-```
-
-*Note*:
-
-* `enableResultCrossVerification` was designed to cross-validate the outcomes across various frames in a video streaming scenario, enhancing the reliability of the final results. This validation is particularly crucial for barcodes with limited error correction capabilities, such as 1D codes.
-
-#### Method 2: Eliminate redundant results detected within a short time frame
-
-```js
-let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
-filter.enableResultDeduplication("barcode", true);
-await cvRouter.addResultFilter(filter);
-```
-
-*Note*:
-
-* `enableResultDeduplication` was designed to prevent high usage in video streaming scenarios, addressing the repetitive processing of the same code within a short period of time.
-
-Initially, the filter is set to forget a result 3 seconds after it is first received. During this time frame, if an identical result appears, it is ignored.
-
-> It's important to know that in version 9.x or earlier, the occurrence of an identical result would reset the timer, thus reinitiating the 3-second count at that point. However, in version 10.2.10 and later, an identical result no longer resets the timer but is instead disregarded, and the duration count continues uninterrupted.
-
-Under certain circumstances, this duration can be extended with the method `setDuplicateForgetTime()`.
-
-```js
-let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
-filter.setDuplicateForgetTime(5000); // Extend the duration to 5 seconds.
-await cvRouter.addResultFilter(filter);
-```
-
-You can also enable both options at the same time:
-
-```js
-let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
-filter.enableResultCrossVerification("barcode", true);
-filter.enableResultDeduplication("barcode", true);
-filter.setDuplicateForgetTime(5000);
-await cvRouter.addResultFilter(filter);
-```
-
-### 4. Add feedback
-
-When a barcode is detected within the video stream, its position is immediately displayed within the video. Furthermore, utilizing the "Dynamsoft Camera Enhancer" SDK, we can introduce feedback mechanisms, such as emitting a "beep" sound or triggering a "vibration".
-
-The following code snippet adds a "beep" sound for when a barcode is found:
-
-```js
-const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver();
-resultReceiver.onDecodedBarcodesReceived = (result) => {
-  if (result.barcodeResultItems.length > 0) {
-    Dynamsoft.DCE.Feedback.beep();
-  }
-};
-cvRouter.addResultReceiver(resultReceiver);
-```
-
-## Customizing the UI
-
-```javascript
-// Create a CameraView instance with default settings
-let cameraView = await Dynamsoft.DCE.CameraView.createInstance();
-// Create a CameraView instance with a specified HTML file path, typically a local or remote URL
-let cameraView1 = await Dynamsoft.DCE.CameraView.createInstance('@engineResourcePath/dce.mobile-native.ui.html');
-// Create a CameraView instance within a specified DOM element
-let cameraView2 = await Dynamsoft.DCE.CameraView.createInstance(document.getElementById('my-ui'));
-// Create a CameraView instance using a custom UI file path
-let cameraView3 = await Dynamsoft.DCE.CameraView.createInstance('url/to/my/ui.html');
-
-// Get the UI element associated with the cameraView instance
-let uiElement = cameraView.getUIElement();
-// Remove the camera selection dropdown from the CameraView's UI element
-uiElement.shadowRoot.querySelector('.dce-sel-camera').remove();
-// Remove the resolution selection dropdown from the CameraView's UI element
-uiElement.shadowRoot.querySelector('.dce-sel-resolution').remove();
-```
-
-The UI is part of the auxiliary SDK "Dynamsoft Camera Enhancer", read more on how to [customize the UI](https://www.dynamsoft.com/barcode-reader/docs/core/programming/features/ui-customization-js.html?lang=js).
-
-## Documentation
-
-### API Reference
-
-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=10.4.3100](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=10.4.3100).
-
-<!--  Compatibility is basically not an issue. Pls remove to another place
-
-## 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 required for in-browser video streaming.
-
-- `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    | v78+<sup>1</sup> |
-  |   Firefox    | v68+<sup>1</sup> |
-  |     Edge     |       v79+       |
-  |    Safari    |       v14+       |
-
-  <sup>1</sup> devices running iOS needs to be on iOS 14.3+ for camera video streaming to work in Chrome, Firefox or other Apps using webviews.
-
-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/index.html?ver=10.4.3100&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/index.html](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/index.html?ver=10.4.31&utm_source=guide).
-
-## Next Steps
-
-Now that you have got the SDK integrated, you can choose to move forward in the following directions
-
-1. Learn how to [Use in Framework](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-in-framework.html)
-2. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=10.4.31)
-3. Learn about the [APIs of the SDK](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/index.html?ver=10.4.3100)
diff --git a/programming/javascript/user-guide/index-v11.0.3000.md b/programming/javascript/user-guide/index-v11.0.3000.md
deleted file mode 100644
index 661ef324..00000000
--- a/programming/javascript/user-guide/index-v11.0.3000.md
+++ /dev/null
@@ -1,754 +0,0 @@
----
-layout: default-layout
-title: v11.0.3000 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
-schema: schemas/dynamsoft-facilitates-mit-research-schema.json
----
-
-<!--The original doc is hosted here => https://github.com/dynamsoft-docs/barcode-reader-docs-js/blob/main/programming/javascript/user-guide/index.md -->
-
-# 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. 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.
-
-<!-- ![version](https://img.shields.io/npm/v/dynamsoft-barcode-reader.svg)
-![downloads](https://img.shields.io/npm/dm/dynamsoft-barcode-reader.svg)
-![jsdelivr](https://img.shields.io/jsdelivr/npm/hm/dynamsoft-barcode-reader.svg)
-
-![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) -->
-
-In this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.
-
-<span style="font-size:20px">Table of Contents</span>
-
-- [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)
-  - [Preparing the SDK](#preparing-the-sdk)
-    - [Step 1: Include the SDK](#step-1-include-the-sdk)
-    - [Step 2: Prepare the SDK](#step-2-prepare-the-sdk)
-      - [1. Specify the license](#1-specify-the-license)
-      - [2. \[Optional\] Specify the location of the "engine" files](#2-optional-specify-the-location-of-the-engine-files)
-  - [Using the SDK](#using-the-sdk)
-    - [Step 1: Preload the module](#step-1-preload-the-module)
-    - [Step 2: Create a CaptureVisionRouter object](#step-2-create-a-capturevisionrouter-object)
-    - [Step 3: Connect an image source](#step-3-connect-an-image-source)
-    - [Step 4: Register a result receiver](#step-4-register-a-result-receiver)
-    - [Step 5: Start process video frames](#step-5-start-process-video-frames)
-  - [Customizing the process](#customizing-the-process)
-    - [1. Adjust the preset template settings](#1-adjust-the-preset-template-settings)
-      - [1.1. Change barcode settings](#11-change-barcode-settings)
-      - [1.2. Retrieve the original image](#12-retrieve-the-original-image)
-      - [1.3. Change reading frequency to save power](#13-change-reading-frequency-to-save-power)
-      - [1.4. Specify a scan region](#14-specify-a-scan-region)
-    - [2. Edit the preset templates directly](#2-edit-the-preset-templates-directly)
-    - [3. \[Important\] Filter the results](#3-important-filter-the-results)
-      - [Method 1: Verify results across multiple frames](#method-1-verify-results-across-multiple-frames)
-      - [Method 2: Eliminate redundant results detected within a short time frame](#method-2-eliminate-redundant-results-detected-within-a-short-time-frame)
-    - [4. Add feedback](#4-add-feedback)
-  - [Customizing the UI](#customizing-the-ui)
-  - [Documentation](#documentation)
-    - [API Reference](#api-reference)
-    - [How to Upgrade](#how-to-upgrade)
-    - [Release Notes](#release-notes)
-  - [Next Steps](#next-steps)
-
-**Popular Examples**
-
-- Hello World - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.30/foundational-api-samples/hello-world/hello-world.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/hello-world/hello-world.html?ver=11.0.30&utm_source=guide)
-- Angular App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.30/foundational-api-samples/hello-world/angular)
-- React App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.30/foundational-api-samples/hello-world/react)
-- Vue App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.30/foundational-api-samples/hello-world/vue)
-- PWA App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.30/foundational-api-samples/hello-world/pwa) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/hello-world/pwa/helloworld-pwa.html?ver=11.0.30&utm_source=guide)
-- WebView in Android and iOS - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v11.0.30/foundational-api-samples/hello-world/webview)
-- Read Driver Licenses - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.30/foundational-api-samples/use-case/read-a-drivers-license/index.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/use-case/read-a-drivers-license/index.html?ver=11.0.30&utm_source=guide)
-- Fill A Form - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.30/foundational-api-samples/use-case/fill-a-form-with-barcode-reading.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/use-case/fill-a-form-with-barcode-reading.html?ver=11.0.30&utm_source=guide)
-- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.30/foundational-api-samples/use-case/show-result-texts-on-the-video.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/use-case/show-result-texts-on-the-video.html?ver=11.0.30&utm_source=guide)
-- Debug Camera and Collect Video Frame - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.30/foundational-api-samples/others/debug)
-
-You can also:
-
-- Try the Official Demo - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/) \| [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=11.0.30&utm_source=guide)
-- Try Online Examples - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v11.0.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
-  - Camera access
-
-> Please refer to [system requirements](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/faq/system-requirement.html) for more details.
-
-### Understand the code
-
-The complete code of the "Hello World" example is shown below
-
-```html
-<!DOCTYPE html>
-<html>
-<body>
-<div id="camera-view-container" style="width: 100%; height: 60vh"></div>
-<textarea id="results" style="width: 100%; min-height: 10vh; font-size: 3vmin; overflow: auto" disabled></textarea>
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.3000/dist/dbr.bundle.js"></script>
-<script>
-  Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
-  Dynamsoft.Core.CoreModule.loadWasm();
-  (async () => {
-    let cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
-
-    let cameraView = await Dynamsoft.DCE.CameraView.createInstance();
-    let cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
-    document.querySelector("#camera-view-container").append(cameraView.getUIElement());
-    cvRouter.setInput(cameraEnhancer);
-
-    const resultsContainer = document.querySelector("#results");
-    cvRouter.addResultReceiver({ onCapturedResultReceived: (result) => {
-      if (result.barcodeResultItems?.length) {
-        resultsContainer.textContent = '';
-        for (let item of result.barcodeResultItems) {
-          resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
-        }
-      }
-    }});
-
-    let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
-    filter.enableResultCrossVerification("barcode", true);
-    filter.enableResultDeduplication("barcode", true);
-    await cvRouter.addResultFilter(filter);
-
-    await cameraEnhancer.open();
-    await cvRouter.startCapturing("ReadSingleBarcode");
-  })();
-</script>
-</body>
-</html>
-```
-
-<!--TOM: Update the code links-->
-
-<p align="center" style="text-align:center; white-space: normal; ">
-  <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.30/foundational-api-samples/hello-world/hello-world.html" title="Code in Github" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg" alt="Code in Github" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/csm2f9wb/" title="Run via JSFiddle" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/jsfiddle.svg" alt="Run via JSFiddle" width="20" height="20" style="width:20px;height:20px;" >
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/hello-world/hello-world.html?ver=11.0.30&utm_source=guide" title="Run in Dynamsoft" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/svgs/solid/circle-play.svg" alt="Run in Dynamsoft" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-</p>
-
-> Don't want to deal with too many details? You can get a quick start with the [BarcodeScanner >>](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/barcode-scanner.html)
-> ```js
-> // Scan instantly with a single line of code!
-> new Dynamsoft.BarcodeScanner().launch().then(result=>alert(result.barcodeResults[0].text));
-> ```
-
------
-
-#### About the code
-
-- `Dynamsoft.License.LicenseManager.initLicense()`: This method initializes the license for using the SDK in the application. Note that the string "**DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9**" used in this example points to an online license that requires a network connection to work. Read more on [Specify the license](#1-specify-the-license).
-
-- `Dynamsoft.Core.CoreModule.loadWasm()`: This is an optional code. Used to load wasm resources in advance, reducing latency between video playing and barcode decoding.
-
-- `Dynamsoft.CVR.CaptureVisionRouter.createInstance()`: This method creates a `CaptureVisionRouter` object `cvRouter` which controls the entire process in three steps:
-  - **Retrieve Images from the Image Source**
-    - `cvRouter` connects to the image source through the [ImageSourceAdapter](https://www.dynamsoft.com/capture-vision/docs/core/architecture/input.html#image-source-adapter?lang=js) interface with the method `setInput()`.
-      ```js
-      cvRouter.setInput(cameraEnhancer);
-      ```
-    > The image source in our case is a [CameraEnhancer](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/user-guide/index.html) object created with `Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView)`
-  - **Coordinate Image-Processing Tasks**
-    - The coordination happens behind the scenes. `cvRouter` starts the process by specifying a preset template "ReadSingleBarcode" in the method `startCapturing()`.
-      ```js
-      cvRouter.startCapturing("ReadSingleBarcode");
-      ```
-  - **Dispatch Results to Listening Objects**
-    - The processing results are returned through the [CapturedResultReceiver](https://www.dynamsoft.com/capture-vision/docs/core/architecture/output.html#captured-result-receiver?lang=js) interface. The `CapturedResultReceiver` object is registered to `cvRouter` via the method `addResultReceiver()`. For more information, please check out [Register a result receiver](#step-4-register-a-result-receiver).
-      ```js
-      cvRouter.addResultReceiver({/*The-CapturedResultReceiver-Object"*/});
-      ```
-    - Also note that reading from video is extremely fast and there could be many duplicate results. We can use a [filter](#3-important-filter-the-results) with result deduplication enabled to filter out the duplicate results. The object is registered to `cvRouter` via the method `addResultFilter()`.
-      ```js
-      cvRouter.addResultFilter(filter);
-      ```
-
-> Read more on [Capture Vision Router](https://www.dynamsoft.com/capture-vision/docs/core/architecture/#capture-vision-router).
-
-### Run the example
-
-You can run the example deployed to [the Dynamsoft Demo Server](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html?ver=11.0.30&utm_source=guide) or test it with [JSFiddle code editor](https://jsfiddle.net/DynamsoftTeam/csm2f9wb/). 
-
-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 show up under the video and the barcode location will be highlighted in the video feed.
-
-Alternatively, you can test locally by copying and pasting the code shown above into a local file (e.g. "hello-world.html") and opening it in your browser.
-
-> *Secure Contexts*:
->
-> If you open the web page as `http://` , our SDK may not work correctly because the [MediaDevices: getUserMedia()](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) and other methods only work in [secure contexts](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts) (HTTPS, `localhost`, `127.0.0.1`, `file://`), in some or all supporting browsers.
->
-> Regarding configuring https on your server, these guides for [nginx](https://nginx.org/en/docs/http/configuring_https_servers.html) / [IIS](https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/) / [tomcat](https://dzone.com/articles/setting-ssl-tomcat-5-minutes) / [nodejs](https://nodejs.org/docs/v0.4.1/api/tls.html) might help.
->
-> If the test doesn't go as expected, you can [contact us](https://www.dynamsoft.com/company/contact/?ver=11.0.30&utm_source=guide&product=dbr&package=js).
-
-## Preparing the SDK
-
-### Step 1: Include the SDK
-
-<div class="multi-panel-switching-prefix"></div>
-<!-- 
-- [Use a public CDN](#useapubliccdn)
-- [Host the SDK yourself](#hostthesdkyourself) -->
-
-<div class="multi-panel-start"></div>
-<div class="multi-panel-title">Use a public CDN</div>
-
-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
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.3000/dist/dbr.bundle.js"></script>
-  ```
-
-- UNPKG
-
-  ```html
-  <script src="https://unpkg.com/dynamsoft-barcode-reader-bundle@11.0.3000/dist/dbr.bundle.js"></script>
-  ```
-
-<!-- - In some rare cases (such as some restricted areas), you might not be able to access the CDN. If this happens, you can use the following files for the test.
-
-  ```html
-  <script src="https://download2.dynamsoft.com/packages/dynamsoft-barcode-reader-bundle@11.0.3000/dist/dbr.bundle.js"></script>
-  ```
-
-  However, please **DO NOT** use `download2.dynamsoft.com` resources in a production application as they are for temporary testing purposes only. Instead, you can try hosting the SDK yourself. -->
-
-- In frameworks like React, Vue and Angular, you may want to add the package as a dependency.
-
-  ```sh
-  npm i dynamsoft-barcode-reader-bundle@11.0.3000 -E
-  # or
-  yarn add dynamsoft-barcode-reader-bundle@11.0.3000 -E
-  ```
-
-  NOTE that in frameworks, you need to [specify the location of the engine files](#2-optional-specify-the-location-of-the-engine-files).
-<div class="multi-panel-end"></div>
-
-<div class="multi-panel-start"></div>
-<div class="multi-panel-title">Host the SDK yourself</div>
-
-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.
-
-- From the website
-
-  [Download Dynamsoft Barcode Reader JavaScript Package](https://www.dynamsoft.com/barcode-reader/downloads/?ver=11.0.30&utm_source=guide&product=dbr&package=js)
-
-  The resources are located at path `dynamsoft/distributables/<pkg>@<version>`.
-
-- From npm
-
-  ```sh
-  npm i dynamsoft-barcode-reader-bundle@11.0.3000 -E
-  # Compared with using CDN, you need to set up more resources.
-  npm i dynamsoft-capture-vision-std@1.4.21 -E
-  npm i dynamsoft-image-processing@2.4.31 -E
-  ```
-
-  The resources are located at the path `node_modules/<pkg>`, without `@<version>`. You must copy "dynamsoft-xxx" packages elsewhere and add `@<version>`. The `<version>` can be obtained from `package.json` of each package. Another thing to do is to [specify the engineResourcePaths](#2-optional-specify-the-location-of-the-engine-files) so that the SDK can correctly locate the resources.
-  > Since "node_modules" is reserved for Node.js dependencies, and in our case the package is used only as static resources, we recommend either renaming the "node_modules" folder or moving the "dynamsoft-" packages to a dedicated folder for static resources in your project to facilitate self-hosting.
-
-You can typically include SDK like this:
-
-```html
-<script src="path/to/dynamsoft-barcode-reader-bundle@11.0.3000/dist/dbr.bundle.js"></script>
-```
-<div class="multi-panel-end"></div>
-
-<div class="multi-panel-switching-end"></div>
-
-*Note*:
-
-* Certain legacy web application servers may lack support for the `application/wasm` mimetype for .wasm files. To address this, you have two options:
-  1. Upgrade your web application server to one that supports the `application/wasm` mimetype.
-  2. Manually define the mimetype on your server. You can refer to the guides for [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.
-
-  ```
-  Cache-Control: max-age=31536000
-  ```
-
-  Reference: [Cache-Control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control).
-
-### Step 2: Prepare the SDK
-
-Before using the SDK, you need to configure a few things.
-
-#### 1. Specify the license
-
-To enable the SDK's functionality, you must provide a valid license. Utilize the API function initLicense to set your license key.
-
-```javascript
-Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
-```
-
-As previously stated, the key "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" serves as a test license valid for 24 hours, applicable to any newly authorized browser. To test the SDK further, you can request a 30-day free trial license via the <a href="https://www.dynamsoft.com/customer/license/trialLicense?ver=11.0.30&utm_source=guide&product=dbr&package=js" target="_blank">Request a Trial License</a> link.
-
-> Upon registering a Dynamsoft account and obtaining the SDK package from the official website, Dynamsoft will automatically create a 30-day free trial license and embed the corresponding license key into all the provided SDK samples.
-
-#### 2. [Optional] Specify the location of the "engine" files
-
-This step is generally necessary when utilizing frameworks such as Angular, React, Vue, or when managing the hosting of resource files yourself.
-
-The purpose is to tell the SDK where to find the engine files (\*.worker.js, \*.wasm.js and \*.wasm, etc.).
-
-```ts
-// in framework
-import { CoreModule } from "dynamsoft-barcode-reader-bundle";
-CoreModule.engineResourcePaths.rootDirectory = "https://cdn.jsdelivr.net/npm/";
-```
-```js
-// in pure js
-Dynamsoft.Core.CoreModule.engineResourcePaths.rootDirectory = "https://cdn.jsdelivr.net/npm/";
-```
-These code uses the jsDelivr CDN as an example, feel free to change it to your own location.
-
-## Using the SDK
-
-### Step 1: Preload the module
-
-The image processing logic is encapsulated within .wasm library files, and these files may require some time for downloading. To enhance the speed, we advise utilizing the following method to preload the libraries.
-
-```js
-// Preload the .wasm files
-await Dynamsoft.Core.CoreModule.loadWasm();
-```
-
-### Step 2: Create a CaptureVisionRouter object
-
-To use the SDK, we first create a `CaptureVisionRouter` object.
-
-```javascript
-Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
-
-let cvRouter = null;
-try {
-    cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
-} catch (ex) {
-    console.error(ex);
-}
-```
-
-*Tip*:
-
-When creating a `CaptureVisionRouter` 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 `pCvRouter` in the following code:
-
-```javascript
-Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
-
-let pCvRouter = null; // The helper variable which is a promise of cvRouter
-let cvRouter = null;
-
-document.getElementById('btn-scan').addEventListener('click', async () => {
-    try {
-        cvRouter = await (pCvRouter = pCvRouter || Dynamsoft.CVR.CaptureVisionRouter.createInstance());
-    } catch (ex) {
-        console.error(ex);
-    }
-});
-```
-
-### Step 3: Connect an image source
-
-The `CaptureVisionRouter` object, denoted as `cvRouter`, is responsible for handling images provided by an image source. In our scenario, we aim to detect barcodes directly from a live video stream. To facilitate this, we initialize a `CameraEnhancer` object, identified as `cameraEnhancer`, which is specifically designed to capture image frames from the video feed and subsequently forward them to `cvRouter`.
-
-To enable video streaming on the webpage, we create a `CameraView` object referred to as `cameraView`, which is then passed to `cameraEnhancer`, and its content is displayed on the webpage.
-
-```html
-<div id="camera-view-container" style="width: 100%; height: 100vh"></div>
-```
-
-```javascript
-let cameraView = await Dynamsoft.DCE.CameraView.createInstance();
-let cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
-document.querySelector("#camera-view-container").append(cameraView.getUIElement());
-cvRouter.setInput(cameraEnhancer);
-```
-
-### Step 4: Register a result receiver
-
-Once the image processing is complete, the results are sent to all the registered `CapturedResultReceiver` objects. Each `CapturedResultReceiver` object may encompass one or multiple callback functions associated with various result types. This time we use `onCapturedResultReceived`:
-<!--In our particular case, our focus is on identifying barcodes within the images, so it's sufficient to define the callback function `onDecodedBarcodesReceived`:-->
-
-```javascript
-const resultsContainer = document.querySelector("#results");
-const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver();
-resultReceiver.onCapturedResultReceived = (result) => {
-  if (result.barcodeResultItems?.length) {
-    resultsContainer.textContent = '';
-    for (let item of result.barcodeResultItems) {
-      // In this example, the barcode results are displayed on the page below the video.
-      resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
-    }
-  }
-};
-cvRouter.addResultReceiver(resultReceiver);
-```
-
-You can also write code like this. It is the same.
-
-```javascript
-const resultsContainer = document.querySelector("#results");
-cvRouter.addResultReceiver({ onCapturedResultReceived: (result) => {
-  if (result.barcodeResultItems?.length) {
-    resultsContainer.textContent = '';
-    for (let item of result.barcodeResultItems) {
-      // In this example, the barcode results are displayed on the page below the video.
-      resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
-    }
-  }
-}});
-```
-
-Check out [CapturedResultReceiver](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/capture-vision-router/captured-result-receiver.html) for more information.
-
-### Step 5: Start process video frames
-
-With the setup now complete, we can proceed to process the images in two straightforward steps:
-
-1. Initiate the image source to commence image acquisition. In our scenario, we invoke the `open()` method on `cameraEnhancer` to initiate video streaming and simultaneously initiate the collection of images. These collected images will be dispatched to `cvRouter` as per its request.
-2. Define a preset template to commence image processing. In our case, we utilize the "ReadSingleBarcode" template, specifically tailored for processing images containing a single barcode.
-
-```javascript
-await cameraEnhancer.open();
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
-
-*Note*:
-
-* `cvRouter` is engineered to consistently request images from the image source.
-* Various preset templates are at your disposal for barcode reading:
-
-| Template Name                  | Function Description                                           |
-| ------------------------------ | -------------------------------------------------------------- |
-| **ReadBarcodes_Default**       | Scans multiple barcodes by default setting.                    |
-| **ReadSingleBarcode**          | Quickly scans a single barcode.                                |
-| **ReadBarcodes_SpeedFirst**    | Prioritizes speed in scanning multiple barcodes.               |
-| **ReadBarcodes_ReadRateFirst** | Maximizes the number of barcodes read.                         |
-| **ReadBarcodes_Balance**       | Balances speed and quantity in reading multiple barcodes.      |
-| **ReadDenseBarcodes**          | Specialized in reading barcodes with high information density. |
-| **ReadDistantBarcodes**        | Capable of reading barcodes from extended distances.           |
-
-Read more on the [preset CaptureVisionTemplates](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/capture-vision-router/preset-templates.html).
-
-## Customizing the process
-
-### 1. Adjust the preset template settings
-
-When making adjustments to some basic tasks, we often only need to modify [SimplifiedCaptureVisionSettings](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/capture-vision-router/interfaces/simplified-capture-vision-settings.html).
-
-#### 1.1. Change barcode settings
-
-The preset templates can be updated to meet different requirements. For example, the following code limits the barcode format to QR code.
-
-```javascript
-let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.barcodeSettings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
-await cvRouter.updateSettings("ReadSingleBarcode", settings);
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
-
-For a list of adjustable barcode settings, check out [SimplifiedBarcodeReaderSettings](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/interfaces/simplified-barcode-reader-settings.html) and [EnumBarcodeFormat](https://www.dynamsoft.com/capture-vision/docs/core/enums/barcode-reader/barcode-format.html?lang=js&product=dbr).
-
-#### 1.2. Retrieve the original image
-
-Additionally, we have the option to modify the template to retrieve the original image containing the barcode.
-
-```javascript
-let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.outputOriginalImage = true;
-await cvRouter.updateSettings("ReadSingleBarcode", settings);
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
-
-Limit the barcode format to QR code, and retrieve the original image containing the barcode, at the same time.
-
-```javascript
-let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.outputOriginalImage = true;
-settings.barcodeSettings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
-await cvRouter.updateSettings("ReadSingleBarcode", settings);
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
-
-Please be aware that it is necessary to update the `CapturedResultReceiver` object to obtain the original image. For instance:
-
-```javascript
-const EnumCRIT = Dynamsoft.Core.EnumCapturedResultItemType;
-resultReceiver.onCapturedResultReceived = (result) => {
-  if (result.barcodeResultItems?.length) {
-    // Use a filter to get the image on which barcodes are found.
-    let image = result.items.filter(
-      item => item.type === EnumCRIT.CRIT_ORIGINAL_IMAGE
-    )[0].imageData;
-  }
-};
-```
-
-#### 1.3. Change reading frequency to save power
-
-The SDK is initially configured to process images sequentially without any breaks. Although this setup maximizes performance, it can lead to elevated power consumption, potentially causing the device to overheat. In many cases, it's possible to reduce the reading speed while still satisfying business requirements. The following code snippet illustrates how to adjust the SDK to process an image every 500 milliseconds:
-
-> Please bear in mind that in the following code, if an image's processing time is shorter than 500 milliseconds, the SDK will wait for the full 500 milliseconds before proceeding to process the next image. Conversely, if an image's processing time exceeds 500 milliseconds, the subsequent image will be processed immediately upon completion.
-
-```javascript
-let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.minImageCaptureInterval = 500;
-await cvRouter.updateSettings("ReadSingleBarcode", settings);
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
-
-#### 1.4. Specify a scan region
-
-We can specify a scan region to allow the SDK to process only part of the image, improving processing speed. The code snippet below demonstrates how to do this using the `cameraEnhancer` image source.
-
-```javascript
-cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
-// In this example, we set the scan region to cover the central 25% of the image.
-cameraEnhancer.setScanRegion({
-  x: 25,
-  y: 25,
-  width: 50,
-  height: 50,
-  isMeasuredInPercentage: true,
-});
-```
-
-*Note*:
-
-1. By configuring the region at the image source, images are cropped before processing, removing the need to adjust any further processing settings.
-2. `cameraEnhancer` enhances interactivity by overlaying a mask on the video, clearly marking the scanning region.
-
-*See Also*:
-
-[CameraEnhancer::setScanRegion](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/api-reference/acquisition.html#setscanregion)
-
-<!-- Since DCE is always used, no need to use this approach
-
-
-You can use the parameter `roi` (region of interest) together with the parameter `roiMeasuredInPercentage` to configure the SDK to only read a specific region on the image frames. For example, the following code limits the reading in the center 25%( = 50% * 50%) of the image frames:
-
-```javascript
-let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.roiMeasuredInPercentage = true;
-settings.roi.points = [
-  { x: 25, y: 25 },
-  { x: 75, y: 25 },
-  { x: 75, y: 75 },
-  { x: 25, y: 75 },
-];
-await cvRouter.updateSettings("ReadSingleBarcode", settings);
-await cvRouter.startCapturing("ReadSingleBarcode");
-``` -->
-
-
-<!--
-* Specify the maximum time allowed for processing each image
-
-You can set the maximum time allowed for processing a single image with the property `timeout`.
-
-> Please be aware that the SDK will cease processing an image if its processing time exceeds the duration specified by the `timeout` parameter. It should not be confused with the previously discussed parameter, `minImageCaptureInterval`.
-
-```javascript
-let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.timeout = 500;
-await cvRouter.updateSettings("ReadSingleBarcode", settings);
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
--->
-
-### 2. Edit the preset templates directly
-
-The preset templates have many more settings that can be customized to suit your use case best. If you [download the SDK from Dynamsoft website](https://www.dynamsoft.com/barcode-reader/downloads/1000003-confirmation/), you can find the templates under
-
-* "/dynamsoft-barcode-reader-js-11.0.3000/dynamsoft/templates/"
-
-Upon completing the template editing, you can invoke the `initSettings` method and provide it with the template path as an argument.
-
-```javascript
-await cvRouter.initSettings("PATH-TO-THE-FILE"); // E.g. "https://your-website/ReadSingleBarcode.json")
-await cvRouter.startCapturing("ReadSingleBarcode"); // Make sure the name matches one of the CaptureVisionTemplates in the template JSON file.
-```
-
-### 3. [Important] Filter the results
-
-When processing video frames, the same barcode is often detected multiple times. To improve the user experience, we can use the [MultiFrameResultCrossFilter](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/utility/multi-frame-result-cross-filter.html) object. This object provides two methods for handling duplicate detections, which can be used independently or together, depending on what best suits your application needs:
-
-#### Method 1: Verify results across multiple frames
-
-```js
-let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
-filter.enableResultCrossVerification("barcode", true);
-await cvRouter.addResultFilter(filter);
-```
-
-*Note*:
-
-* `enableResultCrossVerification` was designed to cross-validate the outcomes across various frames in a video streaming scenario, enhancing the reliability of the final results. This validation is particularly crucial for barcodes with limited error correction capabilities, such as 1D codes.
-
-#### Method 2: Eliminate redundant results detected within a short time frame
-
-```js
-let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
-filter.enableResultDeduplication("barcode", true);
-await cvRouter.addResultFilter(filter);
-```
-
-*Note*:
-
-* `enableResultDeduplication` was designed to prevent high usage in video streaming scenarios, addressing the repetitive processing of the same code within a short period of time.
-
-Initially, the filter is set to forget a result 3 seconds after it is first received. During this time frame, if an identical result appears, it is ignored.
-
-> It's important to know that in version 9.x or earlier, the occurrence of an identical result would reset the timer, thus reinitiating the 3-second count at that point. However, in version 10.2.10 and later, an identical result no longer resets the timer but is instead disregarded, and the duration count continues uninterrupted.
-
-Under certain circumstances, this duration can be extended with the method `setDuplicateForgetTime()`.
-
-```js
-let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
-filter.setDuplicateForgetTime("barcode", 5000); // Extend the duration to 5 seconds.
-await cvRouter.addResultFilter(filter);
-```
-
-You can also enable both options at the same time:
-
-```js
-let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
-filter.enableResultCrossVerification("barcode", true);
-filter.enableResultDeduplication("barcode", true);
-filter.setDuplicateForgetTime("barcode", 5000);
-await cvRouter.addResultFilter(filter);
-```
-
-### 4. Add feedback
-
-When a barcode is detected within the video stream, its position is immediately displayed within the video. Furthermore, utilizing the "Dynamsoft Camera Enhancer" SDK, we can introduce feedback mechanisms, such as emitting a "beep" sound or triggering a "vibration".
-
-The following code snippet adds a "beep" sound for when a barcode is found:
-
-```js
-const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver();
-resultReceiver.onDecodedBarcodesReceived = (result) => {
-  if (result.barcodeResultItems.length > 0) {
-    Dynamsoft.DCE.Feedback.beep();
-  }
-};
-cvRouter.addResultReceiver(resultReceiver);
-```
-
-## Customizing the UI
-
-```javascript
-// Create a CameraView instance with default settings
-let cameraView = await Dynamsoft.DCE.CameraView.createInstance();
-// Create a CameraView instance with a specified HTML file path, typically a local or remote URL
-let cameraView1 = await Dynamsoft.DCE.CameraView.createInstance('@engineResourcePath/dce.mobile-native.ui.html');
-// Create a CameraView instance within a specified DOM element
-let cameraView2 = await Dynamsoft.DCE.CameraView.createInstance(document.getElementById('my-ui'));
-// Create a CameraView instance using a custom UI file path
-let cameraView3 = await Dynamsoft.DCE.CameraView.createInstance('url/to/my/ui.html');
-
-// Get the UI element associated with the cameraView instance
-let uiElement = cameraView.getUIElement();
-// Remove the camera selection dropdown from the CameraView's UI element
-uiElement.shadowRoot.querySelector('.dce-sel-camera').remove();
-// Remove the resolution selection dropdown from the CameraView's UI element
-uiElement.shadowRoot.querySelector('.dce-sel-resolution').remove();
-```
-
-The UI is part of the auxiliary SDK "Dynamsoft Camera Enhancer", read more on how to [customize the UI](https://www.dynamsoft.com/barcode-reader/docs/core/programming/features/ui-customization-js.html?lang=js).
-
-## Documentation
-
-### API Reference
-
-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=11.0.3000](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=11.0.3000).
-
-<!--  Compatibility is basically not an issue. Pls remove to another place
-
-## 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 required for in-browser video streaming.
-
-- `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    | v78+<sup>1</sup> |
-  |   Firefox    | v68+<sup>1</sup> |
-  |     Edge     |       v79+       |
-  |    Safari    |       v14+       |
-
-  <sup>1</sup> devices running iOS needs to be on iOS 14.3+ for camera video streaming to work in Chrome, Firefox or other Apps using webviews.
-
-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/index.html?ver=11.0.3000&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/index.html](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/index.html?ver=11.0.30&utm_source=guide).
-
-## Next Steps
-
-Now that you have got the SDK integrated, you can choose to move forward in the following directions
-
-1. Learn how to [Use in Framework](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-in-framework.html)
-2. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=11.0.30)
-3. Learn about the [APIs of the SDK](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/index.html?ver=11.0.3000)
diff --git a/programming/javascript/user-guide/index.md b/programming/javascript/user-guide/index.md
deleted file mode 100644
index ec6266f0..00000000
--- a/programming/javascript/user-guide/index.md
+++ /dev/null
@@ -1,754 +0,0 @@
----
-layout: default-layout
-title: v11.0.6000 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
-schema: schemas/dynamsoft-facilitates-mit-research-schema.json
----
-
-<!--The original doc is hosted here => https://github.com/dynamsoft-docs/barcode-reader-docs-js/blob/main/programming/javascript/user-guide/index.md -->
-
-# 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. 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.
-
-<!-- ![version](https://img.shields.io/npm/v/dynamsoft-barcode-reader.svg)
-![downloads](https://img.shields.io/npm/dm/dynamsoft-barcode-reader.svg)
-![jsdelivr](https://img.shields.io/jsdelivr/npm/hm/dynamsoft-barcode-reader.svg)
-
-![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) -->
-
-In this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.
-
-<span style="font-size:20px">Table of Contents</span>
-
-- [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)
-  - [Preparing the SDK](#preparing-the-sdk)
-    - [Step 1: Include the SDK](#step-1-include-the-sdk)
-    - [Step 2: Prepare the SDK](#step-2-prepare-the-sdk)
-      - [1. Specify the license](#1-specify-the-license)
-      - [2. \[Optional\] Specify the location of the "engine" files](#2-optional-specify-the-location-of-the-engine-files)
-  - [Using the SDK](#using-the-sdk)
-    - [Step 1: Preload the module](#step-1-preload-the-module)
-    - [Step 2: Create a CaptureVisionRouter object](#step-2-create-a-capturevisionrouter-object)
-    - [Step 3: Connect an image source](#step-3-connect-an-image-source)
-    - [Step 4: Register a result receiver](#step-4-register-a-result-receiver)
-    - [Step 5: Start process video frames](#step-5-start-process-video-frames)
-  - [Customizing the process](#customizing-the-process)
-    - [1. Adjust the preset template settings](#1-adjust-the-preset-template-settings)
-      - [1.1. Change barcode settings](#11-change-barcode-settings)
-      - [1.2. Retrieve the original image](#12-retrieve-the-original-image)
-      - [1.3. Change reading frequency to save power](#13-change-reading-frequency-to-save-power)
-      - [1.4. Specify a scan region](#14-specify-a-scan-region)
-    - [2. Edit the preset templates directly](#2-edit-the-preset-templates-directly)
-    - [3. \[Important\] Filter the results](#3-important-filter-the-results)
-      - [Method 1: Verify results across multiple frames](#method-1-verify-results-across-multiple-frames)
-      - [Method 2: Eliminate redundant results detected within a short time frame](#method-2-eliminate-redundant-results-detected-within-a-short-time-frame)
-    - [4. Add feedback](#4-add-feedback)
-  - [Customizing the UI](#customizing-the-ui)
-  - [Documentation](#documentation)
-    - [API Reference](#api-reference)
-    - [How to Upgrade](#how-to-upgrade)
-    - [Release Notes](#release-notes)
-  - [Next Steps](#next-steps)
-
-**Popular Examples**
-
-- Hello World - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.60/foundational-api-samples/hello-world/hello-world.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/hello-world/hello-world.html?ver=11.0.60&utm_source=guide)
-- Angular App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.60/foundational-api-samples/hello-world/angular)
-- React App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.60/foundational-api-samples/hello-world/react)
-- Vue App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.60/foundational-api-samples/hello-world/vue)
-- PWA App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.60/foundational-api-samples/hello-world/pwa) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/hello-world/pwa/helloworld-pwa.html?ver=11.0.60&utm_source=guide)
-- WebView in Android and iOS - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v11.0.60/foundational-api-samples/hello-world/webview)
-- Read Driver Licenses - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.60/foundational-api-samples/use-case/read-a-drivers-license/index.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/use-case/read-a-drivers-license/index.html?ver=11.0.60&utm_source=guide)
-- Fill A Form - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.60/foundational-api-samples/use-case/fill-a-form-with-barcode-reading.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/use-case/fill-a-form-with-barcode-reading.html?ver=11.0.60&utm_source=guide)
-- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.60/foundational-api-samples/use-case/show-result-texts-on-the-video.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/use-case/show-result-texts-on-the-video.html?ver=11.0.60&utm_source=guide)
-- Debug Camera and Collect Video Frame - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.60/foundational-api-samples/others/debug)
-
-You can also:
-
-- Try the Official Demo - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/) \| [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=11.0.60&utm_source=guide)
-- Try Online Examples - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v11.0.60/)
-
-## 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
-  - Camera access
-
-> Please refer to [system requirements](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/faq/system-requirement.html) for more details.
-
-### Understand the code
-
-The complete code of the "Hello World" example is shown below
-
-```html
-<!DOCTYPE html>
-<html>
-<body>
-<div id="camera-view-container" style="width: 100%; height: 60vh"></div>
-<textarea id="results" style="width: 100%; min-height: 10vh; font-size: 3vmin; overflow: auto" disabled></textarea>
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.6000/dist/dbr.bundle.js"></script>
-<script>
-  Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
-  Dynamsoft.Core.CoreModule.loadWasm();
-  (async () => {
-    let cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
-
-    let cameraView = await Dynamsoft.DCE.CameraView.createInstance();
-    let cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
-    document.querySelector("#camera-view-container").append(cameraView.getUIElement());
-    cvRouter.setInput(cameraEnhancer);
-
-    const resultsContainer = document.querySelector("#results");
-    cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => {
-      if (result.barcodeResultItems?.length) {
-        resultsContainer.textContent = '';
-        for (let item of result.barcodeResultItems) {
-          resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
-        }
-      }
-    }});
-
-    let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
-    filter.enableResultCrossVerification("barcode", true);
-    filter.enableResultDeduplication("barcode", true);
-    await cvRouter.addResultFilter(filter);
-
-    await cameraEnhancer.open();
-    await cvRouter.startCapturing("ReadSingleBarcode");
-  })();
-</script>
-</body>
-</html>
-```
-
-<!--TOM: Update the code links-->
-
-<p align="center" style="text-align:center; white-space: normal; ">
-  <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.60/foundational-api-samples/hello-world/hello-world.html" title="Code in Github" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg" alt="Code in Github" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/csm2f9wb/" title="Run via JSFiddle" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/jsfiddle.svg" alt="Run via JSFiddle" width="20" height="20" style="width:20px;height:20px;" >
-  </a>
-  &nbsp;
-  <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/hello-world/hello-world.html?ver=11.0.60&utm_source=guide" title="Run in Dynamsoft" style="text-decoration:none;">
-    <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/svgs/solid/circle-play.svg" alt="Run in Dynamsoft" width="20" height="20" style="width:20px;height:20px;">
-  </a>
-</p>
-
-> Don't want to deal with too many details? You can get a quick start with the [BarcodeScanner >>](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/barcode-scanner.html)
-> ```js
-> // Scan instantly with a single line of code!
-> new Dynamsoft.BarcodeScanner().launch().then(result=>alert(result.barcodeResults[0].text));
-> ```
-
------
-
-#### About the code
-
-- `Dynamsoft.License.LicenseManager.initLicense()`: This method initializes the license for using the SDK in the application. Note that the string "**DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9**" used in this example points to an online license that requires a network connection to work. Read more on [Specify the license](#1-specify-the-license).
-
-- `Dynamsoft.Core.CoreModule.loadWasm()`: This is an optional code. Used to load wasm resources in advance, reducing latency between video playing and barcode decoding.
-
-- `Dynamsoft.CVR.CaptureVisionRouter.createInstance()`: This method creates a `CaptureVisionRouter` object `cvRouter` which controls the entire process in three steps:
-  - **Retrieve Images from the Image Source**
-    - `cvRouter` connects to the image source through the [ImageSourceAdapter](https://www.dynamsoft.com/capture-vision/docs/core/architecture/input.html#image-source-adapter?lang=js) interface with the method `setInput()`.
-      ```js
-      cvRouter.setInput(cameraEnhancer);
-      ```
-    > The image source in our case is a [CameraEnhancer](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/user-guide/index.html) object created with `Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView)`
-  - **Coordinate Image-Processing Tasks**
-    - The coordination happens behind the scenes. `cvRouter` starts the process by specifying a preset template "ReadSingleBarcode" in the method `startCapturing()`.
-      ```js
-      cvRouter.startCapturing("ReadSingleBarcode");
-      ```
-  - **Dispatch Results to Listening Objects**
-    - The processing results are returned through the [CapturedResultReceiver](https://www.dynamsoft.com/capture-vision/docs/core/architecture/output.html#captured-result-receiver?lang=js) interface. The `CapturedResultReceiver` object is registered to `cvRouter` via the method `addResultReceiver()`. For more information, please check out [Register a result receiver](#step-4-register-a-result-receiver).
-      ```js
-      cvRouter.addResultReceiver({/*The-CapturedResultReceiver-Object"*/});
-      ```
-    - Also note that reading from video is extremely fast and there could be many duplicate results. We can use a [filter](#3-important-filter-the-results) with result deduplication enabled to filter out the duplicate results. The object is registered to `cvRouter` via the method `addResultFilter()`.
-      ```js
-      cvRouter.addResultFilter(filter);
-      ```
-
-> Read more on [Capture Vision Router](https://www.dynamsoft.com/capture-vision/docs/core/architecture/#capture-vision-router).
-
-### Run the example
-
-You can run the example deployed to [the Dynamsoft Demo Server](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html?ver=11.0.60&utm_source=guide) or test it with [JSFiddle code editor](https://jsfiddle.net/DynamsoftTeam/csm2f9wb/). 
-
-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 show up under the video and the barcode location will be highlighted in the video feed.
-
-Alternatively, you can test locally by copying and pasting the code shown above into a local file (e.g. "hello-world.html") and opening it in your browser.
-
-> *Secure Contexts*:
->
-> If you open the web page as `http://` , our SDK may not work correctly because the [MediaDevices: getUserMedia()](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) and other methods only work in [secure contexts](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts) (HTTPS, `localhost`, `127.0.0.1`, `file://`), in some or all supporting browsers.
->
-> Regarding configuring https on your server, these guides for [nginx](https://nginx.org/en/docs/http/configuring_https_servers.html) / [IIS](https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/) / [tomcat](https://dzone.com/articles/setting-ssl-tomcat-5-minutes) / [nodejs](https://nodejs.org/docs/v0.4.1/api/tls.html) might help.
->
-> If the test doesn't go as expected, you can [contact us](https://www.dynamsoft.com/company/contact/?ver=11.0.60&utm_source=guide&product=dbr&package=js).
-
-## Preparing the SDK
-
-### Step 1: Include the SDK
-
-<div class="multi-panel-switching-prefix"></div>
-<!-- 
-- [Use a public CDN](#useapubliccdn)
-- [Host the SDK yourself](#hostthesdkyourself) -->
-
-<div class="multi-panel-start"></div>
-<div class="multi-panel-title">Use a public CDN</div>
-
-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
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.6000/dist/dbr.bundle.js"></script>
-  ```
-
-- UNPKG
-
-  ```html
-  <script src="https://unpkg.com/dynamsoft-barcode-reader-bundle@11.0.6000/dist/dbr.bundle.js"></script>
-  ```
-
-<!-- - In some rare cases (such as some restricted areas), you might not be able to access the CDN. If this happens, you can use the following files for the test.
-
-  ```html
-  <script src="https://download2.dynamsoft.com/packages/dynamsoft-barcode-reader-bundle@11.0.6000/dist/dbr.bundle.js"></script>
-  ```
-
-  However, please **DO NOT** use `download2.dynamsoft.com` resources in a production application as they are for temporary testing purposes only. Instead, you can try hosting the SDK yourself. -->
-
-- In frameworks like React, Vue and Angular, you may want to add the package as a dependency.
-
-  ```sh
-  npm i dynamsoft-barcode-reader-bundle@11.0.6000 -E
-  # or
-  yarn add dynamsoft-barcode-reader-bundle@11.0.6000 -E
-  ```
-
-  NOTE that in frameworks, you need to [specify the location of the engine files](#2-optional-specify-the-location-of-the-engine-files).
-<div class="multi-panel-end"></div>
-
-<div class="multi-panel-start"></div>
-<div class="multi-panel-title">Host the SDK yourself</div>
-
-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.
-
-- From the website
-
-  [Download Dynamsoft Barcode Reader JavaScript Package](https://www.dynamsoft.com/barcode-reader/downloads/?ver=11.0.60&utm_source=guide&product=dbr&package=js)
-
-  The resources are located at path `dynamsoft/distributables/<pkg>@<version>`.
-
-- From npm
-
-  ```sh
-  npm i dynamsoft-barcode-reader-bundle@11.0.6000 -E
-  # Compared with using CDN, you need to set up more resources.
-  npm i dynamsoft-capture-vision-std@1.4.21 -E
-  npm i dynamsoft-image-processing@2.4.31 -E
-  ```
-
-  The resources are located at the path `node_modules/<pkg>`, without `@<version>`. You must copy "dynamsoft-xxx" packages elsewhere and add `@<version>`. The `<version>` can be obtained from `package.json` of each package. Another thing to do is to [specify the engineResourcePaths](#2-optional-specify-the-location-of-the-engine-files) so that the SDK can correctly locate the resources.
-  > Since "node_modules" is reserved for Node.js dependencies, and in our case the package is used only as static resources, we recommend either renaming the "node_modules" folder or moving the "dynamsoft-" packages to a dedicated folder for static resources in your project to facilitate self-hosting.
-
-You can typically include SDK like this:
-
-```html
-<script src="path/to/dynamsoft-barcode-reader-bundle@11.0.6000/dist/dbr.bundle.js"></script>
-```
-<div class="multi-panel-end"></div>
-
-<div class="multi-panel-switching-end"></div>
-
-*Note*:
-
-* Certain legacy web application servers may lack support for the `application/wasm` mimetype for .wasm files. To address this, you have two options:
-  1. Upgrade your web application server to one that supports the `application/wasm` mimetype.
-  2. Manually define the mimetype on your server. You can refer to the guides for [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.
-
-  ```
-  Cache-Control: max-age=31536000
-  ```
-
-  Reference: [Cache-Control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control).
-
-### Step 2: Prepare the SDK
-
-Before using the SDK, you need to configure a few things.
-
-#### 1. Specify the license
-
-To enable the SDK's functionality, you must provide a valid license. Utilize the API function initLicense to set your license key.
-
-```javascript
-Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
-```
-
-As previously stated, the key "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" serves as a test license valid for 24 hours, applicable to any newly authorized browser. To test the SDK further, you can request a 30-day free trial license via the <a href="https://www.dynamsoft.com/customer/license/trialLicense?ver=11.0.60&utm_source=guide&product=dbr&package=js" target="_blank">Request a Trial License</a> link.
-
-> Upon registering a Dynamsoft account and obtaining the SDK package from the official website, Dynamsoft will automatically create a 30-day free trial license and embed the corresponding license key into all the provided SDK samples.
-
-#### 2. [Optional] Specify the location of the "engine" files
-
-This step is generally necessary when utilizing frameworks such as Angular, React, Vue, or when managing the hosting of resource files yourself.
-
-The purpose is to tell the SDK where to find the engine files (\*.worker.js, \*.wasm.js and \*.wasm, etc.).
-
-```ts
-// in framework
-import { CoreModule } from "dynamsoft-barcode-reader-bundle";
-CoreModule.engineResourcePaths.rootDirectory = "https://cdn.jsdelivr.net/npm/";
-```
-```js
-// in pure js
-Dynamsoft.Core.CoreModule.engineResourcePaths.rootDirectory = "https://cdn.jsdelivr.net/npm/";
-```
-These code uses the jsDelivr CDN as an example, feel free to change it to your own location.
-
-## Using the SDK
-
-### Step 1: Preload the module
-
-The image processing logic is encapsulated within .wasm library files, and these files may require some time for downloading. To enhance the speed, we advise utilizing the following method to preload the libraries.
-
-```js
-// Preload the .wasm files
-await Dynamsoft.Core.CoreModule.loadWasm();
-```
-
-### Step 2: Create a CaptureVisionRouter object
-
-To use the SDK, we first create a `CaptureVisionRouter` object.
-
-```javascript
-Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
-
-let cvRouter = null;
-try {
-    cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
-} catch (ex) {
-    console.error(ex);
-}
-```
-
-*Tip*:
-
-When creating a `CaptureVisionRouter` 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 `pCvRouter` in the following code:
-
-```javascript
-Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
-
-let pCvRouter = null; // The helper variable which is a promise of cvRouter
-let cvRouter = null;
-
-document.getElementById('btn-scan').addEventListener('click', async () => {
-    try {
-        cvRouter = await (pCvRouter = pCvRouter || Dynamsoft.CVR.CaptureVisionRouter.createInstance());
-    } catch (ex) {
-        console.error(ex);
-    }
-});
-```
-
-### Step 3: Connect an image source
-
-The `CaptureVisionRouter` object, denoted as `cvRouter`, is responsible for handling images provided by an image source. In our scenario, we aim to detect barcodes directly from a live video stream. To facilitate this, we initialize a `CameraEnhancer` object, identified as `cameraEnhancer`, which is specifically designed to capture image frames from the video feed and subsequently forward them to `cvRouter`.
-
-To enable video streaming on the webpage, we create a `CameraView` object referred to as `cameraView`, which is then passed to `cameraEnhancer`, and its content is displayed on the webpage.
-
-```html
-<div id="camera-view-container" style="width: 100%; height: 100vh"></div>
-```
-
-```javascript
-let cameraView = await Dynamsoft.DCE.CameraView.createInstance();
-let cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
-document.querySelector("#camera-view-container").append(cameraView.getUIElement());
-cvRouter.setInput(cameraEnhancer);
-```
-
-### Step 4: Register a result receiver
-
-Once the image processing is complete, the results are sent to all the registered `CapturedResultReceiver` objects. Each `CapturedResultReceiver` object may encompass one or multiple callback functions associated with various result types. This time we use `onDecodedBarcodesReceived`:
-<!--In our particular case, our focus is on identifying barcodes within the images, so it's sufficient to define the callback function `onDecodedBarcodesReceived`:-->
-
-```javascript
-const resultsContainer = document.querySelector("#results");
-const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver();
-resultReceiver.onDecodedBarcodesReceived  = (result) => {
-  if (result.barcodeResultItems?.length) {
-    resultsContainer.textContent = '';
-    for (let item of result.barcodeResultItems) {
-      // In this example, the barcode results are displayed on the page below the video.
-      resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
-    }
-  }
-};
-cvRouter.addResultReceiver(resultReceiver);
-```
-
-You can also write code like this. It is the same.
-
-```javascript
-const resultsContainer = document.querySelector("#results");
-cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => {
-  if (result.barcodeResultItems?.length) {
-    resultsContainer.textContent = '';
-    for (let item of result.barcodeResultItems) {
-      // In this example, the barcode results are displayed on the page below the video.
-      resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
-    }
-  }
-}});
-```
-
-Check out [CapturedResultReceiver](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/capture-vision-router/captured-result-receiver.html) for more information.
-
-### Step 5: Start process video frames
-
-With the setup now complete, we can proceed to process the images in two straightforward steps:
-
-1. Initiate the image source to commence image acquisition. In our scenario, we invoke the `open()` method on `cameraEnhancer` to initiate video streaming and simultaneously initiate the collection of images. These collected images will be dispatched to `cvRouter` as per its request.
-2. Define a preset template to commence image processing. In our case, we utilize the "ReadSingleBarcode" template, specifically tailored for processing images containing a single barcode.
-
-```javascript
-await cameraEnhancer.open();
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
-
-*Note*:
-
-* `cvRouter` is engineered to consistently request images from the image source.
-* Various preset templates are at your disposal for barcode reading:
-
-| Template Name                  | Function Description                                           |
-| ------------------------------ | -------------------------------------------------------------- |
-| **ReadBarcodes_Default**       | Scans multiple barcodes by default setting.                    |
-| **ReadSingleBarcode**          | Quickly scans a single barcode.                                |
-| **ReadBarcodes_SpeedFirst**    | Prioritizes speed in scanning multiple barcodes.               |
-| **ReadBarcodes_ReadRateFirst** | Maximizes the number of barcodes read.                         |
-| **ReadBarcodes_Balance**       | Balances speed and quantity in reading multiple barcodes.      |
-| **ReadDenseBarcodes**          | Specialized in reading barcodes with high information density. |
-| **ReadDistantBarcodes**        | Capable of reading barcodes from extended distances.           |
-
-Read more on the [preset CaptureVisionTemplates](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/capture-vision-router/preset-templates.html).
-
-## Customizing the process
-
-### 1. Adjust the preset template settings
-
-When making adjustments to some basic tasks, we often only need to modify [SimplifiedCaptureVisionSettings](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/capture-vision-router/interfaces/simplified-capture-vision-settings.html).
-
-#### 1.1. Change barcode settings
-
-The preset templates can be updated to meet different requirements. For example, the following code limits the barcode format to QR code.
-
-```javascript
-let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.barcodeSettings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
-await cvRouter.updateSettings("ReadSingleBarcode", settings);
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
-
-For a list of adjustable barcode settings, check out [SimplifiedBarcodeReaderSettings](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/interfaces/simplified-barcode-reader-settings.html) and [EnumBarcodeFormat](https://www.dynamsoft.com/capture-vision/docs/core/enums/barcode-reader/barcode-format.html?lang=js&product=dbr).
-
-#### 1.2. Retrieve the original image
-
-Additionally, we have the option to modify the template to retrieve the original image containing the barcode.
-
-```javascript
-let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.outputOriginalImage = true;
-await cvRouter.updateSettings("ReadSingleBarcode", settings);
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
-
-Limit the barcode format to QR code, and retrieve the original image containing the barcode, at the same time.
-
-```javascript
-let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.outputOriginalImage = true;
-settings.barcodeSettings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
-await cvRouter.updateSettings("ReadSingleBarcode", settings);
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
-
-Please be aware that it is necessary to update the `CapturedResultReceiver` object to obtain the original image. For instance:
-
-```javascript
-const EnumCRIT = Dynamsoft.Core.EnumCapturedResultItemType;
-resultReceiver.onDecodedBarcodesReceived = (result) => {
-  if (result.barcodeResultItems?.length) {
-    // Use a filter to get the image on which barcodes are found.
-    let image = result.items.filter(
-      item => item.type === EnumCRIT.CRIT_ORIGINAL_IMAGE
-    )[0].imageData;
-  }
-};
-```
-
-#### 1.3. Change reading frequency to save power
-
-The SDK is initially configured to process images sequentially without any breaks. Although this setup maximizes performance, it can lead to elevated power consumption, potentially causing the device to overheat. In many cases, it's possible to reduce the reading speed while still satisfying business requirements. The following code snippet illustrates how to adjust the SDK to process an image every 500 milliseconds:
-
-> Please bear in mind that in the following code, if an image's processing time is shorter than 500 milliseconds, the SDK will wait for the full 500 milliseconds before proceeding to process the next image. Conversely, if an image's processing time exceeds 500 milliseconds, the subsequent image will be processed immediately upon completion.
-
-```javascript
-let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.minImageCaptureInterval = 500;
-await cvRouter.updateSettings("ReadSingleBarcode", settings);
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
-
-#### 1.4. Specify a scan region
-
-We can specify a scan region to allow the SDK to process only part of the image, improving processing speed. The code snippet below demonstrates how to do this using the `cameraEnhancer` image source.
-
-```javascript
-cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
-// In this example, we set the scan region to cover the central 25% of the image.
-cameraEnhancer.setScanRegion({
-  x: 25,
-  y: 25,
-  width: 50,
-  height: 50,
-  isMeasuredInPercentage: true,
-});
-```
-
-*Note*:
-
-1. By configuring the region at the image source, images are cropped before processing, removing the need to adjust any further processing settings.
-2. `cameraEnhancer` enhances interactivity by overlaying a mask on the video, clearly marking the scanning region.
-
-*See Also*:
-
-[CameraEnhancer::setScanRegion](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/api-reference/acquisition.html#setscanregion)
-
-<!-- Since DCE is always used, no need to use this approach
-
-
-You can use the parameter `roi` (region of interest) together with the parameter `roiMeasuredInPercentage` to configure the SDK to only read a specific region on the image frames. For example, the following code limits the reading in the center 25%( = 50% * 50%) of the image frames:
-
-```javascript
-let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.roiMeasuredInPercentage = true;
-settings.roi.points = [
-  { x: 25, y: 25 },
-  { x: 75, y: 25 },
-  { x: 75, y: 75 },
-  { x: 25, y: 75 },
-];
-await cvRouter.updateSettings("ReadSingleBarcode", settings);
-await cvRouter.startCapturing("ReadSingleBarcode");
-``` -->
-
-
-<!--
-* Specify the maximum time allowed for processing each image
-
-You can set the maximum time allowed for processing a single image with the property `timeout`.
-
-> Please be aware that the SDK will cease processing an image if its processing time exceeds the duration specified by the `timeout` parameter. It should not be confused with the previously discussed parameter, `minImageCaptureInterval`.
-
-```javascript
-let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.timeout = 500;
-await cvRouter.updateSettings("ReadSingleBarcode", settings);
-await cvRouter.startCapturing("ReadSingleBarcode");
-```
--->
-
-### 2. Edit the preset templates directly
-
-The preset templates have many more settings that can be customized to suit your use case best. If you [download the SDK from Dynamsoft website](https://www.dynamsoft.com/barcode-reader/downloads/1000003-confirmation/), you can find the templates under
-
-* "/dynamsoft-barcode-reader-js-11.0.6000/dynamsoft/templates/"
-
-Upon completing the template editing, you can invoke the `initSettings` method and provide it with the template path as an argument.
-
-```javascript
-await cvRouter.initSettings("PATH-TO-THE-FILE"); // E.g. "https://your-website/ReadSingleBarcode.json")
-await cvRouter.startCapturing("ReadSingleBarcode"); // Make sure the name matches one of the CaptureVisionTemplates in the template JSON file.
-```
-
-### 3. [Important] Filter the results
-
-When processing video frames, the same barcode is often detected multiple times. To improve the user experience, we can use the [MultiFrameResultCrossFilter](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/utility/multi-frame-result-cross-filter.html) object. This object provides two methods for handling duplicate detections, which can be used independently or together, depending on what best suits your application needs:
-
-#### Method 1: Verify results across multiple frames
-
-```js
-let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
-filter.enableResultCrossVerification("barcode", true);
-await cvRouter.addResultFilter(filter);
-```
-
-*Note*:
-
-* `enableResultCrossVerification` was designed to cross-validate the outcomes across various frames in a video streaming scenario, enhancing the reliability of the final results. This validation is particularly crucial for barcodes with limited error correction capabilities, such as 1D codes.
-
-#### Method 2: Eliminate redundant results detected within a short time frame
-
-```js
-let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
-filter.enableResultDeduplication("barcode", true);
-await cvRouter.addResultFilter(filter);
-```
-
-*Note*:
-
-* `enableResultDeduplication` was designed to prevent high usage in video streaming scenarios, addressing the repetitive processing of the same code within a short period of time.
-
-Initially, the filter is set to forget a result 3 seconds after it is first received. During this time frame, if an identical result appears, it is ignored.
-
-> It's important to know that in version 9.x or earlier, the occurrence of an identical result would reset the timer, thus reinitiating the 3-second count at that point. However, in version 10.2.10 and later, an identical result no longer resets the timer but is instead disregarded, and the duration count continues uninterrupted.
-
-Under certain circumstances, this duration can be extended with the method `setDuplicateForgetTime()`.
-
-```js
-let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
-filter.setDuplicateForgetTime("barcode", 5000); // Extend the duration to 5 seconds.
-await cvRouter.addResultFilter(filter);
-```
-
-You can also enable both options at the same time:
-
-```js
-let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
-filter.enableResultCrossVerification("barcode", true);
-filter.enableResultDeduplication("barcode", true);
-filter.setDuplicateForgetTime("barcode", 5000);
-await cvRouter.addResultFilter(filter);
-```
-
-### 4. Add feedback
-
-When a barcode is detected within the video stream, its position is immediately displayed within the video. Furthermore, utilizing the "Dynamsoft Camera Enhancer" SDK, we can introduce feedback mechanisms, such as emitting a "beep" sound or triggering a "vibration".
-
-The following code snippet adds a "beep" sound for when a barcode is found:
-
-```js
-const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver();
-resultReceiver.onDecodedBarcodesReceived = (result) => {
-  if (result.barcodeResultItems.length > 0) {
-    Dynamsoft.DCE.Feedback.beep();
-  }
-};
-cvRouter.addResultReceiver(resultReceiver);
-```
-
-## Customizing the UI
-
-```javascript
-// Create a CameraView instance with default settings
-let cameraView = await Dynamsoft.DCE.CameraView.createInstance();
-// Create a CameraView instance with a specified HTML file path, typically a local or remote URL
-let cameraView1 = await Dynamsoft.DCE.CameraView.createInstance('@engineResourcePath/dce.mobile-native.ui.html');
-// Create a CameraView instance within a specified DOM element
-let cameraView2 = await Dynamsoft.DCE.CameraView.createInstance(document.getElementById('my-ui'));
-// Create a CameraView instance using a custom UI file path
-let cameraView3 = await Dynamsoft.DCE.CameraView.createInstance('url/to/my/ui.html');
-
-// Get the UI element associated with the cameraView instance
-let uiElement = cameraView.getUIElement();
-// Remove the camera selection dropdown from the CameraView's UI element
-uiElement.shadowRoot.querySelector('.dce-sel-camera').remove();
-// Remove the resolution selection dropdown from the CameraView's UI element
-uiElement.shadowRoot.querySelector('.dce-sel-resolution').remove();
-```
-
-The UI is part of the auxiliary SDK "Dynamsoft Camera Enhancer", read more on how to [customize the UI](https://www.dynamsoft.com/barcode-reader/docs/core/programming/features/ui-customization-js.html?lang=js).
-
-## Documentation
-
-### API Reference
-
-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=11.0.6000](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=11.0.6000).
-
-<!--  Compatibility is basically not an issue. Pls remove to another place
-
-## 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 required for in-browser video streaming.
-
-- `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    | v78+<sup>1</sup> |
-  |   Firefox    | v68+<sup>1</sup> |
-  |     Edge     |       v79+       |
-  |    Safari    |       v14+       |
-
-  <sup>1</sup> devices running iOS needs to be on iOS 14.3+ for camera video streaming to work in Chrome, Firefox or other Apps using webviews.
-
-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/index.html?ver=11.0.6000&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/index.html](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/index.html?ver=11.0.60&utm_source=guide).
-
-## Next Steps
-
-Now that you have got the SDK integrated, you can choose to move forward in the following directions
-
-1. Learn how to [Use in Framework](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-in-framework.html)
-2. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=11.0.60)
-3. Learn about the [APIs of the SDK](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/index.html?ver=11.0.6000)
diff --git a/programming/javascript/user-guide/use-in-framework-v10.2.1000.md b/programming/javascript/user-guide/use-in-framework-v10.2.1000.md
deleted file mode 100644
index ce9f7739..00000000
--- a/programming/javascript/user-guide/use-in-framework-v10.2.1000.md
+++ /dev/null
@@ -1,380 +0,0 @@
----
-layout: default-layout
-title: v10.2.10 User Guide - Use Dynamsoft Barcode Reader JavaScript Edition In Framework
-description: This is the user guide to integrate Dynamsoft Barcode Reader JavaScript SDK in framework.
-keywords: user guide, javascript, js, barcodes, camera, images, framework, react, angular, vue
-breadcrumbText: User Guide
-noTitleIndex: true
-needGenerateH3Content: true
-needAutoGenerateSidebar: true
-schema: schemas/dynamsoft-facilitates-mit-research-schema.json
----
-
-# Use in Framework - User Guide
-
-Integrating [Dynamsoft Barcode Reader JavaScript Edition](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) (DBR-JS) into frameworks like Angular, React, and Vue is a little different compared to native usage. This guide will quickly explain the common practices of integrating DBR-JS into these frameworks.
-
-You can also refer to [the ready-made samples for popular frameworks](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world) directly without reading this guide.
-
-## Installation
-
-Assuming you have an existing project using a framework, you should have a `package.json` file in your project's root directory.
-
-1. Open the terminal from your project root directory.
-2. Install DBR-JS SDK with the following command:
-
-```sh
-npm install dynamsoft-barcode-reader-bundle@10.2.1000 -E
-```
-
-3. Confirm the installation by checking the `package.json`. You should see:
-
-```json
-{
-  ...
-  "dependencies": {
-    ...
-    "dynamsoft-barcode-reader-bundle": "10.2.1000"
-  }
-}
-```
-
-Notice that there is no `^` before `10.2.1000`. No `^` indicates an exact version, ensuring stability and avoids automatic upgrades even without `package-lock.json`.
-
-While we keep the SDK's external interface relatively stable, the SDK's internal communication often change with each new version. These changes can potentially lead to compatibility issues with `engineResourcePaths` settings. To prevent any unexpected difficulties and surprises, it's essential to use the exact version of the SDK.
-
-## Configuration
-
-Next, we'll create a Configuration file for the common settings related to DBR-JS. If you use TypeScript, we can name the file `dynamsoft.config.ts`. This file is not a component, so you can place it under the `lib` directory or the root directory of `src`.
-
-```ts
-import { CoreModule } from "dynamsoft-core";
-import { LicenseManager } from "dynamsoft-license";
-import "dynamsoft-barcode-reader";
-
-// Configures the paths where the .wasm files and other necessary resources for modules are located.
-CoreModule.engineResourcePaths = {
-  std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.2.10/dist/",
-  dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.2.30/dist/",
-  core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.30/dist/",
-  license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.21/dist/",
-  cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.30/dist/",
-  dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.2.10/dist/",
-  dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.3/dist/"
-};
-
-/** LICENSE ALERT - README
- * To use the library, you need to first specify a license key using the API "initLicense()" as shown below.
- */
-
-LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
-
-/**
- * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days.
- * Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license.
- * For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=10.2.10&utm_source=github#specify-the-license or contact support@dynamsoft.com.
- * LICENSE ALERT - THE END
- */
-
-// Optional. Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading.
-CoreModule.loadWasm(["DBR"]);
-```
-
-In order for these settings to take effect, `dynamsoft.config.ts` must be imported before using the barcode reader. Import this file at the entry point of your application, such as in `main.ts` or the root component. If you import `dynamsoft.config.ts` within a specific subcomponent, you can achieve lazy loading, which can save bandwidth by only loading the barcode feature when needed.
-
-Next, we will demonstrate how to introduce `dynamsoft.config.ts` into a specific component. Don't skip the [Component for Reading Image](#Component-for-Reading-Image) section even if you only need video barcode decoding.
-
-## Component for Reading Image
-
-A component's lifecycle includes creation and destruction, making it difficult to ensure that a component won't be rebuilt. Since the [CaptureVisionRouter](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/capture-vision-router/capture-vision-router-module.html?product=dbr&lang=javascript#capturevisionrouter-class) object is associated with a [Worker](https://developer.mozilla.org/en-US/docs/Web/API/Worker), it cannot be automatically garbage collected. Therefore, we need to manually [dispose](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/capture-vision-router/instantiate.html?product=dbr&lang=javascript#dispose) of it.
-
-```ts
-import "../../dynamsoft.config";
-import { CaptureVisionRouter } from "dynamsoft-capture-vision-router";
-
-let cvRouter;
-
-// create cvRouter before it's needed
-// for example, after the component is mounted
-async mounted(){
-  cvRouter = await CaptureVisionRouter.createInstance();
-}
-
-// dispose cvRouter when it's no longer needed
-beforeUnmount(){
-  cvRouter?.dispose(); // dispose cvRouter if it exists
-  cvRouter = null; // reset cvRouter to null
-}
-```
-
-In scenarios where users may click the button quickly, the component might be destroyed before `cvRouter` is fully created. To handle this situation, we'll need to implement some techniques to ensure proper resource management.
-
-Here's an improved version of the code to address this issue:
-
-```ts
-let pCvRouter; // promise of cvRouter
-
-// create cvRouter before it's needed
-// for example, after the component is mounted
-async mounted(){
-  cvRouter = await (pCvRouter = CaptureVisionRouter.createInstance());
-}
-
-// dispose cvRouter when it's no longer needed
-async beforeUnmount(){
-  await pCvRouter; // ensure cvrouter creation is complete
-  cvRouter?.dispose(); // dispose cvRouter if it exists
-  cvRouter = null; // reset cvRouter to null
-}
-```
-
-### Reading Barcode from an Uploaded File
-
-In some cases, you might need to read barcode from an uploaded file. Here's how to handle that in your component.
-
-```tsx
-import { EnumCapturedResultItemType } from "dynamsoft-core";
-
-async function captureImage(e: Event){
-  // Some frameworks will wrap the event. Refer to DBRJS samples of each frameworks for details
-  let file = e.target.files[0];
-  e.target.value = ''; // reset input
-
-  let result = await cvRouter.capture(file, "ReadBarcodes_SpeedFirst");
-  for (let item of result.items) {
-    // check if captured result item is a barcode
-    if(item.type !== EnumCapturedResultItemType.CRIT_BARCODE) { 
-      continue; // Skip processing if the result is not a barcode
-    } 
-    console.log(item.text); // output the decoded barcode text
-  }
-}
-
-// usage example in a tsx/jsx component
-<input type="file" onChange={captureImage}>
-```
-
-### Lazy Loading `cvRouter`
-
-To optimize resource usage, you might want to lazy load `cvRouter` only after the client uploads a file.
-
-```ts
-async captureImage(e: Event){
-  // ...
-  cvRouter = await (pCvRouter = CaptureVisionRouter.createInstance());
-  // ...
-}
-```
-
-Additionally, users may repeatedly upload files which can result in multiple instances being created, potentially causing memory leaks. Here's how we could handle this.
-
-```ts
-async captureImage(e: Event){
-  // ...
-  cvRouter = await (pCvRouter = pCvRouter || CaptureVisionRouter.createInstance());
-  // ...
-}
-```
-
-### Handling Component Destruction During Decoding
-
-When decoding barcodes, it's common for users to switch to another component. If you're familiar with handling network requests, you know that this situation is very common.
-
-Here's how we could handle with proper checks to avoid program errors:
-
-```ts
-let isDestroyed = false;
-
-async captureImage(e: Event){
-  // ensure cvRouter is created only once
-  cvRouter = await (pCvRouter = pCvRouter || CaptureVisionRouter.createInstance());
-  if(isDestroyed){ return; }
-  // ...
-  let result = await cvRouter.capture(file, "ReadBarcodes_SpeedFirst");
-  if(isDestroyed){ return; }
-
-}
-
-// dispose cvRouter when it's no longer needed
-async beforeUnmount(){
-  isDestroyed = true;
-  await pCvRouter;
-  cvRouter?.dispose();
-  cvRouter = null;
-}
-```
-
-By adding a check for `isDestroyed` after each `await`, we can ensure that the code handles the component's potential destruction properly, avoiding errors and resource leaks.
-
-### Complete Code Example
-
-```tsx
-import "../../dynamsoft.config";
-import { CaptureVisionRouter } from "dynamsoft-capture-vision-router";
-
-let cvRouter;
-let pCvRouter; // promise of cvRouter
-let isDestroyed = false;
-
-async captureImage(e: Event){
-  // Some frameworks will wrap the event. Refer to DBRJS samples of each frameworks for details
-  let file = e.target.files[0];
-  e.target.value = ''; // reset input
-
-  // ensure cvRouter is created only once
-  cvRouter = await (pCvRouter = pCvRouter || CaptureVisionRouter.createInstance());
-  if(isDestroyed){ return; }
-
-  let result = await cvRouter.capture(file, "ReadBarcodes_SpeedFirst");
-  if(isDestroyed){ return; }
-
-  for (let item of result.items) {
-    // check if captured result item is a barcode
-    if(item.type !== EnumCapturedResultItemType.CRIT_BARCODE) { 
-      continue; // Skip processing if the result is not a barcode
-    } 
-    console.log(item.text); // output the decoded barcode text
-  }
-}
-
-// dispose cvRouter when it's no longer needed
-async beforeUnmount(){
-  isDestroyed = true;
-  await pCvRouter; // ensure cvrouter creation is complete
-  cvRouter?.dispose(); // dispose cvRouter if it exists
-  cvRouter = null; // reset cvRouter to null
-}
-
-// usage example in a tsx/jsx component
-<input type="file" onChange={captureImage}>
-```
-
-> If you find it difficult to think about these, don't worry, just go to [DBRJS samples for framework](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world), copy these components into your project.
-
-## Component for Decoding Video
-
-### Set up the video ([CameraView](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/api-reference/cameraview.html)) container
-To render video within a component and handle its lifecycle properly, we can use framework's methods (such as `#` or `ref` or `bind:this`) to get the component's `HTMLDivElement`. This is where the video will be rendered.
-
-```tsx
-let cameraviewContainer;
-
-<div ref={cameraViewContainer}></div>
-```
-
-### Render the Video UI
-
-The [`CameraEnhancer`](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/api-reference/index.html) instance needs to be properly created and [disposed](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/api-reference/instantiate.html#dispose) of to manage resources.
-
-```ts
-import "../dynamsoft.config";
-import { CameraEnhancer, CameraView } from "dynamsoft-camera-enhancer";
-
-let cameraEnhancer;
-let pCameraEnhancer; // promise of cameraEnhancer
-let isDestroyed = false;
-
-async mount(){
-  // create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
-  const cameraView = await CameraView.createInstance();
-  if(isDestroyed){ return; } // Check if component is destroyed after every async
-
-  cameraEnhancer = await (pCameraEnhancer || CameraEnhancer.createInstance(cameraView));
-  if(isDestroyed){ return; }
-
-  // Get default UI and append it to DOM.
-  cameraViewContainer.append(cameraView.getUIElement());
-}
-
-async beforeUnmount(){
-  isDestroyed = true;
-  await pCameraEnhancer;
-  cameraEnhancer?.dispose();
-  cameraEnhancer = null;
-}
-
-// usage example in a tsx/jsx component
-<div ref={cameraViewContainer}></div>
-```
-
-### Add [`CaptureVisionRouter`](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/capture-vision-router/capture-vision-router-module.html)
-
-To complete the code, we'll include the [`CaptureVisionRouter`](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/capture-vision-router/capture-vision-router-module.html) and handle it's life cycle similarly.
-
-```ts
-import "../dynamsoft.config";
-import { CameraEnhancer, CameraView } from "dynamsoft-camera-enhancer";
-import { CaptureVisionRouter } from "dynamsoft-capture-vision-router";
-
-let cameraEnhancer;
-let pCameraEnhancer; // promise of cameraEnhancer
-let cvRouter;
-let pCvRouter; // promise of cvRouter
-let isDestroyed = false;
-
-async mount(){
-  // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
-  const cameraView = await CameraView.createInstance();
-  if(isDestroyed){ return; } // Check if component is destroyed after every async
-  
-  cameraEnhancer = await (pCameraEnhancer || CameraEnhancer.createInstance(cameraView));
-  if(isDestroyed){ return; }
-
-  // Get default UI and append it to DOM.
-  cameraViewContainer.append(cameraView.getUIElement());
-
-  // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
-  cvRouter = await (pCvRouter || CaptureVisionRouter.createInstance());
-  if(isDestroyed){ return; }
-
-  cvRouter.setInput(cameraEnhancer);
-
-  // Define a callback for results.
-  cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => {
-    if (!result.barcodeResultItems.length) return;
-    for (let item of result.barcodeResultItems) {
-      console.log(item.text); // output the decoded barcode text
-    }
-  }});
-
-  // Filter out unchecked and duplicate results.
-  const filter = new MultiFrameResultCrossFilter();
-  // Filter out unchecked barcodes.
-  filter.enableResultCrossVerification("barcode", true);
-  // Filter out duplicate barcodes within 3 seconds.
-  filter.enableResultDeduplication("barcode", true);
-  await cvRouter.addResultFilter(filter);
-  if(isDestroyed){ return; }
-
-  // Open camera and start scanning single barcode.
-  await cameraEnhancer.open();
-  if(isDestroyed){ return; }
-
-  await cvRouter.startCapturing("ReadSingleBarcode");
-}
-
-async beforeUnmount(){
-  isDestroyed = true;
-
-  await pCvRouter;
-  cvRouter?.dispose();
-  cvRouter = null;
-
-  await pCameraEnhancer;
-  cameraEnhancer?.dispose();
-  cameraEnhancer = null;
-}
-
-// usage example in a tsx/jsx component
-<div ref={cameraViewContainer}></div>
-```
-
-### Final Notes
-
-Decoding video is slightly more complex than reading image, but by following the steps above, you can manage resources effectively and ensure your component runs smoothly.
-
-Again, if you don't want to go into detail, please refer to the [DBRJS sample](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world) directly.
-
-Note that since we have taken over native rendering, avoid changing the UI through the framework within decoding video component; instead, make changes in its parent component.
-
-Once this component is rendered, decoding will start. You can control when decoding occurs by not rendering this component until needed.
diff --git a/programming/javascript/user-guide/use-in-framework-v10.4.2002.md b/programming/javascript/user-guide/use-in-framework-v10.4.2002.md
deleted file mode 100644
index da4f0b2f..00000000
--- a/programming/javascript/user-guide/use-in-framework-v10.4.2002.md
+++ /dev/null
@@ -1,373 +0,0 @@
----
-layout: default-layout
-title: v10.4.20 User Guide - Use Dynamsoft Barcode Reader JavaScript Edition In Framework
-description: This is the user guide to integrate Dynamsoft Barcode Reader JavaScript SDK in framework.
-keywords: user guide, javascript, js, barcodes, camera, images, framework, react, angular, vue
-breadcrumbText: User Guide
-noTitleIndex: true
-needGenerateH3Content: true
-needAutoGenerateSidebar: true
-schema: schemas/dynamsoft-facilitates-mit-research-schema.json
----
-
-# Use in Framework - User Guide
-
-Integrating [Dynamsoft Barcode Reader JavaScript Edition](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) (DBR-JS) into frameworks like Angular, React, and Vue is a little different compared to native usage. This guide will quickly explain the common practices of integrating DBR-JS into these frameworks.
-
-You can also refer to [the ready-made samples for popular frameworks](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world) directly without reading this guide.
-
-## Installation
-
-Assuming you have an existing project using a framework, you should have a `package.json` file in your project's root directory.
-
-1. Open the terminal from your project root directory.
-2. Install DBR-JS SDK with the following command:
-
-    ```sh
-    npm install dynamsoft-barcode-reader-bundle@10.4.2002 -E
-    ```
-
-3. Confirm the installation by checking the `package.json`. You should see:
-
-    ```json
-    {
-      ...
-      "dependencies": {
-        ...
-        "dynamsoft-barcode-reader-bundle": "10.4.2002"
-      }
-    }
-    ```
-
-Notice that there is no `^` before `10.4.2002`. No `^` indicates an exact version, ensuring stability and avoids automatic upgrades even without `package-lock.json`.
-
-While we keep the SDK's external interface relatively stable, the SDK's internal communication often change with each new version. These changes can potentially lead to compatibility issues with `engineResourcePaths` settings. To prevent any unexpected difficulties and surprises, it's essential to use the exact version of the SDK.
-
-## Configuration
-
-Next, we'll create a Configuration file for the common settings related to DBR-JS. If you use TypeScript, we can name the file `dynamsoft.config.ts`. This file is not a component, so you can place it under the `lib` directory or the root directory of `src`.
-
-```ts
-import { CoreModule } from "dynamsoft-core";
-import { LicenseManager } from "dynamsoft-license";
-import "dynamsoft-barcode-reader";
-
-// Configures the root path where the .wasm files and other necessary resources for modules are located.
-CoreModule.engineResourcePaths.rootDirectory = "https://cdn.jsdelivr.net/npm/";
-
-/** LICENSE ALERT - README
- * To use the library, you need to first specify a license key using the API "initLicense()" as shown below.
- */
-
-LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
-
-/**
- * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days.
- * Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license.
- * For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=10.4.20&utm_source=github#specify-the-license or contact support@dynamsoft.com.
- * LICENSE ALERT - THE END
- */
-
-// Optional. Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading.
-CoreModule.loadWasm(["DBR"]);
-```
-
-In order for these settings to take effect, `dynamsoft.config.ts` must be imported before using the barcode reader. One approach is to import this file at the entry point of the application, such as in `main.ts` or the root component. If you import `dynamsoft.config.ts` within a specific subcomponent, you can achieve lazy loading, which can save bandwidth by only loading the barcode feature when needed.
-
-Next, we will demonstrate how to introduce `dynamsoft.config.ts` into a specific component. Don't skip the [Component for Reading Image](#component-for-reading-image) section even if you only need video barcode decoding.
-
-## Component for Reading Image
-
-A component's lifecycle includes creation and destruction, making it difficult to ensure that a component won't be rebuilt. Since the [CaptureVisionRouter](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/capture-vision-router/capture-vision-router-module.html?product=dbr&lang=javascript#capturevisionrouter-class) object is associated with a [Worker](https://developer.mozilla.org/en-US/docs/Web/API/Worker), it cannot be automatically garbage collected. Therefore, we need to manually [dispose](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/capture-vision-router/instantiate.html?product=dbr&lang=javascript#dispose) of it.
-
-```ts
-import "../../dynamsoft.config";
-import { CaptureVisionRouter } from "dynamsoft-capture-vision-router";
-
-let cvRouter;
-
-// create cvRouter before it's needed
-// for example, after the component is mounted
-async mounted(){
-  cvRouter = await CaptureVisionRouter.createInstance();
-}
-
-// dispose cvRouter when it's no longer needed
-beforeUnmount(){
-  cvRouter?.dispose(); // dispose cvRouter if it exists
-  cvRouter = null; // reset cvRouter to null
-}
-```
-
-In scenarios where users may click the button quickly, the component might be destroyed before `cvRouter` is fully created. To handle this situation, we'll need to implement some techniques to ensure proper resource management.
-
-Here's an improved version of the code to address this issue:
-
-```ts
-let pCvRouter; // promise of cvRouter
-
-// create cvRouter before it's needed
-// for example, after the component is mounted
-async mounted(){
-  cvRouter = await (pCvRouter = CaptureVisionRouter.createInstance());
-}
-
-// dispose cvRouter when it's no longer needed
-async beforeUnmount(){
-  await pCvRouter; // ensure cvrouter creation is complete
-  cvRouter?.dispose(); // dispose cvRouter if it exists
-  cvRouter = null; // reset cvRouter to null
-}
-```
-
-### Reading Barcode from an Uploaded File
-
-In some cases, you might need to read barcode from an uploaded file. Here's how to handle that in your component.
-
-```tsx
-import { EnumCapturedResultItemType } from "dynamsoft-core";
-
-async function captureImage(e: Event){
-  // Some frameworks will wrap the event. Refer to DBRJS samples of each frameworks for details
-  let file = e.target.files[0];
-  e.target.value = ''; // reset input
-
-  let result = await cvRouter.capture(file, "ReadBarcodes_SpeedFirst");
-  for (let item of result.items) {
-    // check if captured result item is a barcode
-    if(item.type !== EnumCapturedResultItemType.CRIT_BARCODE) { 
-      continue; // Skip processing if the result is not a barcode
-    } 
-    console.log(item.text); // output the decoded barcode text
-  }
-}
-
-// usage example in a tsx/jsx component
-<input type="file" onChange={captureImage}>
-```
-
-### Lazy Loading `cvRouter`
-
-To optimize resource usage, you might want to lazy load `cvRouter` only after the client uploads a file.
-
-```ts
-async captureImage(e: Event){
-  // ...
-  cvRouter = await (pCvRouter = CaptureVisionRouter.createInstance());
-  // ...
-}
-```
-
-Additionally, users may repeatedly upload files which can result in multiple instances being created, potentially causing memory leaks. Here's how we could handle this.
-
-```ts
-async captureImage(e: Event){
-  // ...
-  cvRouter = await (pCvRouter = pCvRouter || CaptureVisionRouter.createInstance());
-  // ...
-}
-```
-
-### Handling Component Destruction During Decoding
-
-When decoding barcodes, it's common for users to switch to another component. If you're familiar with handling network requests, you know that this situation is very common.
-
-Here's how we could handle with proper checks to avoid program errors:
-
-```ts
-let isDestroyed = false;
-
-async captureImage(e: Event){
-  // ensure cvRouter is created only once
-  cvRouter = await (pCvRouter = pCvRouter || CaptureVisionRouter.createInstance());
-  if(isDestroyed){ return; }
-  // ...
-  let result = await cvRouter.capture(file, "ReadBarcodes_SpeedFirst");
-  if(isDestroyed){ return; }
-
-}
-
-// dispose cvRouter when it's no longer needed
-async beforeUnmount(){
-  isDestroyed = true;
-  await pCvRouter;
-  cvRouter?.dispose();
-  cvRouter = null;
-}
-```
-
-By adding a check for `isDestroyed` after each `await`, we can ensure that the code handles the component's potential destruction properly, avoiding errors and resource leaks.
-
-### Complete Code Example
-
-```tsx
-import "../../dynamsoft.config";
-import { CaptureVisionRouter } from "dynamsoft-capture-vision-router";
-
-let cvRouter;
-let pCvRouter; // promise of cvRouter
-let isDestroyed = false;
-
-async captureImage(e: Event){
-  // Some frameworks will wrap the event. Refer to DBRJS samples of each frameworks for details
-  let file = e.target.files[0];
-  e.target.value = ''; // reset input
-
-  // ensure cvRouter is created only once
-  cvRouter = await (pCvRouter = pCvRouter || CaptureVisionRouter.createInstance());
-  if(isDestroyed){ return; }
-
-  let result = await cvRouter.capture(file, "ReadBarcodes_SpeedFirst");
-  if(isDestroyed){ return; }
-
-  for (let item of result.items) {
-    // check if captured result item is a barcode
-    if(item.type !== EnumCapturedResultItemType.CRIT_BARCODE) { 
-      continue; // Skip processing if the result is not a barcode
-    } 
-    console.log(item.text); // output the decoded barcode text
-  }
-}
-
-// dispose cvRouter when it's no longer needed
-async beforeUnmount(){
-  isDestroyed = true;
-  await pCvRouter; // ensure cvrouter creation is complete
-  cvRouter?.dispose(); // dispose cvRouter if it exists
-  cvRouter = null; // reset cvRouter to null
-}
-
-// usage example in a tsx/jsx component
-<input type="file" onChange={captureImage}>
-```
-
-> If you find it difficult to think about these, don't worry, just go to [DBRJS samples for framework](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world), copy these components into your project.
-
-## Component for Decoding Video
-
-### Set up the video ([CameraView](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/api-reference/cameraview.html)) container
-
-To render video within a component and handle its lifecycle properly, we can use framework's methods (such as `#` or `ref` or `bind:this`) to get the component's `HTMLDivElement`. This is where the video will be rendered.
-
-```tsx
-let cameraviewContainer;
-
-<div ref={cameraViewContainer}></div>
-```
-
-### Render the Video UI
-
-The [`CameraEnhancer`](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/api-reference/index.html) instance needs to be properly created and [disposed](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/api-reference/instantiate.html#dispose) of to manage resources.
-
-```ts
-import "../dynamsoft.config";
-import { CameraEnhancer, CameraView } from "dynamsoft-camera-enhancer";
-
-let cameraEnhancer;
-let pCameraEnhancer; // promise of cameraEnhancer
-let isDestroyed = false;
-
-async mount(){
-  // create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
-  const cameraView = await CameraView.createInstance();
-  if(isDestroyed){ return; } // Check if component is destroyed after every async
-
-  cameraEnhancer = await (pCameraEnhancer || CameraEnhancer.createInstance(cameraView));
-  if(isDestroyed){ return; }
-
-  // Get default UI and append it to DOM.
-  cameraViewContainer.append(cameraView.getUIElement());
-}
-
-async beforeUnmount(){
-  isDestroyed = true;
-  await pCameraEnhancer;
-  cameraEnhancer?.dispose();
-  cameraEnhancer = null;
-}
-
-// usage example in a tsx/jsx component
-<div ref={cameraViewContainer}></div>
-```
-
-### Add [`CaptureVisionRouter`](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/capture-vision-router/capture-vision-router-module.html)
-
-To complete the code, we'll include the [`CaptureVisionRouter`](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/capture-vision-router/capture-vision-router-module.html) and handle it's life cycle similarly.
-
-```ts
-import "../dynamsoft.config";
-import { CameraEnhancer, CameraView } from "dynamsoft-camera-enhancer";
-import { CaptureVisionRouter } from "dynamsoft-capture-vision-router";
-
-let cameraEnhancer;
-let pCameraEnhancer; // promise of cameraEnhancer
-let cvRouter;
-let pCvRouter; // promise of cvRouter
-let isDestroyed = false;
-
-async mount(){
-  // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
-  const cameraView = await CameraView.createInstance();
-  if(isDestroyed){ return; } // Check if component is destroyed after every async
-  
-  cameraEnhancer = await (pCameraEnhancer || CameraEnhancer.createInstance(cameraView));
-  if(isDestroyed){ return; }
-
-  // Get default UI and append it to DOM.
-  cameraViewContainer.append(cameraView.getUIElement());
-
-  // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
-  cvRouter = await (pCvRouter || CaptureVisionRouter.createInstance());
-  if(isDestroyed){ return; }
-
-  cvRouter.setInput(cameraEnhancer);
-
-  // Define a callback for results.
-  cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => {
-    if (!result.barcodeResultItems.length) return;
-    for (let item of result.barcodeResultItems) {
-      console.log(item.text); // output the decoded barcode text
-    }
-  }});
-
-  // Filter out unchecked and duplicate results.
-  const filter = new MultiFrameResultCrossFilter();
-  // Filter out unchecked barcodes.
-  filter.enableResultCrossVerification("barcode", true);
-  // Filter out duplicate barcodes within 3 seconds.
-  filter.enableResultDeduplication("barcode", true);
-  await cvRouter.addResultFilter(filter);
-  if(isDestroyed){ return; }
-
-  // Open camera and start scanning single barcode.
-  await cameraEnhancer.open();
-  if(isDestroyed){ return; }
-
-  await cvRouter.startCapturing("ReadSingleBarcode");
-}
-
-async beforeUnmount(){
-  isDestroyed = true;
-
-  await pCvRouter;
-  cvRouter?.dispose();
-  cvRouter = null;
-
-  await pCameraEnhancer;
-  cameraEnhancer?.dispose();
-  cameraEnhancer = null;
-}
-
-// usage example in a tsx/jsx component
-<div ref={cameraViewContainer}></div>
-```
-
-### Final Notes
-
-Decoding video is slightly more complex than reading image, but by following the steps above, you can manage resources effectively and ensure your component runs smoothly.
-
-Again, if you don't want to go into detail, please refer to the [DBRJS sample](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world) directly.
-
-Note that since we have taken over native rendering, avoid changing the UI through the framework within decoding video component; instead, make changes in its parent component.
-
-Once this component is rendered, decoding will start. You can control when decoding occurs by not rendering this component until needed.
diff --git a/programming/javascript/user-guide/use-in-framework.md b/programming/javascript/user-guide/use-in-framework.md
deleted file mode 100644
index 11c764cf..00000000
--- a/programming/javascript/user-guide/use-in-framework.md
+++ /dev/null
@@ -1,391 +0,0 @@
----
-layout: default-layout
-title: v11.0.6000 User Guide - Use Dynamsoft Barcode Reader JavaScript Edition In Framework
-description: This is the user guide to integrate Dynamsoft Barcode Reader JavaScript SDK in framework.
-keywords: user guide, javascript, js, barcodes, camera, images, framework, react, angular, vue
-breadcrumbText: User Guide
-noTitleIndex: true
-needGenerateH3Content: true
-needAutoGenerateSidebar: true
-schema: schemas/dynamsoft-facilitates-mit-research-schema.json
----
-
-# Use in Framework - User Guide
-
-Integrating [Dynamsoft Barcode Reader JavaScript Edition](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) (DBR-JS) into frameworks like Angular, React, and Vue is a little different compared to native usage. This guide will quickly explain the common practices of integrating DBR-JS into these frameworks.
-
-You can also refer to [the ready-made samples for popular frameworks](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world) directly without reading this guide.
-
-## Installation
-
-Assuming you have an existing project using a framework, you should have a `package.json` file in your project's root directory.
-
-1. Open the terminal from your project root directory.
-2. Install DBR-JS SDK with the following command:
-
-    ```sh
-    npm install dynamsoft-barcode-reader-bundle@11.0.6000 -E
-    ```
-
-3. Confirm the installation by checking the `package.json`. You should see:
-
-    ```json
-    {
-      ...
-      "dependencies": {
-        ...
-        "dynamsoft-barcode-reader-bundle": "11.0.6000"
-      }
-    }
-    ```
-
-Notice that there is no `^` before `11.0.6000`. No `^` indicates an exact version, ensuring stability and avoids automatic upgrades even without `package-lock.json`.
-
-While we keep the SDK's external interface relatively stable, the SDK's internal communication often change with each new version. These changes can potentially lead to compatibility issues with `engineResourcePaths` settings. To prevent any unexpected difficulties and surprises, it's essential to use the exact version of the SDK.
-
-## Configuration
-
-Next, we'll create a Configuration file for the common settings related to DBR-JS. If you use TypeScript, we can name the file `dynamsoft.config.ts`. This file is not a component, so you can place it under the `lib` directory or the root directory of `src`.
-
-```ts
-import { CoreModule } from "dynamsoft-core";
-import { LicenseManager } from "dynamsoft-license";
-import "dynamsoft-barcode-reader";
-
-// Configures the root path where the .wasm files and other necessary resources for modules are located.
-CoreModule.engineResourcePaths.rootDirectory = "https://cdn.jsdelivr.net/npm/";
-
-/** LICENSE ALERT - README
- * To use the library, you need to first specify a license key using the API "initLicense()" as shown below.
- */
-
-LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
-
-/**
- * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days.
- * Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license.
- * For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=10.5.30&utm_source=github#specify-the-license or contact support@dynamsoft.com.
- * LICENSE ALERT - THE END
- */
-
-// Optional. Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading.
-CoreModule.loadWasm();
-```
-
-In order for these settings to take effect, `dynamsoft.config.ts` must be imported before using the barcode reader. One approach is to import this file at the entry point of the application, such as in `main.ts` or the root component. If you import `dynamsoft.config.ts` within a specific subcomponent, you can achieve lazy loading, which can save bandwidth by only loading the barcode feature when needed.
-
-### Offline usage
-
-In some cases, you may need to use DBR-JS in an offline environment. You can download the [DBR-JS zip](https://www.dynamsoft.com/barcode-reader/downloads/1000003-confirmation/#js) package through the link, which contains all the necessary offline resources in the `./distributables` directory.
-
-**Step 1:** Copy the `./distributables` folder to your project.
-
-**Step 2:** In `dynamsoft.config.ts`, define the `engineResourcePaths`:
-
-```javascript
-// Configures the root path where the .wasm files and other necessary resources for modules are located. Feel free to change it to your own location of these files
-CoreModule.engineResourcePaths.rootDirectory = '../assets/distributables';
-```
-
-> Note:
-> 
-> We recommend not renaming any module files within the `./distributables` directory, as this may cause the rootDirectory configuration to not work properly. In such cases, you would need to define resource paths for each module individually.
-> In our case the packages are used only as static resources, we recommend moving the `./distributables` to a dedicated folder for static resources in your project to facilitate self-hosting.
-
-Next, we will demonstrate how to introduce `dynamsoft.config.ts` into a specific component. Don't skip the [Component for Reading Image](#component-for-reading-image) section even if you only need video barcode decoding.
-
-## Component for Reading Image
-
-A component's lifecycle includes creation and destruction, making it difficult to ensure that a component won't be rebuilt. Since the [CaptureVisionRouter](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/capture-vision-router/capture-vision-router-module.html?product=dbr&lang=javascript#capturevisionrouter-class) object is associated with a [Worker](https://developer.mozilla.org/en-US/docs/Web/API/Worker), it cannot be automatically garbage collected. Therefore, we need to manually [dispose](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/capture-vision-router/instantiate.html?product=dbr&lang=javascript#dispose) of it.
-
-```ts
-import "../../dynamsoft.config";
-import { CaptureVisionRouter } from "dynamsoft-capture-vision-router";
-
-let cvRouter;
-
-// create cvRouter before it's needed
-// for example, after the component is mounted
-async mounted(){
-  cvRouter = await CaptureVisionRouter.createInstance();
-}
-
-// dispose cvRouter when it's no longer needed
-beforeUnmount(){
-  cvRouter?.dispose(); // dispose cvRouter if it exists
-  cvRouter = null; // reset cvRouter to null
-}
-```
-
-In scenarios where users may click the button quickly, the component might be destroyed before `cvRouter` is fully created. To handle this situation, we'll need to implement some techniques to ensure proper resource management.
-
-Here's an improved version of the code to address this issue:
-
-```ts
-let pCvRouter; // promise of cvRouter
-
-// create cvRouter before it's needed
-// for example, after the component is mounted
-async mounted(){
-  cvRouter = await (pCvRouter = CaptureVisionRouter.createInstance());
-}
-
-// dispose cvRouter when it's no longer needed
-async beforeUnmount(){
-  await pCvRouter; // ensure cvrouter creation is complete
-  cvRouter?.dispose(); // dispose cvRouter if it exists
-  cvRouter = null; // reset cvRouter to null
-}
-```
-
-### Reading Barcode from an Uploaded File
-
-In some cases, you might need to read barcode from an uploaded file. Here's how to handle that in your component.
-
-```tsx
-import { EnumCapturedResultItemType } from "dynamsoft-core";
-
-async function captureImage(e: Event){
-  // Some frameworks will wrap the event. Refer to DBRJS samples of each frameworks for details
-  let file = e.target.files[0];
-  e.target.value = ''; // reset input
-
-  let result = await cvRouter.capture(file, "ReadBarcodes_SpeedFirst");
-  for (let item of result.items) {
-    // check if captured result item is a barcode
-    if(item.type !== EnumCapturedResultItemType.CRIT_BARCODE) { 
-      continue; // Skip processing if the result is not a barcode
-    } 
-    console.log(item.text); // output the decoded barcode text
-  }
-}
-
-// usage example in a tsx/jsx component
-<input type="file" onChange={captureImage}>
-```
-
-### Lazy Loading `cvRouter`
-
-To optimize resource usage, you might want to lazy load `cvRouter` only after the client uploads a file.
-
-```ts
-async captureImage(e: Event){
-  // ...
-  cvRouter = await (pCvRouter = CaptureVisionRouter.createInstance());
-  // ...
-}
-```
-
-Additionally, users may repeatedly upload files which can result in multiple instances being created, potentially causing memory leaks. Here's how we could handle this.
-
-```ts
-async captureImage(e: Event){
-  // ...
-  cvRouter = await (pCvRouter = pCvRouter || CaptureVisionRouter.createInstance());
-  // ...
-}
-```
-
-### Handling Component Destruction During Decoding
-
-When decoding barcodes, it's common for users to switch to another component. If you're familiar with handling network requests, you know that this situation is very common.
-
-Here's how we could handle with proper checks to avoid program errors:
-
-```ts
-let isDestroyed = false;
-
-async captureImage(e: Event){
-  // ensure cvRouter is created only once
-  cvRouter = await (pCvRouter = pCvRouter || CaptureVisionRouter.createInstance());
-  if(isDestroyed){ return; }
-  // ...
-  let result = await cvRouter.capture(file, "ReadBarcodes_SpeedFirst");
-  if(isDestroyed){ return; }
-
-}
-
-// dispose cvRouter when it's no longer needed
-async beforeUnmount(){
-  isDestroyed = true;
-  await pCvRouter;
-  cvRouter?.dispose();
-  cvRouter = null;
-}
-```
-
-By adding a check for `isDestroyed` after each `await`, we can ensure that the code handles the component's potential destruction properly, avoiding errors and resource leaks.
-
-### Complete Code Example
-
-```tsx
-import "../../dynamsoft.config";
-import { CaptureVisionRouter } from "dynamsoft-capture-vision-router";
-
-let cvRouter;
-let pCvRouter; // promise of cvRouter
-let isDestroyed = false;
-
-async captureImage(e: Event){
-  // Some frameworks will wrap the event. Refer to DBRJS samples of each frameworks for details
-  let file = e.target.files[0];
-  e.target.value = ''; // reset input
-
-  // ensure cvRouter is created only once
-  cvRouter = await (pCvRouter = pCvRouter || CaptureVisionRouter.createInstance());
-  if(isDestroyed){ return; }
-
-  let result = await cvRouter.capture(file, "ReadBarcodes_SpeedFirst");
-  if(isDestroyed){ return; }
-
-  for (let item of result.items) {
-    // check if captured result item is a barcode
-    if(item.type !== EnumCapturedResultItemType.CRIT_BARCODE) { 
-      continue; // Skip processing if the result is not a barcode
-    } 
-    console.log(item.text); // output the decoded barcode text
-  }
-}
-
-// dispose cvRouter when it's no longer needed
-async beforeUnmount(){
-  isDestroyed = true;
-  await pCvRouter; // ensure cvrouter creation is complete
-  cvRouter?.dispose(); // dispose cvRouter if it exists
-  cvRouter = null; // reset cvRouter to null
-}
-
-// usage example in a tsx/jsx component
-<input type="file" onChange={captureImage}>
-```
-
-> If you find it difficult to think about these, don't worry, just go to [DBRJS samples for framework](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world), copy these components into your project.
-
-## Component for Decoding Video
-
-### Set up the video ([CameraView](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/api-reference/cameraview.html)) container
-
-To render video within a component and handle its lifecycle properly, we can use framework's methods (such as `#` or `ref` or `bind:this`) to get the component's `HTMLDivElement`. This is where the video will be rendered.
-
-```tsx
-let cameraviewContainer;
-
-<div ref={cameraViewContainer}></div>
-```
-
-### Render the Video UI
-
-The [`CameraEnhancer`](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/api-reference/index.html) instance needs to be properly created and [disposed](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/api-reference/instantiate.html#dispose) of to manage resources.
-
-```ts
-import "../dynamsoft.config";
-import { CameraEnhancer, CameraView } from "dynamsoft-camera-enhancer";
-
-let cameraEnhancer;
-let pCameraEnhancer; // promise of cameraEnhancer
-let isDestroyed = false;
-
-async mount(){
-  // create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
-  const cameraView = await CameraView.createInstance();
-  if(isDestroyed){ return; } // Check if component is destroyed after every async
-
-  cameraEnhancer = await (pCameraEnhancer || CameraEnhancer.createInstance(cameraView));
-  if(isDestroyed){ return; }
-
-  // Get default UI and append it to DOM.
-  cameraViewContainer.append(cameraView.getUIElement());
-}
-
-async beforeUnmount(){
-  isDestroyed = true;
-  await pCameraEnhancer;
-  cameraEnhancer?.dispose();
-  cameraEnhancer = null;
-}
-
-// usage example in a tsx/jsx component
-<div ref={cameraViewContainer}></div>
-```
-
-### Add [`CaptureVisionRouter`](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/capture-vision-router/capture-vision-router-module.html)
-
-To complete the code, we'll include the [`CaptureVisionRouter`](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/capture-vision-router/capture-vision-router-module.html) and handle it's life cycle similarly.
-
-```ts
-import "../dynamsoft.config";
-import { CameraEnhancer, CameraView } from "dynamsoft-camera-enhancer";
-import { CaptureVisionRouter } from "dynamsoft-capture-vision-router";
-
-let cameraEnhancer;
-let pCameraEnhancer; // promise of cameraEnhancer
-let cvRouter;
-let pCvRouter; // promise of cvRouter
-let isDestroyed = false;
-
-async mount(){
-  // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
-  const cameraView = await CameraView.createInstance();
-  if(isDestroyed){ return; } // Check if component is destroyed after every async
-  
-  cameraEnhancer = await (pCameraEnhancer || CameraEnhancer.createInstance(cameraView));
-  if(isDestroyed){ return; }
-
-  // Get default UI and append it to DOM.
-  cameraViewContainer.append(cameraView.getUIElement());
-
-  // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
-  cvRouter = await (pCvRouter || CaptureVisionRouter.createInstance());
-  if(isDestroyed){ return; }
-
-  cvRouter.setInput(cameraEnhancer);
-
-  // Define a callback for results.
-  cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => {
-    if (!result.barcodeResultItems.length) return;
-    for (let item of result.barcodeResultItems) {
-      console.log(item.text); // output the decoded barcode text
-    }
-  }});
-
-  // Filter out unchecked and duplicate results.
-  const filter = new MultiFrameResultCrossFilter();
-  // Filter out unchecked barcodes.
-  filter.enableResultCrossVerification("barcode", true);
-  // Filter out duplicate barcodes within 3 seconds.
-  filter.enableResultDeduplication("barcode", true);
-  await cvRouter.addResultFilter(filter);
-  if(isDestroyed){ return; }
-
-  // Open camera and start scanning single barcode.
-  await cameraEnhancer.open();
-  if(isDestroyed){ return; }
-
-  await cvRouter.startCapturing("ReadSingleBarcode");
-}
-
-async beforeUnmount(){
-  isDestroyed = true;
-
-  await pCvRouter;
-  cvRouter?.dispose();
-  cvRouter = null;
-
-  await pCameraEnhancer;
-  cameraEnhancer?.dispose();
-  cameraEnhancer = null;
-}
-
-// usage example in a tsx/jsx component
-<div ref={cameraViewContainer}></div>
-```
-
-### Final Notes
-
-Decoding video is slightly more complex than reading image, but by following the steps above, you can manage resources effectively and ensure your component runs smoothly.
-
-Again, if you don't want to go into detail, please refer to the [DBRJS sample](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world) directly.
-
-Note that since we have taken over native rendering, avoid changing the UI through the framework within decoding video component; instead, make changes in its parent component.
-
-Once this component is rendered, decoding will start. You can control when decoding occurs by not rendering this component until needed.