Skip to content

Commit 2832ac3

Browse files
Felix-Dynamsoftfelixindrawan
Felix-Dynamsoft
and
felixindrawan
authored
feat: update show result texts on video sample (#189)
* feat: update show result texts on video sample * fix: naming and title * fix: name not updated --------- Co-authored-by: felixindrawan <[email protected]>
1 parent c2210c6 commit 2832ac3

File tree

1 file changed

+82
-67
lines changed

1 file changed

+82
-67
lines changed

‎use-case/show-result-texts-on-the-video.html‎

Lines changed: 82 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,14 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<meta
77
name="description"
8-
content="Read barcodes from camera with Dynamsoft Barcode Reader and show result texts on the video."
8+
content="Read barcodes from camera with Dynamsoft Barcode Reader and display result texts as overlays on video."
99
/>
10-
<meta name="keywords" content="read barcode from camera, custom style" />
10+
<meta name="keywords" content="read barcode from camera, overlay" />
1111
<link
1212
rel="canonical"
1313
href="https://demo.dynamsoft.com/Samples/DBR/JS/use-case/show-result-texts-on-the-video.html"
1414
/>
15-
<title>
16-
Dynamsoft Barcode Reader Sample - Show Result Texts on the Video
17-
</title>
15+
<title>Dynamsoft Barcode Reader Sample - Display Barcode Results as Video Overlays</title>
1816
<style>
1917
.bubble-box-container {
2018
position: absolute;
@@ -45,8 +43,10 @@
4543
</style>
4644
</head>
4745
<body>
48-
<div id="div-ui-container" style="width: 100%; height: 90vh"></div>
49-
<div id="div-information-containers"></div>
46+
<h1>Display Barcode Results as Video Overlays</h1>
47+
<h3>Scan barcodes to display results as overlays on video</h3>
48+
<div id="camera-view-container" style="width: 100%; height: 90vh"></div>
49+
<div id="results"></div>
5050
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dbr.bundle.js"></script>
5151
<script>
5252
/** LICENSE ALERT - README
@@ -65,87 +65,102 @@
6565
// Optional. Used to load wasm resources in advance, reducing latency between video playing and barcode decoding.
6666
Dynamsoft.Core.CoreModule.loadWasm(["DBR"]);
6767

68-
const divInfContainers = document.querySelector("#div-information-containers");
68+
const resultsContainer = document.querySelector("#results");
6969

7070
(async () => {
7171
try {
7272
// Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
7373
const cameraView = await Dynamsoft.DCE.CameraView.createInstance();
7474
const cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
7575
// Get default UI and append it to DOM.
76-
document.querySelector("#div-ui-container").append(cameraView.getUIElement());
76+
document.querySelector("#camera-view-container").append(cameraView.getUIElement());
7777

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

8282
// Define a callback for results.
8383
const bodyStyle = getComputedStyle(document.body);
84-
cvRouter.addResultReceiver({ onCapturedResultReceived: result => {
85-
divInfContainers.innerText = "";
86-
87-
// if you set body `position` as `relative`, `absolute`, and so on, we needs these valuable.
88-
const isBodyStyleStatic = bodyStyle.position === "static";
89-
let bodyStaticTopOffset, bodyStaticLeftOffset;
90-
if(isBodyStyleStatic){
91-
const bodyRect = document.body.getBoundingClientRect();
92-
bodyStaticTopOffset = bodyRect.top + parseFloat(bodyStyle.borderTopWidth);
93-
bodyStaticLeftOffset = bodyRect.left + parseFloat(bodyStyle.borderLeftWidth);
94-
}
95-
96-
// loop every barcode
97-
for (let item of result.items) {
98-
if (item.type != Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE){ continue; }
99-
100-
const p = item.location.points;
101-
const p1 = {
102-
x: Math.min(p[0].x,p[1].x,p[2].x,p[3].x),
103-
y: Math.min(p[0].y,p[1].y,p[2].y,p[3].y),
104-
};
105-
const p2 = {
106-
x: Math.max(p[0].x,p[1].x,p[2].x,p[3].x),
107-
y: Math.max(p[0].y,p[1].y,p[2].y,p[3].y),
108-
};
109-
110-
const divInfContainer = document.createElement("div");
111-
divInfContainer.className = "bubble-box-container";
112-
const divInf = document.createElement("div");
113-
divInf.className = "bubble-box";
114-
divInf.innerText = item.text;
115-
divInfContainer.append(divInf);
84+
cvRouter.addResultReceiver({
85+
onCapturedResultReceived: (result) => {
86+
// Reset results
87+
resultsContainer.innerText = "";
88+
89+
// Determine if body `position` is `static`, `relative`, `absolute`, etc.
90+
const isBodyStyleStatic = bodyStyle.position === "static";
91+
let bodyStaticTopOffset, bodyStaticLeftOffset;
11692
if (isBodyStyleStatic) {
93+
const bodyRect = document.body.getBoundingClientRect();
94+
bodyStaticTopOffset = bodyRect.top + parseFloat(bodyStyle.borderTopWidth);
95+
bodyStaticLeftOffset = bodyRect.left + parseFloat(bodyStyle.borderLeftWidth);
96+
}
97+
98+
// loop through each barcode result
99+
for (let item of result.items) {
100+
if (item.type != Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE) {
101+
continue; // Skip processing if the result is not a barcode
102+
}
103+
104+
// Get the points of the quadrilateral surrounding the scanned barcode
105+
const p = item.location.points;
106+
// Calculate the top-left and bottom-right coordinates of the quadrilateral
107+
// This will help in positioning the result overlay on top of the scanned barcode
108+
const barcodeTopLeft = {
109+
x: Math.min(p[0].x, p[1].x, p[2].x, p[3].x),
110+
y: Math.min(p[0].y, p[1].y, p[2].y, p[3].y),
111+
};
112+
const barcodeBottomRight = {
113+
x: Math.max(p[0].x, p[1].x, p[2].x, p[3].x),
114+
y: Math.max(p[0].y, p[1].y, p[2].y, p[3].y),
115+
};
116+
117+
// Create an `absolute` positioned container to overlay on top of the video
118+
const bubbleBoxContainer = document.createElement("div");
119+
bubbleBoxContainer.className = "bubble-box-container";
120+
121+
// Create the overlay element to display decoded barcode results
122+
const bubbleBoxOverlay = document.createElement("div");
123+
bubbleBoxOverlay.className = "bubble-box";
124+
bubbleBoxOverlay.innerText = item.text;
125+
bubbleBoxContainer.append(bubbleBoxOverlay);
126+
127+
// Position the overlay container relative to the document or viewport
128+
if (isBodyStyleStatic) {
129+
/**
130+
* 'convertToPageCoordinates()' is used to converts coordinate of a barcode location to the coordinate relative to the document.
131+
* Then we can place a div element according to the converted coordinate.
132+
*/
133+
const pageTopLeft = cameraEnhancer.convertToPageCoordinates(barcodeTopLeft);
134+
const pageBottomRight = cameraEnhancer.convertToPageCoordinates(barcodeBottomRight);
135+
const pageMidX = (pageTopLeft.x + pageBottomRight.x) / 2;
136+
bubbleBoxContainer.style.top = `${pageTopLeft.y}px`;
137+
bubbleBoxContainer.style.left = `${pageMidX}px`;
138+
} else {
139+
// if you set body `position` as `relative`, `absolute`, and so on,
140+
// we'll have to use set the position relative to the viewport.
141+
/**
142+
* 'convertToClientCoordinates()' is used to converts coordinate of a barcode location to the coordinate relative to the viewport.
143+
* Then we can place a div element according to the converted coordinate.
144+
*/
145+
const clientTopLeft = cameraEnhancer.convertToClientCoordinates(barcodeTopLeft);
146+
const clientBottomRight = cameraEnhancer.convertToClientCoordinates(barcodeBottomRight);
147+
const clientMidX = (clientTopLeft.x + clientBottomRight.x) / 2;
148+
bubbleBoxContainer.style.top = `${clientTopLeft.y - bodyStaticTopOffset}px`;
149+
bubbleBoxContainer.style.left = `${clientMidX - bodyStaticLeftOffset}px`;
150+
}
151+
resultsContainer.append(bubbleBoxContainer);
152+
117153
/**
118-
* 'convertToPageCoordinates()' is used to converts coordinate of a barcode location to the coordinate related to the document.
119-
* Then we can place a div element according to the converted coordinate.
120-
*/
121-
const pageP1 = cameraEnhancer.convertToPageCoordinates(p1);
122-
const pageP2 = cameraEnhancer.convertToPageCoordinates(p2);
123-
const pageMidX = (pageP1.x + pageP2.x) / 2;
124-
divInfContainer.style.top = `${pageP1.y}px`;
125-
divInfContainer.style.left = `${pageMidX}px`;
126-
} else {
127-
// if you set body `position` as `relative`, `absolute`, and so on, things can get complicated.
128-
/**
129-
* 'convertToClientCoordinates()' is used to converts coordinate of a barcode location to the coordinate related to the viewport.
130-
* Then we can place a div element according to the converted coordinate.
154+
* You can also add more information, such as displaying product images.
131155
*/
132-
const clientP1 = cameraEnhancer.convertToClientCoordinates(p1);
133-
const clientP2 = cameraEnhancer.convertToClientCoordinates(p2);
134-
const clientMidX = (clientP1.x + clientP2.x) / 2;
135-
divInfContainer.style.top = `${clientP1.y - bodyStaticTopOffset}px`;
136-
divInfContainer.style.left = `${clientMidX - bodyStaticLeftOffset}px`;
137156
}
138-
divInfContainers.append(divInfContainer);
139-
140-
/**
141-
* You can also add more information, such as displaying product images.
142-
*/
143-
}
144-
}});
157+
},
158+
});
145159

146160
// Filter out unchecked and duplicate results.
147161
const filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
148-
filter.enableResultCrossVerification("barcode", true); // Filter out unchecked barcodes.
162+
// Filter out unchecked barcodes.
163+
filter.enableResultCrossVerification("barcode", true);
149164

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

0 commit comments

Comments
 (0)