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 1/2] 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 d5029abc..c3c7cc73 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 2/2] 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 c3c7cc73..aef686e0 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, {
