dynamsoft-barcode-reader-bundle 10.4.2002-beta-202410240008 → 10.4.2002-beta-202410300433

package/README.html

@@ -262,7 +262,6 @@
 <li><a href="#add-feedback">Add feedback</a></li>
 <li><a href="#customize-the-ui">Customize the UI</a></li></ul></li>
 <li><a href="#api-documentation">API Documentation</a></li>
-<li><a href="#system-requirements">System Requirements</a></li>
 <li><a href="#how-to-upgrade">How to Upgrade</a></li>
 <li><a href="#release-notes">Release Notes</a></li>
 <li><a href="#next-steps">Next Steps</a></li>
@@ -273,11 +272,11 @@
 <li>Angular App - <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/hello-world/angular">Github</a></li>
 <li>React App - <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/hello-world/react">Github</a></li>
 <li>Vue App - <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/hello-world/vue">Github</a></li>
-<li>PWA App - <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/hello-world/pwa">Github</a></li>
+<li>PWA App - <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/hello-world/pwa">Github</a> | <a href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/pwa/helloworld-pwa.html?ver=10.4.20&utm_source=npm">Run</a></li>
 <li>WebView in Android and iOS - <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.4.20/hello-world/webview">Github</a></li>
-<li>Read Driver Licenses - <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/use-case/read-a-drivers-license/index.html">Github</a></li>
-<li>Fill A Form - <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/use-case/fill-a-form-with-barcode-reading.html">Github</a></li>
-<li>Show result information on the video - <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/use-case/show-result-texts-on-the-video.html">Github</a></li>
+<li>Read Driver Licenses - <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/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.4.20&utm_source=npm">Run</a></li>
+<li>Fill A Form - <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/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.4.20&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.4.20/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.4.20&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.4.20/others/debug">Github</a></li>
 </ul>
 <p>You can also:</p>
@@ -313,8 +312,8 @@
     cvRouter.setInput(cameraEnhancer);
 
     <span class="hljs-keyword">const</span> resultsContainer = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">"#results"</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>) {
+    cvRouter.addResultReceiver({ <span class="hljs-attr">onCapturedResultReceived</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">''</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>;
@@ -393,28 +392,14 @@ cvRouter.addResultFilter(filter);
 <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>
-<p><em>Note</em>:</p>
-<p>If you open the web page as <code>file:///</code> or <code>http://</code> , the camera may not work correctly because the <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia">MediaDevices: getUserMedia()</a> method only works in secure contexts (HTTPS), in some or all supporting browsers.</p>
-<p>To make sure your web application can access the camera, please configure your web server to support HTTPS. The following links may help.</p>
-<ol>
-<li>NGINX: <a href="https://nginx.org/en/docs/http/configuring_https_servers.html">Configuring HTTPS servers</a></li>
-<li>IIS: <a href="https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/">How to create a Self Signed Certificate in IIS</a></li>
-<li>Tomcat: <a href="https://dzone.com/articles/setting-ssl-tomcat-5-minutes">Setting Up SSL on Tomcat in 5 minutes</a></li>
-<li>Node.js: <a href="https://nodejs.org/docs/v0.4.1/api/tls.html">npm tls</a></li>
-</ol>
-<p>If the test doesn't go as expected, you can <a href="https://www.dynamsoft.com/company/contact/?ver=10.4.20&utm_source=npm&product=dbr&package=js">contact us</a>.</p>
+<blockquote>
+  <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=10.4.20&utm_source=npm&product=dbr&package=js">contact us</a>.</p>
+</blockquote>
 <h2 id="building-your-own-page">Building your own page</h2>
 <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 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 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>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>
@@ -434,7 +419,7 @@ cvRouter.addResultFilter(filter);
 </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>
 <ul>
-<li>In frameworks like React and Vue, you may want to add the package as a dependency.</li>
+<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@10.4.2002 -E
   <span class="hljs-comment"># or</span>
@@ -443,44 +428,33 @@ cvRouter.addResultFilter(filter);
 <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><p>From the website</p>
 <p><a href="https://www.dynamsoft.com/barcode-reader/downloads/?ver=10.4.20&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 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.4.2002/dist/dbr.bundle.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
-</code></pre>
-<ul>
-<li>npm</li>
+<p>The resources are located at path <code>dynamsoft/distributables/&lt;pkg&gt;@&lt;version&gt;</code>.</p></li>
+<li><p>From npm</p></li>
 </ul>
 <pre><code class="hljs sh language-sh">  npm i dynamsoft-barcode-reader-bundle@10.4.2002 -E
   <span class="hljs-comment"># Compared with using CDN, you need to set up more resources.</span>
   npm i dynamsoft-capture-vision-std@1.4.10 -E
   npm i dynamsoft-image-processing@2.4.20 -E
 </code></pre>
-<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>
+<p>The resources are located at the path <code>node_modules/&lt;pkg&gt;</code>, without <code>@&lt;version&gt;</code>. You need to copy "dynamsoft-xxx" packages elsewhere and add <code>@&lt;version&gt;</code>. <code>&lt;version&gt;</code> can be get from <code>package.json</code> of each package.</p>
+<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">"path/to/dynamsoft-barcode-reader-bundle@10.4.2002/dist/dbr.bundle.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
 </code></pre>
-<p>Since the version tags (<code>@&lt;version&gt;</code>) are missing, you need to <a href="#specify-the-location-of-the-engine-files-optional">specify the engineResourcePaths</a> so that the SDK can find the resources correctly.</p>
-<blockquote>
-  <p>To avoid confusion, we suggest renaming "node<em>modules" or moving "dynamsoft-" packages elsewhere for self-hosting, as "node</em>modules" is reserved for Node.js dependencies.</p>
-</blockquote>
 <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>
 </ul>
 <ol>
 <li>Upgrade your web application server to one that supports the <code>application/wasm</code> mimetype.</li>
-<li>Manually define the mimetype on your server. You can refer to the following resources for guidance:<ol>
-<li><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Apache_Configuration_htaccess#media_types_and_character_encodings">Apache</a></li>
-<li><a href="https://docs.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/mimemap">IIS</a></li>
-<li><a href="https://www.nginx.com/resources/wiki/start/topics/examples/full/#mime-types">Nginx</a></li></ol></li>
+<li>Manually define the mimetype on your server. You can refer to the guides for <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Apache_Configuration_htaccess#media_types_and_character_encodings">apache</a> / <a href="https://docs.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/mimemap">IIS</a> / <a href="https://www.nginx.com/resources/wiki/start/topics/examples/full/#mime-types">nginx</a>.</li>
 </ol>
 <ul>
 <li>To work properly, the SDK requires a few engine files, which are relatively large and may take quite a few seconds to download. We recommend that you set a longer cache time for these engine files, to maximize the performance of your web application.</li>
 </ul>
-<pre><code class="hljs cmd language-cmd">  Cache-Control: max-age=<span class="hljs-number">31536000</span>
+<pre><code>hljs   <span class="hljs-keyword">Cache</span><span class="hljs-params">-Control</span>: <span class="hljs-keyword">max</span><span class="hljs-params">-age</span>=<span class="hljs-number">31536000</span>
 </code></pre>
 <p>Reference: <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control">Cache-Control</a>.</p>
 <h3 id="prepare-the-sdk">Prepare the SDK</h3>
@@ -494,11 +468,16 @@ cvRouter.addResultFilter(filter);
   <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>
 <h4 id="specify-the-location-of-the-engine-files-optional">Specify the location of the "engine" files (optional)</h4>
-<p>This is usually only required with frameworks like Angular or React, etc. where the referenced JavaScript files such as <code>cvr.js</code>, <code>dbr.js</code> are compiled into another file.</p>
-<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 as an example, feel free to change it to your own location of these files</span>
+<p>This is usually only required with frameworks like Angular, React or Vue.</p>
+<p>The purpose is to tell the SDK where to find the engine files (*.worker.js, *.wasm.js and *.wasm, etc.).</p>
+<pre><code class="hljs ts language-ts"><span class="hljs-comment">// in framework</span>
+<span class="hljs-keyword">import</span> { CoreModule } <span class="hljs-keyword">from</span> <span class="hljs-string">"dynamsoft-barcode-reader-bundle"</span>;
 CoreModule.engineResourcePaths.rootDirectory = <span class="hljs-string">"https://cdn.jsdelivr.net/npm/"</span>;
 </code></pre>
+<pre><code class="hljs js language-js"><span class="hljs-comment">// in pure js</span>
+Dynamsoft.Core.CoreModule.engineResourcePaths.rootDirectory = <span class="hljs-string">"https://cdn.jsdelivr.net/npm/"</span>;
+</code></pre>
+<p>These code uses the jsDelivr CDN as an example, feel free to change it to your own location.</p>
 <h3 id="set-up-and-start-image-processing">Set up and start image processing</h3>
 <h4 id="preload-the-module">Preload the module</h4>
 <p>The image processing logic is encapsulated within .wasm library files, and these files may require some time for downloading. To enhance the speed, we advise utilizing the following method to preload the libraries.</p>
@@ -542,11 +521,12 @@ CoreModule.engineResourcePaths.rootDirectory = <span class="hljs-string">"https:
 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>
+<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. This time we use <code>onCapturedResultReceived</code>:</p>
+<!--In our particular case, our focus is on identifying barcodes within the images, so it's sufficient to define the callback function `onDecodedBarcodesReceived`:-->
 <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>);
 <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>) {
+resultReceiver.onCapturedResultReceived = <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">''</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>
@@ -558,8 +538,8 @@ 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>);
-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>) {
+cvRouter.addResultReceiver({ <span class="hljs-attr">onCapturedResultReceived</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">''</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>
@@ -653,8 +633,7 @@ settings.capturedResultItemTypes =
 <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"><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">if</span> (result.barcodeResultItems?.length) {
     <span class="hljs-comment">// Use a filter to get the image on which barcodes are found.</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
@@ -775,58 +754,67 @@ resultReceiver.onDecodedBarcodesReceived = <span class="hljs-function">(<span cl
 cvRouter.addResultReceiver(resultReceiver);
 </code></pre>
 <h3 id="customize-the-ui">Customize the UI</h3>
+<pre><code class="hljs javascript language-javascript"><span class="hljs-comment">// Create a CameraView instance with default settings</span>
+<span class="hljs-keyword">let</span> cameraView = <span class="hljs-keyword">await</span> Dynamsoft.DCE.CameraView.createInstance();
+<span class="hljs-comment">// Create a CameraView instance with a specified HTML file path, typically a local or remote URL</span>
+<span class="hljs-keyword">let</span> cameraView1 = <span class="hljs-keyword">await</span> Dynamsoft.DCE.CameraView.createInstance(<span class="hljs-string">'@engineResourcePath/dce.mobile-native.ui.html'</span>);
+<span class="hljs-comment">// Create a CameraView instance within a specified DOM element</span>
+<span class="hljs-keyword">let</span> cameraView2 = <span class="hljs-keyword">await</span> Dynamsoft.DCE.CameraView.createInstance(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'my-ui'</span>));
+<span class="hljs-comment">// Create a CameraView instance using a custom UI file path</span>
+<span class="hljs-keyword">let</span> cameraView3 = <span class="hljs-keyword">await</span> Dynamsoft.DCE.CameraView.createInstance(<span class="hljs-string">'url/to/my/ui.html'</span>);
+
+<span class="hljs-comment">// Get the UI element associated with the cameraView instance</span>
+<span class="hljs-keyword">let</span> uiElement = cameraView.getUIElement();
+<span class="hljs-comment">// Remove the camera selection dropdown from the CameraView's UI element</span>
+uiElement.shadowRoot.querySelector(<span class="hljs-string">'.dce-sel-camera'</span>).remove();
+<span class="hljs-comment">// Remove the resolution selection dropdown from the CameraView's UI element</span>
+uiElement.shadowRoot.querySelector(<span class="hljs-string">'.dce-sel-resolution'</span>).remove();
+</code></pre>
 <p>The UI is part of the auxiliary SDK "Dynamsoft Camera Enhancer", read more on how to <a href="https://www.dynamsoft.com/barcode-reader/docs/core/programming/features/ui-customization-js.html?lang=js">customize the UI</a>.</p>
 <h2 id="api-documentation">API Documentation</h2>
 <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=10.4.2002">https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=10.4.2002</a>.</p>
-<h2 id="system-requirements">System Requirements</h2>
-<p>DBR requires the following features to work:</p>
-<ul>
-<li><p>Secure context (HTTPS deployment)</p>
-<p>When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons</p></li>
-<li><p>Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.</p></li>
-</ul>
-<blockquote>
-  <p>Some browsers like Chrome may grant the access for <code>http://127.0.0.1</code> and <code>http://localhost</code> or even for pages opened directly from the local disk (<code>file:///...</code>). This can be helpful for temporary development and test.</p>
-</blockquote>
-<ul>
-<li><p>Dynamsoft License requires a secure context to work.</p></li>
-<li><p><code>WebAssembly</code>, <code>Blob</code>, <code>URL</code>/<code>createObjectURL</code>, <code>Web Workers</code></p>
-<p>The above four features are required for the SDK to work.</p></li>
-<li><p><code>MediaDevices</code>/<code>getUserMedia</code></p>
-<p>This API is required for in-browser video streaming.</p></li>
-<li><p><code>getSettings</code></p>
-<p>This API inspects the video input which is a <code>MediaStreamTrack</code> object about its constrainable properties.</p></li>
-</ul>
-<p>The following table is a list of supported browsers based on the above requirements:</p>
-<table>
-<thead>
-<tr>
-<th style="text-align:center;">Browser Name</th>
-<th style="text-align:center;">Version</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td style="text-align:center;">Chrome</td>
-<td style="text-align:center;">v78+<sup>1</sup></td>
-</tr>
-<tr>
-<td style="text-align:center;">Firefox</td>
-<td style="text-align:center;">v68+<sup>1</sup></td>
-</tr>
-<tr>
-<td style="text-align:center;">Edge</td>
-<td style="text-align:center;">v79+</td>
-</tr>
-<tr>
-<td style="text-align:center;">Safari</td>
-<td style="text-align:center;">v14+</td>
-</tr>
-</tbody>
-</table>
-<p><sup>1</sup> devices running iOS needs to be on iOS 14.3+ for camera video streaming to work in Chrome, Firefox or other Apps using webviews.</p>
-<p>Apart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.</p>
+<!--  Compatibility is basically not an issue. Pls remove to another place
+
+## System Requirements
+
+DBR requires the following features to work:
+
+- Secure context (HTTPS deployment)
+
+  When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons
+
+  - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.
+  > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.
+
+  - Dynamsoft License requires a secure context to work.
+
+- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`
+
+  The above four features are required for the SDK to work.
+
+- `MediaDevices`/`getUserMedia`
+
+  This API is required for in-browser video streaming.
+
+- `getSettings`
+
+  This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.
+
+The following table is a list of supported browsers based on the above requirements:
+
+  | Browser Name |     Version      |
+  | :----------: | :--------------: |
+  |    Chrome    | v78+<sup>1</sup> |
+  |   Firefox    | v68+<sup>1</sup> |
+  |     Edge     |       v79+       |
+  |    Safari    |       v14+       |
+
+  <sup>1</sup> devices running iOS needs to be on iOS 14.3+ for camera video streaming to work in Chrome, Firefox or other Apps using webviews.
+
+Apart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.
+
+-->
 <h2 id="how-to-upgrade">How to Upgrade</h2>
 <p>If you want to upgrade the SDK from an old version to a newer one, please see <a href="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/upgrade-guide/index.html?ver=10.4.2002&utm_source=npm">how to upgrade</a>.</p>
 <h2 id="release-notes">Release Notes</h2>

package/README.md

@@ -47,7 +47,6 @@ In this guide, you will learn step by step on how to integrate the DBR-JS SDK in
       - [Add feedback](#add-feedback)
     - [Customize the UI](#customize-the-ui)
   - [API Documentation](#api-documentation)
-  - [System Requirements](#system-requirements)
   - [How to Upgrade](#how-to-upgrade)
   - [Release Notes](#release-notes)
   - [Next Steps](#next-steps)
@@ -58,11 +57,11 @@ In this guide, you will learn step by step on how to integrate the DBR-JS SDK in
 - Angular App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/hello-world/angular)
 - React App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/hello-world/react)
 - Vue App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/hello-world/vue)
-- PWA App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/hello-world/pwa)
+- PWA App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/hello-world/pwa) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/pwa/helloworld-pwa.html?ver=10.4.20&utm_source=npm)
 - WebView in Android and iOS - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.4.20/hello-world/webview)
-- Read Driver Licenses - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/use-case/read-a-drivers-license/index.html)
-- Fill A Form - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/use-case/fill-a-form-with-barcode-reading.html)
-- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/use-case/show-result-texts-on-the-video.html)
+- Read Driver Licenses - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/use-case/read-a-drivers-license/index.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/use-case/read-a-drivers-license/index.html?ver=10.4.20&utm_source=npm)
+- Fill A Form - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/use-case/fill-a-form-with-barcode-reading.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/use-case/fill-a-form-with-barcode-reading.html?ver=10.4.20&utm_source=npm)
+- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/use-case/show-result-texts-on-the-video.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/use-case/show-result-texts-on-the-video.html?ver=10.4.20&utm_source=npm)
 - Debug Camera and Collect Video Frame - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/others/debug)
 
 You can also:
@@ -102,8 +101,8 @@ The complete code of the "Hello World" example is shown below
     cvRouter.setInput(cameraEnhancer);
 
     const resultsContainer = document.querySelector("#results");
-    cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => {
-      if (result.barcodeResultItems.length > 0) {
+    cvRouter.addResultReceiver({ onCapturedResultReceived: (result) => {
+      if (result.barcodeResultItems?.length) {
         resultsContainer.textContent = '';
         for (let item of result.barcodeResultItems) {
           resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
@@ -190,34 +189,18 @@ When a barcode is decoded, you will see the result text show up under the video
 
 Alternatively, you can test locally by copying and pasting the code shown above into a local file (e.g. "hello-world.html") and opening it in your browser.
 
-*Note*:
-
-If you open the web page as `file:///` or `http://` , the camera may not work correctly because the [MediaDevices: getUserMedia()](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) method only works in secure contexts (HTTPS), in some or all supporting browsers.
-
-To make sure your web application can access the camera, please configure your web server to support HTTPS. The following links may help.
-
-1. NGINX: [Configuring HTTPS servers](https://nginx.org/en/docs/http/configuring_https_servers.html)
-2. IIS: [How to create a Self Signed Certificate in IIS](https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/)
-3. Tomcat: [Setting Up SSL on Tomcat in 5 minutes](https://dzone.com/articles/setting-ssl-tomcat-5-minutes)
-4. Node.js: [npm tls](https://nodejs.org/docs/v0.4.1/api/tls.html)
-
-If the test doesn't go as expected, you can [contact us](https://www.dynamsoft.com/company/contact/?ver=10.4.20&utm_source=npm&product=dbr&package=js).
+> *Secure Contexts*:
+>
+> If you open the web page as `http://` , our SDK may not work correctly because the [MediaDevices: getUserMedia()](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) and other methods only work in [secure contexts](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts) (HTTPS, `localhost`, `127.0.0.1`, `file://`), in some or all supporting browsers.
+>
+> Regarding configuring https on your server, these guides for [nginx](https://nginx.org/en/docs/http/configuring_https_servers.html) / [IIS](https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/) / [tomcat](https://dzone.com/articles/setting-ssl-tomcat-5-minutes) / [nodejs](https://nodejs.org/docs/v0.4.1/api/tls.html) might help.
+>
+> If the test doesn't go as expected, you can [contact us](https://www.dynamsoft.com/company/contact/?ver=10.4.20&utm_source=npm&product=dbr&package=js).
 
 ## Building your own page
 
 ### Include the SDK
 
-To utilize the SDK, the initial step involves including the corresponding resource files:
-
-* `core.js` encompasses common classes, interfaces, and enumerations shared across all Dynamsoft SDKs.
-* `license.js` introduces the `LicenseManager` class, which manages the licensing for all Dynamsoft SDKs.
-* `utility.js` encompasses auxiliary classes shared among all Dynamsoft SDKs.
-* `dbr.js` defines interfaces and enumerations tailored to the barcode reader module.
-* `cvr.js` introduces the `CaptureVisionRouter` class, which governs the entire image processing workflow.
-* `dce.js` comprises classes that offer camera support and basic user interface functionalities.
-
-To simplify things, starting from version 10.0.21, we introduced `dbr.bundle.js`, which combines all six of the above files. In the following chapters, we will use `dbr.bundle.js`.
-
 #### Use a public CDN
 
 The simplest way to include the SDK is to use either the [jsDelivr](https://jsdelivr.com/) or [UNPKG](https://unpkg.com/) CDN. The "hello world" example above uses **jsDelivr**.
@@ -242,7 +225,7 @@ 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.
+- In frameworks like React, Vue and Angular, you may want to add the package as a dependency.
 
   ```sh
   npm i dynamsoft-barcode-reader-bundle@10.4.2002 -E
@@ -256,19 +239,13 @@ The simplest way to include the SDK is to use either the [jsDelivr](https://jsde
 
 Besides using the public CDN, you can also download the SDK and host its files on your own server or a commercial CDN before including it in your application.
 
-There are two options for downloading the SDK, and the usage for each is slightly different
-
 - From the website
 
   [Download Dynamsoft Barcode Reader JavaScript Package](https://www.dynamsoft.com/barcode-reader/downloads/?ver=10.4.20&utm_source=npm&product=dbr&package=js)
 
-  The resources are located at path `dynamsoft/distributables/<pkg>@<version>`, you can typically include it like this:
-
-  ```html
-  <script src="dynamsoft/distributables/dynamsoft-barcode-reader-bundle@10.4.2002/dist/dbr.bundle.js"></script>
-  ```
+  The resources are located at path `dynamsoft/distributables/<pkg>@<version>`.
 
-- npm
+- From npm
 
   ```sh
   npm i dynamsoft-barcode-reader-bundle@10.4.2002 -E
@@ -277,28 +254,23 @@ There are two options for downloading the SDK, and the usage for each is slightl
   npm i dynamsoft-image-processing@2.4.20 -E
   ```
 
-  The resources are located at the path `node_modules/<pkg>`, without `@<version>`, so the script would be like:
-
-  ```html
-  <script src="node_modules/dynamsoft-barcode-reader-bundle/dist/dbr.bundle.js"></script>
-  ```
+  The resources are located at the path `node_modules/<pkg>`, without `@<version>`. You need to copy "dynamsoft-xxx" packages elsewhere and add `@<version>`. `<version>` can be get from `package.json` of each package.
   
-  Since the version tags (`@<version>`) are missing, you need to [specify the engineResourcePaths](#specify-the-location-of-the-engine-files-optional) so that the SDK can find the resources correctly.
+You can typically include SDK like this:
 
-  > To avoid confusion, we suggest renaming "node_modules" or moving "dynamsoft-" packages elsewhere for self-hosting, as "node_modules" is reserved for Node.js dependencies.
+```html
+<script src="path/to/dynamsoft-barcode-reader-bundle@10.4.2002/dist/dbr.bundle.js"></script>
+```
 
 *Note*:
 
 * Certain legacy web application servers may lack support for the `application/wasm` mimetype for .wasm files. To address this, you have two options:
   1. Upgrade your web application server to one that supports the `application/wasm` mimetype.
-  2. Manually define the mimetype on your server. You can refer to the following resources for guidance:
-     1. [Apache](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Apache_Configuration_htaccess#media_types_and_character_encodings)
-     2. [IIS](https://docs.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/mimemap)
-     3. [Nginx](https://www.nginx.com/resources/wiki/start/topics/examples/full/#mime-types)
+  2. Manually define the mimetype on your server. You can refer to the guides for [apache](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Apache_Configuration_htaccess#media_types_and_character_encodings) / [IIS](https://docs.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/mimemap) / [nginx](https://www.nginx.com/resources/wiki/start/topics/examples/full/#mime-types).
 
 * To work properly, the SDK requires a few engine files, which are relatively large and may take quite a few seconds to download. We recommend that you set a longer cache time for these engine files, to maximize the performance of your web application.
 
-  ```cmd
+  ```
   Cache-Control: max-age=31536000
   ```
 
@@ -322,14 +294,20 @@ As previously stated, the key "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" serves
 
 #### Specify the location of the "engine" files (optional)
 
-This is usually only required with frameworks like Angular or React, etc. where the referenced JavaScript files such as `cvr.js`, `dbr.js` are compiled into another file.
+This is usually only required with frameworks like Angular, React or Vue.
 
-The purpose is to tell the SDK where to find the engine files (\*.worker.js, \*.wasm.js and \*.wasm, etc.). The API is called `Dynamsoft.Core.CoreModule.engineResourcePaths`:
+The purpose is to tell the SDK where to find the engine files (\*.worker.js, \*.wasm.js and \*.wasm, etc.).
 
-```javascript
-//The following code uses the jsDelivr CDN as an example, feel free to change it to your own location of these files
+```ts
+// in framework
+import { CoreModule } from "dynamsoft-barcode-reader-bundle";
 CoreModule.engineResourcePaths.rootDirectory = "https://cdn.jsdelivr.net/npm/";
 ```
+```js
+// in pure js
+Dynamsoft.Core.CoreModule.engineResourcePaths.rootDirectory = "https://cdn.jsdelivr.net/npm/";
+```
+These code uses the jsDelivr CDN as an example, feel free to change it to your own location.
 
 ### Set up and start image processing
 
@@ -395,13 +373,14 @@ cvRouter.setInput(cameraEnhancer);
 
 #### Register a result receiver
 
-Once the image processing is complete, the results are sent to all the registered `CapturedResultReceiver` objects. Each `CapturedResultReceiver` object may encompass one or multiple callback functions associated with various result types. In our particular case, our focus is on identifying barcodes within the images, so it's sufficient to define the callback function `onDecodedBarcodesReceived`:
+Once the image processing is complete, the results are sent to all the registered `CapturedResultReceiver` objects. Each `CapturedResultReceiver` object may encompass one or multiple callback functions associated with various result types. This time we use `onCapturedResultReceived`:
+<!--In our particular case, our focus is on identifying barcodes within the images, so it's sufficient to define the callback function `onDecodedBarcodesReceived`:-->
 
 ```javascript
 const resultsContainer = document.querySelector("#results");
 const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver();
-resultReceiver.onDecodedBarcodesReceived = (result) => {
-  if (result.barcodeResultItems.length > 0) {
+resultReceiver.onCapturedResultReceived = (result) => {
+  if (result.barcodeResultItems?.length) {
     resultsContainer.textContent = '';
     for (let item of result.barcodeResultItems) {
       // In this example, the barcode results are displayed on the page below the video.
@@ -416,8 +395,8 @@ You can also write code like this. It is the same.
 
 ```javascript
 const resultsContainer = document.querySelector("#results");
-cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => {
-  if (result.barcodeResultItems.length > 0) {
+cvRouter.addResultReceiver({ onCapturedResultReceived: (result) => {
+  if (result.barcodeResultItems?.length) {
     resultsContainer.textContent = '';
     for (let item of result.barcodeResultItems) {
       // In this example, the barcode results are displayed on the page below the video.
@@ -506,8 +485,7 @@ Please be aware that it is necessary to update the `CapturedResultReceiver` obje
 ```javascript
 const EnumCRIT = Dynamsoft.Core.EnumCapturedResultItemType;
 resultReceiver.onCapturedResultReceived = (result) => {
-  let barcodes = result.items.filter(item => item.type === EnumCRIT.CRIT_BARCODE);
-  if (barcodes.length > 0) {
+  if (result.barcodeResultItems?.length) {
     // Use a filter to get the image on which barcodes are found.
     let image = result.items.filter(
       item => item.type === EnumCRIT.CRIT_ORIGINAL_IMAGE
@@ -669,6 +647,24 @@ cvRouter.addResultReceiver(resultReceiver);
 
 ### Customize the UI
 
+```javascript
+// Create a CameraView instance with default settings
+let cameraView = await Dynamsoft.DCE.CameraView.createInstance();
+// Create a CameraView instance with a specified HTML file path, typically a local or remote URL
+let cameraView1 = await Dynamsoft.DCE.CameraView.createInstance('@engineResourcePath/dce.mobile-native.ui.html');
+// Create a CameraView instance within a specified DOM element
+let cameraView2 = await Dynamsoft.DCE.CameraView.createInstance(document.getElementById('my-ui'));
+// Create a CameraView instance using a custom UI file path
+let cameraView3 = await Dynamsoft.DCE.CameraView.createInstance('url/to/my/ui.html');
+
+// Get the UI element associated with the cameraView instance
+let uiElement = cameraView.getUIElement();
+// Remove the camera selection dropdown from the CameraView's UI element
+uiElement.shadowRoot.querySelector('.dce-sel-camera').remove();
+// Remove the resolution selection dropdown from the CameraView's UI element
+uiElement.shadowRoot.querySelector('.dce-sel-resolution').remove();
+```
+
 The UI is part of the auxiliary SDK "Dynamsoft Camera Enhancer", read more on how to [customize the UI](https://www.dynamsoft.com/barcode-reader/docs/core/programming/features/ui-customization-js.html?lang=js).
 
 ## API Documentation
@@ -676,6 +672,8 @@ The UI is part of the auxiliary SDK "Dynamsoft Camera Enhancer", read more on ho
 You can check out the detailed documentation about the APIs of the SDK at
 [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=10.4.2002](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=10.4.2002).
 
+<!--  Compatibility is basically not an issue. Pls remove to another place
+
 ## System Requirements
 
 DBR requires the following features to work:
@@ -714,6 +712,8 @@ The following table is a list of supported browsers based on the above requireme
 
 Apart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.
 
+-->
+
 ## How to Upgrade
 
 If you want to upgrade the SDK from an old version to a newer one, please see [how to upgrade](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/upgrade-guide/index.html?ver=10.4.2002&utm_source=npm).