# MRZ Scanner JavaScript Edition - Demo

The Dynamsoft MRZ Scanner Demo is a fully styled, mobile-and-desktop-responsive reference implementation. It pairs the SDK with a branded landing page, a desktop-to-mobile QR-code handoff, and a polished launch flow, all built on the same `MRZScanner` / `launch()` API used in the [Quick Start](https://www.dynamsoft.com/mrz-scanner/docs/web/guides/mrz-scanner-quick-start.md) and the [User Guide](https://www.dynamsoft.com/mrz-scanner/docs/web/guides/mrz-scanner.md).

## Source

The full source lives at [`samples/demo/`](https://github.com/Dynamsoft/mrz-scanner-javascript/tree/main/samples/demo) in the [`Dynamsoft/mrz-scanner-javascript`](https://github.com/Dynamsoft/mrz-scanner-javascript) repository.

## Running the Demo Locally

1. **Clone the repository** (or download a ZIP and extract it):

    ```bash
    git clone https://github.com/Dynamsoft/mrz-scanner-javascript.git
    ```

2. **Move into the demo folder, install dependencies, build, and start the dev server:**

    ```bash
    cd mrz-scanner-javascript/samples/demo
    npm install
    npm run build
    npm run dev
    ```

The dev server prints two URLs: a `https://localhost:<port>` URL for the host machine, and a `https://<lan-ip>:<port>` URL for other devices on the same network. Open either, accept the self-signed certificate warning on first visit, and grant camera permission to use the demo.

## Live Demo

Try the [official Dynamsoft MRZ Scanner demo](https://demo.dynamsoft.com/mrz-scanner) if you want to see the user flow before cloning.

## Walkthrough

For a step-by-step breakdown of how the demo is built, see the [Demo Walkthrough](https://www.dynamsoft.com/mrz-scanner/docs/web/codegallery/demo/walkthrough.md). It covers a simpler implementation with the same home and result UI but without the branded landing page, QR-code handoff, or theming layer, designed to drop into your own project.

## Next Steps

- For a step-by-step walkthrough of the SDK API, see the [Quick Start](https://www.dynamsoft.com/mrz-scanner/docs/web/guides/mrz-scanner-quick-start.md).
- For a full production integration via npm, see the [User Guide](https://www.dynamsoft.com/mrz-scanner/docs/web/guides/mrz-scanner.md).
- To customize the scanner UI, theme, and behavior, see the [Customization Guide](https://www.dynamsoft.com/mrz-scanner/docs/web/guides/mrz-scanner-customization.md).