+
```
-### Add `VideoCapture` and `ImageCapture` components in `HelloWorld.vue`
+### Add the `VideoCapture` and `ImageCapture` component to `App.vue`
+
+* On `/src/App.vue`, we will edit the component so that it offers buttons to switch components between `VideoCapture` and `ImageCapture`.
+
+* Add following code to `App.vue`.
```vue
+
-
+
+
+
- = ref("video");
align-items: center;
margin-top: 20px;
}
+
.title .title-logo {
width: 30px;
height: 30px;
@@ -53,13 +57,14 @@ const mode: Ref = ref("video");
border-bottom-left-radius: 10px;
border-right: transparent;
}
+
.top-btns button:nth-child(2) {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-left: transparent;
}
-@media screen and (max-width: 500px) {
+@media screen and (max-width: 800px) {
.top-btns {
width: 70%;
}
diff --git a/hello-world/vue/src/components/ImageCapture.vue b/hello-world/vue/src/components/ImageCapture.vue
index a9a85f85..25392c19 100644
--- a/hello-world/vue/src/components/ImageCapture.vue
+++ b/hello-world/vue/src/components/ImageCapture.vue
@@ -5,34 +5,39 @@ import { EnumCapturedResultItemType } from "dynamsoft-core";
import type { BarcodeResultItem } from "dynamsoft-barcode-reader";
import { CaptureVisionRouter } from "dynamsoft-capture-vision-router";
-const resDiv: Ref = ref(null);
+const resultContainer: Ref = ref(null);
let pCvRouter: Promise;
-let bDestoried = false;
+let isDestroyed = false;
const captureImage = async (e: Event) => {
let files = [...(e.target! as HTMLInputElement).files!];
- (e.target! as HTMLInputElement).value = '';
- resDiv.value!.innerText = "";
+ (e.target! as HTMLInputElement).value = ''; // reset input
+ resultContainer.value!.innerText = "";
try {
+ // ensure cvRouter is created only once
const cvRouter = await (pCvRouter = pCvRouter || CaptureVisionRouter.createInstance());
- if (bDestoried) return;
-
- for(let file of files){
+ if (isDestroyed) return;
+
+ for (let file of files) {
// Decode selected image with 'ReadBarcodes_SpeedFirst' template.
const result = await cvRouter.capture(file, "ReadBarcodes_SpeedFirst");
- if (bDestoried) return;
+ if (isDestroyed) return;
- if(files.length > 1){
- resDiv.value!.innerText += `\n${file.name}:\n`;
+ // Print file name if there's multiple files
+ if (files.length > 1) {
+ resultContainer.value!.innerText += `\n${file.name}:\n`;
}
for (let _item of result.items) {
- if(_item.type !== EnumCapturedResultItemType.CRIT_BARCODE) { continue; }
+ if (_item.type !== EnumCapturedResultItemType.CRIT_BARCODE) {
+ continue; // check if captured result item is a barcode
+ }
let item = _item as BarcodeResultItem;
- resDiv.value!.innerText += item.text + "\n";
+ resultContainer.value!.innerText += item.text + "\n"; // output the decoded barcode text
console.log(item.text);
}
- if (!result.items.length) resDiv.value!.innerText += 'No barcode found\n';
+ // If no items are found, display that no barcode was detected
+ if (!result.items.length) resultContainer.value!.innerText += 'No barcode found\n';
}
} catch (ex: any) {
let errMsg = ex.message || ex;
@@ -42,32 +47,32 @@ const captureImage = async (e: Event) => {
}
onBeforeUnmount(async () => {
- bDestoried = true;
- if(pCvRouter){
- try{
+ isDestroyed = true;
+ if (pCvRouter) {
+ try {
(await pCvRouter).dispose();
- }catch(_){}
+ } catch (_) { }
}
});
-
Hello World for Vue 3
-
-
-
+
@@ -29,6 +32,7 @@ const mode: Ref
+ read-video-vue3
+
+
+
+
+
+
+ Hello World for Vue 3 - Dynamsoft Barcode Reader Sample
diff --git a/hello-world/vue/package.json b/hello-world/vue/package.json
index 53d4b78e..77fc7a23 100644
--- a/hello-world/vue/package.json
+++ b/hello-world/vue/package.json
@@ -23,4 +23,4 @@
"vite": "^4.0.0",
"vue-tsc": "^1.0.12"
}
-}
+}
\ No newline at end of file
diff --git a/hello-world/vue/src/App.vue b/hello-world/vue/src/App.vue
index 3c4c188a..4f59da75 100644
--- a/hello-world/vue/src/App.vue
+++ b/hello-world/vue/src/App.vue
@@ -5,6 +5,7 @@ import VideoCapture from "./components/VideoCapture.vue";
import ImageCapture from "./components/ImageCapture.vue";
const mode: Ref = ref("video");
+
@@ -14,11 +15,13 @@ const mode: Ref = ref("video");
![logo]()
+ ![logo]()
- Hello World for Vue
+
-
-```
-
-### Add the `HelloWorld` component to `App.vue`
-
-Edit the file `App.vue` to be like this
-```vue
-
-
-
-
+
+
+
-
-
+
+
-
-
-
+ = ref(null);
+const cameraViewContainer: Ref = ref(null);
const resultsContainer: Ref = ref(null);
-let resolveInit:()=>void;
-const pInit:Promise = new Promise(r=>{resolveInit=r});
-let bDestoryed = false;
+let resolveInit: () => void;
+const pInit: Promise = new Promise(r => { resolveInit = r });
+let isDestroyed = false;
-let cvRouter:CaptureVisionRouter;
-let cameraEnhancer:CameraEnhancer;
+let cvRouter: CaptureVisionRouter;
+let cameraEnhancer: CameraEnhancer;
onMounted(async () => {
- try{
+ try {
// Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
const cameraView = await CameraView.createInstance();
- if(bDestoryed){ throw Error(strErrorDistoryed); } // Check if component is destroyed after every async
+ if (isDestroyed) { throw Error(componentDestroyedErrorMsg); } // Check if component is destroyed after every async
+
cameraEnhancer = await CameraEnhancer.createInstance(cameraView);
- if(bDestoryed){ throw Error(strErrorDistoryed); }
+ if (isDestroyed) { throw Error(componentDestroyedErrorMsg); }
// Get default UI and append it to DOM.
- uiContainer.value!.append(cameraView.getUIElement());
+ cameraViewContainer.value!.append(cameraView.getUIElement());
// Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
cvRouter = await CaptureVisionRouter.createInstance();
- if(bDestoryed){ throw Error(strErrorDistoryed); }
+ if (isDestroyed) { throw Error(componentDestroyedErrorMsg); }
cvRouter.setInput(cameraEnhancer);
// Define a callback for results.
- cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => {
- if (!result.barcodeResultItems.length) return;
-
- resultsContainer.value!.textContent = '';
- console.log(result);
- for (let item of result.barcodeResultItems) {
- resultsContainer.value!.append(
- `${item.formatString}: ${item.text}`,
- document.createElement('br'),
- document.createElement('hr'),
- );
+ cvRouter.addResultReceiver({
+ onDecodedBarcodesReceived: (result) => {
+ if (!result.barcodeResultItems.length) return;
+
+ resultsContainer.value!.textContent = '';
+ console.log(result);
+ for (let item of result.barcodeResultItems) {
+ resultsContainer.value!.textContent += `${item.formatString}: ${item.text}\n\n`;
+ }
}
- }});
+ });
// Filter out unchecked and duplicate results.
const filter = new MultiFrameResultCrossFilter();
@@ -56,55 +55,57 @@ onMounted(async () => {
// Filter out duplicate barcodes within 3 seconds.
filter.enableResultDeduplication("barcode", true);
await cvRouter.addResultFilter(filter);
- if(bDestoryed){ throw Error(strErrorDistoryed); }
+ if (isDestroyed) { throw Error(componentDestroyedErrorMsg); }
// Open camera and start scanning single barcode.
await cameraEnhancer.open();
- if(bDestoryed){ throw Error(strErrorDistoryed); }
+ if (isDestroyed) { throw Error(componentDestroyedErrorMsg); }
await cvRouter.startCapturing("ReadSingleBarcode");
- if(bDestoryed){ throw Error(strErrorDistoryed); }
+ if (isDestroyed) { throw Error(componentDestroyedErrorMsg); }
+
+ } catch (ex: any) {
- }catch(ex:any){
-
- if((ex as Error)?.message === strErrorDistoryed){
- console.log(strErrorDistoryed);
- }else{
+ if ((ex as Error)?.message === componentDestroyedErrorMsg) {
+ console.log(componentDestroyedErrorMsg);
+ } else {
let errMsg = ex.message || ex;
console.error(errMsg);
alert(errMsg);
}
}
- // distroy function will wait pInit
+ // Resolve pInit promise once initialization is complete.
resolveInit!();
});
+// dispose cvRouter when it's no longer needed
onBeforeUnmount(async () => {
- bDestoryed = true;
- try{
- await pInit;
+ isDestroyed = true;
+ try {
+ await pInit; // Wait for the pInit to complete before disposing resources.
cvRouter?.dispose();
cameraEnhancer?.dispose();
- }catch(_){}
+ } catch (_) { }
});
+
-
+
\ No newline at end of file
diff --git a/hello-world/vue/src/components/VideoCapture.vue b/hello-world/vue/src/components/VideoCapture.vue
index 456457ef..6f32d162 100644
--- a/hello-world/vue/src/components/VideoCapture.vue
+++ b/hello-world/vue/src/components/VideoCapture.vue
@@ -5,49 +5,48 @@ import { CameraEnhancer, CameraView } from "dynamsoft-camera-enhancer";
import { CaptureVisionRouter } from "dynamsoft-capture-vision-router";
import { MultiFrameResultCrossFilter } from "dynamsoft-utility";
-const strErrorDistoryed = 'videoCapture component destoryed';
+const componentDestroyedErrorMsg = "VideoCapture Component Destroyed";
-const uiContainer: Ref
+
-
+
-
- Results:
- + +
+ Results: +
-
+
- + +
+ Results: +