Skip to content

Commit d768ad8

Browse files
author
Cube
authored
Merge pull request #113 from Dynamsoft/_dev
rename '3.highlight-results-with-custom-style.html' to '3.show-result…
2 parents d311211 + ea2f010 commit d768ad8

File tree

4 files changed

+35
-32
lines changed

4 files changed

+35
-32
lines changed

4.use-case/3.highlight-results-with-custom-style.html renamed to 4.use-case/3.show-result-texts-on-the-video.html

Lines changed: 27 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -10,20 +10,30 @@
1010
<meta name="keywords" content="read barcode from camera, custom style" />
1111
<link
1212
rel="canonical"
13-
href="https://demo.dynamsoft.com/Samples/DBR/JS/4.use-case/3.highlight-results-with-custom-style.html"
13+
href="https://demo.dynamsoft.com/Samples/DBR/JS/4.use-case/3.show-result-texts-on-the-video.html"
1414
/>
1515
<title>
16-
Dynamsoft Barcode Reader Sample - Highlight Results with Custom Style
16+
Dynamsoft Barcode Reader Sample - Show result texts on the video
1717
</title>
1818
<!--
1919
This sample makes use of the library hosted by the CDN jsDelivr. If you would rather use the
2020
library offline. Please see the guide on how to host the library:
2121
https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=latest#host-the-library-yourself-recommended
2222
-->
2323
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.20/dist/dbr.js"></script>
24+
<style>
25+
* {
26+
margin: 0;
27+
padding: 0;
28+
}
29+
body {
30+
position: relative;
31+
}
32+
</style>
2433
</head>
2534
<body>
2635
<div id="div-ui-container" style="width: 100%; height: 100vh"></div>
36+
<div id="div-text-containers" style="position: absolute; left: 0; top: 0; width: 100%; height: 100%"></div>
2737
<script>
2838
if (location.protocol === "file:") {
2939
const message = `The page is opened via file:// and "BarcodeScanner" may not work properly. Please open the page via https:// or host it on "http://localhost/".`;
@@ -46,34 +56,28 @@
4656
* LICENSE ALERT - THE END
4757
*/
4858

59+
const divTextContainers = document.querySelector("#div-text-containers");
4960
let scanner;
50-
const highlightResultMasks = [];
5161

5262
(async () => {
5363
try {
5464
scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
65+
await scanner.updateRuntimeSettings("speed");
5566

5667
// Get ui by 'getUIElement()' and append it to DOM.
5768
document
5869
.querySelector("#div-ui-container")
5970
.append(scanner.getUIElement());
6071

61-
// Hide the built-in shape which highlights a found barcode.
62-
scanner.barcodeFillStyle = "transparent";
63-
scanner.barcodeStrokeStyle = "transparent";
64-
scanner.barcodeFillStyleBeforeVerification = "transparent";
65-
scanner.barcodeStrokeStyleBeforeVerification = "transparent";
66-
6772
/**
6873
* 'onFrameRead' is triggered after the library finishes reading a frame image.
6974
* There can be multiple barcodes on one image.
7075
*/
7176
scanner.onFrameRead = (results) => {
7277
console.log(results);
7378

74-
// Clear previous highlight result masks.
75-
highlightResultMasks.forEach((mask) => mask.remove());
76-
highlightResultMasks.length = 0;
79+
// Clear previous result text elements.
80+
divTextContainers.innerText = "";
7781

7882
for (let result of results) {
7983
const p1 = {
@@ -105,20 +109,19 @@
105109
),
106110
};
107111
/**
108-
* 'convertToClientCoordinates()' is used to converts coordinate of a barcode location to the coordinate related to the viewport.
112+
* 'convertToPageCoordinates()' is used to converts coordinate of a barcode location to the coordinate related to the document.
109113
* Then we can place a div element according to the converted coordinate.
110114
*/
111-
const convertedP1 = scanner.convertToClientCoordinates(p1);
112-
const convertedP2 = scanner.convertToClientCoordinates(p2);
113-
mask = document.createElement("div");
114-
mask.style.position = "fixed";
115-
mask.style.left = convertedP1.x + "px";
116-
mask.style.top = convertedP1.y + "px";
117-
mask.style.width = convertedP2.x - convertedP1.x + "px";
118-
mask.style.height = convertedP2.y - convertedP1.y + "px";
119-
mask.style.border = "2px dashed red";
120-
document.body.append(mask);
121-
highlightResultMasks.push(mask);
115+
const convertedP1 = scanner.convertToPageCoordinates(p1);
116+
const convertedP2 = scanner.convertToPageCoordinates(p2);
117+
textContainer = document.createElement("div");
118+
textContainer.style.position = "absolute";
119+
textContainer.style.left = convertedP1.x + "px";
120+
textContainer.style.right = document.body.clientWidth - convertedP2.x + "px";
121+
textContainer.style.bottom = document.body.clientHeight - convertedP1.y + "px";
122+
textContainer.style.color = "#FE8E14";
123+
textContainer.innerText = result.barcodeText;
124+
divTextContainers.append(textContainer);
122125
}
123126
};
124127

‎4.use-case/README.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -44,14 +44,14 @@ The following official sample shows how to use the sdk to read and extract drive
4444

4545
Also see [Driver's License Scanner SDK for Mobile and Web](https://www.dynamsoft.com/use-cases/driver-license/).
4646

47-
# Read barcodes via camera and highlight results with custom style
47+
# Read barcodes via camera and show result texts on the video
4848

49-
When the SDK picks up a barcode in video stream, it will highlight them with built-in style automatically. But it is also possible to customize the highlight style freely using the method 'convertToClientCoordinates()'.
49+
When the SDK picks up a barcode in video stream, it will highlight them with built-in style automatically. But it is also possible to show the text of the barcode on the video with the help of the function 'convertToPageCoordinates()' or 'convertToClientCoordinates()'.
5050

51-
The following official sample shows how to hightlight results with custom style.
51+
The following official sample shows how to show result texts on the video.
5252

53-
* <a target = "_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/4.use-case/3.highlight-results-with-custom-style.html">Read barcodes via camera and highlight results with custom style - Demo</a>
54-
* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/4.use-case/3.highlight-results-with-custom-style.html">Read barcodes via camera and highlight results with custom style - Source Code</a>
53+
* <a target = "_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/4.use-case/3.show-result-texts-on-the-video.html">Read barcodes via camera and show result texts on the video - Demo</a>
54+
* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/4.use-case/3.show-result-texts-on-the-video.html">Read barcodes via camera and show result texts on the video - Source Code</a>
5555

5656
## Support
5757

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ How to configure different settings of the barcode scanning library.
5656

5757
* [**Read Video and Fill a Form**](https://demo.dynamsoft.com/samples/dbr/js/4.use-case/1.fill-a-form-with-barcode-reading.html?utm_source=sampleReadme): Read barcodes to fill a form.
5858
* [**Read a Driver's License**](https://demo.dynamsoft.com/samples/dbr/js/4.use-case/2.read-a-drivers-license.html?utm_source=sampleReadme): Read the PDF417 barcode on a driver's license (AAMVA compliant) and parse it.
59-
* [**Highlight Results with Custom Style**](https://demo.dynamsoft.com/samples/dbr/js/4.use-case/3.highlight-results-with-custom-style.html?utm_source=sampleReadme): Read barcodes via camera and highlight results with custom style.
59+
* [**Show result texts on the video**](https://demo.dynamsoft.com/samples/dbr/js/4.use-case/3.show-result-texts-on-the-video.html?utm_source=sampleReadme): Read barcodes via camera and show result texts on the video.
6060

6161
### Others
6262

‎index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -211,8 +211,8 @@ <h3>Barcode Reader Samples</h3>
211211
Driver's License</a><span id="icon042" class="tooltipIcon"></span>
212212
<a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/4.use-case/2.read-a-drivers-license.html" title="Check code on GitHub"></a>
213213
</div>
214-
<div class="file"><a data-balloon-length="fit" data-balloon-pos="up" aria-label="Read barcodes from camera with Dynamsoft Barcode Reader and hightlight results with custom style." class="button title" href="4.use-case/3.highlight-results-with-custom-style.html">Hightlight results with custom style</a><span id="icon042" class="tooltipIcon"></span>
215-
<a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/4.use-case/3.highlight-results-with-custom-style.html" title="Check code on GitHub"></a>
214+
<div class="file"><a data-balloon-length="fit" data-balloon-pos="up" aria-label="Read barcodes from camera with Dynamsoft Barcode Reader and hightlight results with custom style." class="button title" href="4.use-case/3.show-result-texts-on-the-video.html">Hightlight results with custom style</a><span id="icon042" class="tooltipIcon"></span>
215+
<a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/4.use-case/3.show-result-texts-on-the-video.html" title="Check code on GitHub"></a>
216216
</div>
217217
</div>
218218
<div class="file">Others</div>

0 commit comments

Comments
 (0)