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-react-native

v1.1.13

Published

Dynamsoft Capture Vision React Native SDK

Downloads

13

Readme

Dynamsoft Capture Vision React-Native Edition

version downloads jsdelivr vulnerabilities

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 React-Native 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

React Native

  • Supported Version: 0.60 or higher

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 10.0 or higher.
  • Supported ABI: arm64 and x86_64.
  • Development Environment: Xcode 7.1 and above (Xcode 13.0+ recommended), CocoaPods 1.11.0+.

Others

  • Node: 16.15.1 recommended

Installation

  • yarn

    yarn add dynamsoft-capture-vision-react-native
  • npm

    npm install dynamsoft-capture-vision-react-native

Build Your Barcode Scanner App

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

Set up Development Environment

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

Initialize the Project

Create a new React Native project.

npx react-native init SimpleBarcodeScanner

Note: This sample uses react 17.0.2 and react-native 0.65.0.

Include the Library

Add the SDK to your new project. Once the SDK is added, you will see a reference to it in the package.json.

  • yarn

    yarn add dynamsoft-capture-vision-react-native
  • npm

    npm install dynamsoft-capture-vision-react-native

For iOS, you must install the necessary native frameworks from cocoapods to run the application. In order to do this, the pod install command needs to be run as such:

cd ios
pod install

Configure the Barcode Reader

In App.js, import the following components:

import React from 'react';
import {Text} from 'react-native';
import {
    DynamsoftBarcodeReader,
    DynamsoftCameraView,
    EnumBarcodeFormat
} from 'dynamsoft-capture-vision-react-native';

Next in App.js, let's define the state to your component. In the state, add a results variable, initialized to null. In the following steps, we will store the newly decoded barcodes to results.

class App extends React.Component {
    state = {
        results: null
    };
}
export default App;

Next is the componentDidMount implementation. First up is adding the code to start barcode decoding:

class App extends React.Component {
    ...
    componentDidMount() {
        (async () => {
            // Initialize the license so that you can use full feature of the Barcode Reader module.
            try {
                await DynamsoftBarcodeReader.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
            } catch (e) {
                console.log(e);
            }
            // Create a barcode reader instance.
            this.reader = await DynamsoftBarcodeReader.createInstance();

            // Add a result listener. The result listener will handle callback when barcode result is returned. 
            this.reader.addResultListener((results) => {
                // Update the newly detected barcode results to the state.
                this.setState({results});
            });

            // Enable video barcode scanning.
            // If the camera is opened, the barcode reader will start the barcode decoding thread when you triggered the startScanning.
            // The barcode reader will scan the barcodes continuously before you trigger stopScanning.
            this.reader.startScanning();
        })();
    }
    ...
}

After implementing componentDidMount, componentWillUnmount will then include code to stop the barcode decoding and remove the result listener.

class App extends React.Component {
    ...
    async componentWillUnmount() {
        // Stop the barcode decoding thread when your component is unmount.
        await this.reader.stopScanning();
        // Remove the result listener when your component is unmount.
        this.reader.removeAllResultListeners();
    }
    ...
}

Rendering the UI

Lastly, let's create the DynamsoftCameraView UI component in the render function.

class App extends React.Component {
    ...
    render() {
        // Add code to fetch barcode text and format from the BarcodeResult
        let results = this.state.results;
        let resultBoxText = "";
        if (results && results.length>0){
            for (let i=0;i<results.length;i++){
                resultBoxText+=results[i].barcodeFormatString+"\n"+results[i].barcodeText+"\n";
            }
        }
        // Render DynamsoftCameraView componment.
        return (
            <DynamsoftCameraView
                style={
                    {
                        flex: 1
                    }
                }
                ref = {(ref)=>{this.scanner = ref}}
                overlayVisible={true}
            >
                {/*Add a text box to display the barcode result.*/}
                <Text style={
                    {
                        flex: 0.9,
                        marginTop: 100,
                        textAlign: "center",
                        color: "white",
                        fontSize: 18,
                    }
                }>{results && results.length > 0 ? resultBoxText : "No Barcode Detected"}</Text>
            </DynamsoftCameraView>
        );
    }
}

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 might need to use Xcode and open the corresponding .xcworkspace located in the ios folder. Once open, you can edit the Info.plist to include this property.

Run the Project

Run Android on Windows

In the command line interface (we recommend using Powershell), go to your project folder and run the following command:

npx react-native run-android

Run iOS on macOS

In the terminal, go to the project folder in your project:

npx react-native run-ios

Note:

  • The application needs to run on a physical device rather than a simulator as it requires the use of the camera. If you try running it on a simulator, you will most likely run into a number of errors/failures.
  • On iOS, in order to run the React Native app on a physical device you will need to install the ios-deploy library. Afterwards, you can run the react native app from the terminal as such npx react-native run-ios --device assuming it's the only device connected to the Mac.
  • Alternatively on iOS, you can simply open the xcworkspace of the project found in the ios folder using Xcode and run the sample on your connected iOS device from there. The advantage that this offers is that it is easier to deal with the developer signatures for deployment in there.

Samples

You can view all the DCV React Native samples via the following links:

  • Barcode reader simple sample

API References

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

  • DCV API Reference - React Native Edition
    • DynamsoftBarcodeReader Class
    • DynamsoftCameraEnhancer Class

License

  • You can also request an extension for your trial license in the customer portal

Contact

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