henry-capture-vision-react-native
Advanced tools
Dynamsoft Capture Vision (DCV) is an aggregating SDK of a series of specific functional products including:
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
yarn
yarn add dynamsoft-capture-vision-react-native
npm
npm install dynamsoft-capture-vision-react-native
Now you will learn how to create a simple barcode scanner using Dynamsoft Capture Vision SDK.
If you are a beginner on React Native, please follow the guide on React Native official website to set up the development environment.
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.
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
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();
}
...
}
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>
);
}
}
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.
In the command line interface (we recommend using Powershell), go to your project folder and run the following command:
npx react-native run-android
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-deploylibrary. Afterwards, you can run the react native app from the terminal as suchnpx react-native run-ios --deviceassuming it's the only device connected to the Mac.- Alternatively on iOS, you can simply open the
xcworkspaceof the project found in theiosfolder 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.
You can view all the DCV React Native samples via the following links:
View the API reference of DCV React Native Edition to explore the full feature of DCV:
FAQs
Dynamsoft Capture Vision React Native SDK
The npm package henry-capture-vision-react-native receives a total of 1 weekly downloads. As such, henry-capture-vision-react-native popularity was classified as not popular.
We found that henry-capture-vision-react-native demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.