dynamsoft-barcode-reader-bundle 11.4.2000-beta-202604152312 → 11.4.2000-beta-202604162228

package/README.html

@@ -296,7 +296,7 @@
     cvRouter.setInput(cameraEnhancer);
 
     <span class="hljs-keyword">const</span> resultsContainer = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#results&quot;</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">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) {
@@ -471,7 +471,7 @@ Dynamsoft.Core.CoreModule.engineResourcePaths.rootDirectory = <span class="hljs-
 <h3 id="step-1-preload-the-module">Step 1: Preload the module</h3>
 <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>
 <pre><code class="hljs js language-js"><span class="hljs-comment">// Preload the .wasm files</span>
-<span class="hljs-keyword">await</span> Dynamsoft.Core.CoreModule.loadWasm();
+Dynamsoft.Core.CoreModule.loadWasm();
 </code></pre>
 <h3 id="step-2-create-a-capturevisionrouter-object">Step 2: Create a CaptureVisionRouter object</h3>
 <p>To use the SDK, we first create a <code>CaptureVisionRouter</code> object.</p>
@@ -523,11 +523,11 @@ resultReceiver.onDecodedBarcodesReceived  = <span class="hljs-function">(<span c
     }
   }
 };
-cvRouter.addResultReceiver(resultReceiver);
+<span class="hljs-keyword">await</span> 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">&quot;#results&quot;</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">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) {
@@ -619,7 +619,7 @@ settings.barcodeSettings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_Q
 <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; <span class="hljs-comment">// Enum for captured result item types.</span>
 <span class="hljs-comment">// Create a result receiver to handle the results.</span>
-cvRouter.addResultReceiver({
+<span class="hljs-keyword">await</span> cvRouter.addResultReceiver({
   <span class="hljs-comment">// This function is called when any capture result is received.</span>
   <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>
@@ -745,24 +745,24 @@ resultReceiver.onDecodedBarcodesReceived = <span class="hljs-function">(<span cl
     Dynamsoft.DCE.Feedback.beep();
   }
 };
-cvRouter.addResultReceiver(resultReceiver);
+<span class="hljs-keyword">await</span> cvRouter.addResultReceiver(resultReceiver);
 </code></pre>
 <h2 id="customizing-the-ui">Customizing the UI</h2>
 <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">&#x27;@engineResourcePath/dce.mobile-native.ui.html&#x27;</span>);
+<span class="hljs-comment">// Create a CameraView instance with a specified XML 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">&#x27;@engineResourcePath/dce.ui.v5.xml&#x27;</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">&#x27;my-ui&#x27;</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">&#x27;url/to/my/ui.html&#x27;</span>);
+<span class="hljs-keyword">let</span> cameraView3 = <span class="hljs-keyword">await</span> Dynamsoft.DCE.CameraView.createInstance(<span class="hljs-string">&#x27;url/to/my/ui.xml&#x27;</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&#x27;s UI element</span>
-uiElement.shadowRoot.querySelector(<span class="hljs-string">&#x27;.dce-sel-camera&#x27;</span>).remove();
+uiElement.querySelector(<span class="hljs-string">&#x27;.dce-sel-camera&#x27;</span>).remove();
 <span class="hljs-comment">// Remove the resolution selection dropdown from the CameraView&#x27;s UI element</span>
-uiElement.shadowRoot.querySelector(<span class="hljs-string">&#x27;.dce-sel-resolution&#x27;</span>).remove();
+uiElement.querySelector(<span class="hljs-string">&#x27;.dce-sel-resolution&#x27;</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="documentation">Documentation</h2>
@@ -800,7 +800,7 @@ The following table is a list of supported browsers based on the above requireme
 
   | Browser Name |     Version      |
   | :----------: | :--------------: |
-  |    Chrome    | v78+<sup>1</sup> |
+  |    Chrome    | v88+<sup>1</sup> |
   |   Firefox    | v68+<sup>1</sup> |
   |     Edge     |       v79+       |
   |    Safari    |       v14+       |

package/README.md

@@ -83,7 +83,7 @@ The complete code of the "Hello World" example is shown below
     cvRouter.setInput(cameraEnhancer);
 
     const resultsContainer = document.querySelector("#results");
-    cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => {
+    await cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => {
       if (result.barcodeResultItems?.length) {
         resultsContainer.textContent = '';
         for (let item of result.barcodeResultItems) {
@@ -304,7 +304,7 @@ The image processing logic is encapsulated within .wasm library files, and these
 
 ```js
 // Preload the .wasm files
-await Dynamsoft.Core.CoreModule.loadWasm();
+Dynamsoft.Core.CoreModule.loadWasm();
 ```
 
 ### Step 2: Create a CaptureVisionRouter object
@@ -375,14 +375,14 @@ resultReceiver.onDecodedBarcodesReceived  = (result) => {
     }
   }
 };
-cvRouter.addResultReceiver(resultReceiver);
+await cvRouter.addResultReceiver(resultReceiver);
 ```
 
 You can also write code like this. It is the same.
 
 ```javascript
 const resultsContainer = document.querySelector("#results");
-cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => {
+await cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => {
   if (result.barcodeResultItems?.length) {
     resultsContainer.textContent = '';
     for (let item of result.barcodeResultItems) {
@@ -469,7 +469,7 @@ Please be aware that it is necessary to update the `CapturedResultReceiver` obje
 ```javascript
 const EnumCRIT = Dynamsoft.Core.EnumCapturedResultItemType; // Enum for captured result item types.
 // Create a result receiver to handle the results.
-cvRouter.addResultReceiver({
+await cvRouter.addResultReceiver({
   // This function is called when any capture result is received.
   onCapturedResultReceived: (result) => {
     //Check for barcode results
@@ -634,7 +634,7 @@ resultReceiver.onDecodedBarcodesReceived = (result) => {
     Dynamsoft.DCE.Feedback.beep();
   }
 };
-cvRouter.addResultReceiver(resultReceiver);
+await cvRouter.addResultReceiver(resultReceiver);
 ```
 
 ## Customizing the UI
@@ -642,19 +642,19 @@ cvRouter.addResultReceiver(resultReceiver);
 ```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 with a specified XML file path, typically a local or remote URL
+let cameraView1 = await Dynamsoft.DCE.CameraView.createInstance('@engineResourcePath/dce.ui.v5.xml');
 // 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');
+let cameraView3 = await Dynamsoft.DCE.CameraView.createInstance('url/to/my/ui.xml');
 
 // 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();
+uiElement.querySelector('.dce-sel-camera').remove();
 // Remove the resolution selection dropdown from the CameraView's UI element
-uiElement.shadowRoot.querySelector('.dce-sel-resolution').remove();
+uiElement.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).
@@ -697,7 +697,7 @@ The following table is a list of supported browsers based on the above requireme
 
   | Browser Name |     Version      |
   | :----------: | :--------------: |
-  |    Chrome    | v78+<sup>1</sup> |
+  |    Chrome    | v88+<sup>1</sup> |
   |   Firefox    | v68+<sup>1</sup> |
   |     Edge     |       v79+       |
   |    Safari    |       v14+       |