dynamsoft-barcode-reader-bundle 10.2.1000 → 10.4.2000-beta-202409252002

package/README.html

@@ -270,12 +270,12 @@
 <p><strong>Popular Examples</strong></p>
 <ul>
 <li>Hello World - <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.2.10/hello-world/hello-world.html">Github</a> | <a href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html?ver=10.2.10&utm_source=npm">Run</a></li>
-<li>Angular App - <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.2.10/hello-world/angular">Github</a> | <a href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/angular/dist/angular/?ver=10.2.10&utm_source=npm">Run</a></li>
+<li>Angular App - <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.2.10/hello-world/angular">Github</a> | <a href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/angular/dist/dbrjs-sample-angular/browser/?ver=10.2.10&utm_source=npm">Run</a></li>
 <li>React App - <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.2.10/hello-world/react">Github</a> | <a href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/react/build/?ver=10.2.10&utm_source=npm">Run</a></li>
 <li>Vue App - <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.2.10/hello-world/vue">Github</a> | <a href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/vue/dist/?ver=10.2.10&utm_source=npm">Run</a></li>
 <li>PWA App - <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.2.10/hello-world/pwa">Github</a> | <a href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/pwa/helloworld-pwa.html?ver=10.2.10&utm_source=npm">Run</a></li>
 <li>WebView in Android and iOS - <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.2.10/hello-world/webview">Github</a></li>
-<li>Read Driver Licenses - <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.2.10/use-case/read-a-drivers-license.html">Github</a> | <a href="https://demo.dynamsoft.com/samples/dbr/js/use-case/read-a-drivers-license.html?ver=10.2.10&utm_source=npm">Run</a></li>
+<li>Read Driver Licenses - <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.2.10/use-case/read-a-drivers-license/index.html">Github</a> | <a href="https://demo.dynamsoft.com/samples/dbr/js/use-case/read-a-drivers-license/index.html?ver=10.2.10&utm_source=npm">Run</a></li>
 <li>Fill A Form - <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.2.10/use-case/fill-a-form-with-barcode-reading.html">Github</a> | <a href="https://demo.dynamsoft.com/samples/dbr/js/use-case/fill-a-form-with-barcode-reading.html?ver=10.2.10&utm_source=npm">Run</a></li>
 <li>Show result information on the video - <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.2.10/use-case/show-result-texts-on-the-video.html">Github</a> | <a href="https://demo.dynamsoft.com/Samples/DBR/JS/use-case/show-result-texts-on-the-video.html?ver=10.2.10&utm_source=npm">Run</a></li>
 <li>Debug Camera and Collect Video Frame - <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.2.10/others/debug">Github</a></li>
@@ -298,7 +298,7 @@
 <pre><code class="hljs html language-html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span>
 <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">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"camera-view-container"</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-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">
@@ -307,9 +307,9 @@
   <span class="hljs-function">(<span class="hljs-params"><span class="hljs-keyword">async</span> (</span>) =&gt;</span> {
     <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());
+    <span class="hljs-keyword">let</span> cameraView = <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(cameraView);
+    <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">"#camera-view-container"</span>).append(cameraView.getUIElement());
     cvRouter.setInput(cameraEnhancer);
 
     <span class="hljs-keyword">const</span> resultsContainer = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">"#results"</span>);
@@ -360,7 +360,7 @@
 <code>js
 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>
+&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(cameraView)</code></li></ul></li>
 <li><p><strong>Coordinate Image-Processing Tasks</strong></p>
 <ul>
 <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 />
@@ -382,7 +382,7 @@ cvRouter.addResultFilter(filter);
   <p>Read more on <a href="https://www.dynamsoft.com/capture-vision/docs/core/architecture/#capture-vision-router">Capture Vision Router</a>.</p>
 </blockquote>
 <h3 id="run-the-example">Run the example</h3>
-<p>You can run the example deployed to <a href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html?ver=10.2.10&utm_source=npm">the Dynamsoft Demo Server</a> or test it with <a href="https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/">JSFiddle code editor</a>. </p>
+<p>You can run the example deployed to <a href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html?ver=10.2.10&utm_source=npm">the Dynamsoft Demo Server</a> or test it with <a href="https://jsfiddle.net/DynamsoftTeam/csm2f9wb/">JSFiddle code editor</a>. </p>
 <p>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.</p>
 <p>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.</p>
 <p>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.</p>
@@ -400,27 +400,14 @@ cvRouter.addResultFilter(filter);
 <h3 id="include-the-sdk">Include the SDK</h3>
 <p>To utilize the SDK, the initial step involves including the corresponding resource files:</p>
 <ul>
-<li><code>core.js</code> encompasses common classes, interfaces, and enumerations that are shared across all Dynamsoft SDKs.</li>
+<li><code>core.js</code> encompasses common classes, interfaces, and enumerations shared across all Dynamsoft SDKs.</li>
 <li><code>license.js</code> introduces the <code>LicenseManager</code> class, which manages the licensing for all Dynamsoft SDKs.</li>
-<li><code>utility.js</code> encompasses auxiliary classes that are shared among all Dynamsoft SDKs.</li>
-<li><code>dbr.js</code> defines interfaces and enumerations specifically tailored to the barcode reader module.</li>
+<li><code>utility.js</code> encompasses auxiliary classes shared among all Dynamsoft SDKs.</li>
+<li><code>dbr.js</code> defines interfaces and enumerations tailored to the barcode reader module.</li>
 <li><code>cvr.js</code> introduces the <code>CaptureVisionRouter</code> class, which governs the entire image processing workflow.</li>
 <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>
+<p>To simplify things, starting from version 10.0.21, we introduced <code>dbr.bundle.js</code>, which combines all six of the above files. 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>
@@ -439,36 +426,36 @@ cvRouter.addResultFilter(filter);
 <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>
-<p>Options to download the SDK:</p>
 <ul>
-<li><p>From the website</p>
-<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>
+<li>In frameworks like React and Vue, you may want to add the package as a dependency.</li>
 </ul>
-<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
+<pre><code class="hljs sh language-sh">  npm i dynamsoft-barcode-reader-bundle@10.2.1000 -E
+  <span class="hljs-comment"># or</span>
+  yarn add dynamsoft-barcode-reader-bundle@10.2.1000 -E
 </code></pre>
+<p>NOTE that in frameworks, you need to <a href="#specify-the-location-of-the-engine-files-optional">specify the engineResourcePaths</a>.</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>
+<p>There are two options for downloading the SDK, and the usage for each is slightly different</p>
 <ul>
-<li>yarn</li>
+<li><p>From the website</p>
+<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>
+<p>The resources are located at path <code>dynamsoft/distributables/&lt;pkg&gt;@&lt;version&gt;</code>, you can typically include it like this:</p></li>
 </ul>
-<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
+<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>
-<p>Depending on how you downloaded the SDK and how you intend to use it, you can typically include it like this</p>
 <ul>
-<li>From the website</li>
+<li>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">"./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>
+<pre><code class="hljs sh language-sh">  npm i dynamsoft-barcode-reader-bundle@10.2.1000 -E
+  <span class="hljs-comment"># Compared with using CDN, you need to set up more resources.</span>
+  npm i dynamsoft-capture-vision-std@1.2.10 -E
+  npm i dynamsoft-image-processing@2.2.30 -E
 </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-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>
+<p>The resources are located at the path <code>node_modules/&lt;pkg&gt;</code>, without <code>@&lt;version&gt;</code>, so the script would be like:</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-bundle/dist/dbr.bundle.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
 </code></pre>
+<p>Since <code>@&lt;version&gt;</code> are missing, you need to <a href="#specify-the-location-of-the-engine-files-optional">specify the engineResourcePaths</a>.</p>
 <p><em>Note</em>:</p>
 <ul>
 <li>Certain legacy web application servers may lack support for the <code>application/wasm</code> mimetype for .wasm files. To address this, you have two options:</li>
@@ -492,7 +479,7 @@ cvRouter.addResultFilter(filter);
 <p>To enable the SDK's functionality, you must provide a valid license. Utilize the API function initLicense to set your license key.</p>
 <pre><code class="hljs javascript language-javascript">Dynamsoft.License.LicenseManager.initLicense(<span class="hljs-string">"DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"</span>);
 </code></pre>
-<p>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=npm&product=dbr&package=js">customer portal</a>.</p>
+<p>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=npm&product=dbr&package=js" target="_blank">Request a Trial License</a> link.</p>
 <blockquote>
   <p>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.</p>
 </blockquote>
@@ -501,13 +488,13 @@ cvRouter.addResultFilter(filter);
 <p>The purpose is to tell the SDK where to find the engine files (*.worker.js, *.wasm.js and *.wasm, etc.). The API is called <code>Dynamsoft.Core.CoreModule.engineResourcePaths</code>:</p>
 <pre><code class="hljs javascript language-javascript"><span class="hljs-comment">//The following code uses the jsDelivr CDN, feel free to change it to your own location of these files</span>
 <span class="hljs-built_in">Object</span>.assign(Dynamsoft.Core.CoreModule.engineResourcePaths, {
-  <span class="hljs-attr">std</span>: <span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.2.0/dist/"</span>,
-  <span class="hljs-attr">dip</span>: <span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.2.10/dist/"</span>,
-  <span class="hljs-attr">core</span>: <span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.10/dist/"</span>,
-  <span class="hljs-attr">license</span>: <span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.10/dist/"</span>,
-  <span class="hljs-attr">cvr</span>: <span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.10/dist/"</span>,
+  <span class="hljs-attr">std</span>: <span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.2.10/dist/"</span>,
+  <span class="hljs-attr">dip</span>: <span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.2.30/dist/"</span>,
+  <span class="hljs-attr">core</span>: <span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.30/dist/"</span>,
+  <span class="hljs-attr">license</span>: <span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.21/dist/"</span>,
+  <span class="hljs-attr">cvr</span>: <span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.30/dist/"</span>,
   <span class="hljs-attr">dbr</span>: <span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.2.10/dist/"</span>,
-  <span class="hljs-attr">dce</span>: <span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.2/dist/"</span>
+  <span class="hljs-attr">dce</span>: <span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.3/dist/"</span>
 });
 </code></pre>
 <h3 id="set-up-and-start-image-processing">Set up and start image processing</h3>
@@ -528,7 +515,7 @@ cvRouter.addResultFilter(filter);
 }
 </code></pre>
 <p><em>Tip</em>:</p>
-<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>
+<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>pCvRouter</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> pCvRouter = <span class="hljs-literal">null</span>; <span class="hljs-comment">// promise of cvRouter</span>
@@ -544,12 +531,12 @@ cvRouter.addResultFilter(filter);
 </code></pre>
 <h4 id="connect-an-image-source">Connect an image source</h4>
 <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>
+<p>To enable video streaming on the webpage, we create a <code>CameraView</code> object referred to as <code>cameraView</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">"camera-view-container"</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());
+<pre><code class="hljs javascript language-javascript"><span class="hljs-keyword">let</span> cameraView = <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(cameraView);
+<span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">"#camera-view-container"</span>).append(cameraView.getUIElement());
 cvRouter.setInput(cameraEnhancer);
 </code></pre>
 <h4 id="register-a-result-receiver">Register a result receiver</h4>
@@ -704,7 +691,7 @@ settings.roi.points = [
   <li>See also: <a href="https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/api-reference/acquisition.html#setscanregion">CameraEnhancer::setScanRegion</a></li>
   </ul>
 </blockquote>
-<pre><code class="hljs javascript language-javascript">cameraEnhancer = <span class="hljs-keyword">await</span> Dynamsoft.DCE.CameraEnhancer.createInstance(view);
+<pre><code class="hljs javascript language-javascript">cameraEnhancer = <span class="hljs-keyword">await</span> Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
 cameraEnhancer.setScanRegion({
   <span class="hljs-attr">x</span>: <span class="hljs-number">25</span>,
   <span class="hljs-attr">y</span>: <span class="hljs-number">25</span>,
@@ -841,6 +828,7 @@ cvRouter.addResultReceiver(resultReceiver);
 <h2 id="next-steps">Next Steps</h2>
 <p>Now that you have got the SDK integrated, you can choose to move forward in the following directions</p>
 <ol>
+<li>Learn how to <a href="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-in-framework.html">Use in Framework</a></li>
 <li>Check out the <a href="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=10.2.10">Official Samples and Demo</a></li>
 <li>Learn about the <a href="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/index.html?ver=10.2.10">APIs of the SDK</a></li>
 </ol>

package/README.md

@@ -55,12 +55,12 @@ In this guide, you will learn step by step on how to integrate the DBR-JS SDK in
 **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=npm)
-- 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/angular/?ver=10.2.10&utm_source=npm)
+- 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=npm)
 - 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=npm)
 - 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=npm)
 - 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=npm)
 - 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.html) \| [Run](https://demo.dynamsoft.com/samples/dbr/js/use-case/read-a-drivers-license.html?ver=10.2.10&utm_source=npm)
+- 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=npm)
 - 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=npm)
 - 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=npm)
 - Debug Camera and Collect Video Frame - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.2.10/others/debug)
@@ -87,7 +87,7 @@ The complete code of the "Hello World" example is shown below
 <!DOCTYPE html>
 <html>
 <body>
-<div id="cameraViewContainer" style="width: 100%; height: 60vh"></div>
+<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>
@@ -96,9 +96,9 @@ The complete code of the "Hello World" example is shown below
   (async () => {
     let cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
 
-    let view = await Dynamsoft.DCE.CameraView.createInstance();
-    let cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(view);
-    document.querySelector("#cameraViewContainer").append(view.getUIElement());
+    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");
@@ -154,7 +154,7 @@ The complete code of the "Hello World" example is shown below
       ```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(view)`
+    > 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
@@ -174,7 +174,7 @@ The complete code of the "Hello World" example is shown below
 
 ### 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=npm) or test it with [JSFiddle code editor](https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/). 
+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=npm) 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.
 
@@ -201,26 +201,14 @@ If the test doesn't go as expected, you can [contact us](https://www.dynamsoft.c
 
 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.
+* `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 that are shared among all Dynamsoft SDKs.
-* `dbr.js` defines interfaces and enumerations specifically tailored to the barcode reader module.
+* `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.
 
-For simplification, starting from version 10.0.21, we introduced `dbr.bundle.js`. Including this file is equivalent to incorporating all six packages.
-
-* dynamsoft-core@3.2.30/dist/core.js
-* dynamsoft-license@3.2.21/dist/license.js
-* dynamsoft-utility@1.2.20/dist/utility.js
-* dynamsoft-barcode-reader@10.2.10/dist/dbr.js
-* dynamsoft-capture-vision-router@2.2.30/dist/cvr.js
-* dynamsoft-camera-enhancer@4.0.3/dist/dce.js
-
-Equivalent to
-* dynamsoft-barcode-reader-bundle@10.2.1000/dist/dbr.bundle.js
-
-In the following chapters, we will use `dbr.bundle.js`.
+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
 
@@ -246,45 +234,48 @@ The simplest way to include the SDK is to use either the [jsDelivr](https://jsde
 
   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.
 
-Options to download the SDK:
+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=npm&product=dbr&package=js)
 
-- npm
-
-  ```cmd
-  npm i dynamsoft-barcode-reader-bundle@10.2.1000 -E
-  npm i dynamsoft-capture-vision-std@1.2.0 -E
-  npm i dynamsoft-image-processing@2.2.10 -E
-  ```
-
-- yarn
+  The resources are located at path `dynamsoft/distributables/<pkg>@<version>`, you can typically include it like this:
 
-  ```cmd
-  yarn add dynamsoft-barcode-reader-bundle@10.2.1000 -E
-  yarn add dynamsoft-capture-vision-std@1.2.0 -E
-  yarn add dynamsoft-image-processing@2.2.10 -E
+  ```html
+  <script src="dynamsoft/distributables/dynamsoft-barcode-reader-bundle@10.2.1000/dist/dbr.bundle.js"></script>
   ```
 
-Depending on how you downloaded the SDK and how you intend to use it, you can typically include it like this
-
-- From the website
+- npm
 
-  ```html
-  <script src="./dynamsoft/distributables/dynamsoft-barcode-reader-bundle@10.2.1000/dist/dbr.bundle.js"></script>
+  ```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
   ```
 
-- yarn or npm
+  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@10.2.1000/dist/dbr.bundle.js"></script>
+  <script src="node_modules/dynamsoft-barcode-reader-bundle/dist/dbr.bundle.js"></script>
   ```
+  
+  Since `@<version>` are missing, you need to [specify the engineResourcePaths](#specify-the-location-of-the-engine-files-optional).
 
 *Note*:
 
@@ -315,7 +306,7 @@ To enable the SDK's functionality, you must provide a valid license. Utilize the
 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 [customer portal](https://www.dynamsoft.com/customer/license/trialLicense?ver=10.2.10&utm_source=npm&product=dbr&package=js).
+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=npm&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.
 
@@ -328,13 +319,13 @@ The purpose is to tell the SDK where to find the engine files (\*.worker.js, \*.
 ```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.0/dist/",
-  dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.2.10/dist/",
-  core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.10/dist/",
-  license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.10/dist/",
-  cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.10/dist/",
+  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.2/dist/"
+  dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.3/dist/"
 });
 ```
 
@@ -366,7 +357,7 @@ try {
 
 *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:
+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");
@@ -387,16 +378,16 @@ document.getElementById('btn-scan').addEventListener('click', async () => {
 
 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 `view`, which is then passed to `cameraEnhancer`, and its content is displayed on the webpage.
+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="cameraViewContainer" style="width: 100%; height: 100vh"></div>
+<div id="camera-view-container" style="width: 100%; height: 100vh"></div>
 ```
 
 ```javascript
-let view = await Dynamsoft.DCE.CameraView.createInstance();
-let cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(view);
-document.querySelector("#cameraViewContainer").append(view.getUIElement());
+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);
 ```
 
@@ -560,7 +551,7 @@ While the code above accomplishes the task, a more effective approach is to rest
 > * 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(view);
+cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
 cameraEnhancer.setScanRegion({
   x: 25,
   y: 25,
@@ -723,5 +714,6 @@ Learn about what are included in each release at [https://www.dynamsoft.com/barc
 
 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.2.10)
-2. 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)
+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)