dynamsoft-barcode-reader-bundle 10.2.1000 → 10.4.2000-beta-202409252259
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 +110 -108
- package/README.md +118 -106
- package/dist/dbr.bundle.js +2 -2
- package/dist/dbr.bundle.mjs +2 -2
- package/dist/dbr.no-content-bundle.esm.js +2 -2
- package/package.json +9 -9
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>
|
|
@@ -298,18 +298,18 @@
|
|
|
298
298
|
<pre><code class="hljs html language-html"><span class="hljs-meta"><!DOCTYPE <span class="hljs-meta-keyword">html</span>></span>
|
|
299
299
|
<span class="hljs-tag"><<span class="hljs-name">html</span>></span>
|
|
300
300
|
<span class="hljs-tag"><<span class="hljs-name">body</span>></span>
|
|
301
|
-
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"
|
|
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>]);
|
|
307
307
|
<span class="hljs-function">(<span class="hljs-params"><span class="hljs-keyword">async</span> (</span>) =></span> {
|
|
308
308
|
<span class="hljs-keyword">let</span> cvRouter = <span class="hljs-keyword">await</span> Dynamsoft.CVR.CaptureVisionRouter.createInstance();
|
|
309
309
|
|
|
310
|
-
<span class="hljs-keyword">let</span>
|
|
311
|
-
<span class="hljs-keyword">let</span> cameraEnhancer = <span class="hljs-keyword">await</span> Dynamsoft.DCE.CameraEnhancer.createInstance(
|
|
312
|
-
<span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">"#
|
|
310
|
+
<span class="hljs-keyword">let</span> cameraView = <span class="hljs-keyword">await</span> Dynamsoft.DCE.CameraView.createInstance();
|
|
311
|
+
<span class="hljs-keyword">let</span> cameraEnhancer = <span class="hljs-keyword">await</span> Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
|
|
312
|
+
<span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">"#camera-view-container"</span>).append(cameraView.getUIElement());
|
|
313
313
|
cvRouter.setInput(cameraEnhancer);
|
|
314
314
|
|
|
315
315
|
<span class="hljs-keyword">const</span> resultsContainer = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">"#results"</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>
|
|
@@ -360,7 +367,7 @@
|
|
|
360
367
|
<code>js
|
|
361
368
|
cvRouter.setInput(cameraEnhancer);
|
|
362
369
|
</code><br />
|
|
363
|
-
> The image source in our case is a <a href="https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/user-guide/index.html">CameraEnhancer</a> object created with <code>Dynamsoft.DCE.CameraEnhancer.createInstance(
|
|
370
|
+
> The image source in our case is a <a href="https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/user-guide/index.html">CameraEnhancer</a> object created with <code>Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView)</code></li></ul></li>
|
|
364
371
|
<li><p><strong>Coordinate Image-Processing Tasks</strong></p>
|
|
365
372
|
<ul>
|
|
366
373
|
<li>The coordination happens behind the scenes. <code>cvRouter</code> starts the process by specifying a preset template "ReadSingleBarcode" in the method <code>startCapturing()</code>.<br />
|
|
@@ -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,80 +402,70 @@ 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>
|
|
402
409
|
<ul>
|
|
403
|
-
<li><code>core.js</code> encompasses common classes, interfaces, and enumerations
|
|
410
|
+
<li><code>core.js</code> encompasses common classes, interfaces, and enumerations shared across all Dynamsoft SDKs.</li>
|
|
404
411
|
<li><code>license.js</code> introduces the <code>LicenseManager</code> class, which manages the licensing for all Dynamsoft SDKs.</li>
|
|
405
|
-
<li><code>utility.js</code> encompasses auxiliary classes
|
|
406
|
-
<li><code>dbr.js</code> defines interfaces and enumerations
|
|
412
|
+
<li><code>utility.js</code> encompasses auxiliary classes shared among all Dynamsoft SDKs.</li>
|
|
413
|
+
<li><code>dbr.js</code> defines interfaces and enumerations tailored to the barcode reader module.</li>
|
|
407
414
|
<li><code>cvr.js</code> introduces the <code>CaptureVisionRouter</code> class, which governs the entire image processing workflow.</li>
|
|
408
415
|
<li><code>dce.js</code> comprises classes that offer camera support and basic user interface functionalities.</li>
|
|
409
416
|
</ul>
|
|
410
|
-
<p>
|
|
411
|
-
<ul>
|
|
412
|
-
<li>dynamsoft-core@3.2.30/dist/core.js</li>
|
|
413
|
-
<li>dynamsoft-license@3.2.21/dist/license.js</li>
|
|
414
|
-
<li>dynamsoft-utility@1.2.20/dist/utility.js</li>
|
|
415
|
-
<li>dynamsoft-barcode-reader@10.2.10/dist/dbr.js</li>
|
|
416
|
-
<li>dynamsoft-capture-vision-router@2.2.30/dist/cvr.js</li>
|
|
417
|
-
<li>dynamsoft-camera-enhancer@4.0.3/dist/dce.js</li>
|
|
418
|
-
</ul>
|
|
419
|
-
<p>Equivalent to</p>
|
|
420
|
-
<ul>
|
|
421
|
-
<li>dynamsoft-barcode-reader-bundle@10.2.1000/dist/dbr.bundle.js</li>
|
|
422
|
-
</ul>
|
|
423
|
-
<p>In the following chapters, we will use <code>dbr.bundle.js</code>.</p>
|
|
417
|
+
<p>To simplify things, starting from version 10.0.21, we introduced <code>dbr.bundle.js</code>, which combines all six of the above files. In the following chapters, we will use <code>dbr.bundle.js</code>.</p>
|
|
424
418
|
<h4 id="use-a-public-cdn">Use a public CDN</h4>
|
|
425
419
|
<p>The simplest way to include the SDK is to use either the <a href="https://jsdelivr.com/">jsDelivr</a> or <a href="https://unpkg.com/">UNPKG</a> CDN. The "hello world" example above uses <strong>jsDelivr</strong>.</p>
|
|
426
420
|
<ul>
|
|
427
421
|
<li>jsDelivr</li>
|
|
428
422
|
</ul>
|
|
429
|
-
<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>
|
|
430
424
|
</code></pre>
|
|
431
425
|
<ul>
|
|
432
426
|
<li>UNPKG</li>
|
|
433
427
|
</ul>
|
|
434
|
-
<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>
|
|
435
429
|
</code></pre>
|
|
436
430
|
<ul>
|
|
437
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>
|
|
438
432
|
</ul>
|
|
439
|
-
<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>
|
|
440
434
|
</code></pre>
|
|
441
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>
|
|
442
|
-
<h4 id="host-the-sdk-yourself-optional">Host the SDK yourself (optional)</h4>
|
|
443
|
-
<p>Besides using the public CDN, you can also download the SDK and host its files on your own server or a commercial CDN before including it in your application.</p>
|
|
444
|
-
<p>Options to download the SDK:</p>
|
|
445
436
|
<ul>
|
|
446
|
-
<li
|
|
447
|
-
<p><a href="https://www.dynamsoft.com/barcode-reader/downloads/?ver=10.2.10&utm_source=npm&product=dbr&package=js">Download Dynamsoft Barcode Reader JavaScript Package</a></p></li>
|
|
448
|
-
<li><p>npm</p></li>
|
|
437
|
+
<li>In frameworks like React and Vue, you may want to add the package as a dependency.</li>
|
|
449
438
|
</ul>
|
|
450
|
-
<pre><code class="hljs
|
|
451
|
-
|
|
452
|
-
|
|
439
|
+
<pre><code class="hljs sh language-sh"> npm i dynamsoft-barcode-reader-bundle@10.4.2000 -E
|
|
440
|
+
<span class="hljs-comment"># or</span>
|
|
441
|
+
yarn add dynamsoft-barcode-reader-bundle@10.4.2000 -E
|
|
453
442
|
</code></pre>
|
|
443
|
+
<p>NOTE that in frameworks, you need to <a href="#specify-the-location-of-the-engine-files-optional">specify the engineResourcePaths</a>.</p>
|
|
444
|
+
<h4 id="host-the-sdk-yourself-optional">Host the SDK yourself (optional)</h4>
|
|
445
|
+
<p>Besides using the public CDN, you can also download the SDK and host its files on your own server or a commercial CDN before including it in your application.</p>
|
|
446
|
+
<p>There are two options for downloading the SDK, and the usage for each is slightly different</p>
|
|
454
447
|
<ul>
|
|
455
|
-
<li>
|
|
448
|
+
<li><p>From the website</p>
|
|
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>
|
|
450
|
+
<p>The resources are located at path <code>dynamsoft/distributables/<pkg>@<version></code>, you can typically include it like this:</p></li>
|
|
456
451
|
</ul>
|
|
457
|
-
<pre><code class="hljs
|
|
458
|
-
yarn add dynamsoft-capture-vision-std@<span class="hljs-number">1</span>.<span class="hljs-number">2</span>.<span class="hljs-number">0</span> -E
|
|
459
|
-
yarn add dynamsoft-image-processing@<span class="hljs-number">2</span>.<span class="hljs-number">2</span>.<span class="hljs-number">10</span> -E
|
|
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>
|
|
460
453
|
</code></pre>
|
|
461
|
-
<p>Depending on how you downloaded the SDK and how you intend to use it, you can typically include it like this</p>
|
|
462
454
|
<ul>
|
|
463
|
-
<li>
|
|
455
|
+
<li>npm</li>
|
|
464
456
|
</ul>
|
|
465
|
-
<pre><code class="hljs
|
|
457
|
+
<pre><code class="hljs sh language-sh"> npm i dynamsoft-barcode-reader-bundle@10.4.2000 -E
|
|
458
|
+
<span class="hljs-comment"># Compared with using CDN, you need to set up more resources.</span>
|
|
459
|
+
npm i dynamsoft-capture-vision-std@1.2.10 -E
|
|
460
|
+
npm i dynamsoft-image-processing@2.2.30 -E
|
|
466
461
|
</code></pre>
|
|
467
|
-
<
|
|
468
|
-
<
|
|
469
|
-
</ul>
|
|
470
|
-
<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@10.2.1000/dist/dbr.bundle.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
|
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>
|
|
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>
|
|
471
464
|
</code></pre>
|
|
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>
|
|
472
469
|
<p><em>Note</em>:</p>
|
|
473
470
|
<ul>
|
|
474
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>
|
|
@@ -492,7 +489,7 @@ cvRouter.addResultFilter(filter);
|
|
|
492
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>
|
|
493
490
|
<pre><code class="hljs javascript language-javascript">Dynamsoft.License.LicenseManager.initLicense(<span class="hljs-string">"DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"</span>);
|
|
494
491
|
</code></pre>
|
|
495
|
-
<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>
|
|
496
493
|
<blockquote>
|
|
497
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>
|
|
498
495
|
</blockquote>
|
|
@@ -501,13 +498,13 @@ cvRouter.addResultFilter(filter);
|
|
|
501
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>
|
|
502
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>
|
|
503
500
|
<span class="hljs-built_in">Object</span>.assign(Dynamsoft.Core.CoreModule.engineResourcePaths, {
|
|
504
|
-
<span class="hljs-attr">std</span>: <span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.
|
|
505
|
-
<span class="hljs-attr">dip</span>: <span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.
|
|
506
|
-
<span class="hljs-attr">core</span>: <span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-core@3.
|
|
507
|
-
<span class="hljs-attr">license</span>: <span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-license@3.
|
|
508
|
-
<span class="hljs-attr">cvr</span>: <span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.
|
|
509
|
-
<span class="hljs-attr">dbr</span>: <span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.
|
|
510
|
-
<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>
|
|
511
508
|
});
|
|
512
509
|
</code></pre>
|
|
513
510
|
<h3 id="set-up-and-start-image-processing">Set up and start image processing</h3>
|
|
@@ -528,10 +525,10 @@ cvRouter.addResultFilter(filter);
|
|
|
528
525
|
}
|
|
529
526
|
</code></pre>
|
|
530
527
|
<p><em>Tip</em>:</p>
|
|
531
|
-
<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>
|
|
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>
|
|
532
529
|
<pre><code class="hljs javascript language-javascript">Dynamsoft.License.LicenseManager.initLicense(<span class="hljs-string">"DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"</span>);
|
|
533
530
|
|
|
534
|
-
<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>
|
|
535
532
|
<span class="hljs-keyword">let</span> cvRouter = <span class="hljs-literal">null</span>;
|
|
536
533
|
|
|
537
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> () => {
|
|
@@ -544,12 +541,12 @@ cvRouter.addResultFilter(filter);
|
|
|
544
541
|
</code></pre>
|
|
545
542
|
<h4 id="connect-an-image-source">Connect an image source</h4>
|
|
546
543
|
<p>The <code>CaptureVisionRouter</code> object, denoted as <code>cvRouter</code>, is responsible for handling images provided by an image source. In our scenario, we aim to detect barcodes directly from a live video stream. To facilitate this, we initialize a <code>CameraEnhancer</code> object, identified as <code>cameraEnhancer</code>, which is specifically designed to capture image frames from the video feed and subsequently forward them to <code>cvRouter</code>.</p>
|
|
547
|
-
<p>To enable video streaming on the webpage, we create a <code>CameraView</code> object referred to as <code>
|
|
548
|
-
<pre><code class="hljs html language-html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"
|
|
544
|
+
<p>To enable video streaming on the webpage, we create a <code>CameraView</code> object referred to as <code>cameraView</code>, which is then passed to <code>cameraEnhancer</code>, and its content is displayed on the webpage.</p>
|
|
545
|
+
<pre><code class="hljs html language-html"><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: 100vh"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
549
546
|
</code></pre>
|
|
550
|
-
<pre><code class="hljs javascript language-javascript"><span class="hljs-keyword">let</span>
|
|
551
|
-
<span class="hljs-keyword">let</span> cameraEnhancer = <span class="hljs-keyword">await</span> Dynamsoft.DCE.CameraEnhancer.createInstance(
|
|
552
|
-
<span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">"#
|
|
547
|
+
<pre><code class="hljs javascript language-javascript"><span class="hljs-keyword">let</span> cameraView = <span class="hljs-keyword">await</span> Dynamsoft.DCE.CameraView.createInstance();
|
|
548
|
+
<span class="hljs-keyword">let</span> cameraEnhancer = <span class="hljs-keyword">await</span> Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
|
|
549
|
+
<span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">"#camera-view-container"</span>).append(cameraView.getUIElement());
|
|
553
550
|
cvRouter.setInput(cameraEnhancer);
|
|
554
551
|
</code></pre>
|
|
555
552
|
<h4 id="register-a-result-receiver">Register a result receiver</h4>
|
|
@@ -604,7 +601,7 @@ cvRouter.addResultReceiver({ <span class="hljs-attr">onDecodedBarcodesReceived</
|
|
|
604
601
|
<tbody>
|
|
605
602
|
<tr>
|
|
606
603
|
<td><strong>ReadBarcodes_Default</strong></td>
|
|
607
|
-
<td>Scans
|
|
604
|
+
<td>Scans barcodes.</td>
|
|
608
605
|
</tr>
|
|
609
606
|
<tr>
|
|
610
607
|
<td><strong>ReadSingleBarcode</strong></td>
|
|
@@ -666,10 +663,10 @@ settings.capturedResultItemTypes =
|
|
|
666
663
|
resultReceiver.onCapturedResultReceived = <span class="hljs-function">(<span class="hljs-params">result</span>) =></span> {
|
|
667
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);
|
|
668
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>
|
|
669
667
|
<span class="hljs-keyword">let</span> image = result.items.filter(
|
|
670
668
|
<span class="hljs-function"><span class="hljs-params">item</span> =></span> item.type === EnumCRIT.CRIT_ORIGINAL_IMAGE
|
|
671
669
|
)[<span class="hljs-number">0</span>].imageData;
|
|
672
|
-
<span class="hljs-comment">// The image that we found the barcode(s) on.</span>
|
|
673
670
|
}
|
|
674
671
|
};
|
|
675
672
|
</code></pre>
|
|
@@ -684,7 +681,28 @@ settings.minImageCaptureInterval = <span class="hljs-number">500</span>;
|
|
|
684
681
|
<span class="hljs-keyword">await</span> cvRouter.startCapturing(<span class="hljs-string">"ReadSingleBarcode"</span>);
|
|
685
682
|
</code></pre>
|
|
686
683
|
<h5 id="specify-a-scan-region">Specify a scan region</h5>
|
|
687
|
-
<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:
|
|
688
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>);
|
|
689
707
|
settings.roiMeasuredInPercentage = <span class="hljs-literal">true</span>;
|
|
690
708
|
settings.roi.points = [
|
|
@@ -695,24 +713,7 @@ settings.roi.points = [
|
|
|
695
713
|
];
|
|
696
714
|
<span class="hljs-keyword">await</span> cvRouter.updateSettings(<span class="hljs-string">"ReadSingleBarcode"</span>, settings);
|
|
697
715
|
<span class="hljs-keyword">await</span> cvRouter.startCapturing(<span class="hljs-string">"ReadSingleBarcode"</span>);
|
|
698
|
-
</code></pre>
|
|
699
|
-
<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>
|
|
700
|
-
<blockquote>
|
|
701
|
-
<ul>
|
|
702
|
-
<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>
|
|
703
|
-
<li><code>cameraEnhancer</code> elevates interactivity by overlaying a mask on the video, providing a clear delineation of the scanning region.</li>
|
|
704
|
-
<li>See also: <a href="https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/api-reference/acquisition.html#setscanregion">CameraEnhancer::setScanRegion</a></li>
|
|
705
|
-
</ul>
|
|
706
|
-
</blockquote>
|
|
707
|
-
<pre><code class="hljs javascript language-javascript">cameraEnhancer = <span class="hljs-keyword">await</span> Dynamsoft.DCE.CameraEnhancer.createInstance(view);
|
|
708
|
-
cameraEnhancer.setScanRegion({
|
|
709
|
-
<span class="hljs-attr">x</span>: <span class="hljs-number">25</span>,
|
|
710
|
-
<span class="hljs-attr">y</span>: <span class="hljs-number">25</span>,
|
|
711
|
-
<span class="hljs-attr">width</span>: <span class="hljs-number">50</span>,
|
|
712
|
-
<span class="hljs-attr">height</span>: <span class="hljs-number">50</span>,
|
|
713
|
-
<span class="hljs-attr">isMeasuredInPercentage</span>: <span class="hljs-literal">true</span>,
|
|
714
|
-
});
|
|
715
|
-
</code></pre>
|
|
716
|
+
</code></pre> -->
|
|
716
717
|
<!--
|
|
717
718
|
* Specify the maximum time allowed for processing each image
|
|
718
719
|
|
|
@@ -726,13 +727,13 @@ settings.timeout = <span class="hljs-number">500</span>;
|
|
|
726
727
|
</code></pre>
|
|
727
728
|
-->
|
|
728
729
|
<h4 id="edit-the-preset-templates-directly">Edit the preset templates directly</h4>
|
|
729
|
-
<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>
|
|
730
731
|
<ul>
|
|
731
|
-
<li>"/dynamsoft-barcode-reader-js-10.
|
|
732
|
+
<li>"/dynamsoft-barcode-reader-js-10.4.2000/dynamsoft/templates/"</li>
|
|
732
733
|
</ul>
|
|
733
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>
|
|
734
|
-
<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">//
|
|
735
|
-
<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>
|
|
736
737
|
</code></pre>
|
|
737
738
|
<h4 id="filter-the-results-important">Filter the results (Important)</h4>
|
|
738
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>
|
|
@@ -785,7 +786,7 @@ cvRouter.addResultReceiver(resultReceiver);
|
|
|
785
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>
|
|
786
787
|
<h2 id="api-documentation">API Documentation</h2>
|
|
787
788
|
<p>You can check out the detailed documentation about the APIs of the SDK at<br />
|
|
788
|
-
<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>
|
|
789
790
|
<h2 id="system-requirements">System Requirements</h2>
|
|
790
791
|
<p>DBR requires the following features to work:</p>
|
|
791
792
|
<ul>
|
|
@@ -820,7 +821,7 @@ cvRouter.addResultReceiver(resultReceiver);
|
|
|
820
821
|
</tr>
|
|
821
822
|
<tr>
|
|
822
823
|
<td style="text-align:center;">Firefox</td>
|
|
823
|
-
<td style="text-align:center;">
|
|
824
|
+
<td style="text-align:center;">v68+<sup>1</sup></td>
|
|
824
825
|
</tr>
|
|
825
826
|
<tr>
|
|
826
827
|
<td style="text-align:center;">Edge</td>
|
|
@@ -835,14 +836,15 @@ cvRouter.addResultReceiver(resultReceiver);
|
|
|
835
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>
|
|
836
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>
|
|
837
838
|
<h2 id="how-to-upgrade">How to Upgrade</h2>
|
|
838
|
-
<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>
|
|
839
840
|
<h2 id="release-notes">Release Notes</h2>
|
|
840
|
-
<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>
|
|
841
842
|
<h2 id="next-steps">Next Steps</h2>
|
|
842
843
|
<p>Now that you have got the SDK integrated, you can choose to move forward in the following directions</p>
|
|
843
844
|
<ol>
|
|
844
|
-
<li>
|
|
845
|
-
<li>
|
|
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>
|
|
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>
|
|
846
848
|
</ol>
|
|
847
849
|
</div>
|
|
848
850
|
</body>
|