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 +43 -41
- package/README.md +30 -28
- package/dist/dbr.bundle.d.ts +509 -101
- package/dist/dbr.bundle.esm.js +2 -2
- package/dist/dbr.bundle.js +2 -2
- package/dist/dbr.bundle.mjs +2 -2
- package/dist/dbr.bundle.worker.js +2 -2
- package/dist/dynamsoft-barcode-reader-bundle-ml-simd-pthread.js +1 -0
- package/dist/dynamsoft-barcode-reader-bundle-ml-simd-pthread.wasm +0 -0
- package/dist/dynamsoft-barcode-reader-bundle-ml-simd-pthread.worker.js +6 -0
- package/dist/dynamsoft-barcode-reader-bundle-ml-simd.js +1 -1
- package/dist/dynamsoft-barcode-reader-bundle-ml-simd.wasm +0 -0
- package/dist/dynamsoft-barcode-reader-bundle.js +1 -1
- package/dist/dynamsoft-barcode-reader-bundle.wasm +0 -0
- package/dist/models/Code128Decoder.data +0 -0
- package/dist/models/DataMatrixQRCodeLocalization.data +0 -0
- package/dist/models/EAN13Decoder.data +0 -0
- package/dist/models/OneDDeblur.data +0 -0
- package/dist/models/OneDLocalization.data +0 -0
- package/dist/templates/DBR-PresetTemplates.json +100 -165
- package/dist/ui/barcode-scanner.ui.xml +1 -0
- package/dist/ui/dls.license.dialog.html +1 -1
- package/package.json +10 -10
- package/samples.url +1 -1
- package/dist/dynamsoft-barcode-reader-bundle-ml.js +0 -1
- package/dist/dynamsoft-barcode-reader-bundle-ml.wasm +0 -0
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
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
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"><!DOCTYPE <span class="hljs-meta-keyword">html</span>></span>
|
|
263
|
-
<span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string"
|
|
265
|
+
<span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>></span>
|
|
264
266
|
<span class="hljs-tag"><<span class="hljs-name">body</span>></span>
|
|
265
|
-
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string"
|
|
267
|
+
<span class="hljs-tag"><<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.2.2000/dist/dbr.bundle.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
|
266
268
|
<span class="hljs-tag"><<span class="hljs-name">script</span>></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
|
|
270
|
-
<span class="hljs-attr">license</span>: <span class="hljs-string"
|
|
271
|
+
<span class="hljs-comment">// Please don't forget to replace YOUR_LICENSE_KEY_HERE</span>
|
|
272
|
+
<span class="hljs-attr">license</span>: <span class="hljs-string">"YOUR_LICENSE_KEY_HERE"</span>,
|
|
271
273
|
});
|
|
272
|
-
|
|
274
|
+
(<span class="hljs-keyword">async</span> () => {
|
|
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
|
|
277
|
+
<span class="hljs-comment">// Display the first detected barcode'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"></<span class="hljs-name">html</span>></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.
|
|
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
|
|
|
@@ -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
|
|
|
293
|
-
<a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/barcode-scanner-api-samples/scan-single-barcode/hello-world.html?ver=11.
|
|
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.
|
|
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"><!DOCTYPE <span class="hljs-meta-keyword">html</span>></span>
|
|
301
|
-
<span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string"
|
|
303
|
+
<span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>></span>
|
|
302
304
|
<span class="hljs-tag"><<span class="hljs-name">body</span>></span>
|
|
303
|
-
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string"
|
|
305
|
+
<span class="hljs-tag"><<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.2.2000/dist/dbr.bundle.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
|
304
306
|
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
|
|
305
307
|
<span class="hljs-tag"></<span class="hljs-name">html</span>></span>
|
|
306
308
|
</code></pre>
|
|
307
|
-
<p>In this example, we include the precompiled Barcode Scanner SDK script via public CDN in the
|
|
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"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string"
|
|
317
|
+
<pre><code class="hljs html language-html"> <span class="hljs-tag"><<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.2.2000/dist/dbr.bundle.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></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"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string"
|
|
322
|
+
<pre><code class="hljs html language-html"> <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/dynamsoft-barcode-reader-bundle@11.2.2000/dist/dbr.bundle.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></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.
|
|
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.
|
|
327
|
+
yarn add dynamsoft-barcode-reader-bundle@11.2.2000
|
|
326
328
|
</code></pre>
|
|
327
|
-
<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.
|
|
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.
|
|
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/<pkg></code>, without <code>@<version></code>. You can copy it elsewhere and add <code>@<version></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"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string"
|
|
347
|
+
<p>You can typically include the SDK like this:</p>
|
|
348
|
+
<pre><code class="hljs html language-html"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"path/to/dynamsoft-barcode-reader-bundle@11.2.2000/dist/dbr.bundle.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></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>
|
|
354
|
-
<span class="hljs-comment">// Please don
|
|
355
|
-
<span class="hljs-attr">license</span>: <span class="hljs-string"
|
|
355
|
+
<span class="hljs-keyword">const</span> barcodeScanner = <span class="hljs-keyword">new</span> Dynamsoft.BarcodeScanner({
|
|
356
|
+
<span class="hljs-comment">// Please don't forget to replace YOUR_LICENSE_KEY_HERE</span>
|
|
357
|
+
<span class="hljs-attr">license</span>: <span class="hljs-string">"YOUR_LICENSE_KEY_HERE"</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>
|
|
365
|
-
<span class="hljs-attr">license</span>: <span class="hljs-string"
|
|
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">"YOUR_LICENSE_KEY_HERE"</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> () => {
|
|
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>
|
|
373
|
-
<span class="hljs-comment">// Display the first detected barcode
|
|
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'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
|
|
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
|
|
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.
|
|
389
|
-
<li>Learn about the <a href="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/barcode-scanner.html?ver=11.
|
|
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
|
-
|
|
38
|
+
When getting started with Barcode Scanner, we recommend getting your own 30-day trial license.
|
|
39
39
|
|
|
40
|
-
|
|
40
|
+
<!-- ### Trial License
|
|
41
41
|
|
|
42
|
-
|
|
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
|
-
|
|
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.
|
|
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.
|
|
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
|
|
|
@@ -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
|
|
|
86
|
-
<a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/barcode-scanner-api-samples/scan-single-barcode/hello-world.html?ver=11.
|
|
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.
|
|
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.
|
|
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
|
|
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.
|
|
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.
|
|
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.
|
|
132
|
+
npm i dynamsoft-barcode-reader-bundle@11.2.2000
|
|
131
133
|
# or
|
|
132
|
-
yarn add dynamsoft-barcode-reader-bundle@11.
|
|
134
|
+
yarn add dynamsoft-barcode-reader-bundle@11.2.2000
|
|
133
135
|
```
|
|
134
136
|
|
|
135
|
-
|
|
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.
|
|
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.
|
|
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.
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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.
|
|
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.
|
|
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)
|