Henry-capture-vision-cordova NPM

Dynamsoft Capture Vision Cordova Edition

Dynamsoft Capture Vision (DCV) is an aggregating SDK of a series of specific functional products including:

Dynamsoft Camera Enhancer (DCE) which provides camera enhancements and UI configuration APIs.
Dynamsoft Barcode Reader (DBR) which provides barcode decoding algorithm and APIs.
Dynamsoft Label Recognizer (DLR) which provides label content recognizing algorithm and APIs.
Dynamsoft Document Normalizer (DDN) which provides document scanning algorithms and APIs.

Note: DCV Cordova edition currently only includes DCE and DBR modules. DLR and DDN modules are still under development and will be included in the future.

System Requirements
Installation
Build Your Barcode Scanner App
Sample
API References
License
Contact

System Requirements

Cordova Platforms

Cordova Android: 9.0.0+ (10.1.1+ recommended)
Cordova iOS: 6.2.0

Android

Supported OS: Android 5.0 (API Level 21) or higher.
Supported ABI: armeabi-v7a, arm64-v8a, x86 and x86_64.
Development Environment: Android Studio 3.4+ (Android Studio 4.2+ recommended).
JDK: 1.8+

iOS

Supported OS: iOS 11.0 or higher.
Supported ABI: arm64 and x86_64.
Development Environment: Xcode 7.1 and above (Xcode 13.0+ recommended), CocoaPods 1.11.0+.

Installation

Github

cordova plugin add https://github.com/Dynamsoft/capture-vision-cordova

npm

cordova plugin add dynamsoft-capture-vision-cordova

Build Your Barcode Scanner App

Now you will learn how to create a simple barcode scanner using Dynamsoft Capture Vision for Cordova.

Note: Instead of following this guide, you can also initialize a project with this template to get started: Barcode Reader Simple Sample.

Set up Development Environment

If you are a beginner with Cordova, please follow the guide on the Cordova official website to set up the development environment.

Initialize the Project

Use the following command to create a new project.

cordova create SimpleBarcodeScanner

Include the Library

Use the following command to include the library.

cordova plugin add dynamsoft-capture-vision-cordova

Initialize the Camera Module

Dynamsoft Capture Vision provides a build-in camera module for you to capture and display the video stream. The following two classes are used when initializing the camera module:

DCVCameraEnhancer: The class that provides camera controlling APIs. Please visit the link to learn more.
DCVCameraView: The camera view that will display the video stream and other UI elements. Please visit the link to learn more.

Find the www/index.html file in your project. Replace the original content with the following code:

<!DOCTYPE html>
<html>
    <body style="margin: 0;">
        <div id="camera_view" style="width: 100vw; height: 100vh; z-index: -1;">
            <div id="show_result" style="position: fixed; width: 100vw; bottom: 10vh;  text-align:center; color: white; "></div>
        </div>
        <script src="cordova.js"></script>
        <script src="js/index.js"></script>
    </body>
</html>

Open www/index.js and add code to initialize DCVCameraEnhancer and DCVCameraView

// Register the event of device ready.
document.addEventListener('deviceready', onDeviceReady, false);
// Create a object of DCVCameraEnhancer.
var dcvCameraEnhancer
// Get the camera_view <div> we created in the previous step.
const cameraViewElement = document.getElementById("camera_view")

async function onDeviceReady() {
    // Create the instance of DCVCameraEnhancer.
    dcvCameraEnhancer = await Dynamsoft.DCVCameraEnhancer.createInstance()
    // Create the instance of DCVCameraView.
    var cameraView = new Dynamsoft.DCVCameraView()
    // Bind the instance of DCVCameraView with the div you created before.
    cameraView.bindToHtmlElement(cameraViewElement)
}

Configure the Barcode Reader Module

The Barcode Reader module of Dynamsoft Capture Vision needs a valid license to work.

Add the following code in www/index.js to initialize the license of the Barcode Reader module

async function onDeviceReady() {
    ...
    // Here we use a public trial key as an example.
    try {
        await Dynamsoft.DCVBarcodeReader.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
    } catch (e) {
        console.log(e)
    }
}

Initialize the barcode reader module. Register a result listener for obtaining the barcode results.

async function onDeviceReady() {
    ...
    // Create the instance of DCVBarcodeReader.
    dcvBarcodeReader = await Dynamsoft.DCVBarcodeReader.createInstance()
    dcvBarcodeReader.addResultListener((results) => {
        const resultElement = document.getElementById('show_result');
        var resultStr = ""
        if (results && results.length > 0) {
            for (i = 0; i < results.length; i++) {
                resultStr=resultStr + results[i].barcodeFormatString+":"+results[i].barcodeText+'\n'
            }
            resultElement.innerHTML = (resultStr)
        } else {
            resultElement.innerHTML = "No barcode detected in this frame."
        }
        document.querySelector('#camera_view').appendChild(resultElement)
    })
}

Open the camera and start barcode scanning. You will receive the barcode results from the result listener.

async function onDeviceReady() {
    ...
    dcvCameraEnhancer.open()
    dcvBarcodeReader.startScanning()
}

Register the event listeners onResume and onPasue so that the library can stop/restart barcode decoding when the user pauses or resumes the feature.

document.addEventListener('resume', onResume, false);
document.addEventListener('pause', onPause, false);

...

function onResume() {
    dcvCameraEnhancer.open()
    dcvBarcodeReader.startScanning()
}

function onPause() {
    dcvCameraEnhancer.close()
    dcvBarcodeReader.stopScanning()
}

Configure Camera Permissions

You need to set the Privacy - Camera Usage Description field in the Info.plist file for iOS. If this property is not set, the iOS application will fail at runtime. In order to set this property, you have to use Xcode to open the platforms/ios/SimpleBarcodeScanner.xcworkspace. Once open, you can edit the Info.plist to include this property.

Run the Project

Run Android on Windows or macOS

Add the platform first with the following command.
```
cordova platform add android
```
Run the Project with the following command.
```
cordova run
```

Run iOS on macOS

Add the platform first.
```
cordova platform add ios
```
Open the platforms/ios/SimpleBarcodeScanner.xcworkspace with xcode. Complete the Signing & Capabilities section of the project configuration via Xcode to avoid any signature errors during build.

Samples

You can view all the DCV Cordova samples via the following links:

Barcode reader simple sample

API References

View the API reference of DCV Cordova Edition to explore the full feature of DCV:

DCV API Reference - Cordova Edition
- DCVBarcodeReader Class
- DCVCameraEnhancer Class
- DCVCameraView Class

License

A one-day trial license is available by default for every new device to try Dynamsoft Capture Vision.
You can request an extension for your trial license in the customer portal.