You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<atarget="_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;">
290
+
<atarget="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.2.40/barcode-scanner-api-samples/scan-single-barcode/hello-world.html" title="Code in Github" style="text-decoration:none;">
291
291
<imgsrc="https://cdn.jsdelivr.net/npm/[email protected]/icons/github.svg" alt="Code in Github" width="20" height="20" style="width:20px;height:20px;">
292
292
</a>
293
293
294
294
<atarget="_blank" href="https://jsfiddle.net/DynamsoftTeam/gcqjf5r7/" title="Run via JSFiddle" style="text-decoration:none;">
295
295
<imgsrc="https://cdn.jsdelivr.net/npm/[email protected]/icons/jsfiddle.svg" alt="Run via JSFiddle" width="20" height="20" style="width:20px;height:20px;" >
296
296
</a>
297
297
298
-
<atarget="_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=github" title="Run in Dynamsoft" style="text-decoration:none;">
298
+
<atarget="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/barcode-scanner-api-samples/scan-single-barcode/hello-world.html?ver=11.2.40&utm_source=github" title="Run in Dynamsoft" style="text-decoration:none;">
299
299
<imgsrc="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/svgs/solid/circle-play.svg" alt="Run in Dynamsoft" width="20" height="20" style="width:20px;height:20px;">
300
300
</a>
301
301
</p>
302
302
<h3id="step-1-setting-up-the-html-and-including-the-barcode-scanner">Step 1: Setting up the HTML and Including the Barcode Scanner</h3>
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 <ahref="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v11.2.20">GitHub repository</a>.</p>
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 <ahref="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v11.2.40">GitHub repository</a>.</p>
304
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>
305
305
<pre><codeclass="hljs html language-html"><spanclass="hljs-meta"><!DOCTYPE <spanclass="hljs-meta-keyword">html</span>></span>
@@ -317,17 +317,17 @@ <h3 id="step-1-setting-up-the-html-and-including-the-barcode-scanner">Step 1: Se
317
317
<ul>
318
318
<li>jsDelivr</li>
319
319
</ul>
320
-
<pre><codeclass="hljs html language-html"><spanclass="hljs-tag"><<spanclass="hljs-name">script</span><spanclass="hljs-attr">src</span>=<spanclass="hljs-string">"https://cdn.jsdelivr.net/npm/[email protected].2000/dist/dbr.bundle.js"</span>></span><spanclass="hljs-tag"></<spanclass="hljs-name">script</span>></span>
320
+
<pre><codeclass="hljs html language-html"><spanclass="hljs-tag"><<spanclass="hljs-name">script</span><spanclass="hljs-attr">src</span>=<spanclass="hljs-string">"https://cdn.jsdelivr.net/npm/[email protected].4000/dist/dbr.bundle.js"</span>></span><spanclass="hljs-tag"></<spanclass="hljs-name">script</span>></span>
321
321
</code></pre>
322
322
<ul>
323
323
<li>UNPKG</li>
324
324
</ul>
325
-
<pre><codeclass="hljs html language-html"><spanclass="hljs-tag"><<spanclass="hljs-name">script</span><spanclass="hljs-attr">src</span>=<spanclass="hljs-string">"https://unpkg.com/[email protected].2000/dist/dbr.bundle.js"</span>></span><spanclass="hljs-tag"></<spanclass="hljs-name">script</span>></span>
325
+
<pre><codeclass="hljs html language-html"><spanclass="hljs-tag"><<spanclass="hljs-name">script</span><spanclass="hljs-attr">src</span>=<spanclass="hljs-string">"https://unpkg.com/[email protected].4000/dist/dbr.bundle.js"</span>></span><spanclass="hljs-tag"></<spanclass="hljs-name">script</span>></span>
326
326
</code></pre>
327
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>
<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 <ahref="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>
333
333
<divclass="multi-panel-end"></div>
@@ -336,19 +336,19 @@ <h3 id="step-1-setting-up-the-html-and-including-the-barcode-scanner">Step 1: Se
336
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>
<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>
346
346
<blockquote>
347
347
<p>[!IMPORTANT]<br/>
348
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>
349
349
</blockquote>
350
350
<p>You can typically include the SDK like this:</p>
351
-
<pre><codeclass="hljs html language-html"><spanclass="hljs-tag"><<spanclass="hljs-name">script</span><spanclass="hljs-attr">src</span>=<spanclass="hljs-string">"path/to/[email protected].2000/dist/dbr.bundle.js"</span>></span><spanclass="hljs-tag"></<spanclass="hljs-name">script</span>></span>
351
+
<pre><codeclass="hljs html language-html"><spanclass="hljs-tag"><<spanclass="hljs-name">script</span><spanclass="hljs-attr">src</span>=<spanclass="hljs-string">"path/to/[email protected].4000/dist/dbr.bundle.js"</span>></span><spanclass="hljs-tag"></<spanclass="hljs-name">script</span>></span>
<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>
393
393
<ol>
394
394
<li>Learn how to <ahref="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/barcode-scanner-customization.html">Customize the Barcode Scanner</a></li>
395
-
<li>Check out the <ahref="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 <ahref="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/barcode-scanner.html?ver=11.2.2000">APIs of BarcodeScanner</a></li>
395
+
<li>Check out the <ahref="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=11.2.4000">Official Samples and Demo</a></li>
396
+
<li>Learn about the <ahref="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/barcode-scanner.html?ver=11.2.4000">APIs of BarcodeScanner</a></li>
<atarget="_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;">
80
+
<atarget="_blank"href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.2.40/barcode-scanner-api-samples/scan-single-barcode/hello-world.html"title="Code in Github"style="text-decoration:none;">
81
81
<img src="https://cdn.jsdelivr.net/npm/[email protected]/icons/github.svg" alt="Code in Github" width="20" height="20" style="width:20px;height:20px;">
82
82
</a>
83
83
84
84
<atarget="_blank"href="https://jsfiddle.net/DynamsoftTeam/gcqjf5r7/"title="Run via JSFiddle"style="text-decoration:none;">
85
85
<img src="https://cdn.jsdelivr.net/npm/[email protected]/icons/jsfiddle.svg" alt="Run via JSFiddle" width="20" height="20" style="width:20px;height:20px;" >
86
86
</a>
87
87
88
-
<atarget="_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=github"title="Run in Dynamsoft"style="text-decoration:none;">
88
+
<atarget="_blank"href="https://demo.dynamsoft.com/Samples/DBR/JS/barcode-scanner-api-samples/scan-single-barcode/hello-world.html?ver=11.2.40&utm_source=github"title="Run in Dynamsoft"style="text-decoration:none;">
89
89
<img src="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/svgs/solid/circle-play.svg" alt="Run in Dynamsoft" width="20" height="20" style="width:20px;height:20px;">
90
90
</a>
91
91
</p>
92
92
93
93
### Step 1: Setting up the HTML and Including the Barcode Scanner
94
94
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).
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.40).
96
96
97
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.
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**:
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`.
@@ -144,14 +144,14 @@ Alternatively, you may choose to download the SDK and host the files on your own
@@ -218,5 +218,5 @@ Now that the Barcode Scanner has been initialized and configured, it is ready to
218
218
Now that you've implemented the basic functionality, here are some recommended next steps to further explore the capabilities of the Barcode Scanner:
219
219
220
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)
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)
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.4000)
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.4000)
0 commit comments