# Mobile Web Capture - Angular, React, and Vue

These samples demonstrate how to use the `MobileWebCapture` API from the [Dynamsoft Mobile Web Capture SDK](/index.md) in Angular, React (with hooks), and Vue apps to scan, organize, and export multi-page documents with a camera. The samples live in the repository under [`samples/frameworks/`](https://github.com/Dynamsoft/mobile-web-capture/tree/main/samples/frameworks):

- [Angular](https://github.com/Dynamsoft/mobile-web-capture/tree/main/samples/frameworks/angular)
- [React](https://github.com/Dynamsoft/mobile-web-capture/tree/main/samples/frameworks/react-hooks)
- [Vue](https://github.com/Dynamsoft/mobile-web-capture/tree/main/samples/frameworks/vue)

> [!NOTE]
> Please [contact us](https://www.dynamsoft.com/company/contact/) for any inquiries about currently unsupported frameworks.

## Features

- Easy integration with pre-built UI
- Captures and auto-corrects a document from the camera
- Displays the corrected document image
- Mobile-optimized capture interface
- **Angular**: Renders `MobileWebCapture` inside an Angular component (Angular CLI stack)
- **React**: Renders `MobileWebCapture` inside a React component
- **Vue**: Renders `MobileWebCapture` inside a Vue component

## Quick Start

> [!WARNING]
> Mobile Web Capture requires a valid license key to operate. Please see the [licensing documentation](/index.md#license) to sign up for a free trial or a full license.

> [!NOTE]
> **MDS** and **MWC** share the same license keys. If you already have an **MDS** license, you can use it for **MWC**, and vice versa.

### 1. Install Dependencies

Navigate to the root directory of one of the framework samples:

```shell
npm install
```

### 2. Serve the Application

```shell
npm run dev
```

Then open the URL presented in the console to view the sample app. Replace `"YOUR_LICENSE_KEY_HERE"` in the component source with your license key.

### 3. Build for Production

```shell
npm run build
```

You can preview the production build for React and Vue by additionally running:

```shell
npm run preview
```

## User Guide

Read the official documentation to learn how to use and configure Mobile Web Capture:

- [general user guide](/index.md)
- [customization guide](/customization-guide.md)
- [API reference](/api/index.md)

## Support

If you have any questions, feel free to [contact Dynamsoft Support](https://www.dynamsoft.com/company/contact?utm_source=mwcSampleReadme).