Skip to content

Commit

Permalink
Merge pull request #236 from Dynamsoft/_dev
Browse files Browse the repository at this point in the history 
Dev
  • Loading branch information
@Shen-wb
Shen-wb authored Dec 26, 2024
2 parents 9dcf1ee + 1b9dfc4 commit 712d969
Show file tree
Hide file tree
Showing 10 changed files with 222 additions and 164 deletions.
29 changes: 15 additions & 14 deletions hello-world/angular/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ ng generate component video-capture
></div>
<br />
Results:
<div #results class="results"></div>
<div class="results">{{resultText}}</div>
```

* In `video-capture.component.ts`, add code for initializing and destroying some instances. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample).
Expand All @@ -141,7 +141,7 @@ const componentDestroyedErrorMsg = 'VideoCapture Component Destroyed';
})
export class VideoCaptureComponent {
@ViewChild('cameraViewContainer') cameraViewContainer?: ElementRef<HTMLDivElement>;
@ViewChild('results') resultsContainer?: ElementRef<HTMLDivElement>;
resultText = "";

resolveInit?: () => void;
pInit: Promise<void> = new Promise((r) => {
Expand Down Expand Up @@ -179,10 +179,10 @@ export class VideoCaptureComponent {
onDecodedBarcodesReceived: (result) => {
if (!result.barcodeResultItems.length) return;

this.resultsContainer!.nativeElement.textContent = '';
this.resultText = '';
console.log(result);
for (let item of result.barcodeResultItems) {
this.resultsContainer!.nativeElement.textContent += `${item.formatString}: ${item.text}\n\n`;
this.resultText += `${item.formatString}: ${item.text}\n\n`;
}
},
});
Expand All @@ -200,6 +200,7 @@ export class VideoCaptureComponent {

// Open camera and start scanning single barcode.
await this.cameraEnhancer.open();
cameraView.setScanLaserVisible(true);
if (this.isDestroyed) {
throw Error(componentDestroyedErrorMsg);
}
Expand Down Expand Up @@ -235,7 +236,7 @@ export class VideoCaptureComponent {
```
> Note:
>
> If you're looking to customize the UI, the UI customization feature are provided by the auxiliary SDK "Dynamsoft Camera Enhancer". For more details, refer to our [User Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/index.html#customize-the-ui)
> If you're looking to customize the UI, the UI customization feature are provided by the auxiliary SDK "Dynamsoft Camera Enhancer". For more details, refer to our [User Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/index.html#customizing-the-ui)

### Generate and edit the `image-capture` component
Expand All @@ -259,7 +260,7 @@ ng generate component image-capture
accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp"
/>
</div>
<div class="results" #results></div>
<div class="results">{{resultText}}</div>
</div>
```

Expand All @@ -280,41 +281,41 @@ import { CaptureVisionRouter } from 'dynamsoft-capture-vision-router';
standalone: true,
})
export class ImageCaptureComponent {
@ViewChild('results') resultsContainer?: ElementRef<HTMLDivElement>;
resultText = "";

pCvRouter?: Promise<CaptureVisionRouter>;
isDestroyed = false;

captureImage = async (e: Event) => {
let files = [...((e.target! as HTMLInputElement).files as any as File[])];
(e.target! as HTMLInputElement).value = ''; // reset input
this.resultsContainer!.nativeElement.innerText = '';
this.resultText = '';
try {
// ensure cvRouter is created only once
const cvRouter = await (this.pCvRouter =
this.pCvRouter || CaptureVisionRouter.createInstance());
if (this.isDestroyed) return;

for (let file of files) {
// Decode selected image with 'ReadBarcodes_SpeedFirst' template.
const result = await cvRouter.capture(file, 'ReadBarcodes_SpeedFirst');
// Decode selected image with 'ReadBarcodes_ReadRateFirst' template.
const result = await cvRouter.capture(file, 'ReadBarcodes_ReadRateFirst');
console.log(result);
if (this.isDestroyed) return;

// Print file name if there's multiple files
if (files.length > 1) {
this.resultsContainer!.nativeElement.innerText += `\n${file.name}:\n`;
this.resultText += `\n${file.name}:\n`;
}
for (let _item of result.items) {
if (_item.type !== EnumCapturedResultItemType.CRIT_BARCODE) {
continue; // check if captured result item is a barcode
}
let item = _item as BarcodeResultItem;
this.resultsContainer!.nativeElement.innerText += item.text + '\n'; // output the decoded barcode text
console.log(item.text);
this.resultText += item.text + '\n'; // output the decoded barcode text
}
// If no items are found, display that no barcode was detected
if (!result.items.length)
this.resultsContainer!.nativeElement.innerText +=
this.resultText +=
'No barcode found\n';
}
} catch (ex: any) {
Expand Down
70 changes: 35 additions & 35 deletions hello-world/blazor/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,6 +156,8 @@ window.startVideoDecode = async () => {

// Open camera and start scanning single barcode.
await cameraEnhancer.open();

cameraView.setScanLaserVisible(true);
await cvRouter.startCapturing("ReadSingleBarcode");
} catch (ex) {
let errMsg = ex.message || ex;
Expand Down Expand Up @@ -283,45 +285,43 @@ Inside the `wwwroot\index.html` file, we will initialize the license and necessa

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dbr.bundle.min.js"></script>
<script>
/** LICENSE ALERT - README
* To use the library, you need to first specify a license key using the API "initLicense()" as shown below.
*/

Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");

/**
* You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days.
* Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license.
* For more information, see https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/index.html?ver=10.4.2002&cVer=true#specify-the-license&utm_source=samples or contact [email protected].
* LICENSE ALERT - THE END
*/

// Optional. Used to load wasm resources in advance, reducing latency between video playing and barcode decoding.
Dynamsoft.Core.CoreModule.loadWasm(["DBR"]);

// Defined globally for easy debugging.
let cameraEnhancer, cvRouter;
let videoModuleLoaded = false;
let imageModuleLoaded = false;

// Lazy load Decode video module until needed
async function loadDecodeVideoModule() {
if (!videoModuleLoaded) {
await import('./decodeVideo.js');
videoModuleLoaded = true;
}
/** LICENSE ALERT - README
* To use the library, you need to first specify a license key using the API "initLicense()" as shown below.
*/
Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");

/**
* You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days.
* Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license.
* For more information, see https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/index.html?ver=10.4.2002&cVer=true#specify-the-license&utm_source=samples or contact [email protected].
* LICENSE ALERT - THE END
*/

// Optional. Used to load wasm resources in advance, reducing latency between video playing and barcode decoding.
Dynamsoft.Core.CoreModule.loadWasm(["DBR"]);

// Defined globally for easy debugging.
let cameraEnhancer, cvRouter;
let videoModuleLoaded = false;
let imageModuleLoaded = false;

// Lazy load Decode video module until needed
async function loadDecodeVideoModule() {
if (!videoModuleLoaded) {
await import("./decodeVideo.js");
videoModuleLoaded = true;
}
}

// Lazy load decode image module until needed
async function loadDecodeImageModule() {
if (!imageModuleLoaded) {
await import('./decodeImage.js');
imageModuleLoaded = true;
}
// Lazy load decode image module until needed
async function loadDecodeImageModule() {
if (!imageModuleLoaded) {
await import("./decodeImage.js");
imageModuleLoaded = true;
}
}
</script>
</body>

</body>
</html>
```
Expand Down
31 changes: 13 additions & 18 deletions hello-world/electron/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,13 @@ In this guide, we will be using [`dynamsoft-barcode-reader-bundle 10.4.2002`](ht

Make sure you have [node](https://nodejs.org/) installed. `node 16.20.1` and `electron 26.4.1` are used in this article.

## Quick Start
## Quick Start

```cmd
npm install
npm start
```

A window should open to view the sample application

## Creating the sample project
Expand Down Expand Up @@ -148,14 +149,14 @@ Dynamsoft.Core.CoreModule.engineResourcePaths = {
license: "./node_modules/dynamsoft-license/dist/",
cvr: "./node_modules/dynamsoft-capture-vision-router/dist/",
dbr: "./node_modules/dynamsoft-barcode-reader/dist/",
dce: "./node_modules/dynamsoft-camera-enhancer/dist/"
dce: "./node_modules/dynamsoft-camera-enhancer/dist/",
};

/** LICENSE ALERT - README
* To use the library, you need to first specify a license key using the API "initLicense()" as shown below.
*/

Dynamsoft.License.LicenseManager.initLicense('DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9', {
Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9", {
executeNow: true,
});

Expand All @@ -170,15 +171,18 @@ Dynamsoft.License.LicenseManager.initLicense('DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMD
Dynamsoft.Core.CoreModule.loadWasm(["DBR"]);

(async () => {
// Defined globally for easy debugging.
let cameraEnhancer, cvRouter;

try {
// Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
// Create a `CameraView` instance for UI control and a `CameraEnhancer` instance for camera control.
const cameraView = await Dynamsoft.DCE.CameraView.createInstance();
const cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
// Get default UI and append it to DOM.
document.querySelector("#camera-view-container").append(cameraView.getUIElement());

// Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
const cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
cvRouter.setInput(cameraEnhancer);

// Define a callback for results.
Expand All @@ -187,12 +191,12 @@ Dynamsoft.Core.CoreModule.loadWasm(["DBR"]);
if (!result.barcodeResultItems.length) return;

const resultsContainer = document.querySelector("#results");
resultsContainer.textContent = '';
resultsContainer.textContent = "";
console.log(result);
for (let item of result.barcodeResultItems) {
resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
}
}
},
});

// Filter out unchecked and duplicate results.
Expand All @@ -205,6 +209,7 @@ Dynamsoft.Core.CoreModule.loadWasm(["DBR"]);

// Open camera and start scanning single barcode.
await cameraEnhancer.open();
cameraView.setScanLaserVisible(true);
await cvRouter.startCapturing("ReadSingleBarcode");
} catch (ex) {
let errMsg = ex.message || ex;
Expand All @@ -221,22 +226,12 @@ Dynamsoft.Core.CoreModule.loadWasm(["DBR"]);
Create the `style.css` file at the root folder. Note that this is customizable!

```css
body {
text-align: center;
}

#camera-view-container {
width: 100%;
height: 80vh;
}

#results {
width: 100%;
height: 10vh;
overflow: auto;
white-space: pre-wrap;
}

```

## Run the application
Expand Down
Loading

0 comments on commit 712d969

Please sign in to comment.