Web Demos

BARCODE READER SDK DEMO

Explore the flexibe barcode reading settings to optimize for your specific usage scenario.

WEB TWAIN SDK DEMO

Try the most popular web scanner features: scan images, import local images and PDF files, edit, save to local, upload to database, and etc.

BARCODE READER JAVASCRIPT DEMO

Transform any camera-equipped devices into real-time, browser-based barcode and QR code scanners.

MRZ SCANNER WEB DEMO

Detects the machine-readable zone of a passport, scans the text, and parses into human-readable data.

APP STORE DEMOS

BARCODE READER SDK FOR IOS

BARCODE READER SDK FOR ANDROID

VIEW MORE DEMOS >
Dev Center
Table of contents

Use Web TWAIN in Angular

Angular is one of the most popular and mature JavaScript frameworks. Check out the following on how to implement Dynamic Web TWAIN into an Angular application.

Sample of dwt-angular-advanced

Preparation

Make sure you have node and Angular CLI installed. node 14.4.0 and Angular CLI 9.1.12 are used in the example below.

Create the sample project

Create an out-of-the-box raw Angular application

ng new dwt-angular

cd to the root directory of the application and install the dependencies

npm install dwt

Configure the project

Open angular.json and add the following lines to "build"/"options"/"assets" .

These lines will copy the static files necessary to run Dynamic Web TWAIN to the resulting project.

{
    "glob": "**/*",
    "input": "./node_modules/dwt/dist",
    "output": "assets/dwt-resources"
}

Start to implement

Generate a component

ng generate component dwt

Edit the component

  • In dwt.component.html add a button and a HTMLDIVElement .
<button (click)="acquireImage()">Acquire Images</button>
<div id="dwtcontrolContainer"></div>
  • In dwt.component.ts add code to initialize Dynamic Web TWAIN .
import Dynamsoft from 'dwt';
containerId = "dwtcontrolContainer";
ngOnInit(): void {
    Dynamsoft.DWT.Containers = [{
        WebTwainId: 'dwtObject',
        ContainerId: this.containerId,
        Width: '300px',
        Height: '400px'
    }];
    Dynamsoft.DWT.RegisterEvent('OnWebTwainReady', () => {
        this.Dynamsoft_OnReady();
    });
    Dynamsoft.DWT.ProductKey = 'YOUR-PRODUCT-KEY';
    Dynamsoft.DWT.ResourcesPath = 'assets/dwt-resources';
    Dynamsoft.DWT.Load();
}

Note:

  • containerId specifies the HTMLDIVElement to create Dynamic Web TWAIN viewer in.
  • OnWebTwainReady is the callback triggered when the initialization succeeds.
  • ProductKey must be set to a valid trial or full key.
  • ResourcesPath is set to the location of the static files mentioned in Configure the project.
  • Get a handler of the WebTwain instance.

Use the method Dynamsoft.DWT.GetWebTwain() to get a handler of the created WebTwain instance.

import { WebTwain } from 'dwt/dist/types/WebTwain';
DWObject: WebTwain | any = null;
Dynamsoft_OnReady() {
    this.DWObject = Dynamsoft.DWT.GetWebTwain(this.containerId);
}
  • Define the function acquireImage() .
acquireImage() {
    if (this.DWObject) {
        this.DWObject.SelectSourceAsync()
        .then(() => {
            return this.DWObject.AcquireImageAsync({
                IfDisableSourceAfterAcquire: true,
            });
        })
        .then( (result) => {
            console.log(result);
        })
        .catch((exp) => {
            console.error(exp.message);
        })
        .finally(() => {
            this.DWObject.CloseSourceAsync().catch((e) => {
                console.error(e);
            });
        });
    }
}
  • Add the component to app.component.html .

Edit the file app.component.html to contain nothing but the following

<app-dwt></app-dwt>
  • Try running the project.
ng serve -o

If you have installed Dynamic Web TWAIN and have configured a valid ProductKey . You will have a working page to scan documents from your scanner now. Otherwise, you should see instructions on the page that guide you to install the library. More info».

Official Sample

Check out the following sample project:

Is this page helpful?

YesYes NoNo

In this article:

latest version

    • Latest Version (18.4)
    • Version 18.3
    • Version 18.1
    • Version 18.0
    • Version 17.3
    • Version 17.2.1
    • Version 17.1.1
    • Version 17.0
    • Version 16.2
    • Version 16.1.1
    Change +