dynamsoft-barcode-reader-bundle 10.4.2000-beta-202409252002 → 10.4.2000-beta-202410090032
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 +80 -66
- package/README.md +84 -64
- package/dist/dbr.bundle.js +2 -2
- package/dist/dbr.bundle.mjs +1 -1
- package/dist/dbr.no-content-bundle.esm.js +1 -1
- package/package.json +1 -1
package/README.html
CHANGED
|
@@ -269,21 +269,21 @@
|
|
|
269
269
|
</ul>
|
|
270
270
|
<p><strong>Popular Examples</strong></p>
|
|
271
271
|
<ul>
|
|
272
|
-
<li>Hello World - <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.
|
|
273
|
-
<li>Angular App - <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.
|
|
274
|
-
<li>React App - <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.
|
|
275
|
-
<li>Vue App - <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.
|
|
276
|
-
<li>PWA App - <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.
|
|
277
|
-
<li>WebView in Android and iOS - <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.
|
|
278
|
-
<li>Read Driver Licenses - <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.
|
|
279
|
-
<li>Fill A Form - <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.
|
|
280
|
-
<li>Show result information on the video - <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.
|
|
281
|
-
<li>Debug Camera and Collect Video Frame - <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.
|
|
272
|
+
<li>Hello World - <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/hello-world/hello-world.html">Github</a> | <a href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html?ver=10.4.20&utm_source=npm">Run</a></li>
|
|
273
|
+
<li>Angular App - <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/hello-world/angular">Github</a> | <a href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/angular/dist/dbrjs-sample-angular/browser/?ver=10.4.20&utm_source=npm">Run</a></li>
|
|
274
|
+
<li>React App - <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/hello-world/react">Github</a> | <a href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/react/build/?ver=10.4.20&utm_source=npm">Run</a></li>
|
|
275
|
+
<li>Vue App - <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/hello-world/vue">Github</a> | <a href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/vue/dist/?ver=10.4.20&utm_source=npm">Run</a></li>
|
|
276
|
+
<li>PWA App - <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/hello-world/pwa">Github</a> | <a href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/pwa/helloworld-pwa.html?ver=10.4.20&utm_source=npm">Run</a></li>
|
|
277
|
+
<li>WebView in Android and iOS - <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.4.20/hello-world/webview">Github</a></li>
|
|
278
|
+
<li>Read Driver Licenses - <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/use-case/read-a-drivers-license/index.html">Github</a> | <a href="https://demo.dynamsoft.com/samples/dbr/js/use-case/read-a-drivers-license/index.html?ver=10.4.20&utm_source=npm">Run</a></li>
|
|
279
|
+
<li>Fill A Form - <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/use-case/fill-a-form-with-barcode-reading.html">Github</a> | <a href="https://demo.dynamsoft.com/samples/dbr/js/use-case/fill-a-form-with-barcode-reading.html?ver=10.4.20&utm_source=npm">Run</a></li>
|
|
280
|
+
<li>Show result information on the video - <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/use-case/show-result-texts-on-the-video.html">Github</a> | <a href="https://demo.dynamsoft.com/Samples/DBR/JS/use-case/show-result-texts-on-the-video.html?ver=10.4.20&utm_source=npm">Run</a></li>
|
|
281
|
+
<li>Debug Camera and Collect Video Frame - <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/others/debug">Github</a></li>
|
|
282
282
|
</ul>
|
|
283
283
|
<p>You can also:</p>
|
|
284
284
|
<ul>
|
|
285
|
-
<li>Try the Official Demo - <a href="https://demo.dynamsoft.com/barcode-reader-js/?ver=10.
|
|
286
|
-
<li>Try Online Examples - <a href="https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=10.
|
|
285
|
+
<li>Try the Official Demo - <a href="https://demo.dynamsoft.com/barcode-reader-js/?ver=10.4.20&utm_source=npm">Run</a> | <a href="https://github.com/Dynamsoft/barcode-reader-javascript-demo/">Github</a></li>
|
|
286
|
+
<li>Try Online Examples - <a href="https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=10.4.20&utm_source=npm">Run</a> | <a href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.4.20/">Github</a></li>
|
|
287
287
|
</ul>
|
|
288
288
|
<h2 id="hello-world---simplest-implementation">Hello World - Simplest Implementation</h2>
|
|
289
289
|
<p>Let's start with the "Hello World" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. </p>
|
|
@@ -300,7 +300,7 @@
|
|
|
300
300
|
<span class="hljs-tag"><<span class="hljs-name">body</span>></span>
|
|
301
301
|
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"camera-view-container"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 100%; height: 60vh"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
302
302
|
<span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"results"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 100%; min-height: 10vh; font-size: 3vmin; overflow: auto"</span> <span class="hljs-attr">disabled</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span>
|
|
303
|
-
<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@10.
|
|
303
|
+
<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@10.4.2000/dist/dbr.bundle.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
|
304
304
|
<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">
|
|
305
305
|
Dynamsoft.License.LicenseManager.initLicense(<span class="hljs-string">"DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"</span>);
|
|
306
306
|
Dynamsoft.Core.CoreModule.loadWasm([<span class="hljs-string">"dbr"</span>]);
|
|
@@ -336,7 +336,7 @@
|
|
|
336
336
|
</code></pre>
|
|
337
337
|
<!--TOM: Update the code links-->
|
|
338
338
|
<p align="center" style="text-align:center; white-space: normal; ">
|
|
339
|
-
<a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.
|
|
339
|
+
<a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/hello-world/hello-world.html" title="Code in Github" style="text-decoration:none;">
|
|
340
340
|
<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;">
|
|
341
341
|
</a>
|
|
342
342
|
|
|
@@ -344,10 +344,17 @@
|
|
|
344
344
|
<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;" >
|
|
345
345
|
</a>
|
|
346
346
|
|
|
347
|
-
<a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html?ver=10.
|
|
347
|
+
<a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html?ver=10.4.20&utm_source=npm" title="Run in Dynamsoft" style="text-decoration:none;">
|
|
348
348
|
<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;">
|
|
349
349
|
</a>
|
|
350
350
|
</p>
|
|
351
|
+
<blockquote>
|
|
352
|
+
<p>Don't want to deal with too many details? We also have an <strong>out-of-the-box</strong> version:</p>
|
|
353
|
+
<p><a href="https://github.com/Dynamsoft/easy-barcode-scanner">Easy Barcode Scanner >></a> available for your reference.</p>
|
|
354
|
+
<pre><code class="hljs js language-js"><span class="hljs-comment">// Scan instantly with a single function!</span>
|
|
355
|
+
<span class="hljs-keyword">let</span> txt = <span class="hljs-keyword">await</span> EasyBarcodeScanner.scan();
|
|
356
|
+
</code></pre>
|
|
357
|
+
</blockquote>
|
|
351
358
|
<hr />
|
|
352
359
|
<h4 id="about-the-code">About the code</h4>
|
|
353
360
|
<ul>
|
|
@@ -382,7 +389,7 @@ cvRouter.addResultFilter(filter);
|
|
|
382
389
|
<p>Read more on <a href="https://www.dynamsoft.com/capture-vision/docs/core/architecture/#capture-vision-router">Capture Vision Router</a>.</p>
|
|
383
390
|
</blockquote>
|
|
384
391
|
<h3 id="run-the-example">Run the example</h3>
|
|
385
|
-
<p>You can run the example deployed to <a href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html?ver=10.
|
|
392
|
+
<p>You can run the example deployed to <a href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html?ver=10.4.20&utm_source=npm">the Dynamsoft Demo Server</a> or test it with <a href="https://jsfiddle.net/DynamsoftTeam/csm2f9wb/">JSFiddle code editor</a>. </p>
|
|
386
393
|
<p>You will be asked to allow access to your camera, after which the video will be displayed on the page. After that, you can point the camera at a barcode to read it.</p>
|
|
387
394
|
<p>When a barcode is decoded, you will see the result text show up under the video and the barcode location will be highlighted in the video feed.</p>
|
|
388
395
|
<p>Alternatively, you can test locally by copying and pasting the code shown above into a local file (e.g. "hello-world.html") and opening it in your browser.</p>
|
|
@@ -395,7 +402,7 @@ cvRouter.addResultFilter(filter);
|
|
|
395
402
|
<li>Tomcat: <a href="https://dzone.com/articles/setting-ssl-tomcat-5-minutes">Setting Up SSL on Tomcat in 5 minutes</a></li>
|
|
396
403
|
<li>Node.js: <a href="https://nodejs.org/docs/v0.4.1/api/tls.html">npm tls</a></li>
|
|
397
404
|
</ol>
|
|
398
|
-
<p>If the test doesn't go as expected, you can <a href="https://www.dynamsoft.com/company/contact/?ver=10.
|
|
405
|
+
<p>If the test doesn't go as expected, you can <a href="https://www.dynamsoft.com/company/contact/?ver=10.4.20&utm_source=npm&product=dbr&package=js">contact us</a>.</p>
|
|
399
406
|
<h2 id="building-your-own-page">Building your own page</h2>
|
|
400
407
|
<h3 id="include-the-sdk">Include the SDK</h3>
|
|
401
408
|
<p>To utilize the SDK, the initial step involves including the corresponding resource files:</p>
|
|
@@ -413,25 +420,25 @@ cvRouter.addResultFilter(filter);
|
|
|
413
420
|
<ul>
|
|
414
421
|
<li>jsDelivr</li>
|
|
415
422
|
</ul>
|
|
416
|
-
<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@10.
|
|
423
|
+
<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@10.4.2000/dist/dbr.bundle.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
|
417
424
|
</code></pre>
|
|
418
425
|
<ul>
|
|
419
426
|
<li>UNPKG</li>
|
|
420
427
|
</ul>
|
|
421
|
-
<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@10.
|
|
428
|
+
<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@10.4.2000/dist/dbr.bundle.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
|
422
429
|
</code></pre>
|
|
423
430
|
<ul>
|
|
424
431
|
<li>In some rare cases (such as some restricted areas), you might not be able to access the CDN. If this happens, you can use the following files for the test.</li>
|
|
425
432
|
</ul>
|
|
426
|
-
<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://download2.dynamsoft.com/packages/dynamsoft-barcode-reader-bundle@10.
|
|
433
|
+
<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://download2.dynamsoft.com/packages/dynamsoft-barcode-reader-bundle@10.4.2000/dist/dbr.bundle.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
|
427
434
|
</code></pre>
|
|
428
435
|
<p>However, please <strong>DO NOT</strong> use <code>download2.dynamsoft.com</code> resources in a production application as they are for temporary testing purposes only. Instead, you can try hosting the SDK yourself.</p>
|
|
429
436
|
<ul>
|
|
430
437
|
<li>In frameworks like React and Vue, you may want to add the package as a dependency.</li>
|
|
431
438
|
</ul>
|
|
432
|
-
<pre><code class="hljs sh language-sh"> npm i dynamsoft-barcode-reader-bundle@10.
|
|
439
|
+
<pre><code class="hljs sh language-sh"> npm i dynamsoft-barcode-reader-bundle@10.4.2000 -E
|
|
433
440
|
<span class="hljs-comment"># or</span>
|
|
434
|
-
yarn add dynamsoft-barcode-reader-bundle@10.
|
|
441
|
+
yarn add dynamsoft-barcode-reader-bundle@10.4.2000 -E
|
|
435
442
|
</code></pre>
|
|
436
443
|
<p>NOTE that in frameworks, you need to <a href="#specify-the-location-of-the-engine-files-optional">specify the engineResourcePaths</a>.</p>
|
|
437
444
|
<h4 id="host-the-sdk-yourself-optional">Host the SDK yourself (optional)</h4>
|
|
@@ -439,15 +446,15 @@ cvRouter.addResultFilter(filter);
|
|
|
439
446
|
<p>There are two options for downloading the SDK, and the usage for each is slightly different</p>
|
|
440
447
|
<ul>
|
|
441
448
|
<li><p>From the website</p>
|
|
442
|
-
<p><a href="https://www.dynamsoft.com/barcode-reader/downloads/?ver=10.
|
|
449
|
+
<p><a href="https://www.dynamsoft.com/barcode-reader/downloads/?ver=10.4.20&utm_source=npm&product=dbr&package=js">Download Dynamsoft Barcode Reader JavaScript Package</a></p>
|
|
443
450
|
<p>The resources are located at path <code>dynamsoft/distributables/<pkg>@<version></code>, you can typically include it like this:</p></li>
|
|
444
451
|
</ul>
|
|
445
|
-
<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">"dynamsoft/distributables/dynamsoft-barcode-reader-bundle@10.
|
|
452
|
+
<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">"dynamsoft/distributables/dynamsoft-barcode-reader-bundle@10.4.2000/dist/dbr.bundle.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
|
446
453
|
</code></pre>
|
|
447
454
|
<ul>
|
|
448
455
|
<li>npm</li>
|
|
449
456
|
</ul>
|
|
450
|
-
<pre><code class="hljs sh language-sh"> npm i dynamsoft-barcode-reader-bundle@10.
|
|
457
|
+
<pre><code class="hljs sh language-sh"> npm i dynamsoft-barcode-reader-bundle@10.4.2000 -E
|
|
451
458
|
<span class="hljs-comment"># Compared with using CDN, you need to set up more resources.</span>
|
|
452
459
|
npm i dynamsoft-capture-vision-std@1.2.10 -E
|
|
453
460
|
npm i dynamsoft-image-processing@2.2.30 -E
|
|
@@ -455,7 +462,10 @@ cvRouter.addResultFilter(filter);
|
|
|
455
462
|
<p>The resources are located at the path <code>node_modules/<pkg></code>, without <code>@<version></code>, so the script would be like:</p>
|
|
456
463
|
<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">"node_modules/dynamsoft-barcode-reader-bundle/dist/dbr.bundle.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
|
457
464
|
</code></pre>
|
|
458
|
-
<p>Since <code>@<version></code> are missing, you need to <a href="#specify-the-location-of-the-engine-files-optional">specify the engineResourcePaths</a
|
|
465
|
+
<p>Since the version tags (<code>@<version></code>) are missing, you need to <a href="#specify-the-location-of-the-engine-files-optional">specify the engineResourcePaths</a> so that the SDK can find the resources correctly.</p>
|
|
466
|
+
<blockquote>
|
|
467
|
+
<p>To avoid confusion, we suggest renaming "node<em>modules" or moving "dynamsoft-" packages elsewhere for self-hosting, as "node</em>modules" is reserved for Node.js dependencies.</p>
|
|
468
|
+
</blockquote>
|
|
459
469
|
<p><em>Note</em>:</p>
|
|
460
470
|
<ul>
|
|
461
471
|
<li>Certain legacy web application servers may lack support for the <code>application/wasm</code> mimetype for .wasm files. To address this, you have two options:</li>
|
|
@@ -479,7 +489,7 @@ cvRouter.addResultFilter(filter);
|
|
|
479
489
|
<p>To enable the SDK's functionality, you must provide a valid license. Utilize the API function initLicense to set your license key.</p>
|
|
480
490
|
<pre><code class="hljs javascript language-javascript">Dynamsoft.License.LicenseManager.initLicense(<span class="hljs-string">"DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"</span>);
|
|
481
491
|
</code></pre>
|
|
482
|
-
<p>As previously stated, the key "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" serves as a test license valid for 24 hours, applicable to any newly authorized browser. To test the SDK further, you can request a 30-day free trial license via the <a href="https://www.dynamsoft.com/customer/license/trialLicense?ver=10.
|
|
492
|
+
<p>As previously stated, the key "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" serves as a test license valid for 24 hours, applicable to any newly authorized browser. To test the SDK further, you can request a 30-day free trial license via the <a href="https://www.dynamsoft.com/customer/license/trialLicense?ver=10.4.20&utm_source=npm&product=dbr&package=js" target="_blank">Request a Trial License</a> link.</p>
|
|
483
493
|
<blockquote>
|
|
484
494
|
<p>Upon registering a Dynamsoft account and obtaining the SDK package from the official website, Dynamsoft will automatically create a 30-day free trial license and embed the corresponding license key into all the provided SDK samples.</p>
|
|
485
495
|
</blockquote>
|
|
@@ -488,13 +498,13 @@ cvRouter.addResultFilter(filter);
|
|
|
488
498
|
<p>The purpose is to tell the SDK where to find the engine files (*.worker.js, *.wasm.js and *.wasm, etc.). The API is called <code>Dynamsoft.Core.CoreModule.engineResourcePaths</code>:</p>
|
|
489
499
|
<pre><code class="hljs javascript language-javascript"><span class="hljs-comment">//The following code uses the jsDelivr CDN, feel free to change it to your own location of these files</span>
|
|
490
500
|
<span class="hljs-built_in">Object</span>.assign(Dynamsoft.Core.CoreModule.engineResourcePaths, {
|
|
491
|
-
<span class="hljs-attr">std</span>: <span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.
|
|
492
|
-
<span class="hljs-attr">dip</span>: <span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.
|
|
493
|
-
<span class="hljs-attr">core</span>: <span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-core@3.
|
|
494
|
-
<span class="hljs-attr">license</span>: <span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-license@3.
|
|
495
|
-
<span class="hljs-attr">cvr</span>: <span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.
|
|
496
|
-
<span class="hljs-attr">dbr</span>: <span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.
|
|
497
|
-
<span class="hljs-attr">dce</span>: <span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0
|
|
501
|
+
<span class="hljs-attr">std</span>: <span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.4.10/dist/"</span>,
|
|
502
|
+
<span class="hljs-attr">dip</span>: <span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.4.20/dist/"</span>,
|
|
503
|
+
<span class="hljs-attr">core</span>: <span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-core@3.4.20/dist/"</span>,
|
|
504
|
+
<span class="hljs-attr">license</span>: <span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-license@3.4.20/dist/"</span>,
|
|
505
|
+
<span class="hljs-attr">cvr</span>: <span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.4.20/dist/"</span>,
|
|
506
|
+
<span class="hljs-attr">dbr</span>: <span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.4.20/dist/"</span>,
|
|
507
|
+
<span class="hljs-attr">dce</span>: <span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.1.0/dist/"</span>
|
|
498
508
|
});
|
|
499
509
|
</code></pre>
|
|
500
510
|
<h3 id="set-up-and-start-image-processing">Set up and start image processing</h3>
|
|
@@ -518,7 +528,7 @@ cvRouter.addResultFilter(filter);
|
|
|
518
528
|
<p>When creating a <code>CaptureVisionRouter</code> object within a function which may be called more than once, it's best to use a "helper" variable to avoid double creation such as <code>pCvRouter</code> in the following code:</p>
|
|
519
529
|
<pre><code class="hljs javascript language-javascript">Dynamsoft.License.LicenseManager.initLicense(<span class="hljs-string">"DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"</span>);
|
|
520
530
|
|
|
521
|
-
<span class="hljs-keyword">let</span> pCvRouter = <span class="hljs-literal">null</span>; <span class="hljs-comment">// promise of cvRouter</span>
|
|
531
|
+
<span class="hljs-keyword">let</span> pCvRouter = <span class="hljs-literal">null</span>; <span class="hljs-comment">// The helper variable which is a promise of cvRouter</span>
|
|
522
532
|
<span class="hljs-keyword">let</span> cvRouter = <span class="hljs-literal">null</span>;
|
|
523
533
|
|
|
524
534
|
<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'btn-scan'</span>).addEventListener(<span class="hljs-string">'click'</span>, <span class="hljs-keyword">async</span> () => {
|
|
@@ -591,7 +601,7 @@ cvRouter.addResultReceiver({ <span class="hljs-attr">onDecodedBarcodesReceived</
|
|
|
591
601
|
<tbody>
|
|
592
602
|
<tr>
|
|
593
603
|
<td><strong>ReadBarcodes_Default</strong></td>
|
|
594
|
-
<td>Scans
|
|
604
|
+
<td>Scans barcodes.</td>
|
|
595
605
|
</tr>
|
|
596
606
|
<tr>
|
|
597
607
|
<td><strong>ReadSingleBarcode</strong></td>
|
|
@@ -653,10 +663,10 @@ settings.capturedResultItemTypes =
|
|
|
653
663
|
resultReceiver.onCapturedResultReceived = <span class="hljs-function">(<span class="hljs-params">result</span>) =></span> {
|
|
654
664
|
<span class="hljs-keyword">let</span> barcodes = result.items.filter(<span class="hljs-function"><span class="hljs-params">item</span> =></span> item.type === EnumCRIT.CRIT_BARCODE);
|
|
655
665
|
<span class="hljs-keyword">if</span> (barcodes.length > <span class="hljs-number">0</span>) {
|
|
666
|
+
<span class="hljs-comment">// Use a filter to get the image on which barcodes are found.</span>
|
|
656
667
|
<span class="hljs-keyword">let</span> image = result.items.filter(
|
|
657
668
|
<span class="hljs-function"><span class="hljs-params">item</span> =></span> item.type === EnumCRIT.CRIT_ORIGINAL_IMAGE
|
|
658
669
|
)[<span class="hljs-number">0</span>].imageData;
|
|
659
|
-
<span class="hljs-comment">// The image that we found the barcode(s) on.</span>
|
|
660
670
|
}
|
|
661
671
|
};
|
|
662
672
|
</code></pre>
|
|
@@ -671,7 +681,28 @@ settings.minImageCaptureInterval = <span class="hljs-number">500</span>;
|
|
|
671
681
|
<span class="hljs-keyword">await</span> cvRouter.startCapturing(<span class="hljs-string">"ReadSingleBarcode"</span>);
|
|
672
682
|
</code></pre>
|
|
673
683
|
<h5 id="specify-a-scan-region">Specify a scan region</h5>
|
|
674
|
-
<p>
|
|
684
|
+
<p>We can specify a scan region to allow the SDK to process only part of the image, improving processing speed. The code snippet below demonstrates how to do this using the <code>cameraEnhancer</code> image source.</p>
|
|
685
|
+
<pre><code class="hljs javascript language-javascript">cameraEnhancer = <span class="hljs-keyword">await</span> Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
|
|
686
|
+
<span class="hljs-comment">// In this example, we set the scan region to cover the central 25% of the image.</span>
|
|
687
|
+
cameraEnhancer.setScanRegion({
|
|
688
|
+
<span class="hljs-attr">x</span>: <span class="hljs-number">25</span>,
|
|
689
|
+
<span class="hljs-attr">y</span>: <span class="hljs-number">25</span>,
|
|
690
|
+
<span class="hljs-attr">width</span>: <span class="hljs-number">50</span>,
|
|
691
|
+
<span class="hljs-attr">height</span>: <span class="hljs-number">50</span>,
|
|
692
|
+
<span class="hljs-attr">isMeasuredInPercentage</span>: <span class="hljs-literal">true</span>,
|
|
693
|
+
});
|
|
694
|
+
</code></pre>
|
|
695
|
+
<p><em>Note</em>:</p>
|
|
696
|
+
<ol>
|
|
697
|
+
<li>By configuring the region at the image source, images are cropped before processing, removing the need to adjust any further processing settings.</li>
|
|
698
|
+
<li><code>cameraEnhancer</code> enhances interactivity by overlaying a mask on the video, clearly marking the scanning region.</li>
|
|
699
|
+
</ol>
|
|
700
|
+
<p><em>See Also</em>:</p>
|
|
701
|
+
<p><a href="https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/api-reference/acquisition.html#setscanregion">CameraEnhancer::setScanRegion</a></p>
|
|
702
|
+
<!-- Since DCE is always used, no need to use this approach
|
|
703
|
+
|
|
704
|
+
|
|
705
|
+
You can use the parameter `roi` (region of interest) together with the parameter `roiMeasuredInPercentage` to configure the SDK to only read a specific region on the image frames. For example, the following code limits the reading in the center 25%( = 50% * 50%) of the image frames:
|
|
675
706
|
<pre><code class="hljs javascript language-javascript"><span class="hljs-keyword">let</span> settings = <span class="hljs-keyword">await</span> cvRouter.getSimplifiedSettings(<span class="hljs-string">"ReadSingleBarcode"</span>);
|
|
676
707
|
settings.roiMeasuredInPercentage = <span class="hljs-literal">true</span>;
|
|
677
708
|
settings.roi.points = [
|
|
@@ -682,24 +713,7 @@ settings.roi.points = [
|
|
|
682
713
|
];
|
|
683
714
|
<span class="hljs-keyword">await</span> cvRouter.updateSettings(<span class="hljs-string">"ReadSingleBarcode"</span>, settings);
|
|
684
715
|
<span class="hljs-keyword">await</span> cvRouter.startCapturing(<span class="hljs-string">"ReadSingleBarcode"</span>);
|
|
685
|
-
</code></pre>
|
|
686
|
-
<p>While the code above accomplishes the task, a more effective approach is to restrict the scan region directly at the image source, as demonstrated in the following code snippet.</p>
|
|
687
|
-
<blockquote>
|
|
688
|
-
<ul>
|
|
689
|
-
<li>With the region configured at the image source, the images are cropped right before they are gathered for processing, eliminating the necessity to modify the processing settings further.</li>
|
|
690
|
-
<li><code>cameraEnhancer</code> elevates interactivity by overlaying a mask on the video, providing a clear delineation of the scanning region.</li>
|
|
691
|
-
<li>See also: <a href="https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/api-reference/acquisition.html#setscanregion">CameraEnhancer::setScanRegion</a></li>
|
|
692
|
-
</ul>
|
|
693
|
-
</blockquote>
|
|
694
|
-
<pre><code class="hljs javascript language-javascript">cameraEnhancer = <span class="hljs-keyword">await</span> Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
|
|
695
|
-
cameraEnhancer.setScanRegion({
|
|
696
|
-
<span class="hljs-attr">x</span>: <span class="hljs-number">25</span>,
|
|
697
|
-
<span class="hljs-attr">y</span>: <span class="hljs-number">25</span>,
|
|
698
|
-
<span class="hljs-attr">width</span>: <span class="hljs-number">50</span>,
|
|
699
|
-
<span class="hljs-attr">height</span>: <span class="hljs-number">50</span>,
|
|
700
|
-
<span class="hljs-attr">isMeasuredInPercentage</span>: <span class="hljs-literal">true</span>,
|
|
701
|
-
});
|
|
702
|
-
</code></pre>
|
|
716
|
+
</code></pre> -->
|
|
703
717
|
<!--
|
|
704
718
|
* Specify the maximum time allowed for processing each image
|
|
705
719
|
|
|
@@ -713,13 +727,13 @@ settings.timeout = <span class="hljs-number">500</span>;
|
|
|
713
727
|
</code></pre>
|
|
714
728
|
-->
|
|
715
729
|
<h4 id="edit-the-preset-templates-directly">Edit the preset templates directly</h4>
|
|
716
|
-
<p>The preset templates have
|
|
730
|
+
<p>The preset templates have many more settings that can be customized to suit your use case best. If you <a href="https://www.dynamsoft.com/barcode-reader/downloads/1000003-confirmation/">download the SDK from Dynamsoft website</a>, you can find the templates under</p>
|
|
717
731
|
<ul>
|
|
718
|
-
<li>"/dynamsoft-barcode-reader-js-10.
|
|
732
|
+
<li>"/dynamsoft-barcode-reader-js-10.4.2000/dynamsoft/templates/"</li>
|
|
719
733
|
</ul>
|
|
720
734
|
<p>Upon completing the template editing, you can invoke the <code>initSettings</code> method and provide it with the template path as an argument.</p>
|
|
721
|
-
<pre><code class="hljs javascript language-javascript"><span class="hljs-keyword">await</span> cvRouter.initSettings(<span class="hljs-string">"PATH-TO-THE-FILE"</span>); <span class="hljs-comment">//
|
|
722
|
-
<span class="hljs-keyword">await</span> cvRouter.startCapturing(<span class="hljs-string">"ReadSingleBarcode"</span>); <span class="hljs-comment">// Make sure the name matches one of the CaptureVisionTemplates in the
|
|
735
|
+
<pre><code class="hljs javascript language-javascript"><span class="hljs-keyword">await</span> cvRouter.initSettings(<span class="hljs-string">"PATH-TO-THE-FILE"</span>); <span class="hljs-comment">// E.g. "https://your-website/ReadSingleBarcode.json")</span>
|
|
736
|
+
<span class="hljs-keyword">await</span> cvRouter.startCapturing(<span class="hljs-string">"ReadSingleBarcode"</span>); <span class="hljs-comment">// Make sure the name matches one of the CaptureVisionTemplates in the template JSON file.</span>
|
|
723
737
|
</code></pre>
|
|
724
738
|
<h4 id="filter-the-results-important">Filter the results (Important)</h4>
|
|
725
739
|
<p>While processing video frames, it's common for the same barcode to be detected multiple times. To enhance the user experience, we can use <a href="https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/utility/multi-frame-result-cross-filter.html">MultiFrameResultCrossFilter</a> object, having two options currently at our disposal:</p>
|
|
@@ -772,7 +786,7 @@ cvRouter.addResultReceiver(resultReceiver);
|
|
|
772
786
|
<p>The UI is part of the auxiliary SDK "Dynamsoft Camera Enhancer", read more on how to <a href="https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/user-guide/index.html#customize-the-ui">customize the UI</a>.</p>
|
|
773
787
|
<h2 id="api-documentation">API Documentation</h2>
|
|
774
788
|
<p>You can check out the detailed documentation about the APIs of the SDK at<br />
|
|
775
|
-
<a href="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=10.
|
|
789
|
+
<a href="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=10.4.2000">https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=10.4.2000</a>.</p>
|
|
776
790
|
<h2 id="system-requirements">System Requirements</h2>
|
|
777
791
|
<p>DBR requires the following features to work:</p>
|
|
778
792
|
<ul>
|
|
@@ -807,7 +821,7 @@ cvRouter.addResultReceiver(resultReceiver);
|
|
|
807
821
|
</tr>
|
|
808
822
|
<tr>
|
|
809
823
|
<td style="text-align:center;">Firefox</td>
|
|
810
|
-
<td style="text-align:center;">
|
|
824
|
+
<td style="text-align:center;">v68+<sup>1</sup></td>
|
|
811
825
|
</tr>
|
|
812
826
|
<tr>
|
|
813
827
|
<td style="text-align:center;">Edge</td>
|
|
@@ -822,15 +836,15 @@ cvRouter.addResultReceiver(resultReceiver);
|
|
|
822
836
|
<p><sup>1</sup> devices running iOS needs to be on iOS 14.3+ for camera video streaming to work in Chrome, Firefox or other Apps using webviews.</p>
|
|
823
837
|
<p>Apart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.</p>
|
|
824
838
|
<h2 id="how-to-upgrade">How to Upgrade</h2>
|
|
825
|
-
<p>If you want to upgrade the SDK from an old version to a newer one, please see <a href="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/upgrade-guide/index.html?ver=10.
|
|
839
|
+
<p>If you want to upgrade the SDK from an old version to a newer one, please see <a href="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/upgrade-guide/index.html?ver=10.4.2000&utm_source=npm">how to upgrade</a>.</p>
|
|
826
840
|
<h2 id="release-notes">Release Notes</h2>
|
|
827
|
-
<p>Learn about what are included in each release at <a href="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/index.html?ver=10.
|
|
841
|
+
<p>Learn about what are included in each release at <a href="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/index.html?ver=10.4.20&utm_source=npm">https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/index.html</a>.</p>
|
|
828
842
|
<h2 id="next-steps">Next Steps</h2>
|
|
829
843
|
<p>Now that you have got the SDK integrated, you can choose to move forward in the following directions</p>
|
|
830
844
|
<ol>
|
|
831
845
|
<li>Learn how to <a href="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-in-framework.html">Use in Framework</a></li>
|
|
832
|
-
<li>Check out the <a href="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=10.
|
|
833
|
-
<li>Learn about the <a href="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/index.html?ver=10.
|
|
846
|
+
<li>Check out the <a href="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=10.4.20">Official Samples and Demo</a></li>
|
|
847
|
+
<li>Learn about the <a href="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/index.html?ver=10.4.2000">APIs of the SDK</a></li>
|
|
834
848
|
</ol>
|
|
835
849
|
</div>
|
|
836
850
|
</body>
|