dynamsoft-barcode-reader-bundle 11.2.4000 → 11.4.2000-beta-202604162228

package/dist/ui/dce.ui.v5.xml

@@ -0,0 +1,470 @@
+
+<div style="position:relative;width:100%;height:100%;min-width:100px;min-height:100px;background:#000;font-family:Arial,Helvetica,sans-serif;pointer-events:none;user-select:none;">
+  <div class="dm-camera-core-container" style="width:100%;height:100%;pointer-events:initial;"></div>
+  <div class="dm-camera-mn-torch" title="torch" style="display:none;">
+    <div class="dm-camera-mn-torch-auto">
+      <svg viewBox="0 0 512 512" fill="#fff">
+        <path d="M220,45 74.5,255 212.5,277.5 184,429 329.5,219 191.5,196.5Z"/>
+        <text x="250" y="480" font-size="256" font-family="Verdana">A</text>
+      </svg>
+    </div>
+    <div class="dm-camera-mn-torch-on">
+      <svg viewBox="0 0 512 512" fill="#fff">
+        <path d="M280,0 86,280 270,310 232,512 426,232 242,202Z"/>
+      </svg>
+    </div>
+    <div class="dm-camera-mn-torch-off">
+      <svg viewBox="0 0 512 512" fill="#fff">
+        <defs>
+          <mask id="dm-camera-mn-torch-off-mask">
+            <rect width="512" height="512" fill="#fff"/>
+            <path d="M116,70 406,392 396,442 106,120Z" fill="#000"/>
+          </mask>
+        </defs>
+        <path d="M280,0 86,280 270,310 232,512 426,232 242,202Z" mask="url(#dm-camera-mn-torch-off-mask)"/>
+        <path d="M118,85 408,407 394,427 104,105Z"/>
+      </svg>
+    </div>
+  </div>
+  <div class="dm-camera-mn-beep" title="beep" style="display:none;">
+    <div class="dm-camera-mn-beep-on">
+      <svg viewBox="0 0 512 512" stroke="#fff" fill="#fff">
+        <path d="M140,148 50,148 50,364 140,364 226,482 226,30Z" />
+        <path d="M260,168A128,128,0,0,1,260,344" stroke-width="16" fill="transparent"/>
+        <path d="M310,118A192,192,0,0,1,310,394" stroke-width="16" fill="transparent"/>
+        <path d="M360,68A256,256,0,0,1,360,444" stroke-width="16" fill="transparent"/>
+      </svg>
+    </div>
+    <div class="dm-camera-mn-beep-off">
+      <svg viewBox="0 0 512 512" stroke="#fff" fill="#fff">
+        <path d="M140,148 50,148 50,364 140,364 226,482 226,30Z" />
+        <path d="M260,168 436,344" stroke-width="16"/>
+        <path d="M436,168 260,344" stroke-width="16"/>
+      </svg>
+    </div>
+  </div>
+  <div class="dm-camera-mn-vibrate" title="vibrate" style="display:none;">
+    <div class="dm-camera-mn-vibrate-on">
+      <svg viewBox="0 0 512 512" stroke="#fff" fill="#fff">
+        <path d="M60,180 180,60 452,332 332,452Z" stroke-width="16" stroke-linejoin="round" fill="transparent"/>
+        <path d="M67,247 70,310 133,313 136,376 199,379 202,442 265,445" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" fill="transparent"/>
+        <path d="M27,287 30,350 93,353 96,416 159,419 162,482 225,485" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" fill="transparent"/>
+        <path d="M247,67 310,70 313,133 376,136 379,199 442,202 445,265" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" fill="transparent"/>
+        <path d="M287,27 350,30 353,93 416,96 419,159 482,162 485,225" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" fill="transparent"/>
+      </svg>
+    </div>
+    <div class="dm-camera-mn-vibrate-off">
+      <svg viewBox="0 0 512 512" stroke="#fff" fill="#fff">
+        <path d="M60,180 180,60 452,332 332,452Z" stroke-width="16" stroke-linejoin="round" fill="transparent"/>
+        <path d="M67,247 70,310 133,313 136,376 199,379 202,442 265,445" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" fill="transparent"/>
+        <path d="M27,287 30,350 93,353 96,416 159,419 162,482 225,485" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" fill="transparent"/>
+        <path d="M300,122 480,122" stroke-width="16" stroke-linecap="round"/>
+        <path d="M390,32 390,212" stroke-width="16" stroke-linecap="round"/>
+      </svg>
+    </div>
+  </div>
+  <div class="dm-camera-mn-resolution-box" title="camera settings" style="display:none;">720P</div>
+  <div class="dm-camera-mn-zoom" style="display:none;">- <span>1.0X</span> -</div>
+  <div class="dm-camera-mn-toast" style="display:none;"></div>
+  <div class="dm-camera-mn-camera-close" style="display:none;" title="close">
+    <svg viewBox="0 0 512 512" fill="#fff">
+      <defs>
+        <mask id="dm-camera-mn-camera-close-mask">
+          <rect width="512" height="512" fill="#fff"/>
+          <path d="M128,128 384,384" stroke-width="60" stroke="#000"/>
+          <path d="M384,128 128,384" stroke-width="60" stroke="#000"/>
+        </mask>
+      </defs>
+      <circle cx="256" cy="256" r="256" mask="url(#dm-camera-mn-camera-close-mask)"/>
+    </svg>
+  </div>
+  <div class="dm-camera-mn-take-photo" style="display:none;" title="take photo"></div>
+  <div class="dm-camera-mn-camera-switch" title="switch camera" style="display:none;">
+    <svg viewBox="0 0 512 512" stroke="#fff" fill="#fff">
+      <defs>
+        <mask id="dm-camera-mn-camera-switch-mask">
+          <rect width="512" height="512" fill="#fff"/>
+          <path d="M512,148 256,148" stroke-width="80" stroke="#000"/>
+          <path d="M0,364 256,364" stroke-width="80" stroke="#000"/>
+        </mask>
+      </defs>
+      <circle cx="256" cy="256" r="235" stroke-width="40" fill="transparent" mask="url(#dm-camera-mn-camera-switch-mask)"/>
+      <path d="M450,108 300,108 400,70Z" stroke-width="0"/>
+      <path d="M62,404 212,404 112,442Z" stroke-width="0"/>
+    </svg>
+  </div>
+  <svg class="dm-camera-mn-msg-poweredby" viewBox="0 0 94 17">
+    <path d="M0.9,14V4.3h2.3c0.6,0,1,0.1,1.4,0.3c0.3,0.2,0.6,0.5,0.7,0.9s0.2,0.8,0.2,1.4c0,0.5-0.1,0.9-0.2,1.3
+C5.1,8.5,4.9,8.8,4.5,9.1C4.2,9.3,3.7,9.4,3.2,9.4H1.8V14H0.9z M1.8,8.7h1.2c0.4,0,0.7-0.1,1-0.2S4.3,8.2,4.4,8
+c0.1-0.3,0.2-0.6,0.2-1.1c0-0.5,0-0.9-0.1-1.2C4.3,5.4,4.2,5.2,3.9,5.1S3.4,5,2.9,5H1.8V8.7z" />
+    <path d="M8.1,14.1c-0.5,0-0.8-0.1-1.1-0.3s-0.5-0.5-0.6-0.9s-0.2-0.9-0.2-1.4V9.6c0-0.6,0.1-1,0.2-1.4
+C6.5,7.8,6.7,7.5,7,7.3S7.6,7,8.1,7C8.6,7,9,7.1,9.2,7.3s0.5,0.5,0.6,0.9C9.9,8.5,9.9,9,9.9,9.6v1.9c0,0.6-0.1,1-0.2,1.4
+c-0.1,0.4-0.3,0.7-0.6,0.9S8.6,14.1,8.1,14.1z M8.1,13.4c0.3,0,0.5-0.1,0.7-0.2C8.9,13,9,12.8,9,12.5c0-0.3,0-0.6,0-1v-2
+c0-0.4,0-0.7,0-1C9,8.2,8.9,8,8.8,7.9C8.6,7.7,8.4,7.6,8.1,7.6c-0.3,0-0.5,0.1-0.7,0.2C7.3,8,7.2,8.2,7.2,8.5c0,0.3-0.1,0.6-0.1,1
+v2c0,0.4,0,0.7,0.1,1c0,0.3,0.1,0.5,0.3,0.7C7.6,13.4,7.8,13.4,8.1,13.4z" />
+    <path d="M12,14l-1.1-6.9h0.7l0.9,5.8l1.1-5.8h0.8l1.1,5.8l0.8-5.8H17L15.9,14H15l-1.1-5.6L12.8,14H12z" />
+    <path d="M19.8,14.1c-0.4,0-0.8-0.1-1.1-0.3s-0.5-0.5-0.6-0.9c-0.1-0.4-0.2-0.9-0.2-1.6V9.6c0-0.7,0.1-1.2,0.2-1.6
+c0.1-0.4,0.3-0.7,0.6-0.8C19,7,19.3,7,19.8,7c0.5,0,0.9,0.1,1.1,0.3c0.3,0.2,0.4,0.5,0.5,0.9c0.1,0.4,0.1,1,0.1,1.6v0.6h-2.8v1.2
+c0,0.4,0,0.8,0.1,1.1c0.1,0.3,0.2,0.4,0.3,0.6s0.3,0.2,0.6,0.2c0.2,0,0.3,0,0.5-0.1c0.1-0.1,0.3-0.2,0.3-0.4s0.1-0.5,0.1-0.8v-0.5
+h0.9V12c0,0.6-0.1,1.1-0.4,1.5S20.4,14.1,19.8,14.1z M18.8,9.9h1.9V9.4c0-0.4,0-0.7-0.1-0.9c0-0.3-0.1-0.5-0.3-0.6S20,7.6,19.8,7.6
+c-0.2,0-0.4,0.1-0.6,0.2c-0.1,0.1-0.3,0.3-0.3,0.6c-0.1,0.3-0.1,0.7-0.1,1.1V9.9z" />
+    <path d="M22.8,14V7.1h0.9V8c0.2-0.4,0.5-0.6,0.8-0.8C24.8,7.1,25,7,25.3,7c0,0,0,0,0.1,0s0.1,0,0.1,0v0.9
+c-0.1,0-0.1,0-0.2-0.1c-0.1,0-0.2,0-0.2,0c-0.3,0-0.5,0.1-0.7,0.2c-0.2,0.1-0.4,0.3-0.6,0.6V14H22.8z" />
+    <path d="M28,14.1c-0.4,0-0.8-0.1-1.1-0.3s-0.5-0.5-0.6-0.9c-0.1-0.4-0.2-0.9-0.2-1.6V9.6c0-0.7,0.1-1.2,0.2-1.6
+c0.1-0.4,0.3-0.7,0.6-0.8C27.3,7,27.6,7,28,7c0.5,0,0.9,0.1,1.1,0.3c0.3,0.2,0.4,0.5,0.5,0.9c0.1,0.4,0.1,1,0.1,1.6v0.6H27v1.2
+c0,0.4,0,0.8,0.1,1.1c0.1,0.3,0.2,0.4,0.3,0.6s0.3,0.2,0.6,0.2c0.2,0,0.3,0,0.5-0.1c0.1-0.1,0.3-0.2,0.3-0.4s0.1-0.5,0.1-0.8v-0.5
+h0.9V12c0,0.6-0.1,1.1-0.4,1.5S28.7,14.1,28,14.1z M27,9.9H29V9.4c0-0.4,0-0.7-0.1-0.9c0-0.3-0.1-0.5-0.3-0.6S28.3,7.6,28,7.6
+c-0.2,0-0.4,0.1-0.6,0.2c-0.1,0.1-0.3,0.3-0.3,0.6C27.1,8.6,27,9,27,9.5V9.9z" />
+    <path d="M32.6,14.1c-0.6,0-1-0.2-1.3-0.7c-0.3-0.4-0.4-1.2-0.4-2.2V9.9c0-0.6,0-1.1,0.1-1.6c0.1-0.4,0.2-0.8,0.5-1
+c0.2-0.2,0.6-0.4,1-0.4C32.8,7,33,7,33.2,7.1c0.2,0.1,0.4,0.3,0.5,0.4V4.3h0.9V14h-0.9v-0.5c-0.1,0.2-0.3,0.3-0.5,0.4
+C33,14,32.8,14.1,32.6,14.1z M32.7,13.4c0.2,0,0.4,0,0.5-0.1c0.2-0.1,0.3-0.2,0.5-0.3V8.1c-0.1-0.1-0.3-0.2-0.4-0.3
+c-0.2-0.1-0.4-0.2-0.6-0.2c-0.4,0-0.6,0.2-0.8,0.5S31.8,9,31.8,9.6v1.6c0,0.5,0,0.9,0.1,1.2c0.1,0.3,0.1,0.6,0.3,0.7
+C32.3,13.3,32.5,13.4,32.7,13.4z" />
+    <path d="M40.5,14.1c-0.3,0-0.5-0.1-0.7-0.2c-0.2-0.1-0.4-0.3-0.5-0.4V14h-0.9V4.3h0.9v3.4c0.1-0.2,0.3-0.3,0.5-0.5
+C40.1,7,40.3,7,40.6,7C41,7,41.2,7,41.4,7.2c0.2,0.2,0.4,0.4,0.5,0.6c0.1,0.3,0.2,0.6,0.2,0.9s0.1,0.7,0.1,1v1.5
+c0,0.6,0,1.1-0.1,1.5c-0.1,0.4-0.3,0.8-0.5,1C41.3,14,41,14.1,40.5,14.1z M40.4,13.4c0.3,0,0.5-0.1,0.6-0.3
+c0.1-0.2,0.2-0.4,0.3-0.8s0.1-0.7,0.1-1.2V9.7c0-0.5,0-0.8-0.1-1.1S41.1,8,41,7.9c-0.1-0.2-0.3-0.2-0.6-0.2c-0.2,0-0.4,0.1-0.6,0.2
+c-0.2,0.1-0.3,0.2-0.5,0.4v4.7c0.1,0.1,0.3,0.3,0.5,0.4C40,13.4,40.2,13.4,40.4,13.4z" />
+    <path d="M43.2,15.7V15c0.4,0,0.7,0,0.9-0.1c0.2-0.1,0.3-0.1,0.4-0.3c0.1-0.1,0.1-0.2,0.1-0.4c0-0.1,0-0.3-0.1-0.5
+c0-0.2-0.1-0.4-0.2-0.6L43,7.1h0.9l1.2,5.9l1.2-5.9h0.9l-1.7,7.4c-0.1,0.3-0.2,0.5-0.3,0.7c-0.2,0.2-0.4,0.3-0.6,0.4
+c-0.3,0.1-0.6,0.1-1,0.1H43.2z" />
+    <path d="M50.6,14V4.3h2.1c0.7,0,1.2,0.1,1.6,0.4c0.4,0.2,0.6,0.6,0.8,1c0.2,0.4,0.2,0.9,0.2,1.5V11
+c0,0.6-0.1,1.1-0.2,1.6s-0.4,0.8-0.8,1S53.5,14,52.8,14H50.6z M51.5,13.3h1.2c0.5,0,0.9-0.1,1.1-0.3s0.4-0.5,0.5-0.9
+s0.1-0.8,0.1-1.3V7.2c0-0.5,0-0.9-0.1-1.2s-0.2-0.6-0.5-0.8S53.2,5,52.7,5h-1.2V13.3z" />
+    <path d="M56.5,15.7V15c0.4,0,0.7,0,0.9-0.1c0.2-0.1,0.3-0.1,0.4-0.3c0.1-0.1,0.1-0.2,0.1-0.4c0-0.1,0-0.3-0.1-0.5
+c0-0.2-0.1-0.4-0.2-0.6l-1.4-6.1h0.9l1.2,5.9l1.2-5.9h0.9l-1.7,7.4c-0.1,0.3-0.2,0.5-0.3,0.7s-0.4,0.3-0.6,0.4s-0.6,0.1-1,0.1H56.5
+z" />
+    <path d="M61.3,14V7.1h0.9v0.7c0.2-0.2,0.5-0.4,0.8-0.6C63.2,7,63.5,7,63.8,7C64,7,64.2,7,64.4,7.1s0.3,0.3,0.4,0.5
+c0.1,0.2,0.1,0.5,0.1,0.8V14H64V8.6c0-0.4-0.1-0.6-0.2-0.8c-0.1-0.1-0.3-0.2-0.5-0.2c-0.2,0-0.4,0.1-0.6,0.2s-0.4,0.3-0.6,0.5V14
+H61.3z" />
+    <path d="M67.4,14.1c-0.3,0-0.5-0.1-0.7-0.2c-0.2-0.1-0.4-0.3-0.5-0.6C66,13.1,66,12.8,66,12.6c0-0.4,0.1-0.7,0.2-0.9
+s0.3-0.5,0.5-0.7c0.2-0.2,0.5-0.4,0.9-0.6c0.4-0.2,0.8-0.4,1.3-0.6V9.3c0-0.4,0-0.8-0.1-1c-0.1-0.2-0.1-0.4-0.3-0.5
+c-0.1-0.1-0.3-0.2-0.5-0.2c-0.2,0-0.3,0-0.5,0.1c-0.1,0.1-0.3,0.2-0.3,0.4c-0.1,0.2-0.1,0.4-0.1,0.7V9l-0.9,0
+c0-0.7,0.2-1.2,0.5-1.6C66.8,7.1,67.3,7,68,7c0.6,0,1.1,0.2,1.3,0.6c0.3,0.4,0.4,1,0.4,1.7v3.4c0,0.1,0,0.3,0,0.5
+c0,0.2,0,0.4,0,0.5c0,0.2,0,0.3,0,0.4h-0.8c0-0.2-0.1-0.3-0.1-0.5c0-0.2,0-0.3-0.1-0.5c-0.1,0.3-0.3,0.5-0.5,0.7
+S67.7,14.1,67.4,14.1z M67.6,13.4c0.2,0,0.3,0,0.5-0.1c0.1-0.1,0.3-0.2,0.4-0.3s0.2-0.3,0.3-0.4v-2.2c-0.3,0.2-0.6,0.3-0.9,0.5
+c-0.2,0.1-0.4,0.3-0.6,0.4c-0.2,0.1-0.3,0.3-0.3,0.5s-0.1,0.4-0.1,0.6c0,0.4,0.1,0.6,0.2,0.8C67.2,13.3,67.4,13.4,67.6,13.4z" />
+    <path d="M70.9,14V7.1h0.8v0.7c0.2-0.3,0.5-0.5,0.8-0.6c0.3-0.1,0.6-0.2,0.9-0.2c0.2,0,0.5,0.1,0.7,0.2s0.3,0.4,0.4,0.7
+c0.2-0.3,0.5-0.5,0.8-0.7c0.3-0.2,0.6-0.2,0.9-0.2c0.2,0,0.4,0,0.6,0.1s0.3,0.3,0.4,0.5c0.1,0.2,0.2,0.5,0.2,0.9V14h-0.8V8.6
+c0-0.4-0.1-0.7-0.2-0.8s-0.3-0.2-0.5-0.2c-0.2,0-0.4,0.1-0.7,0.2S74.7,8,74.5,8.3c0,0,0,0.1,0,0.1s0,0.1,0,0.1V14h-0.8V8.6
+c0-0.4-0.1-0.7-0.2-0.8c-0.1-0.1-0.3-0.2-0.5-0.2c-0.2,0-0.4,0.1-0.7,0.2c-0.2,0.1-0.4,0.3-0.6,0.5V14H70.9z" />
+    <path d="M80.2,14.1c-0.6,0-1-0.2-1.3-0.5c-0.3-0.4-0.5-0.8-0.6-1.4l0.7-0.2c0,0.5,0.2,0.9,0.4,1.2
+c0.2,0.2,0.5,0.4,0.8,0.4c0.3,0,0.5-0.1,0.7-0.3c0.2-0.2,0.2-0.4,0.2-0.7c0-0.2-0.1-0.5-0.2-0.7c-0.1-0.2-0.4-0.5-0.6-0.7l-0.9-0.8
+c-0.3-0.3-0.5-0.5-0.7-0.8c-0.2-0.3-0.2-0.6-0.2-0.9c0-0.3,0.1-0.6,0.2-0.8c0.1-0.2,0.3-0.4,0.6-0.5C79.5,7,79.8,7,80.2,7
+c0.5,0,0.9,0.2,1.2,0.5c0.3,0.3,0.4,0.8,0.4,1.3L81.2,9c0-0.3-0.1-0.6-0.1-0.8s-0.2-0.4-0.3-0.5c-0.1-0.1-0.3-0.1-0.5-0.1
+c-0.3,0-0.5,0.1-0.6,0.2c-0.2,0.1-0.2,0.4-0.2,0.6c0,0.2,0,0.4,0.1,0.6c0.1,0.2,0.2,0.3,0.4,0.5l1,0.9c0.2,0.2,0.4,0.3,0.6,0.5
+c0.2,0.2,0.3,0.4,0.4,0.6c0.1,0.2,0.2,0.5,0.2,0.8c0,0.4-0.1,0.7-0.2,0.9c-0.1,0.2-0.4,0.4-0.6,0.6C80.9,14,80.6,14.1,80.2,14.1z" />
+    <path d="M84.7,14.1c-0.5,0-0.8-0.1-1.1-0.3c-0.3-0.2-0.5-0.5-0.6-0.9s-0.2-0.9-0.2-1.4V9.6c0-0.6,0.1-1,0.2-1.4
+c0.1-0.4,0.3-0.7,0.6-0.9C83.9,7.1,84.3,7,84.7,7c0.5,0,0.9,0.1,1.1,0.3s0.5,0.5,0.6,0.9c0.1,0.4,0.2,0.9,0.2,1.4v1.9
+c0,0.6-0.1,1-0.2,1.4s-0.3,0.7-0.6,0.9S85.2,14.1,84.7,14.1z M84.7,13.4c0.3,0,0.5-0.1,0.7-0.2c0.1-0.2,0.2-0.4,0.3-0.7
+c0-0.3,0-0.6,0-1v-2c0-0.4,0-0.7,0-1c0-0.3-0.1-0.5-0.3-0.7c-0.1-0.2-0.4-0.2-0.7-0.2c-0.3,0-0.5,0.1-0.7,0.2
+c-0.1,0.2-0.2,0.4-0.3,0.7c0,0.3-0.1,0.6-0.1,1v2c0,0.4,0,0.7,0.1,1c0,0.3,0.1,0.5,0.3,0.7C84.2,13.4,84.4,13.4,84.7,13.4z" />
+    <path d="M88.2,14V7.7h-0.9V7.1h0.9V6.3c0-0.3,0-0.6,0.1-0.9c0.1-0.3,0.2-0.5,0.4-0.6c0.2-0.2,0.5-0.2,0.8-0.2
+c0.1,0,0.2,0,0.4,0c0.1,0,0.2,0,0.3,0.1v0.6c-0.1,0-0.2,0-0.2,0c-0.1,0-0.2,0-0.2,0c-0.3,0-0.4,0.1-0.5,0.2s-0.1,0.4-0.1,0.8v0.8
+h1.1v0.6h-1.1V14H88.2z" />
+    <path d="M92.7,14.1c-0.3,0-0.6-0.1-0.8-0.2s-0.3-0.3-0.4-0.5c-0.1-0.2-0.1-0.5-0.1-0.8V7.6h-0.9V7.1h0.9V4.9h0.9v2.1
+h1.2v0.6h-1.2v4.8c0,0.3,0,0.6,0.1,0.7c0.1,0.1,0.2,0.2,0.5,0.2c0.1,0,0.2,0,0.2,0s0.2,0,0.3,0V14c-0.1,0-0.2,0-0.4,0.1
+C92.9,14.1,92.8,14.1,92.7,14.1z" />
+  </svg>
+  <div class="dm-camera-mn-camera-and-resolution-settings" style="display:none;">
+    <div class="dm-camera-mn-cameras">
+      <div class="dm-camera-mn-camera-option" data-device-id="">example camera</div>
+    </div>
+    <div class="dm-camera-mn-camera-and-resolution-bar"></div>
+    <div class="dm-camera-mn-resolutions">
+      <div class="dm-camera-mn-resolution-option" data-width="640" data-height="480">480P</div>
+      <div class="dm-camera-mn-resolution-option" data-width="1080" data-height="720">720P</div>
+      <div class="dm-camera-mn-resolution-option" data-width="1920" data-height="1080">1080P</div>
+      <div class="dm-camera-mn-resolution-option" data-width="2560" data-height="1440">2K</div>
+      <div class="dm-camera-mn-resolution-option" data-width="3840" data-height="2160">4K</div>
+    </div>
+  </div>
+  <svg class="dce-bg-loading"
+    style="display:none;position:absolute;left:0;top:0;right:0;bottom:0;margin:auto;width:40%;height:40%;fill:#aaa;animation:1s linear infinite dce-rotate;"
+    viewBox="0 0 1792 1792">
+    <path d="M1760 896q0 176-68.5 336t-184 275.5-275.5 184-336 68.5-336-68.5-275.5-184-184-275.5-68.5-336q0-213 97-398.5t265-305.5 374-151v228q-221 45-366.5 221t-145.5 406q0 130 51 248.5t136.5 204 204 136.5 248.5 51 248.5-51 204-136.5 136.5-204 51-248.5q0-230-145.5-406t-366.5-221v-228q206 31 374 151t265 305.5 97 398.5z" />
+  </svg>
+  <div class="dce-bg-camera" title="Take a photo" style="display:none;position:absolute;left:0;top:0;width:100%;height:100%;cursor:pointer;pointer-events:auto;">
+    <svg style="position:absolute;left:0;top:0;right:0;bottom:0;margin:auto;width:40%;height:40%;fill:#aaa;"
+      viewBox="0 0 2048 1792">
+      <path d="M1024 672q119 0 203.5 84.5t84.5 203.5-84.5 203.5-203.5 84.5-203.5-84.5-84.5-203.5 84.5-203.5 203.5-84.5zm704-416q106 0 181 75t75 181v896q0 106-75 181t-181 75h-1408q-106 0-181-75t-75-181v-896q0-106 75-181t181-75h224l51-136q19-49 69.5-84.5t103.5-35.5h512q53 0 103.5 35.5t69.5 84.5l51 136h224zm-704 1152q185 0 316.5-131.5t131.5-316.5-131.5-316.5-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5z" />
+    </svg>
+  </div>
+</div>
+<style>
+  @keyframes dce-rotate {
+    from { transform: rotate(0turn); }
+    to { transform: rotate(1turn); }
+  }
+  @keyframes dm-camera-scanlight {
+    from { top: 0; }
+    to { top: 97%; }
+  }
+
+  .dm-camera-mn-torch-auto,.dm-camera-mn-torch-on,.dm-camera-mn-torch-off
+  {position:absolute;width:max(3vmin,24px);height:max(3vmin,24px);left:12px;top:12px;padding:max(0.5vmin,4px);box-sizing:border-box;border-radius:max(1.5vmin,12px);background:rgba(100,100,100,0.5);cursor:pointer;pointer-events:initial;}
+
+  .dm-camera-mn-beep-on,.dm-camera-mn-beep-off
+  {position:absolute;width:max(3vmin,24px);height:max(3vmin,24px);left:calc(48px + max(3vmin,24px));padding:max(0.5vmin,4px);box-sizing:border-box;top:12px;border-radius:max(1.5vmin,12px);background:rgba(100,100,100,0.5);cursor:pointer;pointer-events:initial;}
+
+  .dm-camera-mn-vibrate-on,.dm-camera-mn-vibrate-off
+  {position:absolute;width:max(3vmin,24px);height:max(3vmin,24px);left:calc(84px + max(6vmin,48px));padding:max(0.25vmin,2px);box-sizing:border-box;top:12px;border-radius:max(1.5vmin,12px);background:rgba(100,100,100,0.5);cursor:pointer;pointer-events:initial;}
+
+  .dm-camera-mn-resolution-box{position:absolute;width:max(5vmin,40px);right:12px;top:12px;font-size:max(1.25vmin,10px);line-height:max(2vmin,16px);padding:max(0.5vmin,4px);box-sizing:border-box;text-align:center;color:#fff;border-radius:max(0.75vmin,6px);background:rgba(100,100,100,0.5);display:block;cursor:pointer;pointer-events:initial;user-select:none;}
+  
+  .dm-camera-mn-zoom{position:absolute;font-size:max(1vmin,8px);line-height:max(3vmin,24px);left:50%;bottom:max(12.5vmin,100px);transform:translateX(-50%);color:#fff;}
+  .dm-camera-mn-zoom span{width:max(3vmin,24px);border-radius:max(1.5vmin,12px);text-align:center;background:rgba(100,100,100,0.5);display:inline-block;}
+  .dm-camera-mn-toast{position:absolute;max-width:90%;font-size:max(1.25vmin,10px);line-height:max(2vmin,16px);padding:max(0.25vmin,2px) max(0.5vmin,4px);left:50%;bottom:max(12.5vmin,100px);transform:translateX(-50%);color:#fff;border-radius:max(0.5vmin,4px);background:rgba(100,100,100,0.5);white-space:pre-wrap;overflow-wrap:break-word;}
+
+  .dm-camera-mn-camera-close{position:absolute;width:max(4vmin,32px);height:max(4vmin,32px);left:16px;bottom:32px;padding:max(0.5vmin,4px);border-radius:max(2.5vmin,20px);background:rgba(100,100,100,0.5);cursor:pointer;pointer-events:initial;}
+  .dm-camera-mn-take-photo{position:absolute;width:max(7vmin,56px);height:max(7vmin,56px);border:max(0.5vmin,4px) solid #fff;left:50%;border-radius:max(3.5vmin,28px);box-sizing:border-box;bottom:max(4vmin,32px);transform:translateX(-50%);cursor:pointer;pointer-events:initial;}
+  .dm-camera-mn-camera-switch{position:absolute;width:max(4vmin,32px);height:max(4vmin,32px);right:16px;bottom:32px;padding:max(0.5vmin,4px);border-radius:max(2.5vmin,20px);background:rgba(100,100,100,0.5);cursor:pointer;pointer-events:initial;}
+
+  .dm-camera-mn-msg-poweredby{position:absolute;height:max(2.125vmin,17px);left:50%;bottom:4px;transform:translateX(-50%);fill:#fff;}
+
+  .dm-camera-mn-camera-and-resolution-settings{position:absolute;top:calc(24px + max(3vmin,24px));right:0;max-height:calc(100% - 24px - max(3vmin,24px));background:rgba(100,100,100,0.5);display:flex;pointer-events:initial;}
+  .dm-camera-mn-cameras{overflow-y:auto;display:block;}
+  .dm-camera-mn-camera-option{font-size:max(1.25vmin,10px);line-height:max(2vmin,16px);padding:max(0.5vmin,4px);margin:12px;box-sizing:border-box;position:relative;text-align:center;color:#fff;border-radius:max(0.75vmin,6px);background:rgba(100,100,100,0.5);display:block;cursor:pointer;}
+  .dm-camera-mn-camera-and-resolution-bar{width:1px;align-self:stretch;background:rgba(100,100,100,0.5);}
+  .dm-camera-mn-resolutions{overflow-y:auto;display:block;}
+  .dm-camera-mn-resolution-option{width:max(5vmin,40px);font-size:max(1.25vmin,10px);line-height:max(2vmin,16px);padding:max(0.5vmin,4px);margin:12px;box-sizing:border-box;position:relative;text-align:center;color:#fff;border-radius:max(0.75vmin,6px);background:rgba(100,100,100,0.5);display:block;cursor:pointer;}
+  .dm-camera-mn-camera-option[selected],.dm-camera-mn-resolution-option[selected]{box-shadow:inset 0 0 0 max(0.25vmin, 2px) rgb(254,142,20);}
+
+  .dm-camera-mn-torch-auto::before,.dm-camera-mn-torch-on::before,.dm-camera-mn-torch-off::before,
+  .dm-camera-mn-beep-on::before,.dm-camera-mn-beep-off::before,
+  .dm-camera-mn-vibrate-on::before,.dm-camera-mn-vibrate-off::before,
+  .dm-camera-mn-resolution-box::before,
+  .dm-camera-mn-camera-close::before,.dm-camera-mn-take-photo::before,.dm-camera-mn-camera-switch::before
+  {content:"";position:absolute;inset:-12px;width:calc(100% + 24px);height:calc(100% + 24px);}
+  .dm-camera-mn-camera-option::before,.dm-camera-mn-resolution-option::before
+  {content:"";position:absolute;inset:-12px;width:calc(100% + 24px);height:calc(100% + 24px);}
+
+  /*show toast in edit mode*/
+  .dm-camera-mn-toast{z-index:1;}
+</style>
+<script>
+  (()=>{ // wrapper to avoid conflicts when apply many times
+    const camera = document.currentScript.currentDMCamera;
+    const scanlight = document.createElement('div');
+    Object.assign(scanlight.style, {
+      position: 'absolute',
+      width: '100%',
+      height: '3%',
+      borderRadius: '50%',
+      boxShadow: '0px 0px 2vw 1px #00e5ff',
+      background: '#fff',
+      animation: '3s infinite dm-camera-scanlight',
+      pointerEvents: 'none',
+      userSelect: 'none',
+      display: 'none',
+    });
+    camera.setRegionBox({innerUi: scanlight});
+
+    const ui = camera.ui;
+
+    
+    const elTorch = ui.querySelector('.dm-camera-mn-torch');
+    const elTorchAuto = ui.querySelector('.dm-camera-mn-torch-auto');
+    const elTorchOn = ui.querySelector('.dm-camera-mn-torch-on');
+    const elTorchOff = ui.querySelector('.dm-camera-mn-torch-off');
+    if(elTorchAuto){ elTorchAuto.style.display = undefined == camera.isTorchOn ? '' : 'none'; }
+    if(elTorchOn){ elTorchOn.style.display = true == camera.isTorchOn ? '' : 'none'; }
+    if(elTorchOff){ elTorchOff.style.display = false == camera.isTorchOn ? '' : 'none'; }
+
+    // You need to bind the events yourself to determine when `beep()` and `vibrate()` are triggered;
+    // the SDK includes built-in, callable versions of both functions.
+    const elBeepOn = ui.querySelector('.dm-camera-mn-beep-on');
+    const elBeepOff = ui.querySelector('.dm-camera-mn-beep-off')
+    const elVibrateOn = ui.querySelector('.dm-camera-mn-vibrate-on');
+    const elVibrateOff = ui.querySelector('.dm-camera-mn-vibrate-off');
+
+    const elResolutionBox = ui.querySelector('.dm-camera-mn-resolution-box');
+    const elZoom = ui.querySelector('.dm-camera-mn-zoom');
+    const elZoomSpan = elZoom?.querySelector('span');
+    const elToast = ui.querySelector('.dm-camera-mn-toast');
+    const elCameraClose = ui.querySelector('.dm-camera-mn-camera-close');
+    const elTakePhoto = ui.querySelector('.dm-camera-mn-take-photo');
+    const elCameraSwitch = ui.querySelector('.dm-camera-mn-camera-switch');
+    const elCameraAndResolutionSettings = ui.querySelector('.dm-camera-mn-camera-and-resolution-settings');
+    const divCameras = elCameraAndResolutionSettings?.querySelector('.dm-camera-mn-cameras');
+    const arrElResolutionOption = elCameraAndResolutionSettings?.querySelectorAll('.dm-camera-mn-resolution-option');
+
+    camera.addEventListener('opened',async()=>{
+      if('customized-video' != camera.requestedCamera){
+
+        // mirror front camera
+        camera.isMirrored = camera.currentCamera?.isFront;
+
+        if(elTorch){ elTorch.style.display = ''; }
+
+        // show current resolution
+        if(elResolutionBox || arrElResolutionOption?.length){
+          let resolutionFriendlyName;
+          // Notice: rule should match names in the resolution options
+          {
+            let rsl = camera.currentResolution;
+            let maxDimension = Math.max(rsl.width, rsl.height);
+            let minDimension = Math.min(rsl.width, rsl.height);
+            if(minDimension <= 1080){
+              resolutionFriendlyName = minDimension + 'P';
+            }else if(maxDimension < 3000){
+              resolutionFriendlyName = '2K'
+            }else{ // maxDimension >= 3000
+              resolutionFriendlyName = Math.round(maxDimension / 1000) + 'K';
+            }
+          }
+
+          if(elResolutionBox){
+            elResolutionBox.textContent = resolutionFriendlyName;
+            elResolutionBox.style.display = '';
+          }
+
+          if(arrElResolutionOption?.length){
+            for(let option of arrElResolutionOption){
+              if(option.textContent === resolutionFriendlyName){
+                option.setAttribute('selected', '');
+              }else if(option.hasAttribute('selected')){
+                option.removeAttribute('selected');
+              }
+            }
+          }
+        }
+
+        // show current camera
+        if(divCameras){
+          const infos = await camera.constructor.getDeviceInfos();
+          const curCam = camera.currentCamera;
+          if(!curCam){ return; } // rarely, after await, camera may already change
+          const curCamLabel = curCam.trackLabel || curCam.label;
+          divCameras.textContent = '';
+          for (let info of infos) {
+            const opt = document.createElement("div");
+            opt.classList.add('dm-camera-mn-camera-option');
+            opt.setAttribute('data-device-id', info.deviceId);
+            opt.textContent = info.trackLabel || info.label;
+            if(opt.textContent === curCamLabel){
+              opt.setAttribute('selected', '');
+            }
+            divCameras.append(opt);
+          }
+        }
+
+        // show switch camera button
+        if(await camera.constructor.hasFrontCamera()){
+          if(elCameraSwitch){ elCameraSwitch.style.display = ''; }
+        }
+      }
+    });
+
+    camera.addEventListener('closed',()=>{
+      if(elTorch){ elTorch.style.display = 'none'; }
+      if(elResolutionBox){  elResolutionBox.style.display = 'none'; }
+      if(elCameraSwitch){ elCameraSwitch.style.display = 'none'; }
+      if(elCameraAndResolutionSettings){ elCameraAndResolutionSettings.style.display = 'none'; }
+    });
+
+    elTorchAuto?.addEventListener('pointerdown', ()=>{
+      camera.turnOnTorch();
+      elTorchAuto.style.display = 'none';
+      elTorchOn.style.display = '';
+    });
+    elTorchOn?.addEventListener('pointerdown', ()=>{
+      camera.turnOffTorch();
+      elTorchOn.style.display = 'none';
+      elTorchOff.style.display = '';
+    });
+    elTorchOff?.addEventListener('pointerdown', ()=>{
+      if(!camera.isSupportTorch){
+        funcShowToast('Torch Not Supported');
+        return;
+      }
+      camera.turnAutoTorch();
+      elTorchOff.style.display = 'none';
+      elTorchAuto.style.display = '';
+    });
+    camera.addEventListener('torchAutoOn', ()=>{ 
+      funcShowToast('Torch Auto On');
+      if(elTorchAuto){elTorchAuto.style.display = 'none';}
+      if(elTorchOn){elTorchOn.style.display = '';}
+    });
+
+    ui.addEventListener('click', async(ev)=>{
+      let target = ev.target;
+      let option;
+      if(option = target.closest('.dm-camera-mn-camera-option')){
+        // change camera
+        if(option.hasAttribute('selected')){ return; }
+        await camera.requestCamera(option.getAttribute('data-device-id'));
+        // if remove usb camera, camera status can be 'paused'
+        // anyway, if not 'opened', reopen it
+        if('opened' !== camera.status){ await camera.open(); }
+      }else if(option = target.closest('.dm-camera-mn-resolution-option')){
+        // change resolution
+        if(option.hasAttribute('selected')){ return; }
+        let width = parseInt(option.getAttribute('data-width'));
+        let height = parseInt(option.getAttribute('data-height'));
+        await camera.requestResolution({ width, height });
+        
+        if(arrElResolutionOption.length){
+          const selectedOption = elCameraAndResolutionSettings?.querySelector('.dm-camera-mn-resolution-option[selected]');
+          if(selectedOption && selectedOption.textContent != option.textContent){
+            funcShowToast(`Fallback to ${selectedOption.textContent}`);
+          }
+        }
+      }else if(target.closest('.dm-camera-mn-camera-and-resolution-settings')){
+        // nothing happen
+        return;
+      }else if(target.closest('.dm-camera-mn-resolution-box')){ // toggle settings
+        if(elCameraAndResolutionSettings){
+          elCameraAndResolutionSettings.style.display = elCameraAndResolutionSettings.style.display ? '' : 'none';
+        }
+        return;
+      }
+      // hide settings
+      if(elCameraAndResolutionSettings){
+        if('' === elCameraAndResolutionSettings.style.display){
+          elCameraAndResolutionSettings.style.display = 'none';
+        }
+      }
+    });
+
+    let taskInfoZoomChange = null;
+    camera.addEventListener('zoom', ({zoom})=>{
+      if(!elZoom || !elZoomSpan){ return; }
+      elZoomSpan.textContent = zoom.toFixed(1);
+      elZoom.style.display = '';
+      if(null != taskInfoZoomChange){
+        clearTimeout(taskInfoZoomChange);
+        taskInfoZoomChange = null;
+      }
+      taskInfoZoomChange = setTimeout(()=>{
+        elZoom.style.display = 'none';
+        taskInfoZoomChange = null;
+      }, 3000);
+    });
+
+    let taskShowToast = null;
+    const funcShowToast = camera.funcShowToast = (info, duration = 3000)=>{
+      if(!elToast){ return; }
+      elToast.textContent = info;
+      elToast.style.display = '';
+      if(null != taskShowToast){
+        clearTimeout(taskShowToast);
+        taskShowToast = null;
+      }
+      if(duration){ // 0 never hide
+        taskShowToast = setTimeout(()=>{
+          elToast.style.display = 'none';
+          taskShowToast = null;
+        }, duration);
+      }
+    };
+
+    elCameraClose?.addEventListener('click', ()=>{ camera.close(); });
+
+    elCameraSwitch?.addEventListener('pointerdown', async()=>{
+      await camera.requestCamera(camera.currentCamera.isFront ? 'back': 'front');
+    });
+
+  })();
+</script>