diff --git a/4.use-case/3.highlight-results-with-custom-style.html b/4.use-case/3.show-result-texts-on-the-video.html
similarity index 76%
rename from 4.use-case/3.highlight-results-with-custom-style.html
rename to 4.use-case/3.show-result-texts-on-the-video.html
index c4c341a1..8d6028a1 100644
--- a/4.use-case/3.highlight-results-with-custom-style.html
+++ b/4.use-case/3.show-result-texts-on-the-video.html
@@ -10,10 +10,10 @@
     <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
@@ -21,9 +21,19 @@
     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;
+      }
+      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/".`;
@@ -46,24 +56,19 @@
        * 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.
@@ -71,9 +76,8 @@
           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 = {
@@ -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);
             }
           };
 
diff --git a/4.use-case/README.md b/4.use-case/README.md
index 35514140..4381501f 100644
--- a/4.use-case/README.md
+++ b/4.use-case/README.md
@@ -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
 
diff --git a/README.md b/README.md
index c419212b..64339b83 100644
--- a/README.md
+++ b/README.md
@@ -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
 
diff --git a/index.html b/index.html
index 0e9a8a79..34babe6e 100644
--- a/index.html
+++ b/index.html
@@ -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>
