From 9b694321011275060fc4a6ab66f2059198a9f64b Mon Sep 17 00:00:00 2001
From: Keillion <735699921@qq.com>
Date: Tue, 23 May 2023 15:47:40 +0800
Subject: [PATCH 1/4] Update 3.show-result-texts-on-the-video.html

---
 .../3.show-result-texts-on-the-video.html     | 47 +++++++------------
 1 file changed, 18 insertions(+), 29 deletions(-)

diff --git a/4.use-case/3.show-result-texts-on-the-video.html b/4.use-case/3.show-result-texts-on-the-video.html
index e58738606..4b0c378f9 100644
--- a/4.use-case/3.show-result-texts-on-the-video.html
+++ b/4.use-case/3.show-result-texts-on-the-video.html
@@ -80,48 +80,37 @@
             divTextContainers.innerText = "";
 
             for (let result of results) {
+              const l = result.localizationResult;
               const p1 = {
-                x: Math.min(
-                  result.localizationResult.x1,
-                  result.localizationResult.x2,
-                  result.localizationResult.x3,
-                  result.localizationResult.x4
-                ),
-                y: Math.min(
-                  result.localizationResult.y1,
-                  result.localizationResult.y2,
-                  result.localizationResult.y3,
-                  result.localizationResult.y4
-                ),
+                x: Math.min(l.x1, l.x2, l.x3, l.x4),
+                y: Math.min(l.y1, l.y2, l.y3, l.y4),
               };
               const p2 = {
-                x: Math.max(
-                  result.localizationResult.x1,
-                  result.localizationResult.x2,
-                  result.localizationResult.x3,
-                  result.localizationResult.x4
-                ),
-                y: Math.max(
-                  result.localizationResult.y1,
-                  result.localizationResult.y2,
-                  result.localizationResult.y3,
-                  result.localizationResult.y4
-                ),
+                x: Math.max(l.x1, l.x2, l.x3, l.x4),
+                y: Math.max(l.y1, l.y2, l.y3, l.y4),
               };
+              
               /**
                * '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.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";
+              Object.assign(textContainer.style, {
+                position: "absolute",
+                left: convertedP1.x + "px",
+                right: document.documentElement.clientWidth - convertedP2.x + "px",
+                bottom: document.documentElement.clientHeight  - convertedP1.y + "px",
+                color: "#FE8E14",
+              });
               textContainer.innerText = result.barcodeText;
               divTextContainers.append(textContainer);
+
+              /**
+               * You can also add more information, such as displaying product images.
+               */
             }
           };
 

From 21b0c8f24029ddba6ddf41f1822ffd83c92b15cf Mon Sep 17 00:00:00 2001
From: Cube <877211593@qq.com>
Date: Tue, 23 May 2023 18:13:23 +0800
Subject: [PATCH 2/4] Update 3.show-result-texts-on-the-video.html

---
 4.use-case/3.show-result-texts-on-the-video.html | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/4.use-case/3.show-result-texts-on-the-video.html b/4.use-case/3.show-result-texts-on-the-video.html
index 4b0c378f9..d5029abc5 100644
--- a/4.use-case/3.show-result-texts-on-the-video.html
+++ b/4.use-case/3.show-result-texts-on-the-video.html
@@ -26,9 +26,6 @@
         margin: 0;
         padding: 0;
       }
-      body {
-        position: relative;
-      }
     </style>
   </head>
   <body>

From fbc2494ab51ab39b2b995c818471d0ac07032be3 Mon Sep 17 00:00:00 2001
From: Cube <877211593@qq.com>
Date: Wed, 24 May 2023 10:41:59 +0800
Subject: [PATCH 3/4] Update 3.show-result-texts-on-the-video.html

---
 .../3.show-result-texts-on-the-video.html     | 35 +++++++++++--------
 1 file changed, 21 insertions(+), 14 deletions(-)

diff --git a/4.use-case/3.show-result-texts-on-the-video.html b/4.use-case/3.show-result-texts-on-the-video.html
index d5029abc5..c3c7cc738 100644
--- a/4.use-case/3.show-result-texts-on-the-video.html
+++ b/4.use-case/3.show-result-texts-on-the-video.html
@@ -21,15 +21,9 @@
     https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=latest#host-the-library-yourself-recommended
     -->
     <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.20/dist/dbr.js"></script>
-    <style>
-      * {
-        margin: 0;
-        padding: 0;
-      }
-    </style>
   </head>
   <body>
-    <div id="div-ui-container" style="width: 100%; height: 100vh"></div>
+    <div id="div-ui-container" style="width: 100%; height: 90vh"></div>
     <div id="div-text-containers"></div>
     <script>
       if (location.protocol === "file:") {
@@ -95,13 +89,26 @@
               const convertedP2 = scanner.convertToPageCoordinates(p2);
               
               textContainer = document.createElement("div");
-              Object.assign(textContainer.style, {
-                position: "absolute",
-                left: convertedP1.x + "px",
-                right: document.documentElement.clientWidth - convertedP2.x + "px",
-                bottom: document.documentElement.clientHeight  - convertedP1.y + "px",
-                color: "#FE8E14",
-              });
+              const bodyStyle = getComputedStyle(document.body);
+              if (bodyStyle.position === "relative") {
+                const rect = document.body.getBoundingClientRect();
+                const borderWidth = parseInt(bodyStyle.borderWidth);
+                Object.assign(textContainer.style, {
+                  position: "absolute",
+                  left: convertedP1.x - rect.left - borderWidth + "px",
+                  right: rect.right - convertedP2.x - borderWidth + "px",
+                  bottom: rect.bottom - convertedP1.y - borderWidth + "px",
+                  color: "#FE8E14",
+                });
+              } else {
+                Object.assign(textContainer.style, {
+                  position: "absolute",
+                  left: convertedP1.x + "px",
+                  right: document.documentElement.clientWidth - convertedP2.x + "px",
+                  bottom: document.documentElement.clientHeight  - convertedP1.y + "px",
+                  color: "#FE8E14",
+                });
+              }
               textContainer.innerText = result.barcodeText;
               divTextContainers.append(textContainer);
 

From ebca23bec0dcf1b33389bf7d348b2cc6716a2f0f Mon Sep 17 00:00:00 2001
From: Cube <877211593@qq.com>
Date: Wed, 24 May 2023 11:08:34 +0800
Subject: [PATCH 4/4] Update 3.show-result-texts-on-the-video.html

---
 4.use-case/3.show-result-texts-on-the-video.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/4.use-case/3.show-result-texts-on-the-video.html b/4.use-case/3.show-result-texts-on-the-video.html
index c3c7cc738..aef686e07 100644
--- a/4.use-case/3.show-result-texts-on-the-video.html
+++ b/4.use-case/3.show-result-texts-on-the-video.html
@@ -90,7 +90,7 @@
               
               textContainer = document.createElement("div");
               const bodyStyle = getComputedStyle(document.body);
-              if (bodyStyle.position === "relative") {
+              if (bodyStyle.position !== "static") {
                 const rect = document.body.getBoundingClientRect();
                 const borderWidth = parseInt(bodyStyle.borderWidth);
                 Object.assign(textContainer.style, {