dynamsoft-capture-vision-data/ui/dce.ui.v5.xml

This package encompasses machine learning models, such as the Convolutional Neural Networks (CNN) model used for text recognition, empowering various foundational products under DCV architecture.

<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>