dynamsoft-barcode-reader-bundle 11.0.6000 → 11.2.2000-beta-202510282254

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.html CHANGED
@@ -249,30 +249,32 @@ Thanks to its simplified APIs and built-in UI for video streaming, you can imple
249
249
  Please refer to <a href="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/faq/system-requirement.html">system requirements</a> for more details.</p>
250
250
  </blockquote>
251
251
  <h2 id="license">License</h2>
252
- <!-- When getting started with Barcode Scanner, we recommend getting your own 30-day trial license. -->
253
- <p>When getting started with Barcode Scanner, we recommend <a href="https://www.dynamsoft.com/customer/license/trialLicense/?product=dbr&utm_source=npm&package=js">getting your own 30-day trial license</a></p>
254
- <!-- {% include trialLicense.html %} -->
255
- <blockquote>
256
- <p>[!IMPORTANT]<br />
257
- The trial license can be renewed via the <a href="https://www.dynamsoft.com/customer/license/trialLicense/?product=dbr&utm_source=npm&package=js">customer portal</a> twice, each time for another 15 days, giving you a total of 60 days to develop your own application using the solution. Please contact the <a href="https://www.dynamsoft.com/company/contact/">Dynamsoft Support Team</a> if you need more time for a full evaluation.</p>
258
- </blockquote>
259
- <h3 id="full-license">Full License</h3>
260
- <p>If you are fully satisfied with the solution and would like to move forward with a full license, please contact the <a href="https://www.dynamsoft.com/company/contact/">Dynamsoft Sales Team</a>.</p>
252
+ <p>When getting started with Barcode Scanner, we recommend getting your own 30-day trial license.</p>
253
+ <!-- ### Trial License
254
+
255
+ When getting started with Barcode Scanner, we recommend [getting your own 30-day trial license](https://www.dynamsoft.com/customer/license/trialLicense/?product=dbr&utm_source=npm&package=js) -->
256
+ <p>{% include trialLicense.html %}</p>
257
+ <!-- > [!IMPORTANT]
258
+ > The trial license can be renewed via the [customer portal](https://www.dynamsoft.com/customer/license/trialLicense/?product=dbr&utm_source=npm&package=js) twice, each time for another 15 days, giving you a total of 60 days to develop your own application using the solution. Please contact the [Dynamsoft Support Team](https://www.dynamsoft.com/company/contact/) if you need more time for a full evaluation.
259
+
260
+ ### Full License
261
+
262
+ If you are fully satisfied with the solution and would like to move forward with a full license, please contact the [Dynamsoft Sales Team](https://www.dynamsoft.com/company/contact/). -->
261
263
  <h2 id="quick-start-hello-world-example">Quick Start: Hello World Example</h2>
262
264
  <pre><code class="hljs html language-html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span>
263
- <span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>&gt;</span>
265
+ <span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span>
264
266
  <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
265
- <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.6000/dist/dbr.bundle.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
267
+ <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.2.2000/dist/dbr.bundle.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
266
268
  <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
267
269
  <span class="hljs-comment">// Initialize the Dynamsoft Barcode Scanner</span>
268
270
  <span class="hljs-keyword">const</span> barcodeScanner = <span class="hljs-keyword">new</span> Dynamsoft.BarcodeScanner({
269
- <span class="hljs-comment">// Please don't forget to replace YOUR_LICENSE_KEY_HERE</span>
270
- <span class="hljs-attr">license</span>: <span class="hljs-string">"YOUR_LICENSE_KEY_HERE"</span>,
271
+ <span class="hljs-comment">// Please don&#x27;t forget to replace YOUR_LICENSE_KEY_HERE</span>
272
+ <span class="hljs-attr">license</span>: <span class="hljs-string">&quot;YOUR_LICENSE_KEY_HERE&quot;</span>,
271
273
  });
272
- <span class="hljs-function">(<span class="hljs-params"><span class="hljs-keyword">async</span> (</span>) =&gt;</span> {
274
+ (<span class="hljs-keyword">async</span> () =&gt; {
273
275
  <span class="hljs-comment">// Launch the scanner and wait for the result</span>
274
276
  <span class="hljs-keyword">const</span> result = <span class="hljs-keyword">await</span> barcodeScanner.launch();
275
- <span class="hljs-comment">// Display the first detected barcode's text in an alert</span>
277
+ <span class="hljs-comment">// Display the first detected barcode&#x27;s text in an alert</span>
276
278
  <span class="hljs-keyword">if</span> (result.barcodeResults.length) {
277
279
  alert(result.barcodeResults[<span class="hljs-number">0</span>].text);
278
280
  }
@@ -282,7 +284,7 @@ Thanks to its simplified APIs and built-in UI for video streaming, you can imple
282
284
  <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span>
283
285
  </code></pre>
284
286
  <p align="center" style="text-align:center; white-space: normal; ">
285
- <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.60/barcode-scanner-api-samples/scan-single-barcode/hello-world.html" title="Code in Github" style="text-decoration:none;">
287
+ <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.2.20/barcode-scanner-api-samples/scan-single-barcode/hello-world.html" title="Code in Github" style="text-decoration:none;">
286
288
  <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;">
287
289
  </a>
288
290
  &nbsp;
@@ -290,21 +292,21 @@ Thanks to its simplified APIs and built-in UI for video streaming, you can imple
290
292
  <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;" >
291
293
  </a>
292
294
  &nbsp;
293
- <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/barcode-scanner-api-samples/scan-single-barcode/hello-world.html?ver=11.0.60&utm_source=npm" title="Run in Dynamsoft" style="text-decoration:none;">
295
+ <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/barcode-scanner-api-samples/scan-single-barcode/hello-world.html?ver=11.2.20&utm_source=npm" title="Run in Dynamsoft" style="text-decoration:none;">
294
296
  <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;">
295
297
  </a>
296
298
  </p>
297
299
  <h3 id="step-1-setting-up-the-html-and-including-the-barcode-scanner">Step 1: Setting up the HTML and Including the Barcode Scanner</h3>
298
- <p>As outlined earlier, this guide will help you create a simple Hello World barcode scanning application using vanilla JavaScript. The full sample code is also available in the <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v11.0.60">GitHub repository</a>.</p>
300
+ <p>As outlined earlier, this guide will help you create a simple Hello World barcode scanning application using vanilla JavaScript. The full sample code is also available in the <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v11.2.20">GitHub repository</a>.</p>
299
301
  <p>The first step before writing the code is to include the SDK in your application. You can simply include the SDK by using the precompiled script.</p>
300
302
  <pre><code class="hljs html language-html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span>
301
- <span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>&gt;</span>
303
+ <span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span>
302
304
  <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
303
- <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.6000/dist/dbr.bundle.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
305
+ <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.2.2000/dist/dbr.bundle.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
304
306
  <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
305
307
  <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span>
306
308
  </code></pre>
307
- <p>In this example, we include the precompiled Barcode Scanner SDK script via public CDN in the header.</p>
309
+ <p>In this example, we include the precompiled Barcode Scanner SDK script via public CDN in the body.</p>
308
310
  <div class="multi-panel-switching-prefix"></div>
309
311
  <div class="multi-panel-start"></div>
310
312
  <div class="multi-panel-title">Use a public CDN</div>
@@ -312,47 +314,47 @@ Thanks to its simplified APIs and built-in UI for video streaming, you can imple
312
314
  <ul>
313
315
  <li>jsDelivr</li>
314
316
  </ul>
315
- <pre><code class="hljs html language-html"> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.6000/dist/dbr.bundle.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
317
+ <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.2.2000/dist/dbr.bundle.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
316
318
  </code></pre>
317
319
  <ul>
318
320
  <li>UNPKG</li>
319
321
  </ul>
320
- <pre><code class="hljs html language-html"> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/dynamsoft-barcode-reader-bundle@11.0.6000/dist/dbr.bundle.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
322
+ <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.2.2000/dist/dbr.bundle.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
321
323
  </code></pre>
322
324
  <p>When using a framework such as <strong>React</strong>, <strong>Vue</strong> or <strong>Angular</strong>, we recommend adding the package as a dependency using a package manager such as <strong>npm</strong> or <strong>yarn</strong>:</p>
323
- <pre><code class="hljs sh language-sh"> npm i dynamsoft-barcode-reader-bundle@11.0.6000
325
+ <pre><code class="hljs sh language-sh"> npm i dynamsoft-barcode-reader-bundle@11.2.2000
324
326
  <span class="hljs-comment"># or</span>
325
- yarn add dynamsoft-barcode-reader-bundle@11.0.6000
327
+ yarn add dynamsoft-barcode-reader-bundle@11.2.2000
326
328
  </code></pre>
327
- <p>As for package managers like <strong>npm</strong> or <strong>yarn</strong>, you likely need to specify the location of the engine files as a link to a CDN. Please see the <a href="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/barcode-scanner.html#barcodescannerconfig">BarcodeScannerConfig API</a> for a code snippet on how to set the <code>engineResourcePaths</code>.</p>
329
+ <p>When using package managers like <strong>npm</strong> or <strong>yarn</strong>, you likely need to specify the location of the engine files as a link to a CDN. Please see the <a href="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/barcode-scanner.html#barcodescannerconfig">BarcodeScannerConfig API</a> for a code snippet on how to set the <code>engineResourcePaths</code>.</p>
328
330
  <div class="multi-panel-end"></div>
329
331
  <div class="multi-panel-start"></div>
330
332
  <div class="multi-panel-title">Host the SDK yourself</div>
331
333
  <p>Alternatively, you may choose to download the SDK and host the files on your own server or preferred CDN. This approach provides better control over versioning and availability.</p>
332
334
  <ul>
333
335
  <li><p>From the website</p>
334
- <p><a href="https://www.dynamsoft.com/barcode-reader/downloads/?ver=11.0.60&utm_source=npm&product=dbr&package=js">Download Dynamsoft Barcode Reader JavaScript Package</a></p>
336
+ <p><a href="https://www.dynamsoft.com/barcode-reader/downloads/?ver=11.2.20&utm_source=npm&product=dbr&package=js">Download Dynamsoft Barcode Reader JavaScript Package</a></p>
335
337
  <p>The resources are located in the <code>./dist/</code> directory.</p></li>
336
338
  <li><p>From npm</p></li>
337
339
  </ul>
338
- <pre><code class="hljs sh language-sh"> npm i dynamsoft-barcode-reader-bundle@11.0.6000
340
+ <pre><code class="hljs sh language-sh"> npm i dynamsoft-barcode-reader-bundle@11.2.2000
339
341
  </code></pre>
340
342
  <p>The resources are located at the path <code>node_modules/&lt;pkg&gt;</code>, without <code>@&lt;version&gt;</code>. You can copy it elsewhere and add <code>@&lt;version&gt;</code> tag.</p>
341
343
  <blockquote>
342
344
  <p>[!IMPORTANT]<br />
343
345
  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>
344
346
  </blockquote>
345
- <p>You can typically include SDK like this:</p>
346
- <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@11.0.6000/dist/dbr.bundle.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
347
+ <p>You can typically include the SDK like this:</p>
348
+ <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.2.2000/dist/dbr.bundle.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
347
349
  </code></pre>
348
350
  <div class="multi-panel-end"></div>
349
351
  <div class="multi-panel-switching-end"></div>
350
352
  <p>Barcode Scanner comes with a <strong>Ready-to-Use UI</strong>. When the Barcode Scanner launches, it creates a container which it populates with the <strong>Ready-to-Use UI</strong>.</p>
351
353
  <h3 id="step-2-initializing-the-barcode-scanner">Step 2: Initializing the Barcode Scanner</h3>
352
354
  <pre><code class="hljs js language-js"><span class="hljs-comment">// Initialize the Dynamsoft Barcode Scanner</span>
353
- <span class="hljs-keyword">const</span> barcodescanner = <span class="hljs-keyword">new</span> Dynamsoft.BarcodeScanner({
354
- <span class="hljs-comment">// Please don't forget to replace YOUR_LICENSE_KEY_HERE</span>
355
- <span class="hljs-attr">license</span>: <span class="hljs-string">"YOUR_LICENSE_KEY_HERE"</span>,
355
+ <span class="hljs-keyword">const</span> barcodeScanner = <span class="hljs-keyword">new</span> Dynamsoft.BarcodeScanner({
356
+ <span class="hljs-comment">// Please don&#x27;t forget to replace YOUR_LICENSE_KEY_HERE</span>
357
+ <span class="hljs-attr">license</span>: <span class="hljs-string">&quot;YOUR_LICENSE_KEY_HERE&quot;</span>,
356
358
  });
357
359
  </code></pre>
358
360
  <p>This is the <strong>simplest</strong> way to initialize the Barcode Scanner. The configuration object must include a valid <strong>license</strong> key. Without it, the scanner will fail to launch and display an error. For help obtaining a license, see the <a href="#license">licensing</a> section.</p>
@@ -361,16 +363,16 @@ Thanks to its simplified APIs and built-in UI for video streaming, you can imple
361
363
  By default, the <code>BarcodeScanner</code> scans a single barcode at a time. However, it also supports a <code>MULTI_UNIQUE</code> scanning mode, which continuously scans and accumulates unique results in real time. You can enable this mode by modifying the <a href="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/barcode-scanner.html#barcodescannerconfig"><code>BarcodeScannerConfig</code></a> as follows:</p>
362
364
  </blockquote>
363
365
  <pre><code class="hljs js language-js"><span class="hljs-comment">// Initialize the Dynamsoft Barcode Scanner in MULTI_UNIQUE mode</span>
364
- <span class="hljs-keyword">const</span> barcodescanner = <span class="hljs-keyword">new</span> Dynamsoft.BarcodeScanner({
365
- <span class="hljs-attr">license</span>: <span class="hljs-string">"YOUR_LICENSE_KEY_HERE"</span>,
366
+ <span class="hljs-keyword">const</span> barcodeScanner = <span class="hljs-keyword">new</span> Dynamsoft.BarcodeScanner({
367
+ <span class="hljs-attr">license</span>: <span class="hljs-string">&quot;YOUR_LICENSE_KEY_HERE&quot;</span>,
366
368
  <span class="hljs-attr">scanMode</span>: Dynamsoft.EnumScanMode.SM_MULTI_UNIQUE,
367
369
  });
368
370
  </code></pre>
369
371
  <h3 id="step-3-launching-the-barcode-scanner">Step 3: Launching the Barcode Scanner</h3>
370
372
  <pre><code class="hljs js language-js">(<span class="hljs-keyword">async</span> () =&gt; {
371
373
  <span class="hljs-comment">// Launch the scanner and wait for the result</span>
372
- <span class="hljs-keyword">const</span> result = <span class="hljs-keyword">await</span> barcodescanner.launch();
373
- <span class="hljs-comment">// Display the first detected barcode's text in an alert</span>
374
+ <span class="hljs-keyword">const</span> result = <span class="hljs-keyword">await</span> barcodeScanner.launch();
375
+ <span class="hljs-comment">// Display the first detected barcode&#x27;s text in an alert</span>
374
376
  <span class="hljs-keyword">if</span> (result.barcodeResults.length) {
375
377
  alert(result.barcodeResults[<span class="hljs-number">0</span>].text);
376
378
  }
@@ -379,14 +381,14 @@ Thanks to its simplified APIs and built-in UI for video streaming, you can imple
379
381
  <p>Now that the Barcode Scanner has been initialized and configured, it is ready to be launched! Upon launch, the Barcode Scanner presents the main <strong><code>BarcodeScannerView</code></strong> UI in its container on the page, and is ready to start scanning. By default, we use the <code>SINGLE</code> scanning mode, which means only one decoding result will be included in the final result. In the code above, we directly alerted the successfully decoded barcode text on the page.</p>
380
382
  <blockquote>
381
383
  <p>[!NOTE]<br />
382
- In the Hello World sample, after a successfully decoding process, the scanner closes and the user is met with an empty page. In order to open the scanner again, the user must refresh the page. You may choose to implement a more user-friendly behavior in a production environment, such as presenting the user with an option to re-open the Barcode Scanner upon closing it.</p>
384
+ In the Hello World sample, after a successful decoding process, the scanner closes and the user is met with an empty page. In order to open the scanner again, the user must refresh the page. You may choose to implement a more user-friendly behavior in a production environment, such as presenting the user with an option to re-open the Barcode Scanner upon closing it.</p>
383
385
  </blockquote>
384
386
  <h2 id="next-steps">Next Steps</h2>
385
- <p>Now that you've implemented the basic functionality, here are some recommended next steps to further explore the capabilities of the Barcode Scanner</p>
387
+ <p>Now that you've implemented the basic functionality, here are some recommended next steps to further explore the capabilities of the Barcode Scanner:</p>
386
388
  <ol>
387
389
  <li>Learn how to <a href="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/barcode-scanner-customization.html">Customize the Barcode Scanner</a></li>
388
- <li>Check out the <a href="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=11.0.6000">Official Samples and Demo</a></li>
389
- <li>Learn about the <a href="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/barcode-scanner.html?ver=11.0.6000">APIs of BarcodeScanner</a></li>
390
+ <li>Check out the <a href="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=11.2.2000">Official Samples and Demo</a></li>
391
+ <li>Learn about the <a href="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/barcode-scanner.html?ver=11.2.2000">APIs of BarcodeScanner</a></li>
390
392
  </ol>
391
393
  </div>
392
394
  </body>
package/README.md CHANGED
@@ -35,18 +35,20 @@ new Dynamsoft.BarcodeScanner().launch().then(result=>alert(result.barcodeResults
35
35
 
36
36
  ## License
37
37
 
38
- <!-- When getting started with Barcode Scanner, we recommend getting your own 30-day trial license. -->
38
+ When getting started with Barcode Scanner, we recommend getting your own 30-day trial license.
39
39
 
40
- When getting started with Barcode Scanner, we recommend [getting your own 30-day trial license](https://www.dynamsoft.com/customer/license/trialLicense/?product=dbr&utm_source=npm&package=js)
40
+ <!-- ### Trial License
41
41
 
42
- <!-- {% include trialLicense.html %} -->
42
+ When getting started with Barcode Scanner, we recommend [getting your own 30-day trial license](https://www.dynamsoft.com/customer/license/trialLicense/?product=dbr&utm_source=npm&package=js) -->
43
43
 
44
- > [!IMPORTANT]
44
+ {% include trialLicense.html %}
45
+
46
+ <!-- > [!IMPORTANT]
45
47
  > The trial license can be renewed via the [customer portal](https://www.dynamsoft.com/customer/license/trialLicense/?product=dbr&utm_source=npm&package=js) twice, each time for another 15 days, giving you a total of 60 days to develop your own application using the solution. Please contact the [Dynamsoft Support Team](https://www.dynamsoft.com/company/contact/) if you need more time for a full evaluation.
46
48
 
47
49
  ### Full License
48
50
 
49
- If you are fully satisfied with the solution and would like to move forward with a full license, please contact the [Dynamsoft Sales Team](https://www.dynamsoft.com/company/contact/).
51
+ If you are fully satisfied with the solution and would like to move forward with a full license, please contact the [Dynamsoft Sales Team](https://www.dynamsoft.com/company/contact/). -->
50
52
 
51
53
  ## Quick Start: Hello World Example
52
54
 
@@ -54,7 +56,7 @@ If you are fully satisfied with the solution and would like to move forward with
54
56
  <!DOCTYPE html>
55
57
  <html lang="en">
56
58
  <body>
57
- <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.6000/dist/dbr.bundle.js"></script>
59
+ <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.2.2000/dist/dbr.bundle.js"></script>
58
60
  <script>
59
61
  // Initialize the Dynamsoft Barcode Scanner
60
62
  const barcodeScanner = new Dynamsoft.BarcodeScanner({
@@ -75,7 +77,7 @@ If you are fully satisfied with the solution and would like to move forward with
75
77
  ```
76
78
 
77
79
  <p align="center" style="text-align:center; white-space: normal; ">
78
- <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.60/barcode-scanner-api-samples/scan-single-barcode/hello-world.html" title="Code in Github" style="text-decoration:none;">
80
+ <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.2.20/barcode-scanner-api-samples/scan-single-barcode/hello-world.html" title="Code in Github" style="text-decoration:none;">
79
81
  <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;">
80
82
  </a>
81
83
  &nbsp;
@@ -83,14 +85,14 @@ If you are fully satisfied with the solution and would like to move forward with
83
85
  <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;" >
84
86
  </a>
85
87
  &nbsp;
86
- <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/barcode-scanner-api-samples/scan-single-barcode/hello-world.html?ver=11.0.60&utm_source=npm" title="Run in Dynamsoft" style="text-decoration:none;">
88
+ <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/barcode-scanner-api-samples/scan-single-barcode/hello-world.html?ver=11.2.20&utm_source=npm" title="Run in Dynamsoft" style="text-decoration:none;">
87
89
  <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;">
88
90
  </a>
89
91
  </p>
90
92
 
91
93
  ### Step 1: Setting up the HTML and Including the Barcode Scanner
92
94
 
93
- As outlined earlier, this guide will help you create a simple Hello World barcode scanning application using vanilla JavaScript. The full sample code is also available in the [GitHub repository](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v11.0.60).
95
+ As outlined earlier, this guide will help you create a simple Hello World barcode scanning application using vanilla JavaScript. The full sample code is also available in the [GitHub repository](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v11.2.20).
94
96
 
95
97
  The first step before writing the code is to include the SDK in your application. You can simply include the SDK by using the precompiled script.
96
98
 
@@ -98,12 +100,12 @@ The first step before writing the code is to include the SDK in your application
98
100
  <!DOCTYPE html>
99
101
  <html lang="en">
100
102
  <body>
101
- <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.6000/dist/dbr.bundle.js"></script>
103
+ <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.2.2000/dist/dbr.bundle.js"></script>
102
104
  </body>
103
105
  </html>
104
106
  ```
105
107
 
106
- In this example, we include the precompiled Barcode Scanner SDK script via public CDN in the header.
108
+ In this example, we include the precompiled Barcode Scanner SDK script via public CDN in the body.
107
109
 
108
110
  <div class="multi-panel-switching-prefix"></div>
109
111
 
@@ -115,24 +117,24 @@ The simplest way to include the SDK is to use either the [**jsDelivr**](https://
115
117
  - jsDelivr
116
118
 
117
119
  ```html
118
- <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.6000/dist/dbr.bundle.js"></script>
120
+ <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.2.2000/dist/dbr.bundle.js"></script>
119
121
  ```
120
122
 
121
123
  - UNPKG
122
124
 
123
125
  ```html
124
- <script src="https://unpkg.com/dynamsoft-barcode-reader-bundle@11.0.6000/dist/dbr.bundle.js"></script>
126
+ <script src="https://unpkg.com/dynamsoft-barcode-reader-bundle@11.2.2000/dist/dbr.bundle.js"></script>
125
127
  ```
126
128
 
127
129
  When using a framework such as **React**, **Vue** or **Angular**, we recommend adding the package as a dependency using a package manager such as **npm** or **yarn**:
128
130
 
129
131
  ```sh
130
- npm i dynamsoft-barcode-reader-bundle@11.0.6000
132
+ npm i dynamsoft-barcode-reader-bundle@11.2.2000
131
133
  # or
132
- yarn add dynamsoft-barcode-reader-bundle@11.0.6000
134
+ yarn add dynamsoft-barcode-reader-bundle@11.2.2000
133
135
  ```
134
136
 
135
- As for package managers like **npm** or **yarn**, you likely need to specify the location of the engine files as a link to a CDN. Please see the [BarcodeScannerConfig API](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/barcode-scanner.html#barcodescannerconfig) for a code snippet on how to set the `engineResourcePaths`.
137
+ When using package managers like **npm** or **yarn**, you likely need to specify the location of the engine files as a link to a CDN. Please see the [BarcodeScannerConfig API](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/barcode-scanner.html#barcodescannerconfig) for a code snippet on how to set the `engineResourcePaths`.
136
138
  <div class="multi-panel-end"></div>
137
139
 
138
140
  <div class="multi-panel-start"></div>
@@ -142,14 +144,14 @@ Alternatively, you may choose to download the SDK and host the files on your own
142
144
 
143
145
  - From the website
144
146
 
145
- [Download Dynamsoft Barcode Reader JavaScript Package](https://www.dynamsoft.com/barcode-reader/downloads/?ver=11.0.60&utm_source=npm&product=dbr&package=js)
147
+ [Download Dynamsoft Barcode Reader JavaScript Package](https://www.dynamsoft.com/barcode-reader/downloads/?ver=11.2.20&utm_source=npm&product=dbr&package=js)
146
148
 
147
149
  The resources are located in the `./dist/` directory.
148
150
 
149
151
  - From npm
150
152
 
151
153
  ```sh
152
- npm i dynamsoft-barcode-reader-bundle@11.0.6000
154
+ npm i dynamsoft-barcode-reader-bundle@11.2.2000
153
155
  ```
154
156
 
155
157
  The resources are located at the path `node_modules/<pkg>`, without `@<version>`. You can copy it elsewhere and add `@<version>` tag.
@@ -157,10 +159,10 @@ Alternatively, you may choose to download the SDK and host the files on your own
157
159
  > [!IMPORTANT]
158
160
  > Since "node_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_modules" folder or moving the "dynamsoft-" packages to a dedicated folder for static resources in your project to facilitate self-hosting.
159
161
 
160
- You can typically include SDK like this:
162
+ You can typically include the SDK like this:
161
163
 
162
164
  ```html
163
- <script src="path/to/dynamsoft-barcode-reader-bundle@11.0.6000/dist/dbr.bundle.js"></script>
165
+ <script src="path/to/dynamsoft-barcode-reader-bundle@11.2.2000/dist/dbr.bundle.js"></script>
164
166
  ```
165
167
  <div class="multi-panel-end"></div>
166
168
 
@@ -172,9 +174,9 @@ Barcode Scanner comes with a **Ready-to-Use UI**. When the Barcode Scanner launc
172
174
 
173
175
  ```js
174
176
  // Initialize the Dynamsoft Barcode Scanner
175
- const barcodescanner = new Dynamsoft.BarcodeScanner({
177
+ const barcodeScanner = new Dynamsoft.BarcodeScanner({
176
178
  // Please don't forget to replace YOUR_LICENSE_KEY_HERE
177
- license: "YOUR_LICENSE_KEY_HERE",
179
+ license: "YOUR_LICENSE_KEY_HERE",
178
180
  });
179
181
  ```
180
182
 
@@ -185,7 +187,7 @@ This is the **simplest** way to initialize the Barcode Scanner. The configuratio
185
187
 
186
188
  ```js
187
189
  // Initialize the Dynamsoft Barcode Scanner in MULTI_UNIQUE mode
188
- const barcodescanner = new Dynamsoft.BarcodeScanner({
190
+ const barcodeScanner = new Dynamsoft.BarcodeScanner({
189
191
  license: "YOUR_LICENSE_KEY_HERE",
190
192
  scanMode: Dynamsoft.EnumScanMode.SM_MULTI_UNIQUE,
191
193
  });
@@ -196,7 +198,7 @@ const barcodescanner = new Dynamsoft.BarcodeScanner({
196
198
  ```js
197
199
  (async () => {
198
200
  // Launch the scanner and wait for the result
199
- const result = await barcodescanner.launch();
201
+ const result = await barcodeScanner.launch();
200
202
  // Display the first detected barcode's text in an alert
201
203
  if (result.barcodeResults.length) {
202
204
  alert(result.barcodeResults[0].text);
@@ -207,12 +209,12 @@ const barcodescanner = new Dynamsoft.BarcodeScanner({
207
209
  Now that the Barcode Scanner has been initialized and configured, it is ready to be launched! Upon launch, the Barcode Scanner presents the main **`BarcodeScannerView`** UI in its container on the page, and is ready to start scanning. By default, we use the `SINGLE` scanning mode, which means only one decoding result will be included in the final result. In the code above, we directly alerted the successfully decoded barcode text on the page.
208
210
 
209
211
  > [!NOTE]
210
- > In the Hello World sample, after a successfully decoding process, the scanner closes and the user is met with an empty page. In order to open the scanner again, the user must refresh the page. You may choose to implement a more user-friendly behavior in a production environment, such as presenting the user with an option to re-open the Barcode Scanner upon closing it.
212
+ > In the Hello World sample, after a successful decoding process, the scanner closes and the user is met with an empty page. In order to open the scanner again, the user must refresh the page. You may choose to implement a more user-friendly behavior in a production environment, such as presenting the user with an option to re-open the Barcode Scanner upon closing it.
211
213
 
212
214
  ## Next Steps
213
215
 
214
- Now that you've implemented the basic functionality, here are some recommended next steps to further explore the capabilities of the Barcode Scanner
216
+ Now that you've implemented the basic functionality, here are some recommended next steps to further explore the capabilities of the Barcode Scanner:
215
217
 
216
218
  1. Learn how to [Customize the Barcode Scanner](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/barcode-scanner-customization.html)
217
- 2. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=11.0.6000)
218
- 3. Learn about the [APIs of BarcodeScanner](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/barcode-scanner.html?ver=11.0.6000)
219
+ 2. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=11.2.2000)
220
+ 3. Learn about the [APIs of BarcodeScanner](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/barcode-scanner.html?ver=11.2.2000)