<p>Sample code for building web-based barcode scanning applications</p>
</div>
<divclass="quick-start">
<h2>Quick Start</h2>
<ol>
<li>Open <ahref="./index.html"><strong>index.html</strong></a> to browse all samples with live demo links.</li>
<li>Or double-click any HTML in <code>basics/</code> to run it immediately (internet required for CDN).</li>
<li>For framework samples (<code>frameworks/</code>), run <code>npm install</code> in the desired subfolder, then follow that subfolder’s README for the correct commands.</li>
</ol>
</div>
<h2>System Requirements</h2>
<h3>Secure Context (HTTPS Deployment)</h3>
<p>
When deploying your application/website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons:
</p>
<ul>
<li>Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.</li>
<li>Dynamsoft License requires a secure context to work.</li>
</ul>
<pclass="callout callout-note">
Some browsers like Chrome may grant access for <code>http://127.0.0.1</code> and <code>http://localhost</code> or even for pages opened directly from the local disk (<code>file:///...</code>). This can be helpful for temporary development and testing.
</p>
<h3>Browser Compatibility</h3>
<table>
<tr><th>Browser</th><th>Version</th></tr>
<tr><td>Chrome</td><td>v78+</td></tr>
<tr><td>Firefox</td><td>v68+</td></tr>
<tr><td>Edge</td><td>v79+</td></tr>
<tr><td>Safari</td><td>v14.5+</td></tr>
</table>
<h2>License</h2>
<p>
A default trial license is included which allows you to test the sample apps for up to 24 hours.
You can <ahref="https://www.dynamsoft.com/customer/license/trialLicense?product=dbr&package=js&utm_source=sampleReadme">request a 30-day trial license</a> via the Dynamsoft website to evaluate further.
</p>
<pclass="callout">
<strong>Important:</strong> Once your trial license expires, the SDK will throw an error and cease to function.
Visit the <ahref="https://www.dynamsoft.com/customer/license/trialLicense?product=dbr&utm_source=sampleReadme&package=js">Dynamsoft Customer Portal</a>
to view your trial license details. The trial period can be extended to a total of 60 days.
</p>
<h2>Running the Samples Locally</h2>
<p>
The standalone samples in the <code>basics/</code> folder (<code>hello-world.html</code>, <code>scan-a-single-barcode.html</code>, <code>read-an-image.html</code>) and scenario samples load the SDK from a CDN, so you can open them directly by double-clicking — no web server required (an internet connection is needed).
</p>
<p>
To browse all available samples, open <ahref="./index.html"><code>index.html</code></a> in your browser — it links to every sample in the repository.
</p>
<p>
For framework samples, follow the instructions in each subfolder's README (typically <code>npm install</code> then <code>npm run dev</code>).
</p>
<p>
If you need a web server for standalone or scenario samples (for example, to serve SDK resources from a local <code>dist/</code> folder), here's a quick method using <ahref="https://code.visualstudio.com/">Visual Studio Code</a>:
</p>
<ol>
<li>Install the <ahref="https://marketplace.visualstudio.com/items?itemName=yandeu.five-server">Five Server</a> extension from the VS Code Marketplace.</li>
<li>Right-click on an HTML file and select "Open with Five Server". This will serve the application at <code>http://127.0.0.1:5500/</code>.</li>
</ol>
<h2>Sample Folders</h2>
<ul>
<li><strong><code>basics/</code></strong> — Three foundational samples: hello-world, scan-a-single-barcode, and read-an-image.</li>
<li><strong><code>scenarios/</code></strong> — Real-world use cases: inventory scanning, VIN reading, GS1 parsing, and more.</li>
<li><strong><code>frameworks/</code></strong> — Integrations for Angular, React, Vue, Next.js, Svelte, Blazor, Capacitor, Electron, and others.</li>
<ahref="https://demo.dynamsoft.com/barcode-reader-js"><strong>Official Online Demo</strong></a>: Try the Dynamsoft Barcode Reader JavaScript Edition demo (written in Vue) and see how it works in different modes!