Skip to content

rename '3.highlight-results-with-custom-style.html' to '3.show-result… #113

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 23, 2023
Merged

rename '3.highlight-results-with-custom-style.html' to '3.show-result… #113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 27 additions & 24 deletions ....highlight-results-with-custom-style.html → ...ase/3.show-result-texts-on-the-video.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,30 @@
<meta name="keywords" content="read barcode from camera, custom style" />
<link
rel="canonical"
href="https://demo.dynamsoft.com/Samples/DBR/JS/4.use-case/3.highlight-results-with-custom-style.html"
href="https://demo.dynamsoft.com/Samples/DBR/JS/4.use-case/3.show-result-texts-on-the-video.html"
/>
<title>
Dynamsoft Barcode Reader Sample - Highlight Results with Custom Style
Dynamsoft Barcode Reader Sample - Show result texts on the video
</title>
<!--
This sample makes use of the library hosted by the CDN jsDelivr. If you would rather use the
library offline. Please see the guide on how to host the library:
https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=latest#host-the-library-yourself-recommended
-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dbr.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
body {
position: relative;
}
</style>
</head>
<body>
<div id="div-ui-container" style="width: 100%; height: 100vh"></div>
<div id="div-text-containers" style="position: absolute; left: 0; top: 0; width: 100%; height: 100%"></div>
<script>
if (location.protocol === "file:") {
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/".`;
Expand All @@ -46,34 +56,28 @@
* LICENSE ALERT - THE END
*/

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

(async () => {
try {
scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
await scanner.updateRuntimeSettings("speed");

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

// Hide the built-in shape which highlights a found barcode.
scanner.barcodeFillStyle = "transparent";
scanner.barcodeStrokeStyle = "transparent";
scanner.barcodeFillStyleBeforeVerification = "transparent";
scanner.barcodeStrokeStyleBeforeVerification = "transparent";

/**
* 'onFrameRead' is triggered after the library finishes reading a frame image.
* There can be multiple barcodes on one image.
*/
scanner.onFrameRead = (results) => {
console.log(results);

// Clear previous highlight result masks.
highlightResultMasks.forEach((mask) => mask.remove());
highlightResultMasks.length = 0;
// Clear previous result text elements.
divTextContainers.innerText = "";

for (let result of results) {
const p1 = {
Expand Down Expand Up @@ -105,20 +109,19 @@
),
};
/**
* 'convertToClientCoordinates()' is used to converts coordinate of a barcode location to the coordinate related to the viewport.
* 'convertToPageCoordinates()' is used to converts coordinate of a barcode location to the coordinate related to the document.
* Then we can place a div element according to the converted coordinate.
*/
const convertedP1 = scanner.convertToClientCoordinates(p1);
const convertedP2 = scanner.convertToClientCoordinates(p2);
mask = document.createElement("div");
mask.style.position = "fixed";
mask.style.left = convertedP1.x + "px";
mask.style.top = convertedP1.y + "px";
mask.style.width = convertedP2.x - convertedP1.x + "px";
mask.style.height = convertedP2.y - convertedP1.y + "px";
mask.style.border = "2px dashed red";
document.body.append(mask);
highlightResultMasks.push(mask);
const convertedP1 = scanner.convertToPageCoordinates(p1);
const convertedP2 = scanner.convertToPageCoordinates(p2);
textContainer = document.createElement("div");
textContainer.style.position = "absolute";
textContainer.style.left = convertedP1.x + "px";
textContainer.style.right = document.body.clientWidth - convertedP2.x + "px";
textContainer.style.bottom = document.body.clientHeight - convertedP1.y + "px";
textContainer.style.color = "#FE8E14";
textContainer.innerText = result.barcodeText;
divTextContainers.append(textContainer);
}
};

Expand Down
10 changes: 5 additions & 5 deletions 4.use-case/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,14 +44,14 @@ The following official sample shows how to use the sdk to read and extract drive

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

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

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()'.
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()'.

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

* <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>
* <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>
* <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>
* <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>

## Support

Expand Down
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ How to configure different settings of the barcode scanning library.

* [**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.
* [**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.
* [**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.
* [**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.

### Others

Expand Down
4 changes: 2 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -211,8 +211,8 @@ <h3>Barcode Reader Samples</h3>
Driver's License</a><span id="icon042" class="tooltipIcon"></span>
<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>
</div>
<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>
<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>
<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>
<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>
</div>
</div>
<div class="file">Others</div>
Expand Down