Dynamsoft Web Capture SDK로 Angular 문서 스캐너를 구축하는 방법

npm install -g @angular/cli

ng --version

Angular CLI: 13.3.7
Node: 16.13.1
Package Manager: npm 8.1.2
OS: win32 x64

Angular: 13.3.10
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1303.7
@angular-devkit/build-angular   13.3.7
@angular-devkit/core            13.3.7
@angular-devkit/schematics      13.3.7
@angular/cli                    13.3.7
@schematics/angular             13.3.7
ng-packagr                      13.3.1
rxjs                            7.5.5
typescript                      4.6.4

import Dynamsoft from 'mobile-web-capture';
import { WebTwain } from 'mobile-web-capture/dist/types/WebTwain';  

dwtObject: WebTwain | undefined;
videoSelect: HTMLSelectElement | undefined;
sourceDict: any = {};

ngOnInit(): void {
  this.videoSelect = document.querySelector('select#videoSource') as HTMLSelectElement;
  Dynamsoft.DWT.ProductKey = "LICENSE-KEY";
  Dynamsoft.DWT.ResourcesPath = 'assets/dynamic-web-twain';
  Dynamsoft.DWT.Containers = [{ ContainerId: 'dwtcontrolContainer' }];
  Dynamsoft.DWT.UseLocalService = false;
  Dynamsoft.DWT.Load();
  Dynamsoft.DWT.RegisterEvent('OnWebTwainReady', () => { this.onReady(); });
}

onReady() {
  this.dwtObject = Dynamsoft.DWT.GetWebTwain('dwtcontrolContainer');
  this.updateCameraList();
}

updateCameraList() {
  if (this.videoSelect && this.dwtObject) {
    this.videoSelect.options.length = 0;
    this.dwtObject.Addon.Camera.getSourceList().then((list) => {
      for (var i = 0; i < list.length; i++) {
        var option = document.createElement('option');
        option.text = list[i].label || list[i].deviceId;
        if (list[i].label) {
          this.sourceDict[list[i].label] = list[i].deviceId;
        }
        else {
          this.sourceDict[list[i].deviceId] = list[i].deviceId;
        }
        if (this.videoSelect) this.videoSelect.options.add(option);
      }

    });
  }
}

scanDocument() {
  if (this.videoSelect) {
    let index = this.videoSelect.selectedIndex;
    if (index < 0) return;

    var option = this.videoSelect.options[index];
    if (this.dwtObject) {
      this.dwtObject.Addon.Camera.selectSource(this.sourceDict[option.text]).then(camera => {
        if (this.videoSelect) this.createCameraScanner(this.sourceDict[option.text]);
      });
    }

  }

}

async createCameraScanner(deviceId: string): Promise<void> {
  if (this.dwtObject) {
    await this.dwtObject.Addon.Camera.closeVideo();
    this.dwtObject.Addon.Camera.scanDocument({
      scannerViewer: {
        deviceId: deviceId,
        fullScreen: true,
        autoDetect: {
          enableAutoDetect: true
        },
        continuousScan: {
          visibility: false,
          enableContinuousScan: false
        }
      }

    }).then(
      function () { console.log("OK"); },
      function (error: any) { console.log(error.message); });
  }

}

downloadDocument() {
  if (this.dwtObject) {
    this.dwtObject.SaveAsJPEG("document.jpg", this.dwtObject.CurrentImageIndexInBuffer);
  }
}

ng serve --ssl

"budgets": [
  {
    "type": "initial",
    "maximumWarning": "2.5mb",
    "maximumError": "5mb"
  },
]

name: Build and Deploy
on:
  push:
    branches:
      - main
jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - name: All things angular
      uses: AhsanAyaz/[email protected]
      with:
        github_access_token: ${{ secrets.GITHUB_TOKEN }} 
        build_configuration: production 
        base_href: /angular-document-scanner/   
        deploy_branch: gh-pages 
        angular_dist_build_folder: dist/angular-document-scanner