add VIN sample folder

Author: a362758199

README.md

@@ -64,6 +64,7 @@ If you have any questions, feel free to [contact Dynamsoft support](https://www.
 - [show-result-texts-on-the-video/](./scenarios/show-result-texts-on-the-video/) — Overlay decoded text on live video while scanning.
 - [batch-inventory/](./scenarios/batch-inventory/) — Batch scanning workflow for inventory collection and export.
 - [read-a-drivers-license/](./scenarios/read-a-drivers-license/) — Demo for reading and parsing a driver's license image/data.
+- [read-vin/](./scenarios/read-vin/) — Demo for reading and parsing a VIN(vehicle identification number) code.
 - [read-and-parse-GS1-AI/](./scenarios/read-and-parse-GS1-AI/) — Example showing GS1 AI parsing and data extraction.
 - [scan-qr-code/](./scenarios/scan-qr-code/) — QR code targeted demo and settings.
 - [scan-common-1D-and-2D/](./scenarios/scan-common-1D-and-2D/) — Demo configured to detect a wide range of barcode formats.

index.html

@@ -29,7 +29,6 @@
     </style>
     <!--
         For document, copy start from here
-        search `href="frameworks` replace to `href="https://demo.dynamsoft.com/Samples/DBR/JS/frameworks`
         search `href="scenarios` replace to `href="https://demo.dynamsoft.com/Samples/DBR/JS/scenarios`
     -->
     <style>
@@ -1272,7 +1271,7 @@ <h3>
       <!-- Scenario Samples -->
       <div class="file">
         <h3>
-          Scenario Samples <span class="sample-count">(16)</span>
+          Scenario Samples <span class="sample-count">(17)</span>
           <a
             class="button title readme-link section-readme-link"
             href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/scenarios/README.md"
@@ -1454,6 +1453,17 @@ <h3>
               ></span
             >
           </div>
+          <div class="file">
+            <span data-balloon-length="large" data-balloon-pos="down" aria-label="Read the VIN(vehicle identification number) code and parse it."
+              ><a class="button title demo-link" href="scenarios/read-vin/index.html" title="View live demo">Read VIN</a
+              ><a
+                class="button title source-link"
+                href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/scenarios/read-vin"
+                title="View source code on GitHub"
+                >Source</a
+              ></span
+            >
+          </div>
           <div class="file">
             <span data-balloon-length="large" data-balloon-pos="down" aria-label="Example showing GS1 AI parsing and data extraction."
               ><a class="button title demo-link" href="scenarios/read-and-parse-GS1-AI/scan-using-rtu-api/index.html" title="View live demo"

scenarios/README.md

@@ -10,8 +10,10 @@ Included samples
 - [show-result-texts-on-the-video/](./show-result-texts-on-the-video/) — Overlay decoded text on live video while scanning.
 - [batch-inventory/](./batch-inventory/) — Batch scanning workflow for inventory collection and export.
 - [read-a-drivers-license/](./read-a-drivers-license/) — Demo for reading and parsing a driver's license image/data.
+- [read-vin/](./read-vin/) — Demo for reading and parsing a VIN(vehicle identification number) code.
 - [read-and-parse-GS1-AI/](./read-and-parse-GS1-AI/) — Example showing GS1 AI parsing and data extraction.
 - [scan-qr-code/](./scan-qr-code/) — QR code targeted demo and settings.
+- [scan-datamatrix-code/](./scan-datamatrix-code/) — DataMatrix code targeted demo and settings.
 - [scan-common-1D-and-2D/](./scan-common-1D-and-2D/) — Demo configured to detect a wide range of barcode formats.
 - [scan-common-2D-codes/](./scan-common-2D-codes/) — Focused on common 2D barcode formats decoding.
 - [scan-1D-Retail/](./scan-1D-Retail/) — 1D retail barcode tuning example.

scenarios/read-a-drivers-license/README.md

@@ -6,7 +6,7 @@ A focused demo that decodes and parses barcode data from driver's license images
 
 - `index.html` — main demo page (camera + image input UI).  
 - `SampleDriversLicense.jpg` — example license image.  
-- `read_and_parse_dl.json` — parsing template / configuration used by the sample.  
+- `read_dl.json` — JSON template used by the sample.  
 - `style.css` — page styles.
 
 ## ✨ Features

…a-drivers-license/read_and_parse_dl.json …rios/read-a-drivers-license/read_dl.jsonscenarios/read-a-drivers-license/read_and_parse_dl.json renamed to scenarios/read-a-drivers-license/read_dl.json scenarios/read-a-drivers-license/read_and_parse_dl.json renamed to scenarios/read-a-drivers-license/read_dl.json

@@ -0,0 +1,40 @@
+# 🚗 Read a Vehicle Identification Number (VIN)
+
+This focused demo decodes and parses VIN barcodes from vehicle images or live camera input. It shows how to extract structured VIN data and display results in a simple UI.
+
+## Included files
+
+- `index.html` — main demo page (camera + image/file input UI)
+- `SampleVIN.jpg` — example vehicle image with a VIN barcode (if not present, use your own test image)
+- `read_vin.json` — JSON template used by the sample. used by the sample
+
+## Features
+
+- Decode VIN barcodes from camera or static image (common 1D/2D formats used for VIN encoding)
+- Validate VIN length/characters and show parsing/validation results
+- Simple UI for testing images, camera input, and parsing rules
+
+## How it works
+
+- The demo initializes the barcode reader and captures either a selected image or live video frames from the camera.
+- When a barcode is detected, the raw text is displayed and validated against VIN rules (length 17, allowed characters). If a parsing template is available, parsed fields are shown alongside the raw VIN.
+
+## Quick start
+
+Opening HTML files directly may not work as expected. Instead, run a local development server. Here’s a quick method using [Visual Studio Code](https://code.visualstudio.com/):
+
+1. Install the [Five Server extension](https://marketplace.visualstudio.com/items?itemName=yandeu.five-server) from the VS Code Marketplace.
+
+2. Right-click on `index.html` and select "Open with Five Server".
+
+## 💡 Tips
+
+- Use high-resolution images or a higher camera resolution for reliable decoding and parsing.
+- If a barcode isn't found, try cropping the image to the VIN region or increase camera resolution.
+- VIN validation: the demo checks for 17 characters and excludes I, O, Q characters which are not used in VINs.
+
+## Notes
+
+- Serve via localhost or HTTPS to enable camera access.  
+- Replace the included trial/demo license with a valid Dynamsoft license for extended evaluation.  
+- See the repository root `README.md` for running instructions and API documentation.