DEV Community: Eric Parker 🥂

How to Auto-Deploy Source Code to Web Server via Webhook

Eric Parker 🥂 — Mon, 29 Jan 2024 05:41:49 +0000

If you use GitHub to manage the source code of your website, you can utilize webhooks to transmit GitHub events to third-party services. In this article, we will explore how to deploy a website to IIS, as well as how to pull the source code and automatically update the site when a push event occurs.

IIS Configuration in Windows 10

To activate IIS, go to the "Windows features" menu. By default, all "Application Development Features" are turned off. Choose the necessary features.

How to Use Visual C# to Handle HTTP Request

In Visual Studio, create an empty ASP.NET web application.

Create an HTML file called index.htm.
Webhook.ashx should have a generic handler.

Publish the project.

Select IIS > File System.

To add the website, launch IIS.

To see if the URL works in your web browser, go to http://localhost/Webhook.ashx.

The following step is to execute the git pull command in C#. We can refer to the CodeProject sample code.

A batch file to execute required commands.:

batchFile = Path.Combine(context.Server.MapPath("."), "github.bat"); objThread.Start(batchFile);

The physical path of the project is d:\iis, so the github.bat is as follows:

d: cd d:\\iis git pull

How to Expose the Local Web Server to the Internet

We must give a proper URL to use GitHub webhooks. Ngrok is an excellent tool for connecting a local webserver to the internet.

ngrok http 80

The webhook URL is now https://048dab0c.ngrok.io/Webhook.ashx.

How to Use GitHub Webhook to Trigger the Auto-Deployment

Once the URL is complete, we may create a new GitHub repository.

Add d:\iis to the remote repository and push it.

To add the payload URL, go to Settings > Webhooks and enter:

Clone the repository to a new location or another computer. Make some changes to the index.html file and commit them to GitHub.

The web server will immediately receive an HTTP request and execute the 'git pull' operation.

To see the update, refresh the website https://048dab0c.ngrok.io/.

How to Annotate Barcode Object with LabelImg for Machine Learning

Eric Parker 🥂 — Tue, 26 Sep 2023 07:17:52 +0000

LabelImg is a Python and Qt5-based image annotation tool that's both free and open-source. It's compatible with popular machine learning frameworks like Pascal VOC and Yolo formats. If you're keen on barcode object detection, you can employ this tool to annotate various barcode symbologies using bounding boxes. In this article, I'll demonstrate how to efficiently acquire multiple barcode images from Google and leverage the Dynamsoft Barcode Reader SDK to automate the process of assigning label names.

Image Download

To begin, we require images. How can we obtain a collection of images categorized under the same classification? Fortunately, there's a handy Python library known as "google_images_download" for this purpose.

pip install google_images_download

While utilizing the library, I encountered an issue where it consistently failed to download images, rendering it non-functional. This problem has been discussed on https://github.com/hardikvasa/google-images-download/issues/331. Fortunately, a helpful workaround has been offered. We can opt for a forked repository that has successfully addressed the issue:

git clone https://github.com/Joeclinton1/google-images-download.git

cd google-images-download && python setup.py install

A straightforward Python script can be employed to retrieve images, as demonstrated below:

from google_images_download import google_images_download   
import argparse 


ap = argparse.ArgumentParser() 
ap.add_argument("-k", "--keywords", required=True, 
    help="The keywords/key phrases you want to search for.") 
ap.add_argument("-l", "--limit", required=True, 
    help="The number of images that you want to download.") 
args = vars(ap.parse_args()) 

response = google_images_download.googleimagesdownload() 
arguments = {"keywords":args\["keywords"\],"limit":args\["limit"\],"print_urls":True}   
paths = response.download(arguments) 
print(paths)

Save the Python script as "google-image-downloader.py." Now, let's proceed to download ten PDF417 images from Google:

python3 google-image-downloader.py -k pdf417 -l 10

Barcode Object Annotation

With the barcode images prepared, we can commence the process of labelling them. Our initial step involves obtaining the source code from the LabelImg repository:

git clone https://github.com/tzutalin/labelImg.git

LabelImg enables us to manually label various objects visually, but when it comes to less familiar barcode symbologies, this method may not be optimal. To efficiently and accurately name barcode objects, we can employ Dynamsoft Barcode Reader as a supplementary tool:

pip install dbr

Setting up Dynamsoft Barcode Reader is a straightforward process:

from dbr import * reader = BarcodeReader()

Navigate to the "newShape(self)" function within labelImg.py. This function is invoked upon completing the drawing of a bounding box for an object. Subsequently, our next task is to retrieve the coordinates from the current shape, which is stored as the last element within a shape array in the canvas:

shape = self.canvas.shapes[-1]

Each shape consists of four points. To obtain the coordinate values and define the region values for Dynamsoft Barcode Reader, we focus on the top-left point and the bottom-right point:

reader.reset_runtime_settings() 
shape = self.canvas.shapes[-1] 
points = shape.points 
settings = reader.get_runtime_settings() 
settings.region_bottom  = round(points[2].y()) 
settings.region_left    = round(points[0].x()) 
settings.region_right   = round(points[2].x()) 
settings.region_top     = round(points[0].y()) 
reader.update_runtime_settings(settings)

Following this, we can access the barcode information within the specified region by calling the Python barcode decoding API:

try: 

  text_results = reader.decode_file(self.filePath) 

    if text_results != None: 

      for text_result in text_results: 

          print("Barcode Format :") 

          print(text_result.barcode_format_string) 

          self.prevLabelText = text_result.barcode_format_string 

          print("Barcode Text :") 

          print(text_result.barcode_text) 

          print("Localization Points : ") 

          print(text_result.localization_result.localization_points) 

          print("-------------") 

except BarcodeReaderError as bre: 

    print(bre)

Save the labelImg.py file and execute the program:

python3 labelImg.py

When you draw a rectangular box around a barcode object, it will automatically populate the label dialog with the relevant barcode type.

Running and Debugging a Python Barcode App in Docker Container

Eric Parker 🥂 — Wed, 16 Aug 2023 09:55:38 +0000

When creating Python barcode extensions using CPython and Dynamsoft Barcode reader, one of the major concerns you have to face is to test your code compatibility with different versions of Python.

To test if your Python barcode extension works in your Windows, Linux or macOS you will need to have each version of Python installed on your computer. However, it’s time consuming.

Here, we have an easy hack for you! Instead of installing all those Python versions, you can use Docker container.

Creating Docker Image with Python Barcode SDK

First of all, download Docker desktop and install it.

If your system does not have Python 3.8, then go to Docker hub and pull out a Docker image that contains Python 3.8. Now invoke the command from the command prompt:

docker run -it --rm python:3.8 bash

If the docker image does not exist, the command given above will by itself trigger the download.

Next you can create a Dockerfile to create a fresh Docker image that will include the Dynamsoft Barcode Reader SDK:

FROM python:3.8 RUN pip install dbr

To generate a Docker image:

docker build --rm -t yushulx/dynamsoft-barcode-reader:python-3.8

Further run a container test. It will help you validate if your Python based Dynamsoft Barcode Reader is working fine or not.

docker run -it --rm yushulx/dynamsoft-barcode-reader:python-3.8

Next you need to publish the Docker Image to your Docker Hub after your container is validated:

docker login docker push yushulx/dynamsoft-barcode-reader:python-3.8

You can visit the below given link to test the image:

https://hub.docker.com/repository/docker/yushulx/dynamsoft-barcode-reader.

Mounting Local Folder to Docker Container

To mount a local Window folder to Linux Docker Container, execute the Python script using Python 3.8.

After that, select the shared drive from the settings of the Docker desktop:

To mount the Windows folder to the Linux container execute the following command:

docker run -it --rm -v d:/code/docker:/dynamsoft yushulx/dynamsoft-barcode-reader:python-3.8 bash

How To Debug Python Code with Visual Studio Code Remote-Containers

The preferred option to write and debug the Python code is to use Visual Studio Code.

To start with it, first install Docker extension for VSCode as shown below:

Click F1 key to execute the “Attach to Running Container” option.

Double-click on the project folder.

It will allow you to edit the Python file in VSCode. Next install the Python debugger for the container to debug the code:

For debugging of the code remotely, click F5.

The complete Python barcode detection code is given below:

import os 


from dbr import DynamsoftBarcodeReader 

dbr = DynamsoftBarcodeReader() 




def InitLicense(license): 

    dbr.InitLicense(license) 




def DecodeFile(fileName): 

    try: 

        results = dbr.DecodeFile(fileName) 

        textResults = results["TextResults"] 

        resultsLength = len(textResults) 

        print("count: " + str(resultsLength)) 

        if resultsLength != 0: 

            for textResult in textResults: 

                print(textResult["BarcodeFormatString"]) 

                print(textResult["BarcodeText"]) 

                localizationResult = textResult["LocalizationResult"] 

                x1 = localizationResult["X1"] 

                y1 = localizationResult["Y1"] 

                x2 = localizationResult["X2"] 

                y2 = localizationResult["Y2"] 

                x3 = localizationResult["X3"] 

                y3 = localizationResult["Y3"] 

                x4 = localizationResult["X4"] 

                y4 = localizationResult["Y4"] 

                localizationPoints = [(x1,y1),(x2,y2),(x3,y3),(x4,y4)] 

                print(localizationPoints) 

        else : 

            print("No barcode detected") 

    except Exception as err: 

        print(err) 




if __name__ == "__main__": 

    # Get the license from https://www.dynamsoft.com/customer/license/trialLicense/ 

    licenseKey = "DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAxLTE2NDk4Mjk3OTI2MzUiLCJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSIsInNlc3Npb25QYXNzd29yZCI6IndTcGR6Vm05WDJrcEQ5YUoifQ=="  

    fileName = r"test.jpg" 

    InitLicense(licenseKey) 

    dir_path = os.path.dirname(os.path.realpath(__file__)) 

    DecodeFile(os.path.join(dir_path, fileName))

Building an Android Barcode Reader: Use Barcode SDK for a successful outcome

Eric Parker 🥂 — Thu, 20 Jul 2023 08:15:24 +0000

Different options exist when creating a mobile app that can scan barcodes on Android or iOS devices. You can choose between using open-source Software Development Kits (SDKs) like ZXing and ZBar, or you can opt for commercial barcode reading SDKs.

Commercial barcode reading SDKs deliver much better usability than their open-source counterparts. They offer a well-designed API and quality technical documentation to the developers. Also, ab easy to use SDK means less product launch time, eventually contributing to quicker revenue generation.

If you're an Android developer and have already installed the Android Play Services SDK version 26 or higher, there's a convenient way to create a barcode scanning app using the Android Vision API. Google has even provided a demo on GitHub that we can use as a reference to build our own barcode reader app for Android.

Now, let's break down the code and understand how it works to create our own version.

Android Barcode Demo with Google Vision API

To begin, you can download the sample code for Android Vision from the following link: https://github.com/googlesamples/android-vision

Once downloaded, open Android Studio and load the "barcode-reader" folder from the downloaded code.

Let's find the starting point in the code where we can work with the camera preview data. To do this, you can press Ctrl+Alt+Shift+N (or use the global search function) in Android Studio. Search for "onPreviewFrame" in the file named "CameraSource.java."

By locating and understanding this part of the code, you can begin exploring how to handle the camera preview and move forward with building our barcode scanning functionality.

private class CameraPreviewCallback implements Camera.PreviewCallback {
    @Override
    public void onPreviewFrame(byte\[\] data, Camera camera) {
        mFrameProcessor.setNextFrame(data, camera);
    }
}

In the code, you'll come across an instance called "mFrameProcessor," which belongs to the FrameProcessingRunnable class. This instance is responsible for processing the preview data in a separate worker thread. The benefit of using a worker thread is that it prevents the barcode detection API from blocking the user interface (UI) thread, ensuring a smooth user experience.

Now, let's examine the "setNextFrame" method, which utilizes synchronization to lock the data. When a frame of preview data is received, it is cached and stored. Then, it notifies the worker thread to start processing and reading the barcode from the cached frame.

void setNextFrame(byte[] data, Camera camera) {
    synchronized (mLock) {
        if (mPendingFrameData != null) {
            camera.addCallbackBuffer(mPendingFrameData.array());
            mPendingFrameData = null;
        }

In this part of the code, we have two important pieces of information that are being managed: the timestamp and the frame ID. These values are crucial for understanding the timing of the frames received and determining if any frames were dropped during the process.

     mPendingTimeMillis = SystemClock.elapsedRealtime() - mStartTimeMillis;
        mPendingFrameId++;
        mPendingFrameData = mBytesToByteBuffer.get(data);

        // Notify the processor thread if it is waiting on the next frame (see below).
        mLock.notifyAll();
    }
}
Press Ctrl+F12 to search for run:

public void run() {
            Frame outputFrame;
            ByteBuffer data;

            while (true) {
                synchronized (mLock) {
                    if (mActive && (mPendingFrameData == null)) {
                        try {
                            mLock.wait();
                        } catch (InterruptedException e) {
                            Log.d(TAG, "Frame processing loop terminated.", e);
                            return;
                        }
                    }

                    if (!mActive) {
                        return;
                    }

                    outputFrame = new Frame.Builder()
                            .setImageData(mPendingFrameData, mPreviewSize.getWidth(),
                                    mPreviewSize.getHeight(), ImageFormat.NV21)
                            .setId(mPendingFrameId)
                            .setTimestampMillis(mPendingTimeMillis)
                            .setRotation(mRotation)
                            .build();

                    data = mPendingFrameData;
                    mPendingFrameData = null;
                }

                try {
                    mDetector.receiveFrame(outputFrame);
                } catch (Throwable t) {
                    Log.e(TAG, "Exception thrown from receiver.", t);
                } finally {
                    mCamera.addCallbackBuffer(data.array());
                }
            }
        }

Once we have the cached data, we use it to create an output frame. This frame is then passed to the "receiveFrame" method, which is an asynchronous interface.

To receive the results of the barcode detection, we need to associate the multi-processor instance, specifically the "BarcodeCaptureActivity.java" class, with the barcode detector.

BarcodeDetector barcodeDetector = new BarcodeDetector.Builder(context).build();
BarcodeTrackerFactory barcodeFactory = new BarcodeTrackerFactory(mGraphicOverlay);
barcodeDetector.setProcessor(new MultiProcessor.Builder<>(barcodeFactory).build());
Create a tracker (BarcodeTrackerFactory.java) for each barcode:

@Override
public Tracker<Barcode> create(Barcode barcode) {
    BarcodeGraphic graphic = new BarcodeGraphic(mGraphicOverlay);
    return new BarcodeGraphicTracker(mGraphicOverlay, graphic);
}
Update graphics (BarcodeGraphicTracker.java) as follows:

@Override
public void onUpdate(Detector.Detections<Barcode> detectionResults, Barcode item) {
    mOverlay.add(mGraphic);
    mGraphic.updateItem(item);
}

Android Barcode Reader with Third-Party SDK

Google's demo provides us with a foundation to work with. We don't have to start building the barcode reader from scratch. Instead, we can use the demo as a starting point and make modifications, such as adding barcode format options. Additionally, we can replace the Google Vision API with the preview version of the Dynamsoft mobile barcode SDK for improved functionality.

Next, you can make a LinearLayout and add four Switch widgets into it:

<LinearLayout
        android:layout\_width="match\_parent"
        android:layout\_height="match\_parent"
        android:layout\_above="@+id/auto\_focus"
        android:layout\_below="@+id/status\_message"
        android:layout\_centerVertical="true"
        android:orientation="vertical"
        >
        <Switch
            android:layout\_width="wrap\_content"
            android:layout\_height="wrap\_content"
            android:text="@string/dbr\_1d"
            android:id="@+id/dbr\_1d"
            android:switchPadding="50dp"
            android:checked="true"
            android:layout\_marginTop="180dp"/>
        <Switch
            android:layout\_width="wrap\_content"
            android:layout\_height="wrap\_content"
            android:text="@string/dbr\_qr"
            android:id="@+id/dbr\_qr"
            android:switchPadding="50dp"
            android:checked="true" />
        <Switch
            android:layout\_width="wrap\_content"
            android:layout\_height="wrap\_content"
            android:text="@string/dbr\_data\_matrix"
            android:id="@+id/dbr\_data\_matrix"
            android:checked="true" />
        <Switch
            android:layout\_width="wrap\_content"
            android:layout\_height="wrap\_content"
            android:text="@string/dbr\_pdf417"
            android:id="@+id/dbr\_pdf"
            android:switchPadding="20dp"
            android:checked="true" />
    </LinearLayout>

Create CameraListener (CameraSource.java) for asynchronously updating UI:

private CameraListener mCameraListener;
    public void setCameraListener(CameraListener listener) {
        mCameraListener = listener;
    }

    public interface CameraListener {
        public void onBarcodeResults(com.dynamsoft.barcode.ReadResult result);
    }

Replace com.google.android.gms.vision.Detector with com.dynamsoft.barcode.BarcodeReader:

public void run() {
            ByteBuffer data;

            while (true) {
                synchronized (mLock) {
                    if (mActive && (mPendingFrameData == null)) {
                        try {
                            mLock.wait();
                        } catch (InterruptedException e) {
                            Log.d(TAG, "Frame processing loop terminated.", e);
                            return;
                        }
                    }

                    if (!mActive) {
                        return;
                    }

                    data = mPendingFrameData;
                    mPendingFrameData = null;
                }

                try {
                    byte\[\] buff = data.array();
                    com.dynamsoft.barcode.ReadResult dbrResult = mDetector.readSingle(buff, mPreviewSize.getWidth(), mPreviewSize.getHeight(), mBarcodeFormat);
                    if (mCameraListener != null) {
                        mCameraListener.onBarcodeResults(dbrResult);
                    }

                } catch (Throwable t) {
                    Log.e(TAG, "Exception thrown from receiver.", t);
                } finally {
                    mCamera.addCallbackBuffer(data.array());
                }
            }
        }

Scan barcode images:
Tap the screen to get the output:

private boolean onTap(float rawX, float rawY) {

        //TODO: use the tap position to select the barcode.
        BarcodeGraphic graphic = mGraphicOverlay.getFirstGraphic();
        com.dynamsoft.barcode.Barcode barcode = null;
        if (graphic != null) {
            barcode = graphic.getBarcode();
            if (barcode != null) {
                Intent data = new Intent();
                data.putExtra(BarcodeObject, barcode.displayValue);
                setResult(1, data);
                finish();
            }
            else {
                Log.d(TAG, "barcode data is null");
            }
        }
        else {
            Log.d(TAG,"no barcode detected");
        }
        return barcode != null;
    }

If you're interested in trying out the preview version of the Dynamsoft mobile barcode reader SDK for Android and iOS, you can reach out to support@dynamsoft.com for more information. Alternatively, if you prefer open source options, you can replace the Google Vision APIs with ZXing and ZBar, which are popular open source mobile barcode SDKs.

Source Code
https://github.com/yushulx/android-barcode-reader-demo

The Fastest Way to Build an Android QR Code Scanner using Java

Eric Parker 🥂 — Wed, 28 Jun 2023 04:33:53 +0000

QR codes are becoming increasingly popular because they facilitate fast data retrieval, smooth financial transactions, and exciting new possibilities for personalization. Using a QR code scanner helps quickly access URLs, product information, event details, and special offers.

The two main features of any reliable QR code scanner app are the camera preview and the scanning of QR codes. While dozens of QR code scanner applications are available on the Google Play Store, making your own QR code scanner is a much better option. What if we told you it could be done with just a few easy steps? In this blog, we will be sharing the quickest way to build an Android QR code scanner. You will discover how to implement camera preview and QR code scanning SDK in a step-by-step manner.

Prerequisites

To implement the QR code scanner on Android, the following libraries are required. You are free to substitute your own libraries in their place.

Camera Preview SDK
CameraX

Since the Android Camera2 API is exceptionally challenging for beginners, Google released CameraX to streamline the development of camera applications. The codelab tutorial is an excellent introduction to CameraX.

Installation

You'll have to add the camera permission in AndroidManifest.xml:

  <uses-feature android:name="android.hardware.camera.any" />
  <uses-permission android:name="android.permission.CAMERA" />
In app/build.gradle, add the dependency:
  dependencies {
      ...
      def camerax_version = "1.0.1"
      implementation "androidx.camera:camera-camera2:$camerax_version"
      implementation "androidx.camera:camera-lifecycle:$camerax_version"
      implementation "androidx.camera:camera-view:1.0.0-alpha27"
  }

Dynamsoft Camera Enhancer v2.3
Dynamsoft Camera Enhancer, like CameraX, is a wrapper for the Android Camera2 API. It has all the functionality of a regular camera, plus frame filtering to improve the quality of your shots.

To evaluate CameraX, we also employ Dynamsoft Camera Enhancer.

Installation
Add the custom maven repository in settings.gradle, add the custom maven repository:

 dependencyResolutionManagement {
      repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
      repositories {
          ...
          maven{url "https://download2.dynamsoft.com/maven/dce/aar"}
      }
  }
Now, in app/build.gradle, add the dependency:
  dependencies {
      ...
      implementation 'com.dynamsoft:dynamsoftcameraenhancer:2.1.0@aar'
  }

QR Code Scanning SDK

Dynamsoft Barcode Reader v9.6
A barcode SDK that supports all standard linear barcode and 2D barcode formats.

Installation
Add the custom maven repository in settings.gradle,

dependencyResolutionManagement {
      repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
      repositories {
          ...
          maven{url "https://download2.dynamsoft.com/maven/dbr/aar"}
      }
  }
In app/build.gradle, add the dependency:
dependencies {
      ...
      implementation 'com.dynamsoft:dynamsoftbarcodereader:9.0.0@aar'
  }

Additionally, a license key is required to activate the barcode SDK:

 BarcodeReader.initLicense(
      "DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAxLTE2NDk4Mjk3OTI2MzUiLCJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSIsInNlc3Npb25QYXNzd29yZCI6IndTcGR6Vm05WDJrcEQ5YUoifQ==",
          new DBRLicenseVerificationListener() {
              @Override
              public void DBRLicenseVerificationCallback(boolean isSuccessful, Exception e) {
              }
          });

Develop Android Camera Preview within 5 Minutes!

Implement Camera Preview with CameraX in Three Simple Steps

The default CameraX documentation is written in Kotlin. However, we will be using Java here.

Build the user interface layout containing the CameraX preview view:

<?xml version="1.0" encoding="utf-8"?>
 <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     tools:context=".CameraXActivity">

     <androidx.camera.view.PreviewView
         android:id="@+id/camerax_viewFinder"
         android:layout_width="match_parent"
         android:layout_height="match_parent" />

 </androidx.constraintlayout.widget.ConstraintLayout>

Now, let's check and request camera permissions:

 @Override
 protected void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.dce_main);
     previewView = findViewById(R.id.dce_viewFinder);
     cameraEnhancer = new CameraEnhancer(this);
     cameraEnhancer.setCameraView(previewView);
     cameraEnhancer.addListener(this);
 }
 @Override
 protected void onResume() {
     super.onResume();
     try {
         cameraEnhancer.open();
     } catch (CameraEnhancerException e) {
         e.printStackTrace();
     }
 }
 @Override
 protected void onPause() {
     super.onPause();
     try {
         cameraEnhancer.close();
     } catch (CameraEnhancerException e) {
         e.printStackTrace();
     }
 }

All in One

We'll construct an entrance activity for launching CameraX and Dynamsoft Camera Enhancer:

package com.example.qrcodescanner;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import androidx.appcompat.app.AppCompatActivity;
public class EntryChoiceActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.entry_choice);
        findViewById(R.id.camerax_entry_point).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(EntryChoiceActivity.this, CameraXActivity.class);
                startActivity(intent);
            }
        });
        findViewById(R.id.dce_entry_point).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(EntryChoiceActivity.this, DceActivity.class);
                startActivity(intent);
            }
        });
    }
}

How to Turn Android Camera into QR Code Scanner

To scan a QR code, we must continuously retrieve the camera's preview frames and send them to the QR code detector.

Setting the Camera Frame Callback

ImageAnalysis class can be used to receive the camera frames when using CameraX:

ImageAnalysis analysisUseCase = new ImageAnalysis.Builder().build();
analysisUseCase.setAnalyzer(cameraExecutor,
        imageProxy -> {
            // image processing
            // Must call close to keep receiving frames.
            imageProxy.close();
        });
cameraProvider.bindToLifecycle(this, cameraSelector, previewUseCase, analysisUseCase);
In comparison, Dynamsoft Camera Enhancer is significantly simpler. The callback function resembles that of Android Camera1:
public class DceActivity extends AppCompatActivity implements DCEFrameListener {
    @Override
    public void frameOutputCallback(DCEFrame dceFrame, long l) {
        // image processing
    }
}

Different data types are returned by their response functions. For subsequent use, data type conversion is required.

How to Decode QR Codes?

When using CameraX, ByteBuffer is firstly converted to byte[] and then the decodeBuffer() method is called:

analysisUseCase.setAnalyzer(cameraExecutor,
imageProxy -> {
    TextResult[] results = null;
    ByteBuffer buffer = imageProxy.getPlanes()[0].getBuffer();
    int nRowStride = imageProxy.getPlanes()[0].getRowStride();
    int nPixelStride = imageProxy.getPlanes()[0].getPixelStride();
    int length = buffer.remaining();
    byte[] bytes = new byte[length];
    buffer.get(bytes);
    try {
        results = reader.decodeBuffer(bytes, imageProxy.getWidth(), imageProxy.getHeight(), nRowStride * nPixelStride, EnumImagePixelFormat.IPF_NV21, "");
    } catch (BarcodeReaderException e) {
        e.printStackTrace();
    }
    // Must call close to keep receiving frames.
    imageProxy.close();
});

When using Dynamsoft Camera Enhancer, we get Bitmap from the DCEFrame and then the decodeBufferedImage() method is called: 

public void frameOutputCallback(DCEFrame dceFrame, long l) {
    TextResult[] results = null;
    try {
        results = reader.decodeBufferedImage(dceFrame.toBitmap(), "");
    } catch (BarcodeReaderException e) {
        e.printStackTrace();
    }
}

How to Use Zoom and Torch to Enhance the Frame Quality

The accuracy of barcode recognition is always dependent on the quality of the input image. The image can be enlarged by zooming the camera if the QR code is very small. If the input image is too poorly lit, we can activate the flashlight to enhance it. Both CameraX and Dynasoft Camera Enhancer have supported the camera control in full.

Android Camera Zoom

Using the finger pinch gesture, the zoom can be triggered. Hence, firstly we'll build the gesture detector and take over the onTouchEvent() method:

public class ZoomController {
    public final static String TAG = "ZoomController";
    private float currentFactor = 1.0f;
    private float minZoomRatio = 1.0f, maxZoomRatio = 1.0f;
    private ZoomStatus zoomStatus;
    private ScaleGestureDetector scaleGestureDetector;
    private ScaleGestureDetector.OnScaleGestureListener scaleGestureListener = new ScaleGestureDetector.OnScaleGestureListener() {
        @Override
        public boolean onScale(ScaleGestureDetector detector) {
            Log.i(TAG, "onScale: " + detector.getScaleFactor());
            currentFactor = detector.getScaleFactor() * currentFactor;
            if (currentFactor < minZoomRatio) currentFactor = minZoomRatio;
            if (currentFactor > maxZoomRatio) currentFactor = maxZoomRatio;
            if (zoomStatus != null) {
                zoomStatus.onZoomChange(currentFactor);
            }
            return true;
        }
        @Override
        public boolean onScaleBegin(ScaleGestureDetector detector) {
            return true;
        }
        @Override
        public void onScaleEnd(ScaleGestureDetector detector) {
        }
    };
    public ZoomController(Activity activity) {
        scaleGestureDetector = new ScaleGestureDetector(activity, scaleGestureListener);
    }
    public interface ZoomStatus {
        void onZoomChange(float ratio);
    }
    public void addListener(ZoomStatus zoomStatus) {
        this.zoomStatus = zoomStatus;
    }
    public void initZoomRatio(float minZoomRatio, float maxZoomRatio) {
        this.minZoomRatio = minZoomRatio;
        this.maxZoomRatio = maxZoomRatio;
    }
    public boolean onTouchEvent(MotionEvent event) {
        return scaleGestureDetector.onTouchEvent(event);
    }
}
@Override
public boolean onTouchEvent(MotionEvent event) {
    zoomController.onTouchEvent(event);
    return super.onTouchEvent(event);
}

When the gesture is detected, we'll get the scale factor and use that as the zoom ratio.

Setting camera zoom ratio with CameraX

if (camera != null) {
    camera.getCameraControl().setZoomRatio(ratio);
}

Setting camera zoom ratio with Dynamsoft Camera Enhancer

try {
    cameraEnhancer.setZoom(ratio);
} catch (CameraEnhancerException e) {
    e.printStackTrace();
}

Android Camera Torch

To instantly turn on the flashlight, we keep an eye on the light value the light sensor gives us.

public class AutoTorchController implements SensorEventListener {
    public final static String TAG = "AutoTorchController";
    private SensorManager sensorManager;
    private TorchStatus torchStatus;
    public interface TorchStatus {
        void onTorchChange(boolean status);
    }
    public AutoTorchController(Activity activity) {
        sensorManager = (SensorManager)activity.getSystemService(SENSOR_SERVICE);
    }
    public void onStart() {
        Sensor lightSensor = sensorManager.getDefaultSensor(Sensor.TYPE_LIGHT);
        if(lightSensor != null){
            sensorManager.registerListener(
                    this,
                    lightSensor,
                    SensorManager.SENSOR_DELAY_NORMAL);
        }
    }
    public void onStop() {
        sensorManager.unregisterListener(this);
    }
    @Override
    public void onSensorChanged(SensorEvent event) {
        if(event.sensor.getType() == Sensor.TYPE_LIGHT){
            if (event.values[0] < 20) {
                if (torchStatus != null) torchStatus.onTorchChange(true);
            }
            else {
                if (torchStatus != null) torchStatus.onTorchChange(false);
            }
        }
    }
    @Override
    public void onAccuracyChanged(Sensor sensor, int accuracy) {
    }
    public void addListener(TorchStatus torchStatus) {
        this.torchStatus = torchStatus;
    }
}

Toggling camera torch with CameraX

if (camera != null) camera.getCameraControl().enableTorch(status);

Toggling camera torch with Dynamsoft Camera Enhancer

if (status) {
    try {
        cameraEnhancer.turnOnTorch();
    } catch (CameraEnhancerException e) {
        e.printStackTrace();
    }
}
else {
    try {
        cameraEnhancer.turnOffTorch();
    } catch (CameraEnhancerException e) {
        e.printStackTrace();
    }
}

How to Integrate Barcode Reading Functionality into .NET Applications

Eric Parker 🥂 — Mon, 10 Apr 2023 10:07:40 +0000

To integrate barcode reading functionality into .NET applications, you can use a barcode reader SDK. Here we'll use Dynamsoft Barcode Reader SDK for .NET because it provides an easy and efficient way to add barcode reading functionality. It can save developers a significant amount of time and effort compared to building barcode recognition from scratch.

Some specific advantages of using a barcode reader SDK include:
- Speed and accuracy: It uses advanced algorithms and techniques to read barcodes quickly and reliably, even in challenging conditions such as low light or blurry images.
- Cross-platform support: It can work with multiple platforms and programming languages, allowing developers to add barcode reading functionality to their applications on a wide range of devices and operating systems.
- Customization and flexibility: It provide a range of configuration options and settings, allowing developers to customize the barcode reading process.

So, Let's start with implementation of barcode reading functionality using the Dynamsoft Barcode Reader SDK for .NET:

Download and install the Dynamsoft Barcode Reader SDK for .NET from the Dynamsoft website.
Create a new .NET project in Visual Studio.
Add a reference to the Dynamsoft Barcode Reader DLL in your project. To do this, right-click on your project in the Solution Explorer and select "Add Reference." Browse to the DLL file for the SDK and add it as a reference.
In your code, add the following using statements:

using Dynamsoft.Barcode;
using System.Drawing;

Instantiate a BarcodeReader object:

BarcodeReader reader = new BarcodeReader();

Configure the barcode reader. For example, to recognize only QR codes, you can set the BarcodeFormat property:

reader.BarcodeFormat = BarcodeFormat.QR_CODE;

Load the image containing the barcode. For example, if you have an image file named "barcode.png" in your project directory, you can load it like this:

Bitmap barcodeImage = new Bitmap("barcode.png");

Call the DecodeBitmap method of the BarcodeReader object, passing the barcode image as a parameter:

BarcodeResult[] results = reader.DecodeBitmap(barcodeImage);

Loop through the results array to extract information about the barcodes that were recognized:

foreach (BarcodeResult result in results)
{
    Console.WriteLine("Barcode Type: " + result.BarcodeFormat);
    Console.WriteLine("Barcode Value: " + result.BarcodeText);
}

This is a simple example to get you started. The Dynamsoft Barcode Reader SDK for .NET provides many more options and features for barcode recognition, such as support for multiple barcode formats, batch scanning, and more.

Source: https://www.dynamsoft.com/barcode-reader/docs/server/programming/dotnet/

Create a Web App to Read Multiple Barcodes Using Dynamsoft

Eric Parker 🥂 — Fri, 17 Mar 2023 07:12:22 +0000

What is Multiple Barcode Scanning?

Multiple barcode scanning is the process of scanning and decoding multiple barcodes in a single image or frame.

Users can capture multiple barcodes in a single shot, which can be helpful in situations where there are several products or items that need to be scanned quickly. For example, in a retail store, a cashier can scan multiple barcodes on a single carton of products instead of scanning each product one by one.

Here is a high-level overview of how to create a web app to read multiple barcodes using Dynamsoft. By following the steps explained below, you should be able to create a functional app that can scan multiple barcodes from a single image.

Create a new vanilla TypeScript project using Vite.

npm create vite@latest example -- --template vanilla-ts

Install Dynamsoft Barcode Reader as a dependency.

npm install dynamsoft-javascript-barcode

In the index.html, add an input element for selecting a file, a button to read barcodes and an SVG element to show the results.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + TS</title>
  </head>
  <body>
    <div id="app">
      <div class="barcode-reader">
        <div>
          Load local image:
          <input type="file" id="barcodeFile" accept=".jpg,.jpeg,.png,.bmp" />
        </div>
        <div>
          <button id="decodeButton">Decode</button>
        </div>
        <div id="status"></div>
        <svg id="resultSVG" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>
      </div>
    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

Load the selected image file and display it in the SVG element.

let img;
window.onload = function(){
  let barcodeFile = document.getElementById('barcodeFile') as HTMLInputElement;
  barcodeFile.addEventListener("change",function(){
    loadImageFromFile();
  })
}

function loadImageFromFile() { 
  console.log("loadImageFromFile");
  let barcodeFile = document.getElementById('barcodeFile') as HTMLInputElement;
  let files = barcodeFile.files as FileList;
  if (files.length == 0) {
    return;
  }
  let file = files[0];
  let fileReader = new FileReader();
  fileReader.onload = function(e:any){
    loadImage(e.target.result);
  };
  fileReader.onerror = function () {
    console.warn('oops, something went wrong.');
  };
  fileReader.readAsDataURL(file);
}

function loadImage(imgsrc:string){
  if (imgsrc) {
    img = new Image();
    img.src = imgsrc;
    img.onload = function(){
      let svgElement = document.getElementById("resultSVG") as HTMLElement;
      svgElement.innerHTML = "";
      let svgImage = document.createElementNS("http://www.w3.org/2000/svg", "image");
      svgImage.setAttribute("href",imgsrc);
      svgElement.setAttribute("viewBox","0 0 "+img.width+" "+img.height);
      svgElement.appendChild(svgImage);
    }
  }
}

Read barcodes from the selected image and overlay the results in the SVG element when the decode button is clicked. Initialize Dynamsoft Barcode Reader if it has not been initialized. You may need to apply for a license to use it.

let reader:BarcodeReader;
let results:TextResult[];
window.onload = function(){
  let decodeButton = document.getElementById('decodeButton') as HTMLButtonElement;
  decodeButton.addEventListener("click",function(){
    decodeImg();
  })
}

async function decodeImg(){
  if (!img) {
    return;
  }
  let status = document.getElementById("status") as HTMLElement;
  if (!reader) {
    await initDBR();
  }
  status.innerText = "decoding...";
  results = await reader.decode(img);
  console.log(results);
  overlayResults(results);
  status.innerText = "";
}

async function initDBR(){
  let status = document.getElementById("status") as HTMLElement;
  status.innerText = "initializing...";
  BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.10/dist/";
  BarcodeReader.license = "DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAxLTE2NDk4Mjk3OTI2MzUiLCJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSIsInNlc3Npb25QYXNzd29yZCI6IndTcGR6Vm05WDJrcEQ5YUoifQ=="; //one-day public trial
  reader = await BarcodeReader.createInstance();
  status.innerText = "";
}

Overall, creating a web app to read multiple barcodes requires knowledge of HTML, CSS, JavaScript, and the Dynamsoft barcode scanning API.

Build a Web Page to Scan Documents Online with Minimal JavaScript Coding

Eric Parker 🥂 — Tue, 06 Dec 2022 06:46:33 +0000

Want to build a web page to scan documents online? Well, you have arrived at the right spot! This blog will introduce you to a technology that will help cut extensive development time and effort. So, without further ado, let's get started.

How to Quickly Build a Web Page to Scan Documents Online?

To build a web page on your own to scan documents in a web browser, you'll either have to develop a module from scratch or choose a document scanning SDK. The latter is a better option as it eliminates the need to perform complex coding and saves time and effort.

Choosing the Right Document Scanner SDK

Document scanners cannot be directly accessed by a web page like a web camera. Hence, it requires a bridge to communicate with scanners. The TWAIN scanning protocol is the most preferred and recommended when working with document scanners.

Choosing the correct document scanner SDK may be challenging for you, with so many available options. The below parameters will help make your selection easier.

Easy Integration: The document scanner SDK you choose must be easy to integrate. Building a document scanning module for your website should not take more than a few lines of JavaScript code. Hence, you must choose the one that is easy to integrate.
Supported OS, Browsers, and Technology: Are you using a Windows system or a MacBook? Which browser are you using? Is it Safari, Chrome, or Firefox? Select a document scanner SDK that supports a wide range of OS and browsers.
Fast Speed: Speed is another crucial aspect you may want to consider while looking for a document scanner SDK for the web. The top ones can scan thousands of documents in a single session. Choosing such options will save you time and effort.
Sharing and Downloading Options: For easy sharing and downloading, ensure the document scanner SDK that you choose supports formats such as JPEG, BMP, PNG, PDF, and TIFF files.
Basic Editing Features: You wouldn't want to use a separate document editor to make fundamental changes such as crop, mirror, flip, erase, rotate, etc. Hence, look for a document scanner SDK with built-in basic image editing interfaces.
Robust Security Features: Even if you use the document scanner SDK for personal use, you cannot compromise the security part. Hence, look for standard security features such as data encryption, built-in HTTPS support, digital signature, authorization access for accessing local files, etc.

Considering these features, you can easily choose the perfect document scanner SDK for your requirements. Also, try online demos and perform detailed analyses to make an informed decision. You may also compare multiple options and finalize the best per your needs.

Building a Web Page with a Document Scanner SDK

Let's learn how to build a web page with a document scanning SDK to scan documents online. Here, we have used Dynamsoft's Dynamic Web TWAIN SDK. It is very easy to use and implement.

Step 1: To configure the license key, open /Resources/dynamsoft.webtwain.config.js

Dynamsoft.DWT.ProductKey = 'LICENSE KEY';

Step 2: Now, you'll need to copy /Resources to the static resource folder of your web project.

Step 3: In this step, you'll have to make an index.html file. The code snippet explains how to scan documents from cameras or scanners.

<!DOCTYPE html>
 <html>

 <head>
     <title>Scan Document from Scanner</title>
     <script type="text/javascript" src="Resources/dynamsoft.webtwain.initiate.js"></script>
     <script type="text/javascript" src="Resources/dynamsoft.webtwain.config.js"></script>
 </head>

 <body>
     <input type="button" value="scan" onclick="acquireScanner();" />

     <div id="container"></div>

     <script type="text/javascript">
         var scannerObj;
         Dynamsoft.DWT.CreateDWTObjectEx({
             WebTwainId: 'scanner',
             UseLocalService: true,
         }, function (obj) {
             scannerObj = obj;
             scannerObj.Viewer.bind(document.getElementById('container'));
             scannerObj.Viewer.width = 480;
             scannerObj.Viewer.height = 640;
             scannerObj.Viewer.show();
         }, function (ec, es) {
             console.log(es);
         });

         function acquireScanner() {
             if (scannerObj) {
                 var OnacquireScannerSuccess, OnacquireScannerFailure;
                 OnacquireScannerSuccess = OnacquireScannerFailure = function () {
                     scannerObj.CloseSource();
                 };

                 scannerObj.SelectSource();
                 scannerObj.OpenSource();
                 scannerObj.IfDisableSourceAfterAcquire = true;
                 scannerObj.AcquireImage(OnacquireScannerSuccess, OnacquireScannerFailure);
             }
         }
     </script>
 </body>
 </html>

Let's build an index2.html file.

<!DOCTYPE html>
 <html>

 <head>
     <title>Use Dynamic Web TWAIN to Scan from Camera</title>
     <script type="text/javascript" src="Resources/dynamsoft.webtwain.initiate.js"></script>
     <script type="text/javascript" src="Resources/dynamsoft.webtwain.config.js"></script>
     <script type="text/javascript" src="Resources/addon/dynamsoft.webtwain.addon.camera.js"></script>
 </head>

 <body>
     <div id="container" style="width: 720px;height:720px"></div>

     <script type="text/javascript">
         var cameraObj;
         Dynamsoft.DWT.CreateDWTObjectEx({
             WebTwainId: 'camera',
             UseLocalService: false
         }, function (obj) {
             cameraObj = obj;
             cameraObj.Viewer.bind(document.createElement('div'));
             cameraObj.Addon.Camera.scanDocument({
                 element: document.getElementById("container"),
                 scannerViewer: {
                     fullScreen: true
                 }
             }).then(
                 function () { console.log("OK"); },
                 function (error) { console.log(error.message); });

         }, function (ec, es) {
             console.log(es);
         });

     </script>
 </body>

 </html>

To control the API behavior, the boolean parameter UseLocalService is utilized. Setting it to 'true' would allow the SDK to communicate with the local Dynamsoft service to acquire images from scanners. When it is set to 'false,' the SDK would directly call JavaScript APIs to capture camera images.

Using the Document Scanning Widget

The scanDocument() API builds a full-functional widget that supports triggering document edge detection, setting camera resolution, images from local storage, loading switching between the rear and front cameras, managing multiple documents, and auto-capturing documents.

Entering the document management viewer will allow you to save and edit documents. To all auto-captured documents, perspective correction is applied in the viewer. You can also use filters if the document quality is not that great.