dynamsoft-barcode-reader-bundle 11.0.6000 → 11.2.2000-beta-202510290153
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 +48 -41
- package/README.md +36 -32
- 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
|
@@ -220,6 +220,16 @@
|
|
|
220
220
|
<body>
|
|
221
221
|
<div id='content'>
|
|
222
222
|
<h1 id="build-a-web-based-barcode-scanner-using-just-a-few-lines-of-javascript">Build a Web-Based Barcode Scanner Using Just a Few Lines of JavaScript</h1>
|
|
223
|
+
<!-- Don't forget to add the TOC & update license section, which is useful for npm README.-->
|
|
224
|
+
<ul>
|
|
225
|
+
<li><a href="#build-a-web-based-barcode-scanner-using-just-a-few-lines-of-javascript">Build a Web-Based Barcode Scanner Using Just a Few Lines of JavaScript</a></li>
|
|
226
|
+
<li><a href="#license">License</a></li>
|
|
227
|
+
<li><a href="#quick-start-hello-world-example">Quick Start: Hello World Example</a><ul>
|
|
228
|
+
<li><a href="#step-1-setting-up-the-html-and-including-the-barcode-scanner">Step 1: Setting up the HTML and Including the Barcode Scanner</a></li>
|
|
229
|
+
<li><a href="#step-2-initializing-the-barcode-scanner">Step 2: Initializing the Barcode Scanner</a></li>
|
|
230
|
+
<li><a href="#step-3-launching-the-barcode-scanner">Step 3: Launching the Barcode Scanner</a></li></ul></li>
|
|
231
|
+
<li><a href="#next-steps">Next Steps</a></li>
|
|
232
|
+
</ul>
|
|
223
233
|
<p>This user guide provides a step-by-step walkthrough of a "Hello World" web application using the <code>BarcodeScanner</code> JavaScript Edition.</p>
|
|
224
234
|
<p>The <code>BarcodeScanner</code> class offers the following features:</p>
|
|
225
235
|
<ul>
|
|
@@ -249,30 +259,25 @@ Thanks to its simplified APIs and built-in UI for video streaming, you can imple
|
|
|
249
259
|
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
260
|
</blockquote>
|
|
251
261
|
<h2 id="license">License</h2>
|
|
252
|
-
<!-- When getting started with Barcode Scanner, we recommend getting your own 30-day trial license. -->
|
|
253
262
|
<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
|
-
<!--
|
|
255
|
-
|
|
256
|
-
|
|
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>
|
|
263
|
+
<!-- When getting started with Barcode Scanner, we recommend getting your own 30-day trial license.
|
|
264
|
+
|
|
265
|
+
{% include trialLicense.html %} -->
|
|
261
266
|
<h2 id="quick-start-hello-world-example">Quick Start: Hello World Example</h2>
|
|
262
267
|
<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"
|
|
268
|
+
<span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>></span>
|
|
264
269
|
<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"
|
|
270
|
+
<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
271
|
<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">
|
|
267
272
|
<span class="hljs-comment">// Initialize the Dynamsoft Barcode Scanner</span>
|
|
268
273
|
<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"
|
|
274
|
+
<span class="hljs-comment">// Please don't forget to replace YOUR_LICENSE_KEY_HERE</span>
|
|
275
|
+
<span class="hljs-attr">license</span>: <span class="hljs-string">"YOUR_LICENSE_KEY_HERE"</span>,
|
|
271
276
|
});
|
|
272
|
-
|
|
277
|
+
(<span class="hljs-keyword">async</span> () => {
|
|
273
278
|
<span class="hljs-comment">// Launch the scanner and wait for the result</span>
|
|
274
279
|
<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
|
|
280
|
+
<span class="hljs-comment">// Display the first detected barcode's text in an alert</span>
|
|
276
281
|
<span class="hljs-keyword">if</span> (result.barcodeResults.length) {
|
|
277
282
|
alert(result.barcodeResults[<span class="hljs-number">0</span>].text);
|
|
278
283
|
}
|
|
@@ -282,7 +287,7 @@ Thanks to its simplified APIs and built-in UI for video streaming, you can imple
|
|
|
282
287
|
<span class="hljs-tag"></<span class="hljs-name">html</span>></span>
|
|
283
288
|
</code></pre>
|
|
284
289
|
<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.
|
|
290
|
+
<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
291
|
<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
292
|
</a>
|
|
288
293
|
|
|
@@ -290,21 +295,21 @@ Thanks to its simplified APIs and built-in UI for video streaming, you can imple
|
|
|
290
295
|
<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
296
|
</a>
|
|
292
297
|
|
|
293
|
-
<a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/barcode-scanner-api-samples/scan-single-barcode/hello-world.html?ver=11.
|
|
298
|
+
<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
299
|
<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
300
|
</a>
|
|
296
301
|
</p>
|
|
297
302
|
<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.
|
|
303
|
+
<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
304
|
<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
305
|
<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"
|
|
306
|
+
<span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>></span>
|
|
302
307
|
<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"
|
|
308
|
+
<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
309
|
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
|
|
305
310
|
<span class="hljs-tag"></<span class="hljs-name">html</span>></span>
|
|
306
311
|
</code></pre>
|
|
307
|
-
<p>In this example, we include the precompiled Barcode Scanner SDK script via public CDN in the
|
|
312
|
+
<p>In this example, we include the precompiled Barcode Scanner SDK script via public CDN in the body.</p>
|
|
308
313
|
<div class="multi-panel-switching-prefix"></div>
|
|
309
314
|
<div class="multi-panel-start"></div>
|
|
310
315
|
<div class="multi-panel-title">Use a public CDN</div>
|
|
@@ -312,47 +317,47 @@ Thanks to its simplified APIs and built-in UI for video streaming, you can imple
|
|
|
312
317
|
<ul>
|
|
313
318
|
<li>jsDelivr</li>
|
|
314
319
|
</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"
|
|
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">"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
321
|
</code></pre>
|
|
317
322
|
<ul>
|
|
318
323
|
<li>UNPKG</li>
|
|
319
324
|
</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"
|
|
325
|
+
<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
326
|
</code></pre>
|
|
322
327
|
<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.
|
|
328
|
+
<pre><code class="hljs sh language-sh"> npm i dynamsoft-barcode-reader-bundle@11.2.2000
|
|
324
329
|
<span class="hljs-comment"># or</span>
|
|
325
|
-
yarn add dynamsoft-barcode-reader-bundle@11.
|
|
330
|
+
yarn add dynamsoft-barcode-reader-bundle@11.2.2000
|
|
326
331
|
</code></pre>
|
|
327
|
-
<p>
|
|
332
|
+
<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
333
|
<div class="multi-panel-end"></div>
|
|
329
334
|
<div class="multi-panel-start"></div>
|
|
330
335
|
<div class="multi-panel-title">Host the SDK yourself</div>
|
|
331
336
|
<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
337
|
<ul>
|
|
333
338
|
<li><p>From the website</p>
|
|
334
|
-
<p><a href="https://www.dynamsoft.com/barcode-reader/downloads/?ver=11.
|
|
339
|
+
<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
340
|
<p>The resources are located in the <code>./dist/</code> directory.</p></li>
|
|
336
341
|
<li><p>From npm</p></li>
|
|
337
342
|
</ul>
|
|
338
|
-
<pre><code class="hljs sh language-sh"> npm i dynamsoft-barcode-reader-bundle@11.
|
|
343
|
+
<pre><code class="hljs sh language-sh"> npm i dynamsoft-barcode-reader-bundle@11.2.2000
|
|
339
344
|
</code></pre>
|
|
340
345
|
<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
346
|
<blockquote>
|
|
342
347
|
<p>[!IMPORTANT]<br />
|
|
343
348
|
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
349
|
</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"
|
|
350
|
+
<p>You can typically include the SDK like this:</p>
|
|
351
|
+
<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
352
|
</code></pre>
|
|
348
353
|
<div class="multi-panel-end"></div>
|
|
349
354
|
<div class="multi-panel-switching-end"></div>
|
|
350
355
|
<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
356
|
<h3 id="step-2-initializing-the-barcode-scanner">Step 2: Initializing the Barcode Scanner</h3>
|
|
352
357
|
<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"
|
|
358
|
+
<span class="hljs-keyword">const</span> barcodeScanner = <span class="hljs-keyword">new</span> Dynamsoft.BarcodeScanner({
|
|
359
|
+
<span class="hljs-comment">// Please don't forget to replace YOUR_LICENSE_KEY_HERE</span>
|
|
360
|
+
<span class="hljs-attr">license</span>: <span class="hljs-string">"YOUR_LICENSE_KEY_HERE"</span>,
|
|
356
361
|
});
|
|
357
362
|
</code></pre>
|
|
358
363
|
<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 +366,16 @@ Thanks to its simplified APIs and built-in UI for video streaming, you can imple
|
|
|
361
366
|
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
367
|
</blockquote>
|
|
363
368
|
<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"
|
|
369
|
+
<span class="hljs-keyword">const</span> barcodeScanner = <span class="hljs-keyword">new</span> Dynamsoft.BarcodeScanner({
|
|
370
|
+
<span class="hljs-attr">license</span>: <span class="hljs-string">"YOUR_LICENSE_KEY_HERE"</span>,
|
|
366
371
|
<span class="hljs-attr">scanMode</span>: Dynamsoft.EnumScanMode.SM_MULTI_UNIQUE,
|
|
367
372
|
});
|
|
368
373
|
</code></pre>
|
|
369
374
|
<h3 id="step-3-launching-the-barcode-scanner">Step 3: Launching the Barcode Scanner</h3>
|
|
370
375
|
<pre><code class="hljs js language-js">(<span class="hljs-keyword">async</span> () => {
|
|
371
376
|
<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
|
|
377
|
+
<span class="hljs-keyword">const</span> result = <span class="hljs-keyword">await</span> barcodeScanner.launch();
|
|
378
|
+
<span class="hljs-comment">// Display the first detected barcode's text in an alert</span>
|
|
374
379
|
<span class="hljs-keyword">if</span> (result.barcodeResults.length) {
|
|
375
380
|
alert(result.barcodeResults[<span class="hljs-number">0</span>].text);
|
|
376
381
|
}
|
|
@@ -379,14 +384,16 @@ Thanks to its simplified APIs and built-in UI for video streaming, you can imple
|
|
|
379
384
|
<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
385
|
<blockquote>
|
|
381
386
|
<p>[!NOTE]<br />
|
|
382
|
-
In the Hello World sample, after a
|
|
387
|
+
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>
|
|
388
|
+
<p>[!TIP]<br />
|
|
389
|
+
When running performance benchmarks, make sure to disable the console, avoid using <code>console.log()</code>, and run in non-debug mode whenever possible. This ensures that your benchmark results reflect true performance without interference from logging or debugging overhead.</p>
|
|
390
|
+
<h2 id="next-steps">Next Steps</h2>
|
|
383
391
|
</blockquote>
|
|
384
|
-
<
|
|
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>
|
|
392
|
+
<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
393
|
<ol>
|
|
387
394
|
<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.
|
|
395
|
+
<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>
|
|
396
|
+
<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
397
|
</ol>
|
|
391
398
|
</div>
|
|
392
399
|
</body>
|
package/README.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# Build a Web-Based Barcode Scanner Using Just a Few Lines of JavaScript
|
|
2
2
|
|
|
3
|
+
<!-- Don't forget to add the TOC & update license section, which is useful for npm README.-->
|
|
4
|
+
- [Build a Web-Based Barcode Scanner Using Just a Few Lines of JavaScript](#build-a-web-based-barcode-scanner-using-just-a-few-lines-of-javascript)
|
|
5
|
+
- [License](#license)
|
|
6
|
+
- [Quick Start: Hello World Example](#quick-start-hello-world-example)
|
|
7
|
+
- [Step 1: Setting up the HTML and Including the Barcode Scanner](#step-1-setting-up-the-html-and-including-the-barcode-scanner)
|
|
8
|
+
- [Step 2: Initializing the Barcode Scanner](#step-2-initializing-the-barcode-scanner)
|
|
9
|
+
- [Step 3: Launching the Barcode Scanner](#step-3-launching-the-barcode-scanner)
|
|
10
|
+
- [Next Steps](#next-steps)
|
|
11
|
+
|
|
3
12
|
This user guide provides a step-by-step walkthrough of a "Hello World" web application using the `BarcodeScanner` JavaScript Edition.
|
|
4
13
|
|
|
5
14
|
The `BarcodeScanner` class offers the following features:
|
|
@@ -35,18 +44,11 @@ new Dynamsoft.BarcodeScanner().launch().then(result=>alert(result.barcodeResults
|
|
|
35
44
|
|
|
36
45
|
## License
|
|
37
46
|
|
|
38
|
-
<!-- When getting started with Barcode Scanner, we recommend getting your own 30-day trial license. -->
|
|
39
|
-
|
|
40
47
|
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)
|
|
41
48
|
|
|
42
|
-
<!--
|
|
43
|
-
|
|
44
|
-
> [!IMPORTANT]
|
|
45
|
-
> 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.
|
|
49
|
+
<!-- When getting started with Barcode Scanner, we recommend getting your own 30-day trial license.
|
|
46
50
|
|
|
47
|
-
|
|
48
|
-
|
|
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
|
+
{% include trialLicense.html %} -->
|
|
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,14 @@ 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
|
|
|
214
|
+
> [!TIP]
|
|
215
|
+
> When running performance benchmarks, make sure to disable the console, avoid using `console.log()`, and run in non-debug mode whenever possible. This ensures that your benchmark results reflect true performance without interference from logging or debugging overhead.
|
|
212
216
|
## Next Steps
|
|
213
217
|
|
|
214
|
-
Now that you've implemented the basic functionality, here are some recommended next steps to further explore the capabilities of the Barcode Scanner
|
|
218
|
+
Now that you've implemented the basic functionality, here are some recommended next steps to further explore the capabilities of the Barcode Scanner:
|
|
215
219
|
|
|
216
220
|
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.
|
|
221
|
+
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)
|
|
222
|
+
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)
|