update code to adapt to DBR JS 9.0.0

Author: Cube-J

2.ui-tweaking/4.difference-video-size.html

@@ -17,7 +17,7 @@ <h1 style="font-size: 1.5em;">Enlarge the Video Stream</h1>
     </div>
     <div id="UIElement" class="UIElement">
         <div id="div-ui-container" style="width:100%;height:100%;">
-        <div class="dce-video-container" style="position:relative;width:100%;height:100%;"></div>
+            <div class="dce-video-container" style="position:relative;width:100%;height:100%;"></div>
         </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/keillion-dynamsoft-javascript-barcode@0.20220318174621.0/dist/dbr.js"></script>

2.ui-tweaking/5.read-video-with-custom-default-ui.html

@@ -48,6 +48,7 @@ <h1>Customized Default UI</h1>
     <div id="UIElement" class="UIElement">
     </div>
     <script src="https://cdn.jsdelivr.net/npm/keillion-dynamsoft-javascript-barcode@0.20220318174621.0/dist/dbr.js"></script>
+    <!-- <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.7/dist/dbr.js"></script> -->
     <script>
         /** LICENSE ALERT - README
          *
@@ -386,6 +387,11 @@ <h1>Customized Default UI</h1>
         text-align: center;
         font-size: medium;
     }
+
+    .UIElement > div {
+        width: 100%;
+        height: 100%;
+    }
 </style>
 
 </html>

2.ui-tweaking/my.dbr.scanner.html

@@ -1,9 +1,10 @@
-<div id="div-video-container" style="width:100%;height:100%;position:relative;">
+<div id="div-ui-container" style="width:100%;height:100%;position:relative;">
 	<svg id="dce-loading" style="animation:turn 1.5s linear infinite;" viewBox="0 0 1024 1024" p-id="11986" width="200" height="200"><path d="M512.1 64.2c-35.4 0-64 28.7-64 64v128c0 35.4 28.7 64 64 64 35.4 0 64-28.7 64-64v-128c0-35.3-28.6-64-64-64zM320.4 328.3l-110.8-64c-30.6-17.7-69.8-7.2-87.4 23.4-17.7 30.6-7.2 69.8 23.4 87.4l110.8 64c30.6 17.7 69.8 7.2 87.4-23.4 17.7-30.6 7.2-69.8-23.4-87.4zM342.4 609.2c-17.7-30.6-56.8-41.1-87.4-23.4l-110.8 64c-30.6 17.7-41.1 56.8-23.4 87.4 17.7 30.6 56.8 41.1 87.4 23.4l110.8-64c30.6-17.7 41.1-56.8 23.4-87.4zM509.2 707.1c-35.4 0-64 28.7-64 64v128c0 35.4 28.7 64 64 64 35.4 0 64-28.7 64-64v-128c0-35.3-28.6-64-64-64zM875.8 652.2l-110.8-64c-30.6-17.7-69.8-7.2-87.4 23.4-17.7 30.6-7.2 69.8 23.4 87.4l110.8 64c30.6 17.7 69.8 7.2 87.4-23.4 17.7-30.6 7.2-69.7-23.4-87.4zM678.9 418.2c17.7 30.6 56.8 41.1 87.4 23.4l110.8-64c30.6-17.7 41.1-56.8 23.4-87.4-17.7-30.6-56.8-41.1-87.4-23.4l-110.8 64c-30.6 17.6-41.1 56.8-23.4 87.4z" p-id="11987"></path></svg>
-	<video class="dce-video" playsinline="true" muted style="width:100%;height:100%;"></video>
-	<div class="dbrScanner-cvs-scanarea" style="width:100%;height:100%;position:absolute;left:0;top:0;overflow:hidden;"></div>
+	<div class="dce-video-container" style="position:absolute;width:100%;height:100%;"></div>
+	<div class="dce-scanarea" style="width:100%;height:100%;position:absolute;left:0;top:0;overflow:hidden;">
+		<div class="dce-scanlight" style="width:100%;display:none;height:70px;position:absolute;animation:3s infinite dce-scanlight;background-image:linear-gradient(#ffffff00, #ffb668);border-bottom:2px solid #ff8400;user-select:none;"></div>
+	</div>
 	<div id="dce-mask" hidden style="width:100%;height:100%;position:absolute;top:-10px;left:-10px;padding:10px;">
-		<div class="dbrScanner-scanlight" style="width:calc(100% - 20px);display:none;left:10px;height:70px;position:absolute;animation:3s infinite dbrScanner-scanlight;background-image:linear-gradient(#ffffff00, #ffb668);border-bottom:2px solid #ff8400;user-select:none;"></div>
 		<div class="dce-corner" style="position:absolute;width:50px;height:50px;top:0;left:0;border-left:3px solid #fe8e14;border-top:3px solid #fe8e14;"></div>
 		<div class="dce-corner" style="position:absolute;width:50px;height:50px;top:0;right:0;border-right:3px solid #fe8e14;border-top:3px solid #fe8e14;"></div>
 		<div class="dce-corner" style="position:absolute;width:50px;height:50px;left:0;bottom:0;border-left:3px solid #fe8e14;border-bottom:3px solid #fe8e14;"></div>
@@ -19,7 +20,7 @@
       75% { transform: rotate(270deg); }
       100% { transform: rotate(360deg); }
     }
-	@keyframes dbrScanner-scanlight {
+	@keyframes dce-scanlight {
 		from { top: 0px; }
 		to { top: calc(100% - 87px) }
 	}