dynamsoft-barcode-reader-bundle 11.6.3000 → 11.6.3100

package/README.html

@@ -247,7 +247,7 @@
 <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">&quot;camera-view-container&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width: 100%; height: 60vh&quot;</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">&quot;results&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width: 100%; min-height: 10vh; font-size: 3vmin; overflow: auto&quot;</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">&quot;https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.6.3000/dist/dbr.bundle.js&quot;</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">&quot;https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.6.3100/dist/dbr.bundle.js&quot;</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">&quot;DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9&quot;</span>);
   Dynamsoft.Core.CoreModule.loadWasm();
@@ -261,11 +261,9 @@
 
     <span class="hljs-keyword">const</span> resultsContainer = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#results&quot;</span>);
     <span class="hljs-keyword">await</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) {
-        resultsContainer.textContent = <span class="hljs-string">&#x27;&#x27;</span>;
-        <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> item <span class="hljs-keyword">of</span> result.barcodeResultItems) {
-          resultsContainer.textContent += <span class="hljs-string">`<span class="hljs-subst">${item.formatString}</span>: <span class="hljs-subst">${item.text}</span>\n\n`</span>;
-        }
+      resultsContainer.textContent = <span class="hljs-string">&#x27;&#x27;</span>;
+      <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> item <span class="hljs-keyword">of</span> result.barcodeResultItems) {
+        resultsContainer.textContent += <span class="hljs-string">`<span class="hljs-subst">${item.formatString}</span>: <span class="hljs-subst">${item.text}</span>\n\n`</span>;
       }
     }});
 
@@ -282,7 +280,7 @@
 <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span>
 </code></pre>
 <p align="center" style="text-align:center; white-space: normal; ">
-  <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.6.30/basics/hello-world.html" title="Code in Github" style="text-decoration:none;">
+  <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.6.31/basics/hello-world.html" title="Code in Github" style="text-decoration:none;">
     <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg" alt="Code in Github" width="20" height="20" style="width:20px;height:20px;">
   </a>
   &nbsp;
@@ -290,7 +288,7 @@
     <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/jsfiddle.svg" alt="Run via JSFiddle" width="20" height="20" style="width:20px;height:20px;" >
   </a>
   &nbsp;
-  <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/basics/hello-world.html?ver=11.6.30&utm_source=npm" title="Run in Dynamsoft" style="text-decoration:none;">
+  <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/basics/hello-world.html?ver=11.6.31&utm_source=npm" title="Run in Dynamsoft" style="text-decoration:none;">
     <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/svgs/solid/circle-play.svg" alt="Run in Dynamsoft" width="20" height="20" style="width:20px;height:20px;">
   </a>
 </p>
@@ -333,7 +331,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/basics/hello-world.html?ver=11.6.30&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 can run the example deployed to <a href="https://demo.dynamsoft.com/Samples/DBR/JS/basics/hello-world.html?ver=11.6.31&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>
@@ -341,7 +339,7 @@ cvRouter.addResultFilter(filter);
   <p><em>Secure Contexts</em>:</p>
   <p>If you open the web page as <code>http://</code>, our SDK may not work correctly because the <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia">MediaDevices: getUserMedia()</a> and other methods only work in <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts">secure contexts</a> (HTTPS, <code>localhost</code>, <code>127.0.0.1</code>, <code>file://</code>), in some or all supporting browsers.</p>
   <p>Regarding configuring https on your server, these guides for <a href="https://nginx.org/en/docs/http/configuring_https_servers.html">nginx</a> / <a href="https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/">IIS</a> / <a href="https://dzone.com/articles/setting-ssl-tomcat-5-minutes">tomcat</a> / <a href="https://nodejs.org/docs/v0.4.1/api/tls.html">nodejs</a> might help.</p>
-  <p>If the test doesn't go as expected, you can <a href="https://www.dynamsoft.com/company/contact/?ver=11.6.30&utm_source=npm&product=dbr&package=js">contact us</a>.</p>
+  <p>If the test doesn't go as expected, you can <a href="https://www.dynamsoft.com/company/contact/?ver=11.6.31&utm_source=npm&product=dbr&package=js">contact us</a>.</p>
 </blockquote>
 <h2 id="preparing-the-sdk">Preparing the SDK</h2>
 <h3 id="step-1-include-the-sdk">Step 1: Include the SDK</h3>
@@ -355,24 +353,24 @@ cvRouter.addResultFilter(filter);
 <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">&quot;https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.6.3000/dist/dbr.bundle.js&quot;</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">&quot;https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.6.3100/dist/dbr.bundle.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
 </code></pre>
 <ul>
 <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">&quot;https://unpkg.com/dynamsoft-barcode-reader-bundle@11.6.3000/dist/dbr.bundle.js&quot;</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">&quot;https://unpkg.com/dynamsoft-barcode-reader-bundle@11.6.3100/dist/dbr.bundle.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
 </code></pre>
 <!-- - 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.
-<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">&quot;https://download2.dynamsoft.com/packages/dynamsoft-barcode-reader-bundle@11.6.3000/dist/dbr.bundle.js&quot;</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">&quot;https://download2.dynamsoft.com/packages/dynamsoft-barcode-reader-bundle@11.6.3100/dist/dbr.bundle.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
 </code></pre>
 
   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. -->
 <ul>
 <li>In frameworks like React, Vue and Angular, you may want to add the package as a dependency.</li>
 </ul>
-<pre><code class="hljs sh language-sh">  npm i dynamsoft-barcode-reader-bundle@11.6.3000 -E
+<pre><code class="hljs sh language-sh">  npm i dynamsoft-barcode-reader-bundle@11.6.3100 -E
   <span class="hljs-comment"># or</span>
-  yarn add dynamsoft-barcode-reader-bundle@11.6.3000 -E
+  yarn add dynamsoft-barcode-reader-bundle@11.6.3100 -E
 </code></pre>
 <p>NOTE that in frameworks, you need to <a href="#2-optional-specify-the-location-of-the-engine-files">specify the location of the engine files</a>.</p>
 <div class="multi-panel-end"></div>
@@ -381,18 +379,18 @@ cvRouter.addResultFilter(filter);
 <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>
 <ul>
 <li><p>From the website</p>
-<p><a href="https://www.dynamsoft.com/barcode-reader/downloads/?ver=11.6.30&utm_source=npm&product=dbr&package=js">Download Dynamsoft Barcode Reader JavaScript Package</a></p>
+<p><a href="https://www.dynamsoft.com/barcode-reader/downloads/?ver=11.6.31&utm_source=npm&product=dbr&package=js">Download Dynamsoft Barcode Reader JavaScript Package</a></p>
 <p>The resources are located at the path <code>dynamsoft-barcode-reader-js-{version-number}/dist/</code>.</p></li>
 <li><p>From npm</p></li>
 </ul>
-<pre><code class="hljs sh language-sh">  npm i dynamsoft-barcode-reader-bundle@11.6.3000 -E
+<pre><code class="hljs sh language-sh">  npm i dynamsoft-barcode-reader-bundle@11.6.3100 -E
 </code></pre>
 <p>The resources are located at the path <code>node_modules/&lt;pkg&gt;</code>, without <code>@&lt;version&gt;</code>. You must copy "dynamsoft-xxx" packages elsewhere and add <code>@&lt;version&gt;</code>. The <code>&lt;version&gt;</code> can be obtained from <code>package.json</code> of each package. Another thing to do is to <a href="#2-optional-specify-the-location-of-the-engine-files">specify the engineResourcePaths</a> so that the SDK can correctly locate the resources.</p>
 <blockquote>
   <p>Since "node<em>modules" is reserved for Node.js dependencies, and in our case the package is used only as static resources, we recommend either renaming the "node</em>modules" folder or moving the "dynamsoft-" packages to a dedicated folder for static resources in your project to facilitate self-hosting.</p>
 </blockquote>
 <p>You can typically include SDK like this:</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">&quot;path/to/dynamsoft-barcode-reader-bundle@11.6.3000/dist/dbr.bundle.js&quot;</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">&quot;path/to/dynamsoft-barcode-reader-bundle@11.6.3100/dist/dbr.bundle.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
 </code></pre>
 <div class="multi-panel-end"></div>
 <div class="multi-panel-switching-end"></div>
@@ -416,7 +414,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">&quot;DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9&quot;</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=11.6.30&utm_source=npm&product=dbr&package=js" target="_blank">Request a Trial License</a> link.</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=11.6.31&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>
@@ -479,12 +477,10 @@ cvRouter.setInput(cameraEnhancer);
 <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">&quot;#results&quot;</span>);
 <span class="hljs-keyword">const</span> resultReceiver = <span class="hljs-keyword">new</span> Dynamsoft.CVR.CapturedResultReceiver();
 resultReceiver.onDecodedBarcodesReceived  = <span class="hljs-function">(<span class="hljs-params">result</span>) =&gt;</span> {
-  <span class="hljs-keyword">if</span> (result.barcodeResultItems?.length) {
-    resultsContainer.textContent = <span class="hljs-string">&#x27;&#x27;</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 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>;
-    }
+  resultsContainer.textContent = <span class="hljs-string">&#x27;&#x27;</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 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>;
   }
 };
 <span class="hljs-keyword">await</span> cvRouter.addResultReceiver(resultReceiver);
@@ -492,12 +488,10 @@ resultReceiver.onDecodedBarcodesReceived  = <span class="hljs-function">(<span c
 <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">&quot;#results&quot;</span>);
 <span class="hljs-keyword">await</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) {
-    resultsContainer.textContent = <span class="hljs-string">&#x27;&#x27;</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 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>;
-    }
+  resultsContainer.textContent = <span class="hljs-string">&#x27;&#x27;</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 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>;
   }
 }});
 </code></pre>
@@ -588,13 +582,11 @@ settings.barcodeSettings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_Q
   <span class="hljs-attr">onCapturedResultReceived</span>: <span class="hljs-function">(<span class="hljs-params">result</span>) =&gt;</span> {
     <span class="hljs-comment">//Check for barcode results</span>
     <span class="hljs-keyword">let</span> barcodeResultItems = 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> (barcodeResultItems.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 === EnumCRIT.CRIT_ORIGINAL_IMAGE)[<span class="hljs-number">0</span>]?.imageData; <span class="hljs-comment">// Retrieve the original image.</span>
-      <span class="hljs-keyword">if</span> (image) <span class="hljs-built_in">document</span>.body.appendChild(image.toCanvas()); <span class="hljs-comment">// Append the image to DOM.</span>
-      <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> item <span class="hljs-keyword">of</span> barcodeResultItems) {
-        <span class="hljs-comment">// Print each barcode result to the console.</span>
-        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`Barcode: <span class="hljs-subst">${item.text}</span>, Format: <span class="hljs-subst">${item.formatString}</span>`</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 === EnumCRIT.CRIT_ORIGINAL_IMAGE)[<span class="hljs-number">0</span>]?.imageData; <span class="hljs-comment">// Retrieve the original image.</span>
+    <span class="hljs-keyword">if</span> (image) <span class="hljs-built_in">document</span>.body.appendChild(image.toCanvas()); <span class="hljs-comment">// Append the image to DOM.</span>
+    <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> item <span class="hljs-keyword">of</span> barcodeResultItems) {
+      <span class="hljs-comment">// Print each barcode result to the console.</span>
+      <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`Barcode: <span class="hljs-subst">${item.text}</span>, Format: <span class="hljs-subst">${item.formatString}</span>`</span>);
     }
   },
 });
@@ -658,7 +650,7 @@ settings.timeout = <span class="hljs-number">500</span>;
 <h3 id="2-edit-the-preset-templates-directly">2. Edit the preset templates directly</h3>
 <p>The preset templates have many more settings that can be customized to suit your use case best. If you <a href="https://www.dynamsoft.com/barcode-reader/downloads/1000003-confirmation/">download the SDK from Dynamsoft website</a>, you can find the templates under</p>
 <ul>
-<li>"/dynamsoft-barcode-reader-js-11.6.3000/dist/templates/"</li>
+<li>"/dynamsoft-barcode-reader-js-11.6.3100/dist/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> cvRouter.initSettings(<span class="hljs-string">&quot;PATH-TO-THE-FILE&quot;</span>); <span class="hljs-comment">// E.g. &quot;https://your-website/ReadSingleBarcode.json&quot;)</span>
@@ -705,9 +697,7 @@ filter.setDuplicateForgetTime(<span class="hljs-string">&quot;barcode&quot;</spa
 <p>The following code snippet adds a "beep" sound for when a barcode is found:</p>
 <pre><code class="hljs js language-js"><span class="hljs-keyword">const</span> resultReceiver = <span class="hljs-keyword">new</span> Dynamsoft.CVR.CapturedResultReceiver();
 resultReceiver.onDecodedBarcodesReceived = <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>) {
-    Dynamsoft.DCE.Feedback.beep();
-  }
+  Dynamsoft.DCE.Feedback.beep();
 };
 <span class="hljs-keyword">await</span> cvRouter.addResultReceiver(resultReceiver);
 </code></pre>
@@ -732,7 +722,7 @@ uiElement.querySelector(<span class="hljs-string">&#x27;.dce-sel-resolution&#x27
 <h2 id="documentation">Documentation</h2>
 <h3 id="api-reference">API Reference</h3>
 <p>You can check out the detailed documentation about the APIs of the SDK at<br />
-<a href="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=11.6.3000">https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=11.6.3000</a>.</p>
+<a href="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=11.6.3100">https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=11.6.3100</a>.</p>
 <!--  Compatibility is basically not an issue. Pls remove to another place
 
 ## System Requirements

package/README.md

@@ -34,7 +34,7 @@ The complete code of the "Hello World" example is shown below
 <body>
 <div id="camera-view-container" style="width: 100%; height: 60vh"></div>
 <textarea id="results" style="width: 100%; min-height: 10vh; font-size: 3vmin; overflow: auto" disabled></textarea>
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.6.3000/dist/dbr.bundle.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.6.3100/dist/dbr.bundle.js"></script>
 <script>
   Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
   Dynamsoft.Core.CoreModule.loadWasm();
@@ -48,11 +48,9 @@ The complete code of the "Hello World" example is shown below
 
     const resultsContainer = document.querySelector("#results");
     await cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => {
-      if (result.barcodeResultItems?.length) {
-        resultsContainer.textContent = '';
-        for (let item of result.barcodeResultItems) {
-          resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
-        }
+      resultsContainer.textContent = '';
+      for (let item of result.barcodeResultItems) {
+        resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
       }
     }});
 
@@ -70,7 +68,7 @@ The complete code of the "Hello World" example is shown below
 ```
 
 <p align="center" style="text-align:center; white-space: normal; ">
-  <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.6.30/basics/hello-world.html" title="Code in Github" style="text-decoration:none;">
+  <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.6.31/basics/hello-world.html" title="Code in Github" style="text-decoration:none;">
     <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg" alt="Code in Github" width="20" height="20" style="width:20px;height:20px;">
   </a>
   &nbsp;
@@ -78,7 +76,7 @@ The complete code of the "Hello World" example is shown below
     <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/jsfiddle.svg" alt="Run via JSFiddle" width="20" height="20" style="width:20px;height:20px;" >
   </a>
   &nbsp;
-  <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/basics/hello-world.html?ver=11.6.30&utm_source=npm" title="Run in Dynamsoft" style="text-decoration:none;">
+  <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/basics/hello-world.html?ver=11.6.31&utm_source=npm" title="Run in Dynamsoft" style="text-decoration:none;">
     <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/svgs/solid/circle-play.svg" alt="Run in Dynamsoft" width="20" height="20" style="width:20px;height:20px;">
   </a>
 </p>
@@ -123,7 +121,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/basics/hello-world.html?ver=11.6.30&utm_source=npm) or test it with [JSFiddle code editor](https://jsfiddle.net/DynamsoftTeam/csm2f9wb/). 
+You can run the example deployed to [the Dynamsoft Demo Server](https://demo.dynamsoft.com/Samples/DBR/JS/basics/hello-world.html?ver=11.6.31&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.
 
@@ -137,7 +135,7 @@ Alternatively, you can test locally by copying and pasting the code shown above
 >
 > Regarding configuring https on your server, these guides for [nginx](https://nginx.org/en/docs/http/configuring_https_servers.html) / [IIS](https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/) / [tomcat](https://dzone.com/articles/setting-ssl-tomcat-5-minutes) / [nodejs](https://nodejs.org/docs/v0.4.1/api/tls.html) might help.
 >
-> If the test doesn't go as expected, you can [contact us](https://www.dynamsoft.com/company/contact/?ver=11.6.30&utm_source=npm&product=dbr&package=js).
+> If the test doesn't go as expected, you can [contact us](https://www.dynamsoft.com/company/contact/?ver=11.6.31&utm_source=npm&product=dbr&package=js).
 
 ## Preparing the SDK
 
@@ -156,19 +154,19 @@ The simplest way to include the SDK is to use either the [jsDelivr](https://jsde
 - jsDelivr
 
   ```html
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.6.3000/dist/dbr.bundle.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.6.3100/dist/dbr.bundle.js"></script>
   ```
 
 - UNPKG
 
   ```html
-  <script src="https://unpkg.com/dynamsoft-barcode-reader-bundle@11.6.3000/dist/dbr.bundle.js"></script>
+  <script src="https://unpkg.com/dynamsoft-barcode-reader-bundle@11.6.3100/dist/dbr.bundle.js"></script>
   ```
 
 <!-- - In some rare cases (such as some restricted areas), you might not be able to access the CDN. If this happens, you can use the following files for the test.
 
   ```html
-  <script src="https://download2.dynamsoft.com/packages/dynamsoft-barcode-reader-bundle@11.6.3000/dist/dbr.bundle.js"></script>
+  <script src="https://download2.dynamsoft.com/packages/dynamsoft-barcode-reader-bundle@11.6.3100/dist/dbr.bundle.js"></script>
   ```
 
   However, please **DO NOT** use `download2.dynamsoft.com` resources in a production application as they are for temporary testing purposes only. Instead, you can try hosting the SDK yourself. -->
@@ -176,9 +174,9 @@ The simplest way to include the SDK is to use either the [jsDelivr](https://jsde
 - In frameworks like React, Vue and Angular, you may want to add the package as a dependency.
 
   ```sh
-  npm i dynamsoft-barcode-reader-bundle@11.6.3000 -E
+  npm i dynamsoft-barcode-reader-bundle@11.6.3100 -E
   # or
-  yarn add dynamsoft-barcode-reader-bundle@11.6.3000 -E
+  yarn add dynamsoft-barcode-reader-bundle@11.6.3100 -E
   ```
 
   NOTE that in frameworks, you need to [specify the location of the engine files](#2-optional-specify-the-location-of-the-engine-files).
@@ -191,14 +189,14 @@ Besides using the public CDN, you can also download the SDK and host its files o
 
 - From the website
 
-  [Download Dynamsoft Barcode Reader JavaScript Package](https://www.dynamsoft.com/barcode-reader/downloads/?ver=11.6.30&utm_source=npm&product=dbr&package=js)
+  [Download Dynamsoft Barcode Reader JavaScript Package](https://www.dynamsoft.com/barcode-reader/downloads/?ver=11.6.31&utm_source=npm&product=dbr&package=js)
 
   The resources are located at the path `dynamsoft-barcode-reader-js-{version-number}/dist/`.
 
 - From npm
 
   ```sh
-  npm i dynamsoft-barcode-reader-bundle@11.6.3000 -E
+  npm i dynamsoft-barcode-reader-bundle@11.6.3100 -E
   ```
 
   The resources are located at the path `node_modules/<pkg>`, without `@<version>`. You must copy "dynamsoft-xxx" packages elsewhere and add `@<version>`. The `<version>` can be obtained from `package.json` of each package. Another thing to do is to [specify the engineResourcePaths](#2-optional-specify-the-location-of-the-engine-files) so that the SDK can correctly locate the resources.
@@ -207,7 +205,7 @@ Besides using the public CDN, you can also download the SDK and host its files o
 You can typically include SDK like this:
 
 ```html
-<script src="path/to/dynamsoft-barcode-reader-bundle@11.6.3000/dist/dbr.bundle.js"></script>
+<script src="path/to/dynamsoft-barcode-reader-bundle@11.6.3100/dist/dbr.bundle.js"></script>
 ```
 <div class="multi-panel-end"></div>
 
@@ -239,7 +237,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 <a href="https://www.dynamsoft.com/customer/license/trialLicense?ver=11.6.30&utm_source=npm&product=dbr&package=js" target="_blank">Request a Trial License</a> link.
+As previously stated, the key "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" serves as a test license valid for 24 hours, applicable to any newly authorized browser. To test the SDK further, you can request a 30-day free trial license via the <a href="https://www.dynamsoft.com/customer/license/trialLicense?ver=11.6.31&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.
 
@@ -331,12 +329,10 @@ Once the image processing is complete, the results are sent to all the registere
 const resultsContainer = document.querySelector("#results");
 const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver();
 resultReceiver.onDecodedBarcodesReceived  = (result) => {
-  if (result.barcodeResultItems?.length) {
-    resultsContainer.textContent = '';
-    for (let item of result.barcodeResultItems) {
-      // In this example, the barcode results are displayed on the page below the video.
-      resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
-    }
+  resultsContainer.textContent = '';
+  for (let item of result.barcodeResultItems) {
+    // In this example, the barcode results are displayed on the page below the video.
+    resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
   }
 };
 await cvRouter.addResultReceiver(resultReceiver);
@@ -347,12 +343,10 @@ You can also write code like this. It is the same.
 ```javascript
 const resultsContainer = document.querySelector("#results");
 await cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => {
-  if (result.barcodeResultItems?.length) {
-    resultsContainer.textContent = '';
-    for (let item of result.barcodeResultItems) {
-      // In this example, the barcode results are displayed on the page below the video.
-      resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
-    }
+  resultsContainer.textContent = '';
+  for (let item of result.barcodeResultItems) {
+    // In this example, the barcode results are displayed on the page below the video.
+    resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
   }
 }});
 ```
@@ -438,13 +432,11 @@ await cvRouter.addResultReceiver({
   onCapturedResultReceived: (result) => {
     //Check for barcode results
     let barcodeResultItems = result.items.filter((item) => item.type === EnumCRIT.CRIT_BARCODE);
-    if (barcodeResultItems.length > 0) {
-      let image = result.items.filter((item) => item.type === EnumCRIT.CRIT_ORIGINAL_IMAGE)[0]?.imageData; // Retrieve the original image.
-      if (image) document.body.appendChild(image.toCanvas()); // Append the image to DOM.
-      for (let item of barcodeResultItems) {
-        // Print each barcode result to the console.
-        console.log(`Barcode: ${item.text}, Format: ${item.formatString}`);
-      }
+    let image = result.items.filter((item) => item.type === EnumCRIT.CRIT_ORIGINAL_IMAGE)[0]?.imageData; // Retrieve the original image.
+    if (image) document.body.appendChild(image.toCanvas()); // Append the image to DOM.
+    for (let item of barcodeResultItems) {
+      // Print each barcode result to the console.
+      console.log(`Barcode: ${item.text}, Format: ${item.formatString}`);
     }
   },
 });
@@ -526,7 +518,7 @@ await cvRouter.startCapturing("ReadSingleBarcode");
 
 The preset templates have many more settings that can be customized to suit your use case best. If you [download the SDK from Dynamsoft website](https://www.dynamsoft.com/barcode-reader/downloads/1000003-confirmation/), you can find the templates under
 
-* "/dynamsoft-barcode-reader-js-11.6.3000/dist/templates/"
+* "/dynamsoft-barcode-reader-js-11.6.3100/dist/templates/"
 
 Upon completing the template editing, you can invoke the `initSettings` method and provide it with the template path as an argument.
 
@@ -594,9 +586,7 @@ The following code snippet adds a "beep" sound for when a barcode is found:
 ```js
 const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver();
 resultReceiver.onDecodedBarcodesReceived = (result) => {
-  if (result.barcodeResultItems.length > 0) {
-    Dynamsoft.DCE.Feedback.beep();
-  }
+  Dynamsoft.DCE.Feedback.beep();
 };
 await cvRouter.addResultReceiver(resultReceiver);
 ```
@@ -628,7 +618,7 @@ The UI is part of the auxiliary SDK "Dynamsoft Camera Enhancer", read more on ho
 ### API Reference
 
 You can check out the detailed documentation about the APIs of the SDK at
-[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=11.6.3000](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=11.6.3000).
+[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=11.6.3100](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=11.6.3100).
 
 <!--  Compatibility is basically not an issue. Pls remove to another place
 

package/dist/dbr.bundle.d.ts

@@ -3515,6 +3515,15 @@ declare class Camera {
     static _bReopenWhenChangeResolution: boolean;
     _bTryAnotherCameraWhenFailToOpen: boolean;
     _constraints4Fallback: MediaTrackConstraints | true;
+    static _dynamsoftExports: any;
+    /**
+     * In the UI definition file, you can import SDK variables through this interface.
+     */
+    dynamsoftExports: any;
+    /**
+     * You can use this interface to share variables between business logic and UI definition files.
+     */
+    uiContext: any;
     static _arrConstructors: CameraZsFunc[];
     static _arrOnOpen: CameraZsFunc[];
     static _arrBeforeClose: CameraZsFunc[];
@@ -3539,6 +3548,12 @@ declare class Camera {
      * If `value` is a falsy value, `coreShell` is used as `ui`.
      **/
     set ui(value: HTMLElement | DocumentFragment | string | undefined);
+    /**
+     * Compare to `camera.ui = xxx`,
+     * 1. accept url string as value
+     * 2. accept nested tag `<UIInclude src='xxx'>`
+     */
+    setUIAsync(value: HTMLElement | DocumentFragment | string | undefined): Promise<void>;
     /**
      * "closed" | "opening" | "opened" | "paused" | "closing"
      */
@@ -3916,6 +3931,18 @@ declare const stringToHtml: (str: string, config?: {
     internalCss2Blob: boolean;
     insertInternalCss2ExistedSheet?: boolean;
 }) => Node;
+/**
+ * Return `Element` if possible, otherwise return `DocumentFragment`.
+ *
+ * Compare to `stringToHtml`,
+ * 1. accept url string as value
+ * 2. accept nested tag `<UIInclude src='xxx'>`
+ */
+declare const toHtmlAsync: (value: HTMLElement | DocumentFragment | string, config?: {
+    inlineScript2Blob?: boolean;
+    internalCss2Blob: boolean;
+    insertInternalCss2ExistedSheet?: boolean;
+}) => Promise<Node>;
 
 declare class FramePipeline {
     camera?: Camera;
@@ -4164,11 +4191,11 @@ declare namespace Camera {
         isBufferEmpty(): boolean;
         startFetching(): void;
         _pixelFormat: number;
-        getPixelFormat(): number;
-        setPixelFormat(format: number): void;
+        getPixelFormat(): EnumImagePixelFormat;
+        setPixelFormat(format: EnumImagePixelFormat): void;
         _colourChannelUsageType: number;
-        setColourChannelUsageType(format: number): void;
-        getColourChannelUsageType(): number;
+        setColourChannelUsageType(format: EnumColourChannelUsageType): void;
+        getColourChannelUsageType(): EnumColourChannelUsageType;
         setScanRegion(region?: {
             x: number;
             y: number;
@@ -4575,7 +4602,7 @@ declare class ImageDrawingItem extends DrawingItem {
         width: number;
         height: number;
     }, maintainAspectRatio: boolean, drawingStyleId?: any);
-    getImage(): HTMLVideoElement | HTMLCanvasElement | HTMLImageElement;
+    getImage(): HTMLCanvasElement | HTMLImageElement | HTMLVideoElement;
     setImage(image: {
         bytes: Uint8Array;
         width: number;
@@ -4643,16 +4670,6 @@ declare enum EnumEnhancedFeatures {
      */
     EF_TAP_TO_FOCUS = 64
 }
-declare enum EnumPixelFormat {
-    GREY = "grey",
-    GREY32 = "grey32",
-    RGBA = "rgba",
-    RBGA = "rbga",
-    GRBA = "grba",
-    GBRA = "gbra",
-    BRGA = "brga",
-    BGRA = "bgra"
-}
 interface Resolution {
     width: number;
     height: number;
@@ -4718,7 +4735,73 @@ interface Note {
     /** The content of the note, can be of any type. */
     content: any;
 }
+declare enum EnumColourChannelUsageType {
+    /**
+     * Automatically determines how color channels are used.
+     * This option allows the SDK to choose the most appropriate channel usage mode dynamically.
+     */
+    CCUT_AUTO = 0,
+    /**
+     * Utilizes all available color channels in the image for processing.
+     * This mode is ideal for scenarios where full color information is necessary for accurate analysis or processing.
+     */
+    CCUT_FULL_CHANNEL = 1,
+    /**
+     * Processes images using only the Y (luminance) channel, specifically in NV21 format images.
+     * This mode is useful for operations that require analyzing the brightness or intensity of the image while ignoring color information.
+     */
+    CCUT_Y_CHANNEL_ONLY = 2,
+    /**
+     * Uses only the red color channel for processing in RGB images.
+     * This mode is useful for tasks that require analysis or manipulation based on the red component of the image.
+     */
+    CCUT_RGB_R_CHANNEL_ONLY = 3,
+    /**
+     * Uses only the green color channel for processing in RGB images.
+     * This mode is useful for tasks where the green component is most relevant.
+     */
+    CCUT_RGB_G_CHANNEL_ONLY = 4,
+    /**
+     * Uses only the blue color channel for processing in RGB images.
+     * This mode is useful for tasks where the blue component is of particular interest.
+     */
+    CCUT_RGB_B_CHANNEL_ONLY = 5
+}
+declare enum EnumImagePixelFormat {
+    /** Binary format representing images with two colors: 0 for black and 1 for white. */
+    IPF_BINARY = 0,
+    /** Inverted binary format with 0 for white and 1 for black. */
+    IPF_BINARYINVERTED = 1,
+    /** Grayscale format with 8 bits per pixel, allowing for 256 shades of gray. */
+    IPF_GRAYSCALED = 2,
+    /** NV21 format, a YUV planar format used commonly in camera preview and video encoding, with 8-bit Y followed by interleaved V/U values. */
+    IPF_NV21 = 3,
+    /** RGB format with 5 bits for red and blue, and 6 bits for green, stored in a 16-bit structure. */
+    IPF_RGB_565 = 4,
+    /** Similar to RGB_565 but with 5 bits for each color channel, providing uniform color depth across channels in a 16-bit structure. */
+    IPF_RGB_555 = 5,
+    /** Standard 24-bit RGB format with 8 bits per channel. */
+    IPF_RGB_888 = 6,
+    /** 32-bit ARGB format with 8 bits per channel, including an alpha channel for transparency. */
+    IPF_ARGB_8888 = 7,
+    /** High-depth 48-bit RGB format with 16 bits per channel. */
+    IPF_RGB_161616 = 8,
+    /** 64-bit ARGB format with 16 bits per channel, including an alpha channel. */
+    IPF_ARGB_16161616 = 9,
+    /** 32-bit ABGR format with 8 bits per channel, storing color information in reverse order of ARGB_8888. */
+    IPF_ABGR_8888 = 10,
+    /** 64-bit ABGR format with 16 bits per channel, providing high color depth and transparency in the reverse order of ARGB_16161616. */
+    IPF_ABGR_16161616 = 11,
+    /** 24-bit BGR format with 8 bits per channel, where the blue channel is stored first. */
+    IPF_BGR_888 = 12,
+    /** Binary format with 8 bits per pixel, enabling more detailed binary images by allowing for antialiasing or other binary representations. */
+    IPF_BINARY_8 = 13,
+    /** NV12 format, similar to NV21 but with the U and V color components swapped. */
+    IPF_NV12 = 14,
+    /** Inverted binary format with 8 bits per pixel. */
+    IPF_BINARY_8_INVERTED = 15
+}
 
-export { Beep, Camera, CameraEnhancer, CameraEnhancerModule, CameraView, DrawingItem, DrawingLayer, DrawingStyleManager, EnumDrawingItemMediaType, EnumDrawingItemState, EnumEnhancedFeatures, EnumPixelFormat, Feedback, FramePipeline, ImageDrawingItem, LineDrawingItem, QuadDrawingItem, RectDrawingItem, TextDrawingItem, _bufferToCanvas, _distToSegment, _isPointInPolygon, beep, stringToHtml, vibrate };
+export { Beep, Camera, CameraEnhancer, CameraEnhancerModule, CameraView, DrawingItem, DrawingLayer, DrawingStyleManager, EnumDrawingItemMediaType, EnumDrawingItemState, EnumEnhancedFeatures, Feedback, FramePipeline, ImageDrawingItem, LineDrawingItem, QuadDrawingItem, RectDrawingItem, TextDrawingItem, _bufferToCanvas, _distToSegment, _isPointInPolygon, beep, stringToHtml, toHtmlAsync, vibrate };
 export type { CameraInfo, CameraPreset, CameraStatus, CameraZsFunc, DCEFrame, DMMoreMediaTrackCapabilities, DrawingStyle, Note, PlayCallbackInfo, Resolution, TipConfig, VideoDeviceInfo, VideoFrameTag };