npm - dynamsoft-barcode-reader-bundle - Versions diffs - 10.2.1000-beta-202405192313 → 10.2.1000 - Mend

dynamsoft-barcode-reader-bundle 10.2.1000-beta-202405192313 → 10.2.1000

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.html +81 -118
package/README.md +79 -128
package/dist/dbr.bundle.js +2 -2
package/dist/dbr.bundle.mjs +2 -2
package/dist/dbr.no-content-bundle.esm.js +2 -2
package/package.json +2 -2

package/README.html CHANGED Viewed

@@ -300,20 +300,20 @@
 <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"cameraViewContainer"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 100%; height: 60vh"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">textarea</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"results"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 100%; min-height: 10vh; font-size: 3vmin; overflow: auto"</span> <span class="hljs-attr">disabled</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">textarea</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.2.10/dist/dbr.bundle.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.2.1000/dist/dbr.bundle.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
   Dynamsoft.License.LicenseManager.initLicense(<span class="hljs-string">"DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"</span>);
   Dynamsoft.Core.CoreModule.loadWasm([<span class="hljs-string">"dbr"</span>]);
   <span class="hljs-function">(<span class="hljs-params"><span class="hljs-keyword">async</span> (</span>) =&gt;</span> {
-    <span class="hljs-keyword">let</span> router = <span class="hljs-keyword">await</span> Dynamsoft.CVR.CaptureVisionRouter.createInstance();
+    <span class="hljs-keyword">let</span> cvRouter = <span class="hljs-keyword">await</span> Dynamsoft.CVR.CaptureVisionRouter.createInstance();
     <span class="hljs-keyword">let</span> view = <span class="hljs-keyword">await</span> Dynamsoft.DCE.CameraView.createInstance();
     <span class="hljs-keyword">let</span> cameraEnhancer = <span class="hljs-keyword">await</span> Dynamsoft.DCE.CameraEnhancer.createInstance(view);
     <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">"#cameraViewContainer"</span>).append(view.getUIElement());
-    router.setInput(cameraEnhancer);
+    cvRouter.setInput(cameraEnhancer);
     <span class="hljs-keyword">const</span> resultsContainer = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">"#results"</span>);
-    router.addResultReceiver({ <span class="hljs-attr">onDecodedBarcodesReceived</span>: <span class="hljs-function">(<span class="hljs-params">result</span>) =&gt;</span> {
+    cvRouter.addResultReceiver({ <span class="hljs-attr">onDecodedBarcodesReceived</span>: <span class="hljs-function">(<span class="hljs-params">result</span>) =&gt;</span> {
       <span class="hljs-keyword">if</span> (result.barcodeResultItems.length &gt; <span class="hljs-number">0</span>) {
         resultsContainer.textContent = <span class="hljs-string">''</span>;
         <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> item <span class="hljs-keyword">of</span> result.barcodeResultItems) {
@@ -325,10 +325,10 @@
     <span class="hljs-keyword">let</span> filter = <span class="hljs-keyword">new</span> Dynamsoft.Utility.MultiFrameResultCrossFilter();
     filter.enableResultCrossVerification(<span class="hljs-string">"barcode"</span>, <span class="hljs-literal">true</span>);
     filter.enableResultDeduplication(<span class="hljs-string">"barcode"</span>, <span class="hljs-literal">true</span>);
-    <span class="hljs-keyword">await</span> router.addResultFilter(filter);
+    <span class="hljs-keyword">await</span> cvRouter.addResultFilter(filter);
     <span class="hljs-keyword">await</span> cameraEnhancer.open();
-    <span class="hljs-keyword">await</span> router.startCapturing(<span class="hljs-string">"ReadSingleBarcode"</span>);
+    <span class="hljs-keyword">await</span> cvRouter.startCapturing(<span class="hljs-string">"ReadSingleBarcode"</span>);
   })();
 </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
@@ -353,29 +353,29 @@
 <ul>
 <li><p><code>Dynamsoft.License.LicenseManager.initLicense()</code>: This method initializes the license for using the SDK in the application. Note that the string "<strong>DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9</strong>" used in this example points to an online license that requires a network connection to work. Read more on <a href="#specify-the-license">Specify the license</a>.</p></li>
 <li><p><code>Dynamsoft.Core.CoreModule.loadWasm(["dbr"])</code>: This is an optional code. Used to load wasm resources in advance, reducing latency between video playing and barcode decoding.</p></li>
-<li><p><code>Dynamsoft.CVR.CaptureVisionRouter.createInstance()</code>: This method creates a <code>CaptureVisionRouter</code> object <code>router</code> which controls the entire process in three steps:</p></li>
+<li><p><code>Dynamsoft.CVR.CaptureVisionRouter.createInstance()</code>: This method creates a <code>CaptureVisionRouter</code> object <code>cvRouter</code> which controls the entire process in three steps:</p></li>
 <li><p><strong>Retrieve Images from the Image Source</strong></p>
 <ul>
-<li><code>router</code> connects to the image source through the <a href="https://www.dynamsoft.com/capture-vision/docs/core/architecture/input.html#image-source-adapter?lang=js">ImageSourceAdapter</a> interface with the method <code>setInput()</code>.<br />
+<li><code>cvRouter</code> connects to the image source through the <a href="https://www.dynamsoft.com/capture-vision/docs/core/architecture/input.html#image-source-adapter?lang=js">ImageSourceAdapter</a> interface with the method <code>setInput()</code>.<br />
 <code>js
-router.setInput(cameraEnhancer);
+cvRouter.setInput(cameraEnhancer);
 </code><br />
 &gt; The image source in our case is a <a href="https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/user-guide/index.html">CameraEnhancer</a> object created with <code>Dynamsoft.DCE.CameraEnhancer.createInstance(view)</code></li></ul></li>
 <li><p><strong>Coordinate Image-Processing Tasks</strong></p>
 <ul>
-<li>The coordination happens behind the scenes. <code>router</code> starts the process by specifying a preset template "ReadSingleBarcode" in the method <code>startCapturing()</code>.<br />
+<li>The coordination happens behind the scenes. <code>cvRouter</code> starts the process by specifying a preset template "ReadSingleBarcode" in the method <code>startCapturing()</code>.<br />
 <code>js
-router.startCapturing("ReadSingleBarcode");
+cvRouter.startCapturing("ReadSingleBarcode");
 </code></li></ul></li>
 <li><p><strong>Dispatch Results to Listening Objects</strong></p>
 <ul>
-<li>The processing results are returned through the <a href="https://www.dynamsoft.com/capture-vision/docs/core/architecture/output.html#captured-result-receiver?lang=js">CapturedResultReceiver</a> interface. The <code>CapturedResultReceiver</code> object is registered to <code>router</code> via the method <code>addResultReceiver()</code>. For more information, please check out <a href="#register-a-result-receiver">Register a result receiver</a>.<br />
+<li>The processing results are returned through the <a href="https://www.dynamsoft.com/capture-vision/docs/core/architecture/output.html#captured-result-receiver?lang=js">CapturedResultReceiver</a> interface. The <code>CapturedResultReceiver</code> object is registered to <code>cvRouter</code> via the method <code>addResultReceiver()</code>. For more information, please check out <a href="#register-a-result-receiver">Register a result receiver</a>.<br />
 <code>js
-router.addResultReceiver({/*The-CapturedResultReceiver-Object"*/});
+cvRouter.addResultReceiver({/*The-CapturedResultReceiver-Object"*/});
 </code></li>
-<li>Also note that reading from video is extremely fast and there could be many duplicate results. We can use a <a href="#filter-the-results-important">filter</a> with result deduplication enabled to filter out the duplicate results. The object is registered to <code>router</code> via the method <code>addResultFilter()</code>.<br />
+<li>Also note that reading from video is extremely fast and there could be many duplicate results. We can use a <a href="#filter-the-results-important">filter</a> with result deduplication enabled to filter out the duplicate results. The object is registered to <code>cvRouter</code> via the method <code>addResultFilter()</code>.<br />
 <code>js
-router.addResultFilter(filter);
+cvRouter.addResultFilter(filter);
 </code></li></ul></li>
 </ul>
 <blockquote>
@@ -408,44 +408,36 @@ router.addResultFilter(filter);
 <li><code>dce.js</code> comprises classes that offer camera support and basic user interface functionalities.</li>
 </ul>
 <p>For simplification, starting from version 10.0.21, we introduced <code>dbr.bundle.js</code>. Including this file is equivalent to incorporating all six packages.</p>
+<ul>
+<li>dynamsoft-core@3.2.30/dist/core.js</li>
+<li>dynamsoft-license@3.2.21/dist/license.js</li>
+<li>dynamsoft-utility@1.2.20/dist/utility.js</li>
+<li>dynamsoft-barcode-reader@10.2.10/dist/dbr.js</li>
+<li>dynamsoft-capture-vision-router@2.2.30/dist/cvr.js</li>
+<li>dynamsoft-camera-enhancer@4.0.3/dist/dce.js</li>
+</ul>
+<p>Equivalent to</p>
+<ul>
+<li>dynamsoft-barcode-reader-bundle@10.2.1000/dist/dbr.bundle.js</li>
+</ul>
+<p>In the following chapters, we will use <code>dbr.bundle.js</code>.</p>
 <h4 id="use-a-public-cdn">Use a public CDN</h4>
 <p>The simplest way to include the SDK is to use either the <a href="https://jsdelivr.com/">jsDelivr</a> or <a href="https://unpkg.com/">UNPKG</a> CDN. The "hello world" example above uses <strong>jsDelivr</strong>.</p>
 <ul>
 <li>jsDelivr</li>
 </ul>
-<pre><code class="hljs html language-html">  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.10/dist/core.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.10/dist/license.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-utility@1.2.10/dist/utility.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.2.10/dist/dbr.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.10/dist/cvr.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.2/dist/dce.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
-</code></pre>
-<p>Or just</p>
-<pre><code class="hljs html language-html">  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.2.10/dist/dbr.bundle.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
+<pre><code class="hljs html language-html">  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.2.1000/dist/dbr.bundle.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
 </code></pre>
 <ul>
-<li>UNPKG  </li>
+<li>UNPKG</li>
 </ul>
-<pre><code class="hljs html language-html">  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/dynamsoft-core@3.2.10/dist/core.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/dynamsoft-license@3.2.10/dist/license.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/dynamsoft-utility@1.2.10/dist/utility.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/dynamsoft-barcode-reader@10.2.10/dist/dbr.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/dynamsoft-capture-vision-router@2.2.10/dist/cvr.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/dynamsoft-camera-enhancer@4.0.2/dist/dce.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
+<pre><code class="hljs html language-html">  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/dynamsoft-barcode-reader-bundle@10.2.1000/dist/dbr.bundle.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
 </code></pre>
-<p>Or just</p>
-<pre><code class="hljs html language-html">  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/dynamsoft-barcode-reader@10.2.10/dist/dbr.bundle.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
-</code></pre>
-<p>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.</p>
 <ul>
-<li>https://download2.dynamsoft.com/packages/dynamsoft-core@3.2.10/dist/core.js</li>
-<li>https://download2.dynamsoft.com/packages/dynamsoft-license@3.2.10/dist/license.js</li>
-<li>https://download2.dynamsoft.com/packages/dynamsoft-utility@1.2.10/dist/utility.js</li>
-<li>https://download2.dynamsoft.com/packages/dynamsoft-barcode-reader@10.2.10/dist/dbr.js</li>
-<li>https://download2.dynamsoft.com/packages/dynamsoft-capture-vision-router@2.2.10/dist/cvr.js</li>
-<li>https://download2.dynamsoft.com/packages/dynamsoft-camera-enhancer@4.0.2/dist/dce.js</li>
-<li>or bundle: https://download2.dynamsoft.com/packages/dynamsoft-barcode-reader@10.2.10/dist/dbr.bundle.js</li>
+<li>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.</li>
 </ul>
+<pre><code class="hljs html language-html">  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://download2.dynamsoft.com/packages/dynamsoft-barcode-reader-bundle@10.2.1000/dist/dbr.bundle.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
+</code></pre>
 <p>However, please <strong>DO NOT</strong> use <code>download2.dynamsoft.com</code> resources in a production application as they are for temporary testing purposes only. Instead, you can try hosting the SDK yourself.</p>
 <h4 id="host-the-sdk-yourself-optional">Host the SDK yourself (optional)</h4>
 <p>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.</p>
@@ -455,24 +447,14 @@ router.addResultFilter(filter);
 <p><a href="https://www.dynamsoft.com/barcode-reader/downloads/?ver=10.2.10&utm_source=npm&product=dbr&package=js">Download Dynamsoft Barcode Reader JavaScript Package</a></p></li>
 <li><p>npm</p></li>
 </ul>
-<pre><code class="hljs cmd language-cmd">  npm i dynamsoft-core@<span class="hljs-number">3</span>.<span class="hljs-number">2</span>.<span class="hljs-number">10</span> -E
-  npm i dynamsoft-license@<span class="hljs-number">3</span>.<span class="hljs-number">2</span>.<span class="hljs-number">10</span> -E
-  npm i dynamsoft-utility@<span class="hljs-number">1</span>.<span class="hljs-number">2</span>.<span class="hljs-number">10</span> -E
-  npm i dynamsoft-barcode-reader@<span class="hljs-number">10</span>.<span class="hljs-number">2</span>.<span class="hljs-number">10</span> -E
-  npm i dynamsoft-capture-vision-router@<span class="hljs-number">2</span>.<span class="hljs-number">2</span>.<span class="hljs-number">10</span> -E
-  npm i dynamsoft-camera-enhancer@<span class="hljs-number">4</span>.<span class="hljs-number">0</span>.<span class="hljs-number">2</span> -E
+<pre><code class="hljs cmd language-cmd">  npm i dynamsoft-barcode-reader-bundle@<span class="hljs-number">10</span>.<span class="hljs-number">2</span>.<span class="hljs-number">1000</span> -E
   npm i dynamsoft-capture-vision-std@<span class="hljs-number">1</span>.<span class="hljs-number">2</span>.<span class="hljs-number">0</span> -E
   npm i dynamsoft-image-processing@<span class="hljs-number">2</span>.<span class="hljs-number">2</span>.<span class="hljs-number">10</span> -E
 </code></pre>
 <ul>
 <li>yarn</li>
 </ul>
-<pre><code class="hljs cmd language-cmd">  yarn add dynamsoft-core@<span class="hljs-number">3</span>.<span class="hljs-number">2</span>.<span class="hljs-number">10</span> -E
-  yarn add dynamsoft-license@<span class="hljs-number">3</span>.<span class="hljs-number">2</span>.<span class="hljs-number">10</span> -E
-  yarn add dynamsoft-utility@<span class="hljs-number">1</span>.<span class="hljs-number">2</span>.<span class="hljs-number">10</span> -E
-  yarn add dynamsoft-barcode-reader@<span class="hljs-number">10</span>.<span class="hljs-number">2</span>.<span class="hljs-number">10</span> -E
-  yarn add dynamsoft-capture-vision-router@<span class="hljs-number">2</span>.<span class="hljs-number">2</span>.<span class="hljs-number">10</span> -E
-  yarn add dynamsoft-camera-enhancer@<span class="hljs-number">4</span>.<span class="hljs-number">0</span>.<span class="hljs-number">2</span> -E
+<pre><code class="hljs cmd language-cmd">  yarn add dynamsoft-barcode-reader-bundle@<span class="hljs-number">10</span>.<span class="hljs-number">2</span>.<span class="hljs-number">1000</span> -E
   yarn add dynamsoft-capture-vision-std@<span class="hljs-number">1</span>.<span class="hljs-number">2</span>.<span class="hljs-number">0</span> -E
   yarn add dynamsoft-image-processing@<span class="hljs-number">2</span>.<span class="hljs-number">2</span>.<span class="hljs-number">10</span> -E
 </code></pre>
@@ -480,28 +462,12 @@ router.addResultFilter(filter);
 <ul>
 <li>From the website</li>
 </ul>
-<pre><code class="hljs html language-html">  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./dynamsoft/distributables/dynamsoft-core@3.2.10/dist/core.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./dynamsoft/distributables/dynamsoft-license@3.2.10/dist/license.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./dynamsoft/distributables/dynamsoft-utility@1.2.10/dist/utility.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./dynamsoft/distributables/dynamsoft-barcode-reader@10.2.10/dist/dbr.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./dynamsoft/distributables/dynamsoft-capture-vision-router@2.2.10/dist/cvr.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./dynamsoft/distributables/dynamsoft-camera-enhancer@4.0.2/dist/dce.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
-</code></pre>
-<p>Or just</p>
-<pre><code class="hljs html language-html">  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./dynamsoft/distributables/dynamsoft-barcode-reader@10.2.10/dist/dbr.bundle.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
+<pre><code class="hljs html language-html">  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./dynamsoft/distributables/dynamsoft-barcode-reader-bundle@10.2.1000/dist/dbr.bundle.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
 </code></pre>
 <ul>
 <li>yarn or npm</li>
 </ul>
-<pre><code class="hljs html language-html">  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/node_modules/dynamsoft-core/dist/core.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/node_modules/dynamsoft-license/dist/license.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/node_modules/dynamsoft-utility/dist/utility.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/node_modules/dynamsoft-barcode-reader/dist/dbr.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/node_modules/dynamsoft-capture-vision-router/dist/cvr.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/node_modules/dynamsoft-camera-enhancer/dist/dce.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
-</code></pre>
-<p>Or just</p>
-<pre><code class="hljs html language-html">  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/node_modules/dynamsoft-barcode-reader/dist/dbr.bundle.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
+<pre><code class="hljs html language-html">  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/node_modules/dynamsoft-barcode-reader-bundle@10.2.1000/dist/dbr.bundle.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
 </code></pre>
 <p><em>Note</em>:</p>
 <ul>
@@ -554,9 +520,9 @@ router.addResultFilter(filter);
 <p>To use the SDK, we first create a <code>CaptureVisionRouter</code> object.</p>
 <pre><code class="hljs javascript language-javascript">Dynamsoft.License.LicenseManager.initLicense(<span class="hljs-string">"DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"</span>);
-<span class="hljs-keyword">let</span> router = <span class="hljs-literal">null</span>;
+<span class="hljs-keyword">let</span> cvRouter = <span class="hljs-literal">null</span>;
 <span class="hljs-keyword">try</span> {
-    router = <span class="hljs-keyword">await</span> Dynamsoft.CVR.CaptureVisionRouter.createInstance();
+    cvRouter = <span class="hljs-keyword">await</span> Dynamsoft.CVR.CaptureVisionRouter.createInstance();
 } <span class="hljs-keyword">catch</span> (ex) {
     <span class="hljs-built_in">console</span>.error(ex);
 }
@@ -565,26 +531,26 @@ router.addResultFilter(filter);
 <p>When creating a <code>CaptureVisionRouter</code> 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 <code>pRouter</code> in the following code:</p>
 <pre><code class="hljs javascript language-javascript">Dynamsoft.License.LicenseManager.initLicense(<span class="hljs-string">"DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"</span>);
-<span class="hljs-keyword">let</span> pRouter = <span class="hljs-literal">null</span>; <span class="hljs-comment">// promise of router</span>
-<span class="hljs-keyword">let</span> router = <span class="hljs-literal">null</span>;
+<span class="hljs-keyword">let</span> pCvRouter = <span class="hljs-literal">null</span>; <span class="hljs-comment">// promise of cvRouter</span>
+<span class="hljs-keyword">let</span> cvRouter = <span class="hljs-literal">null</span>;
 <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'btn-scan'</span>).addEventListener(<span class="hljs-string">'click'</span>, <span class="hljs-keyword">async</span> () =&gt; {
     <span class="hljs-keyword">try</span> {
-        router = <span class="hljs-keyword">await</span> (pRouter = pRouter || Dynamsoft.CVR.CaptureVisionRouter.createInstance());
+        cvRouter = <span class="hljs-keyword">await</span> (pCvRouter = pCvRouter || Dynamsoft.CVR.CaptureVisionRouter.createInstance());
     } <span class="hljs-keyword">catch</span> (ex) {
         <span class="hljs-built_in">console</span>.error(ex);
     }
 });
 </code></pre>
 <h4 id="connect-an-image-source">Connect an image source</h4>
-<p>The <code>CaptureVisionRouter</code> object, denoted as <code>router</code>, 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 <code>CameraEnhancer</code> object, identified as <code>cameraEnhancer</code>, which is specifically designed to capture image frames from the video feed and subsequently forward them to <code>router</code>.</p>
+<p>The <code>CaptureVisionRouter</code> object, denoted as <code>cvRouter</code>, 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 <code>CameraEnhancer</code> object, identified as <code>cameraEnhancer</code>, which is specifically designed to capture image frames from the video feed and subsequently forward them to <code>cvRouter</code>.</p>
 <p>To enable video streaming on the webpage, we create a <code>CameraView</code> object referred to as <code>view</code>, which is then passed to <code>cameraEnhancer</code>, and its content is displayed on the webpage.</p>
 <pre><code class="hljs html language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"cameraViewContainer"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 100%; height: 100vh"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
 <pre><code class="hljs javascript language-javascript"><span class="hljs-keyword">let</span> view = <span class="hljs-keyword">await</span> Dynamsoft.DCE.CameraView.createInstance();
 <span class="hljs-keyword">let</span> cameraEnhancer = <span class="hljs-keyword">await</span> Dynamsoft.DCE.CameraEnhancer.createInstance(view);
 <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">"#cameraViewContainer"</span>).append(view.getUIElement());
-router.setInput(cameraEnhancer);
+cvRouter.setInput(cameraEnhancer);
 </code></pre>
 <h4 id="register-a-result-receiver">Register a result receiver</h4>
 <p>Once the image processing is complete, the results are sent to all the registered <code>CapturedResultReceiver</code> objects. Each <code>CapturedResultReceiver</code> 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 <code>onDecodedBarcodesReceived</code>:</p>
@@ -594,20 +560,20 @@ resultReceiver.onDecodedBarcodesReceived = <span class="hljs-function">(<span cl
   <span class="hljs-keyword">if</span> (result.barcodeResultItems.length &gt; <span class="hljs-number">0</span>) {
     resultsContainer.textContent = <span class="hljs-string">''</span>;
     <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> item <span class="hljs-keyword">of</span> result.barcodeResultItems) {
-      <span class="hljs-comment">// In this example, the barcode result is shown on the page beneath the video</span>
+      <span class="hljs-comment">// In this example, the barcode results are displayed on the page below the video.</span>
       resultsContainer.textContent += <span class="hljs-string">`<span class="hljs-subst">${item.formatString}</span>: <span class="hljs-subst">${item.text}</span>\n\n`</span>;
     }
   }
 };
-router.addResultReceiver(resultReceiver);
+cvRouter.addResultReceiver(resultReceiver);
 </code></pre>
 <p>You can also write code like this. It is the same.</p>
 <pre><code class="hljs javascript language-javascript"><span class="hljs-keyword">const</span> resultsContainer = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">"#results"</span>);
-router.addResultReceiver({ <span class="hljs-attr">onDecodedBarcodesReceived</span>: <span class="hljs-function">(<span class="hljs-params">result</span>) =&gt;</span> {
+cvRouter.addResultReceiver({ <span class="hljs-attr">onDecodedBarcodesReceived</span>: <span class="hljs-function">(<span class="hljs-params">result</span>) =&gt;</span> {
   <span class="hljs-keyword">if</span> (result.barcodeResultItems.length &gt; <span class="hljs-number">0</span>) {
     resultsContainer.textContent = <span class="hljs-string">''</span>;
     <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> item <span class="hljs-keyword">of</span> result.barcodeResultItems) {
-      <span class="hljs-comment">// In this example, the barcode result is shown on the page beneath the video</span>
+      <span class="hljs-comment">// In this example, the barcode results are displayed on the page below the video.</span>
       resultsContainer.textContent += <span class="hljs-string">`<span class="hljs-subst">${item.formatString}</span>: <span class="hljs-subst">${item.text}</span>\n\n`</span>;
     }
   }
@@ -617,15 +583,15 @@ router.addResultReceiver({ <span class="hljs-attr">onDecodedBarcodesReceived</sp
 <h4 id="start-the-process">Start the process</h4>
 <p>With the setup now complete, we can proceed to process the images in two straightforward steps:</p>
 <ol>
-<li>Initiate the image source to commence image acquisition. In our scenario, we invoke the <code>open()</code> method on <code>cameraEnhancer</code> to initiate video streaming and simultaneously initiate the collection of images. These collected images will be dispatched to <code>router</code> as per its request.</li>
+<li>Initiate the image source to commence image acquisition. In our scenario, we invoke the <code>open()</code> method on <code>cameraEnhancer</code> to initiate video streaming and simultaneously initiate the collection of images. These collected images will be dispatched to <code>cvRouter</code> as per its request.</li>
 <li>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.</li>
 </ol>
 <pre><code class="hljs javascript language-javascript"><span class="hljs-keyword">await</span> cameraEnhancer.open();
-<span class="hljs-keyword">await</span> router.startCapturing(<span class="hljs-string">"ReadSingleBarcode"</span>);
+<span class="hljs-keyword">await</span> cvRouter.startCapturing(<span class="hljs-string">"ReadSingleBarcode"</span>);
 </code></pre>
 <p><em>Note</em>:</p>
 <ul>
-<li><code>router</code> is engineered to consistently request images from the image source.</li>
+<li><code>cvRouter</code> is engineered to consistently request images from the image source.</li>
 <li>Various preset templates are at your disposal for barcode reading:</li>
 </ul>
 <table>
@@ -672,39 +638,36 @@ router.addResultReceiver({ <span class="hljs-attr">onDecodedBarcodesReceived</sp
 <p>When making adjustments to some basic tasks, we often only need to modify <a href="https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/capture-vision-router/interfaces/simplified-capture-vision-settings.html">SimplifiedCaptureVisionSettings</a>.</p>
 <h5 id="change-barcode-settings">Change barcode settings</h5>
 <p>The preset templates can be updated to meet different requirements. For example, the following code limits the barcode format to QR code.</p>
-<pre><code class="hljs javascript language-javascript"><span class="hljs-keyword">let</span> settings = <span class="hljs-keyword">await</span> router.getSimplifiedSettings(<span class="hljs-string">"ReadSingleBarcode"</span>);
+<pre><code class="hljs javascript language-javascript"><span class="hljs-keyword">let</span> settings = <span class="hljs-keyword">await</span> cvRouter.getSimplifiedSettings(<span class="hljs-string">"ReadSingleBarcode"</span>);
 settings.barcodeSettings.barcodeFormatIds =
   Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
-<span class="hljs-keyword">await</span> router.updateSettings(<span class="hljs-string">"ReadSingleBarcode"</span>, settings);
-<span class="hljs-keyword">await</span> router.startCapturing(<span class="hljs-string">"ReadSingleBarcode"</span>);
+<span class="hljs-keyword">await</span> cvRouter.updateSettings(<span class="hljs-string">"ReadSingleBarcode"</span>, settings);
+<span class="hljs-keyword">await</span> cvRouter.startCapturing(<span class="hljs-string">"ReadSingleBarcode"</span>);
 </code></pre>
 <p>For a list of adjustable barcode settings, check out <a href="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/interfaces/simplified-barcode-reader-settings.html">SimplifiedBarcodeReaderSettings</a>.</p>
 <h5 id="retrieve-the-original-image">Retrieve the original image</h5>
 <p>Additionally, we have the option to modify the template to retrieve the original image containing the barcode.</p>
-<pre><code class="hljs javascript language-javascript"><span class="hljs-keyword">let</span> settings = <span class="hljs-keyword">await</span> router.getSimplifiedSettings(<span class="hljs-string">"ReadSingleBarcode"</span>);
+<pre><code class="hljs javascript language-javascript"><span class="hljs-keyword">let</span> settings = <span class="hljs-keyword">await</span> cvRouter.getSimplifiedSettings(<span class="hljs-string">"ReadSingleBarcode"</span>);
 settings.capturedResultItemTypes |=
   Dynamsoft.Core.EnumCapturedResultItemType.CRIT_ORIGINAL_IMAGE;
-<span class="hljs-keyword">await</span> router.updateSettings(<span class="hljs-string">"ReadSingleBarcode"</span>, settings);
-<span class="hljs-keyword">await</span> router.startCapturing(<span class="hljs-string">"ReadSingleBarcode"</span>);
+<span class="hljs-keyword">await</span> cvRouter.updateSettings(<span class="hljs-string">"ReadSingleBarcode"</span>, settings);
+<span class="hljs-keyword">await</span> cvRouter.startCapturing(<span class="hljs-string">"ReadSingleBarcode"</span>);
 </code></pre>
 <p>Limit the barcode format to QR code, and retrieve the original image containing the barcode, at the same time.</p>
-<pre><code class="hljs javascript language-javascript"><span class="hljs-keyword">let</span> settings = <span class="hljs-keyword">await</span> router.getSimplifiedSettings(<span class="hljs-string">"ReadSingleBarcode"</span>);
+<pre><code class="hljs javascript language-javascript"><span class="hljs-keyword">let</span> settings = <span class="hljs-keyword">await</span> cvRouter.getSimplifiedSettings(<span class="hljs-string">"ReadSingleBarcode"</span>);
 settings.capturedResultItemTypes =
   Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE |
   Dynamsoft.Core.EnumCapturedResultItemType.CRIT_ORIGINAL_IMAGE;
-<span class="hljs-keyword">await</span> router.updateSettings(<span class="hljs-string">"ReadSingleBarcode"</span>, settings);
-<span class="hljs-keyword">await</span> router.startCapturing(<span class="hljs-string">"ReadSingleBarcode"</span>);
+<span class="hljs-keyword">await</span> cvRouter.updateSettings(<span class="hljs-string">"ReadSingleBarcode"</span>, settings);
+<span class="hljs-keyword">await</span> cvRouter.startCapturing(<span class="hljs-string">"ReadSingleBarcode"</span>);
 </code></pre>
 <p>Please be aware that it is necessary to update the <code>CapturedResultReceiver</code> object to obtain the original image. For instance:</p>
-<pre><code class="hljs javascript language-javascript">resultReceiver.onCapturedResultReceived = <span class="hljs-function">(<span class="hljs-params">result</span>) =&gt;</span> {
-  <span class="hljs-keyword">let</span> barcodes = result.items.filter(<span class="hljs-function">(<span class="hljs-params">item</span>) =&gt;</span>
-      item.type === Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE
-  );
+<pre><code class="hljs javascript language-javascript"><span class="hljs-keyword">const</span> EnumCRIT = Dynamsoft.Core.EnumCapturedResultItemType;
+resultReceiver.onCapturedResultReceived = <span class="hljs-function">(<span class="hljs-params">result</span>) =&gt;</span> {
+  <span class="hljs-keyword">let</span> barcodes = result.items.filter(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> item.type === EnumCRIT.CRIT_BARCODE);
   <span class="hljs-keyword">if</span> (barcodes.length &gt; <span class="hljs-number">0</span>) {
     <span class="hljs-keyword">let</span> image = result.items.filter(
-      <span class="hljs-function">(<span class="hljs-params">item</span>) =&gt;</span>
-        item.type ===
-        Dynamsoft.Core.EnumCapturedResultItemType.CRIT_ORIGINAL_IMAGE
+      <span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> item.type === EnumCRIT.CRIT_ORIGINAL_IMAGE
     )[<span class="hljs-number">0</span>].imageData;
     <span class="hljs-comment">// The image that we found the barcode(s) on.</span>
   }
@@ -715,14 +678,14 @@ settings.capturedResultItemTypes =
 <blockquote>
   <p>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.</p>
 </blockquote>
-<pre><code class="hljs javascript language-javascript"><span class="hljs-keyword">let</span> settings = <span class="hljs-keyword">await</span> router.getSimplifiedSettings(<span class="hljs-string">"ReadSingleBarcode"</span>);
+<pre><code class="hljs javascript language-javascript"><span class="hljs-keyword">let</span> settings = <span class="hljs-keyword">await</span> cvRouter.getSimplifiedSettings(<span class="hljs-string">"ReadSingleBarcode"</span>);
 settings.minImageCaptureInterval = <span class="hljs-number">500</span>;
-<span class="hljs-keyword">await</span> router.updateSettings(<span class="hljs-string">"ReadSingleBarcode"</span>, settings);
-<span class="hljs-keyword">await</span> router.startCapturing(<span class="hljs-string">"ReadSingleBarcode"</span>);
+<span class="hljs-keyword">await</span> cvRouter.updateSettings(<span class="hljs-string">"ReadSingleBarcode"</span>, settings);
+<span class="hljs-keyword">await</span> cvRouter.startCapturing(<span class="hljs-string">"ReadSingleBarcode"</span>);
 </code></pre>
 <h5 id="specify-a-scan-region">Specify a scan region</h5>
 <p>You can use the parameter <code>roi</code> (region of interest) together with the parameter <code>roiMeasuredInPercentage</code> 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:</p>
-<pre><code class="hljs javascript language-javascript"><span class="hljs-keyword">let</span> settings = <span class="hljs-keyword">await</span> router.getSimplifiedSettings(<span class="hljs-string">"ReadSingleBarcode"</span>);
+<pre><code class="hljs javascript language-javascript"><span class="hljs-keyword">let</span> settings = <span class="hljs-keyword">await</span> cvRouter.getSimplifiedSettings(<span class="hljs-string">"ReadSingleBarcode"</span>);
 settings.roiMeasuredInPercentage = <span class="hljs-literal">true</span>;
 settings.roi.points = [
   { <span class="hljs-attr">x</span>: <span class="hljs-number">25</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">25</span> },
@@ -730,8 +693,8 @@ settings.roi.points = [
   { <span class="hljs-attr">x</span>: <span class="hljs-number">75</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">75</span> },
   { <span class="hljs-attr">x</span>: <span class="hljs-number">25</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">75</span> },
 ];
-<span class="hljs-keyword">await</span> router.updateSettings(<span class="hljs-string">"ReadSingleBarcode"</span>, settings);
-<span class="hljs-keyword">await</span> router.startCapturing(<span class="hljs-string">"ReadSingleBarcode"</span>);
+<span class="hljs-keyword">await</span> cvRouter.updateSettings(<span class="hljs-string">"ReadSingleBarcode"</span>, settings);
+<span class="hljs-keyword">await</span> cvRouter.startCapturing(<span class="hljs-string">"ReadSingleBarcode"</span>);
 </code></pre>
 <p>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.</p>
 <blockquote>
@@ -756,10 +719,10 @@ cameraEnhancer.setScanRegion({
 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`.
-<pre><code class="hljs javascript language-javascript"><span class="hljs-keyword">let</span> settings = <span class="hljs-keyword">await</span> router.getSimplifiedSettings(<span class="hljs-string">"ReadSingleBarcode"</span>);
+<pre><code class="hljs javascript language-javascript"><span class="hljs-keyword">let</span> settings = <span class="hljs-keyword">await</span> cvRouter.getSimplifiedSettings(<span class="hljs-string">"ReadSingleBarcode"</span>);
 settings.timeout = <span class="hljs-number">500</span>;
-<span class="hljs-keyword">await</span> router.updateSettings(<span class="hljs-string">"ReadSingleBarcode"</span>, settings);
-<span class="hljs-keyword">await</span> router.startCapturing(<span class="hljs-string">"ReadSingleBarcode"</span>);
+<span class="hljs-keyword">await</span> cvRouter.updateSettings(<span class="hljs-string">"ReadSingleBarcode"</span>, settings);
+<span class="hljs-keyword">await</span> cvRouter.startCapturing(<span class="hljs-string">"ReadSingleBarcode"</span>);
 </code></pre>
 -->
 <h4 id="edit-the-preset-templates-directly">Edit the preset templates directly</h4>
@@ -768,15 +731,15 @@ settings.timeout = <span class="hljs-number">500</span>;
 <li>"/dynamsoft-barcode-reader-js-10.2.10/dynamsoft/resources/barcode-reader/templates/"</li>
 </ul>
 <p>Upon completing the template editing, you can invoke the <code>initSettings</code> method and provide it with the template path as an argument.</p>
-<pre><code class="hljs javascript language-javascript"><span class="hljs-keyword">await</span> router.initSettings(<span class="hljs-string">"PATH-TO-THE-FILE"</span>); <span class="hljs-comment">//e.g. "https://your-website/ReadSingleBarcode.json")</span>
-<span class="hljs-keyword">await</span> router.startCapturing(<span class="hljs-string">"ReadSingleBarcode"</span>); <span class="hljs-comment">// Make sure the name matches one of the CaptureVisionTemplates in the</span>
+<pre><code class="hljs javascript language-javascript"><span class="hljs-keyword">await</span> cvRouter.initSettings(<span class="hljs-string">"PATH-TO-THE-FILE"</span>); <span class="hljs-comment">//e.g. "https://your-website/ReadSingleBarcode.json")</span>
+<span class="hljs-keyword">await</span> cvRouter.startCapturing(<span class="hljs-string">"ReadSingleBarcode"</span>); <span class="hljs-comment">// Make sure the name matches one of the CaptureVisionTemplates in the json file.</span>
 </code></pre>
 <h4 id="filter-the-results-important">Filter the results (Important)</h4>
 <p>While processing video frames, it's common for the same barcode to be detected multiple times. To enhance the user experience, we can use <a href="https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/utility/multi-frame-result-cross-filter.html">MultiFrameResultCrossFilter</a> object, having two options currently at our disposal:</p>
 <h5 id="option-1-verify-results-across-multiple-frames">Option 1: Verify results across multiple frames</h5>
 <pre><code class="hljs js language-js"><span class="hljs-keyword">let</span> filter = <span class="hljs-keyword">new</span> Dynamsoft.Utility.MultiFrameResultCrossFilter();
 filter.enableResultCrossVerification(<span class="hljs-string">"barcode"</span>, <span class="hljs-literal">true</span>);
-<span class="hljs-keyword">await</span> router.addResultFilter(filter);
+<span class="hljs-keyword">await</span> cvRouter.addResultFilter(filter);
 </code></pre>
 <p><em>Note</em>:</p>
 <ul>
@@ -785,7 +748,7 @@ filter.enableResultCrossVerification(<span class="hljs-string">"barcode"</span>,
 <h5 id="option-2-eliminate-redundant-results-detected-within-a-short-time-frame">Option 2: Eliminate redundant results detected within a short time frame</h5>
 <pre><code class="hljs js language-js"><span class="hljs-keyword">let</span> filter = <span class="hljs-keyword">new</span> Dynamsoft.Utility.MultiFrameResultCrossFilter();
 filter.enableResultDeduplication(<span class="hljs-string">"barcode"</span>, <span class="hljs-literal">true</span>);
-<span class="hljs-keyword">await</span> router.addResultFilter(filter);
+<span class="hljs-keyword">await</span> cvRouter.addResultFilter(filter);
 </code></pre>
 <p><em>Note</em>:</p>
 <ul>
@@ -798,14 +761,14 @@ filter.enableResultDeduplication(<span class="hljs-string">"barcode"</span>, <sp
 <p>Under certain circumstances, this duration can be extended with the method <code>setDuplicateForgetTime()</code>.</p>
 <pre><code class="hljs js language-js"><span class="hljs-keyword">let</span> filter = <span class="hljs-keyword">new</span> Dynamsoft.Utility.MultiFrameResultCrossFilter();
 filter.setDuplicateForgetTime(<span class="hljs-number">5000</span>); <span class="hljs-comment">// Extend the duration to 5 seconds.</span>
-<span class="hljs-keyword">await</span> router.addResultFilter(filter);
+<span class="hljs-keyword">await</span> cvRouter.addResultFilter(filter);
 </code></pre>
 <p>You can also enable both options at the same time:</p>
 <pre><code class="hljs js language-js"><span class="hljs-keyword">let</span> filter = <span class="hljs-keyword">new</span> Dynamsoft.Utility.MultiFrameResultCrossFilter();
 filter.enableResultCrossVerification(<span class="hljs-string">"barcode"</span>, <span class="hljs-literal">true</span>);
 filter.enableResultDeduplication(<span class="hljs-string">"barcode"</span>, <span class="hljs-literal">true</span>);
 filter.setDuplicateForgetTime(<span class="hljs-number">5000</span>);
-<span class="hljs-keyword">await</span> router.addResultFilter(filter);
+<span class="hljs-keyword">await</span> cvRouter.addResultFilter(filter);
 </code></pre>
 <h4 id="add-feedback">Add feedback</h4>
 <p>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".</p>
@@ -816,7 +779,7 @@ resultReceiver.onDecodedBarcodesReceived = <span class="hljs-function">(<span cl
     Dynamsoft.DCE.Feedback.beep();
   }
 };
-router.addResultReceiver(resultReceiver);
+cvRouter.addResultReceiver(resultReceiver);
 </code></pre>
 <h3 id="customize-the-ui">Customize the UI</h3>
 <p>The UI is part of the auxiliary SDK "Dynamsoft Camera Enhancer", read more on how to <a href="https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/user-guide/index.html#customize-the-ui">customize the UI</a>.</p>