Merge pull request #119 from Dynamsoft/Keillion-patch-1

Update 3.show-result-texts-on-the-video.html

Author: Cube

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.
+               */
             }
           };