npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

henry-capture-vision-cordova

v1.0.3

Published

Dynamsoft cordova plugin with DBR and DCE.

Downloads

4

Readme

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.

Table of Contents

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.
  1. 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>
  2. 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.

  1. 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)
        }
    }
  2. 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)
        })
    }
  3. Open the camera and start barcode scanning. You will receive the barcode results from the result listener.

    async function onDeviceReady() {
        ...
        dcvCameraEnhancer.open()
        dcvBarcodeReader.startScanning()
    }
  4. 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

  1. Add the platform first with the following command.

    cordova platform add android
  2. Run the Project with the following command.

    cordova run

Run iOS on macOS

  1. Add the platform first.

    cordova platform add ios
  2. 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.

Contact

https://www.dynamsoft.com/company/contact/