dynamsoft-capture-vision-cordova
Advanced tools
Dynamsoft Capture Vision (DCV) is an aggregating SDK of a series of specific functional products including:
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.
cordova plugin add https://github.com/Dynamsoft/capture-vision-cordova
cordova plugin add dynamsoft-capture-vision-cordova
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.
If you are a beginner with Cordova, please follow the guide on the Cordova official website to set up the development environment.
Use the following command to create a new project.
cordova create SimpleBarcodeScanner
Use the following command to include the library.
cordova plugin add dynamsoft-capture-vision-cordova
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
// Register the event of device ready.
document.addEventListener('deviceready', onDeviceReady, false)
async function onDeviceReady() {
...
// Here we use a public trial key as an example.
try {
await Dynamsoft.DCVBarcodeReader.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9")
} catch (e) {
console.log(e)
}
}
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
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)
// Display overlays on the detected barcodes.
cameraView.setOverlayVisible(true)
}
Initialize the barcode reader module. Register a result listener for obtaining the barcode results.
...
var dcvBarcodeReader
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()
}
Add the platform first with the following command.
cordova platform add android
Run the Project with the following command.
cordova run android
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.
You can view all the DCV Cordova samples via the following links:
View the API reference of DCV Cordova Edition to explore the full feature of DCV:
FAQs
Dynamsoft Capture Vision Cordova SDK
The npm package dynamsoft-capture-vision-cordova receives a total of 12 weekly downloads. As such, dynamsoft-capture-vision-cordova popularity was classified as not popular.
We found that dynamsoft-capture-vision-cordova demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 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.