dynamsoft-capture-vision-data/ui/dce.mobile-native.ui.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.

<template>
  <div style="position:relative;width:100%;height:100%;min-width:100px;min-height:100px;background:#ddd;">
		<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>
		<svg class="dce-bg-camera"
			style="display:none;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 class="dce-video-container" style="position:absolute;left:0;top:0;width:100%;height:100%;"></div>
		<div class="dce-scanarea" style="position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;user-select:none;">
      <div class="dce-scanlight" style="display:none;position:absolute;width:100%;height:3%;border-radius:50%;box-shadow:0px 0px 2vw 1px #00e5ff;background:#fff;animation:3s infinite dce-scanlight;"></div>
    </div>
    <div class="dce-macro-use-mobile-native-like-ui" style="display:none;">
      <div class="dce-mn-torch" title="torch">
        <svg class="dce-mn-torch-auto" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" 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>
        <svg class="dce-mn-torch-on" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="#fff">
          <path d="M280,0 86,280 270,310 232,512 426,232 242,202Z"/>
        </svg>
        <svg class="dce-mn-torch-off" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="#fff">
          <defs>
            <mask id="dce-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(#dce-mn-torch-off-mask)"/>
          <path d="M118,85 408,407 394,427 104,105Z"/>
        </svg>
      </div>
      <div class="dce-mn-beep" title="beep">
        <svg class="dce-mn-beep-on" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 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>
        <svg class="dce-mn-beep-off" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 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 class="dce-mn-vibrate" title="vibrate" style="display:none;">
        <svg class="dce-mn-vibrate-on" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 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>
        <svg class="dce-mn-vibrate-off" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 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 class="dce-mn-resolution-box" title="camera settings">720P</div>
      <div class="dce-mn-zoom">- <span>1.0X</span> -</div>
      <div class="dce-mn-toast"></div>
      <div class="dce-mn-camera-close" style="display:none;" title="close">
        <svg viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="#fff">
          <defs>
            <mask id="dce-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(#dce-mn-camera-close-mask)"/>
        </svg>
      </div>
      <div class="dce-mn-take-photo" style="display:none;" title="take photo"></div>
      <div class="dce-mn-camera-switch" title="switch camera">
        <svg viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" stroke="#fff" fill="#fff">
          <defs>
            <mask id="dce-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(#dce-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="dce-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="dce-mn-camera-and-resolution-settings">
        <div class="dce-mn-cameras">
          <div class="dce-mn-camera-option" data-device-id="">example camera</div>
        </div>
        <div class="dce-mn-camera-and-resolution-bar"></div>
        <div class="dce-mn-resolutions">
          <div class="dce-mn-resolution-option" data-width="640" data-height="480">480P</div>
          <div class="dce-mn-resolution-option" data-width="1080" data-height="720">720P</div>
          <div class="dce-mn-resolution-option" data-width="1920" data-height="1080">1080P</div>
          <div class="dce-mn-resolution-option" data-width="2560" data-height="1440">2K</div>
          <div class="dce-mn-resolution-option" data-width="3840" data-height="2160">4K</div>
        </div>
      </div>
    </div>
  </div>
  <style>
		@keyframes dce-rotate {
			from { transform: rotate(0turn); }
			to { transform: rotate(1turn); }
		}
		@keyframes dce-scanlight {
			from { top: 0; }
			to { top: 97%; }
		}

    .dce-macro-use-mobile-native-like-ui{width:100%;height:100%;position:absolute;font-family:Arial,Helvetica,sans-serif;pointer-events:none;user-select:none;}

    .dce-mn-torch-auto,.dce-mn-torch-on,.dce-mn-torch-off
    {position:absolute;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;}

    .dce-mn-beep-on,.dce-mn-beep-off
    {position:absolute;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;}

    .dce-mn-vibrate-on,.dce-mn-vibrate-off
    {position:absolute;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;}

    .dce-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);cursor:pointer;pointer-events:initial;}

    .dce-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;}
    .dce-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;}
    .dce-mn-toast{position:absolute;font-size:max(1.25vmin,10px);line-height:max(3vmin,24px);padding:0 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);}

    .dce-mn-camera-close>svg{position:absolute;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;}
    .dce-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;}
    .dce-mn-camera-switch>svg{position:absolute;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;}

    .dce-mn-msg-poweredby{position:absolute;height:max(2.125vmin,17px);left:50%;bottom:4px;transform:translateX(-50%);fill:#fff;}

    .dce-mn-camera-and-resolution-settings{position:absolute;top:calc(24px + max(3vmin,24px));right:0;background:rgba(100,100,100,0.5);display:flex;pointer-events:initial;}
    .dce-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;text-align:center;color:#fff;border-radius:max(0.75vmin,6px);background:rgba(100,100,100,0.5);cursor:pointer;}
    .dce-mn-camera-and-resolution-bar{width:1px;align-self:stretch;background:rgba(100,100,100,0.5);}
    .dce-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;text-align:center;color:#fff;border-radius:max(0.75vmin,6px);background:rgba(100,100,100,0.5);cursor:pointer;}
  </style>
</template>