Download 30-Day Trial
Table of contents

Mobile Web Capture API Reference

The MobileWebCapture class manages document scanning, viewing, and management.

Constructor

MobileWebCapture

Syntax

constructor(config: MobileWebCaptureConfig)

Parameters

Parameter Type Description
config MobileWebCaptureConfig The configuration settings for MobileWebCapture.

Example

const mobileWebCapture = new Dynamsoft.MobileWebCapture({
    license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
    documentScannerConfig: {
        showResultView: false,
        showCorrectionView: false,
    },
});
(async () => {
    // Launch the Mobile Web Capture Instance
    const fileName = `New_Document_${Date.now().toString().slice(-5)}`;
    await mobileWebCapture.launch(fileName);
})();

Methods

launch()

Starts the Mobile Web Capture workflow.

Syntax

launch(file?: File | string): Promise<void>

Parameters

Parameter Type Description
file File \| string (optional) A file or document name to open at launch.

Throws

  • An error if MWC is already running.

Example

await mobileWebCapture.launch();
console.log("MWC launched successfully.");

Launching with a File

<input type="file" id="initialFile" accept="image/*,application/pdf" />

const mobileWebCapture = new Dynamsoft.MobileWebCapture({
    license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
});
document.getElementById("initialFile").onchange = async function () {
    const files = Array.from(this.files || []);
    if (files.length) {
        // Launch the Mobile Web Capture instance with an initial file
        if (mobileWebCapture.hasLaunched) 
            await mobileWebCapture.dispose();
        await mobileWebCapture.launch(files[0]);
    }
};

dispose()

Cleans up resources and closes the MobileWebCapture instance.

Syntax

dispose(): Promise<void>

Example

await mobileWebCapture.dispose();
console.log("MWC resources released.");

Properties

hasLaunched

Returns whether the MobileWebCapture instance is running.

Syntax

readonly hasLaunched: boolean;

<input type="file" id="initialFile" accept="image/*,application/pdf" />

const mobileWebCapture = new Dynamsoft.MobileWebCapture({
    license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
});
document.getElementById("initialFile").onchange = async function () {
    const files = Array.from(this.files || []);
    if (files.length) {
        // Launch the Mobile Web Capture instance with an initial file
        if (mobileWebCapture.hasLaunched) 
            await mobileWebCapture.dispose();
        await mobileWebCapture.launch(files[0]);
    }
};

Configuration Interfaces

MobileWebCaptureConfig

Syntax

interface MobileWebCaptureConfig {
  license?: string;
  container?: HTMLElement | string;
  exportConfig?: ExportConffig;
  showLibraryView?: boolean;
  onClose?: () => void;

  // View Configs
  libraryViewConfig?: LibraryViewConfig;
  documentViewConfig?: DocumentViewConfig;
  pageViewConfig?: PageViewConfig;
  transferViewConfig?: TransferViewConfig;
  historyViewConfig?: HistoryViewConfig;

  // DDS Config
  documentScannerConfig?:DocumentScannerConfig
}

Properties

Property Type Description
license string The license key for using Mobile Web Capture (MWC).
container HTMLElement \| string The container element or selector for rendering the MobileWebCapture instance.
exportConfig ExportConfig Configuration for exporting captured documents.
showLibraryView boolean Determines if the LibraryView is shown (default: true).
onClose () => void Callback function triggered when the MobileWebCapture instance is closed.
libraryViewConfig LibraryViewConfig Configuration for the LibraryView.
documentViewConfig DocumentViewConfig Configuration for the DocumentView.
pageViewConfig PageViewConfig Configuration for the PageView.
transferViewConfig TransferViewConfig Configuration for the TransferView.
historyViewConfig HistoryViewConfig Configuration for the HistoryView.
documentScannerConfig DocumentScannerConfig Configuration for the built-in DocumentScanner.
See Also

Example

const mobileWebCapture = new Dynamsoft.MobileWebCapture({
    license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
    ddvResourcePath: "./dist/libs/dynamsoft-document-viewer/dist/",
    documentScannerConfig: {
        scannerViewConfig: {
            cameraEnhancerUIPath: "./dist/document-scanner.ui.html", // Use the local file
        },
        engineResourcePaths: {
            std: "./dist/libs/dynamsoft-capture-vision-std/dist/",
            dip: "./dist/libs/dynamsoft-image-processing/dist/",
            core: "./dist/libs/dynamsoft-core/dist/",
            license: "./dist/libs/dynamsoft-license/dist/",
            cvr: "./dist/libs/dynamsoft-capture-vision-router/dist/",
            ddn: "./dist/libs/dynamsoft-document-normalizer/dist/",
        },
    },
});

LibraryViewConfig

Syntax

interface LibraryViewConfig {
  emptyContentConfig?: EmptyContentConfig;
  toolbarButtonsConfig?: LibraryToolbarButtonsConfig;
}

Properties

Property Type Description
emptyContentConfig EmptyContentConfig Configuration for the content displayed on the empty LibraryView screen.
toolbarButtonsConfig LibraryToolbarButtonsConfig Configuration for the toolbar buttons in LibraryView.

Example 1: Display A Message In An Empty Library

By default, the LibraryView displays the following when empty:

Empty Library View

You can customize its appearance using the emptyContentConfig property.

<div id="customizedLibraryViewContent">Create Your First Document!</div>

const mobileWebCapture = new Dynamsoft.MobileWebCapture({
    license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
    showLibraryView: true, // Enable LibraryView
    libraryViewConfig: {
        emptyContentConfig: document.getElementById("customizedLibraryViewContent"),
    },
});

Example 2: Disable Upload in LibraryView

When exportConfig.uploadToServer is defined and showLibraryView is true, an Upload button will appears in LibraryView. The following example demonstrates how to hide the button.

const mobileWebCapture = new Dynamsoft.MobileWebCapture({
    license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
    showLibraryView: true // Enable LibraryView
    libraryViewConfig: {
        toolbarButtonsConfig: {
            upload: {
                isHidden: true
            }
        }
    }
});

DocumentViewConfig

Syntax

interface DocumentViewConfig {
  emptyContentConfig?: EmptyContentConfig;
  toolbarButtonsConfig?: DocumentToolbarButtonsConfig;
}

Properties

Property Type Description
emptyContentConfig EmptyContentConfig Configuration for the content displayed on the empty DocumentView screen.
toolbarButtonsConfig DocumentToolbarButtonsConfig Configuration for the toolbar buttons in DocumentView.

Example 1: Display A Message In An Empty Document

By default, the DocumentView displays the following when empty:

Empty Document View

You can customize its appearance using the emptyContentConfig property.

<div id="customizedDocViewContent">Start Your Document!</div>

const mobileWebCapture = new Dynamsoft.MobileWebCapture({
    license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
    documentViewConfig: {
        emptyContentConfig: document.getElementById("customizedDocViewContent"),
    },
});

Example 2: Disable Upload in DocumentView

When exportConfig.uploadToServer is defined, the Upload button appears in both DocumentView and PageView. The following example demonstrates how to disable this feature by hiding it in DocumentView, ensuring that the Upload button only appears in PageView.

const mobileWebCapture = new Dynamsoft.MobileWebCapture({
    license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
    documentViewConfig: {
        toolbarButtonsConfig: { // Note that there are two upload buttons in DocumentView
            uploadDocument: {
                isHidden: true
            },
            uploadImage: {
                isHidden: true
            }
        }
    }
});

Example 3: Update the Button Icon

If you don’t like a button’s icon, you can customize it. The following example shows how to change the icon of the “Share Document” button:

const mobileWebCapture = new Dynamsoft.MobileWebCapture({
    license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
    documentViewConfig: {
        toolbarButtonsConfig: { // Note that there are two upload buttons in DocumentView
            shareDocument: {
                icon: "path/to/new_icon.png", // Change to the actual path of the new icon
                label: "Custom Label"
            }
        }
    }
});

PageViewConfig

Syntax

interface PageViewConfig {
  toolbarButtonsConfig?: PageViewToolbarButtonsConfig;
  annotationToolbarLabelConfig?: DDVAnnotationToolbarLabelConfig;
}

Properties

Property Type Description
toolbarButtonsConfig PageViewToolbarButtonsConfig Configuration for toolbar buttons in PageView.
annotationToolbarLabelConfig DDVAnnotationToolbarLabelConfig Configuration for annotation toolbar labels.

Example 1: Disable Upload in PageView

In this example, we’ll demonstrate how to hide the Upload button in PageView even when exportConfig.uploadToServer is defined, ensuring that it only appears in DocumentView.

const mobileWebCapture = new Dynamsoft.MobileWebCapture({
    license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
    pageViewConfig: {
        toolbarButtonsConfig: {
            upload: {
                isHidden: true
            }
        }
    }
});

Example 2: Change the Labels of the Annotation Toolbar Buttons

You can customize the labels of the annotation toolbar buttons as follows:

const mobileWebCapture = new Dynamsoft.MobileWebCapture({
    license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
    pageViewConfig: {
        annotationToolbarLabelConfig: {
            TextBoxAnnotation: "Input Text",
        },
    }
});

HistoryViewConfig

Syntax

interface HistoryViewConfig {
  emptyContentConfig?: EmptyContentConfig;
  toolbarButtonsConfig?: HistoryToolbarButtonsConfig;
}

Properties

Property Type Description
emptyContentConfig EmptyContentConfig Configuration for the content displayed on the empty HistoryView screen.
toolbarButtonsConfig HistoryToolbarButtonsConfig Configuration for the toolbar buttons in HistoryView.

TransferViewConfig

Syntax

interface TransferViewConfig {
  toolbarButtonsConfig?: TransferToolbarButtonsConfig;
}

Properties

Property Type Description
toolbarButtonsConfig TransferToolbarButtonsConfig Configuration for the toolbar buttons in TransferView.

Toolbar Button Configurations

ToolbarButtonConfig

A simplified configuration type for toolbar buttons.

Syntax

export type ToolbarButtonConfig = Pick<"icon" | "label" | "isHidden">;

Properties

Property Type Description
icon string The icon displayed on the button.
label string The text label for the button.
isHidden boolean (optional) Determines if the button is hidden.

Example

const mobileWebCapture = new Dynamsoft.MobileWebCapture({
    license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
    documentViewConfig: {
        toolbarButtonsConfig: { // Note that there are two upload buttons in DocumentView
            uploadDocument: {
                isHidden: true
            },
            uploadImage: {
                isHidden: true
            }
        }
    }
});

Configurable Buttons Per Each View

LibraryToolbarButtonsConfig

interface LibraryToolbarButtonsConfig {
  newDoc?: ToolbarButtonConfig;
  capture?: ToolbarButtonConfig;
  import?: ToolbarButtonConfig;
  uploads?: ToolbarButtonConfig;

  // Selected Toolbar Options
  delete?: ToolbarButtonConfig;
  print?: ToolbarButtonConfig;
  share?: ToolbarButtonConfig;
  upload?: ToolbarButtonConfig;
  back?: ToolbarButtonConfig;
}

DocumentToolbarButtonsConfig

interface DocumentToolbarButtonsConfig {
  backToLibrary?: ToolbarButtonConfig;
  capture?: ToolbarButtonConfig;
  import?: ToolbarButtonConfig;
  shareDocument?: ToolbarButtonConfig;
  uploadDocument?: ToolbarButtonConfig;
  manage?: ToolbarButtonConfig;

  // Selected Toolbar Options
  copyTo?: ToolbarButtonConfig;
  moveTo?: ToolbarButtonConfig;
  selectAll?: ToolbarButtonConfig;
  deleteImage?: ToolbarButtonConfig;
  shareImage?: ToolbarButtonConfig;
  uploadImage?: ToolbarButtonConfig;
  back?: ToolbarButtonConfig;
}

PageViewToolbarButtonsConfig

interface PageViewToolbarButtonsConfig {
  back?: ToolbarButtonConfig;
  delete?: ToolbarButtonConfig;
  addPage?: ToolbarButtonConfig;
  upload?: ToolbarButtonConfig;
  share?: ToolbarButtonConfig;
  edit?: ToolbarButtonConfig;

  // Edit mode toolbar
  crop?: ToolbarButtonConfig;
  rotate?: ToolbarButtonConfig;
  filter?: ToolbarButtonConfig;
  annotate?: ToolbarButtonConfig;
  done?: ToolbarButtonConfig;
}

HistoryToolbarButtonsConfig

interface HistoryToolbarButtonsConfig {
  back?: ToolbarButtonConfig;
}

TransferToolbarButtonsConfig

interface TransferToolbarButtonsConfig {
  cancel?: ToolbarButtonConfig;
  action?: ToolbarButtonConfig;
}

Assisting Interfaces

ExportConfig

The ExportConfig interface defines methods for handling document export functionality, such as uploading, downloading, deleting files from a server, and managing the upload success process. This allows full customization of how documents are exported and managed in your application.

Properties

uploadToServer

Uploads a document to the server. The function receives the document’s file name and its binary data (Blob). It returns a Promise that resolves with void or an UploadedDocument object.

Important: Returning { status: "success" } in this function is required to trigger onUploadSuccess

Type
(fileName: string, blob: Blob) => Promise<void | UploadedDocument>
downloadFromServer

Downloads a document from the server. The function receives an UploadedDocument object and returns a Promise that resolves once the download is complete.

Type
(doc: UploadedDocument) => Promise<void>
deleteFromServer

Deletes a document from the server. The function receives an UploadedDocument object and returns a Promise that resolves once the deletion is successful.

Type
(doc: UploadedDocument) => Promise<void>
onUploadSuccess

Called after a successful upload. It receives the file name, file type, the current view (EnumMWCViews), and the binary data (Blob). The function should return a Promise that resolves to true if the MobileWebCapture instance should close after uploading or false if it should remain open.

Important: Returning { status: "success" } in uploadToServer is required to trigger this function.

Type
(fileName: string, fileType: string, view: EnumMWCViews, blob: Blob) => Promise<boolean>

Example Usage

const uploadToServer = async (fileName, blob) => {
    const host = window.location.origin;
    // Create form data
    const formData = new FormData();
    formData.append("uploadFile", blob, fileName);
    // Upload file
    const response = await fetch(
        `${host}/upload`, // Change this to your actul upload URL
        {
        method: "POST",
        body: formData,
        }
    );
    if (response.status === 200) {
        // **IMPORTANT**: Returning { status: "success" } is required to trigger onUploadSuccess.
        return {
            status: "success",
        };
    } else {
        return {
            status: "failed",
        };
    }
};
const onUploadSuccess = async (fileName) => {
    console.log(`${fileName} uploaded successfully!`);
    return true; // Exit the Mobile Web Capture Instance
};
const mobileWebCapture = new Dynamsoft.MobileWebCapture({
    license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
    exportConfig: {
        uploadToServer,
        onUploadSuccess,
    },
});
(async () => {
    // Launch the Mobile Web Capture Instance
    const fileName = `New_Document_${Date.now().toString().slice(-5)}`;
    await mobileWebCapture.launch(fileName);
})();

This page is compatible for:

Is this page helpful?

YesYes NoNo

In this article: