diff --git a/.gitignore b/.gitignore
index b298d54..99daeeb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,6 +28,7 @@ __pycache__
 package-lock.json
 yarn.lock
 .git
+.npmrc
 /*.zip
 /*.py
 /*.exe
diff --git a/control-camera/index.html b/control-camera/index.html
index 9ed2942..3079c37 100644
--- a/control-camera/index.html
+++ b/control-camera/index.html
@@ -5,8 +5,8 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Dynamsoft Camera Enhancer Sample - Control Camera</title>
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.10/dist/core.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.0/dist/dce.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.30/dist/core.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.2/dist/dce.js"></script>
   </head>
   <body>
     <button id="btn-open-camera">open camera</button>
diff --git a/customize-ui/customize-ui.html b/customize-ui/customize-ui.html
new file mode 100644
index 0000000..a61b1ea
--- /dev/null
+++ b/customize-ui/customize-ui.html
@@ -0,0 +1,528 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dynamsoft Camera Enhancer Sample - Customize UI</title>
+    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.30/dist/core.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.2/dist/dce.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+      }
+
+      body {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        width: 100vw;
+        height: 90vh;
+        color: #455a64;
+      }
+
+      h1 {
+        font-size: 1.5em;
+      }
+
+      .controler {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .selector {
+        margin: 10px;
+      }
+
+      /* Small devices */
+
+      @media only screen and (max-width: 545px) {
+        .controler {
+          flex-direction: column;
+        }
+      }
+
+      .selector_switch {
+        position: relative;
+        width: 250px;
+        height: 30px;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+        line-height: 30px;
+        cursor: pointer;
+        transition: all 200ms;
+      }
+
+      .selector_switch:hover {
+        border: 1px solid #b4b4b4;
+      }
+
+      .selector_input {
+        position: absolute;
+        left: 0;
+        width: 100%;
+        height: 30px;
+        margin: 0;
+        padding: 0 30px 0 15px;
+        box-sizing: border-box;
+        border: none;
+        outline: none;
+        cursor: pointer;
+        border-radius: 5px;
+        color: #606266;
+      }
+
+      .selector_switch svg {
+        height: 30px;
+        position: absolute;
+        right: 5px;
+      }
+
+      .arrow {
+        transform: rotate(0deg);
+        transition: all 200ms;
+      }
+
+      .trans {
+        transform: rotate(-180deg);
+      }
+
+      .options {
+        position: absolute;
+        width: 250px;
+        max-height: 0;
+        margin: 3px 0 10px 0;
+        transition: max-height 200ms;
+        overflow: hidden;
+        border-radius: 5px;
+        overflow: auto;
+        z-index: 2000;
+        background-color: #fff;
+      }
+
+      .show {
+        border: 1px solid #e4e7ed;
+        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+        max-height: 200px;
+      }
+
+      .unshow {
+        border: none;
+        box-shadow: none;
+      }
+
+      .noheight {
+        max-height: 0;
+      }
+
+      ul {
+        list-style: none;
+        margin: 5px auto;
+        padding: 0;
+      }
+
+      ul li {
+        height: 30px;
+        line-height: 30px;
+        text-align: left;
+        cursor: pointer;
+        color: #606266;
+        font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
+          Microsoft YaHei, SimSun, sans-serif;
+        font-size: 14px;
+      }
+
+      ul li:hover {
+        background-color: #f5f7fa;
+      }
+
+      .selected {
+        color: #fe8e14;
+        font-weight: bold;
+      }
+
+      ul li span {
+        display: inline-block;
+        width: 100%;
+        height: 30px;
+        box-sizing: border-box;
+        padding: 0 20px;
+      }
+
+      .latest-result {
+        display: block;
+        margin: 0;
+        padding: 0.4rem 0.8rem;
+        color: inherit;
+        min-width: 40vw;
+        width: auto;
+        border: none;
+        font-size: 1rem;
+        border-radius: 0.2rem;
+        text-align: center;
+      }
+
+      .latest-result::placeholder {
+        color: #b0bec5;
+      }
+
+      .latest-result:focus {
+        outline: none;
+        box-shadow: 0.1rem 0.4rem 0.8rem #fe8e14;
+      }
+      @keyframes dce-scanlight {
+        from {
+          top: 0;
+        }
+        to {
+          top: 97%;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Customized UI</h1>
+    <div class="controler">
+      <div class="selector">
+        <div id="cam_selector_switch" class="selector_switch">
+          <input
+            id="selector_input_camera"
+            class="selector_input"
+            type="text"
+            readonly
+            autocomplete="off"
+            placeholder="Select"
+          />
+          <svg
+            id="arrow_camera"
+            class="arrow"
+            viewBox="0 0 1024 1024"
+            p-id="3019"
+            width="13"
+            height="13"
+          >
+            <path
+              d="M517.688889 796.444444c-45.511111 0-85.333333-17.066667-119.466667-51.2L73.955556 381.155556c-22.755556-22.755556-17.066667-56.888889 5.688888-79.644445 22.755556-22.755556 56.888889-17.066667 79.644445 5.688889l329.955555 364.088889c5.688889 5.688889 17.066667 11.377778 28.444445 11.377778s22.755556-5.688889 34.133333-17.066667l312.888889-364.088889c22.755556-22.755556 56.888889-28.444444 79.644445-5.688889 22.755556 22.755556 28.444444 56.888889 5.688888 79.644445L637.155556 739.555556c-28.444444 39.822222-68.266667 56.888889-119.466667 56.888888 5.688889 0 0 0 0 0z"
+              p-id="3020"
+              fill="#cccccc"
+            ></path>
+          </svg>
+        </div>
+        <div id="options_camera" class="options unshow noheight">
+          <ul id="ul_options_camera"></ul>
+        </div>
+      </div>
+      <div class="selector">
+        <div id="res_selector_switch" class="selector_switch">
+          <input
+            id="selector_input_resolution"
+            class="selector_input"
+            type="text"
+            readonly
+            autocomplete="off"
+            placeholder="Select"
+          />
+          <svg
+            id="arrow_resolution"
+            class="arrow"
+            viewBox="0 0 1024 1024"
+            p-id="3019"
+            width="13"
+            height="13"
+          >
+            <path
+              d="M517.688889 796.444444c-45.511111 0-85.333333-17.066667-119.466667-51.2L73.955556 381.155556c-22.755556-22.755556-17.066667-56.888889 5.688888-79.644445 22.755556-22.755556 56.888889-17.066667 79.644445 5.688889l329.955555 364.088889c5.688889 5.688889 17.066667 11.377778 28.444445 11.377778s22.755556-5.688889 34.133333-17.066667l312.888889-364.088889c22.755556-22.755556 56.888889-28.444444 79.644445-5.688889 22.755556 22.755556 28.444444 56.888889 5.688888 79.644445L637.155556 739.555556c-28.444444 39.822222-68.266667 56.888889-119.466667 56.888888 5.688889 0 0 0 0 0z"
+              p-id="3020"
+              fill="#cccccc"
+            ></path>
+          </svg>
+        </div>
+        <div id="options_resolution" class="options unshow noheight">
+          <ul id="ul_options_resolution">
+            <li id="gotResolution"><span></span></li>
+            <li><span id="1920x1080">ask 1920 x 1080</span></li>
+            <li><span id="1280x720">ask 1280 x 720</span></li>
+            <li><span id="640x480">ask 640 x 480</span></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div
+      id="div-ui-container"
+      style="
+        position: relative;
+        margin: 2vmin auto;
+        width: 80vw;
+        height: 60vh;
+        max-width: 600px;
+      "
+    >
+      <div
+        class="dce-video-container"
+        style="position: absolute; left: 0; top: 0; width: 100%; height: 100%"
+      ></div>
+      <div
+        class="dce-scanarea"
+        style="
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          left: 0;
+          top: 0;
+          overflow: hidden;
+        "
+      >
+        <div
+          id="dce-scanlight"
+          class="dce-scanlight"
+          hidden
+          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"
+        style="
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          top: -10px;
+          left: -10px;
+          padding: 10px;
+        "
+      >
+        <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>
+        <div
+          class="dce-corner"
+          style="
+            position: absolute;
+            width: 50px;
+            height: 50px;
+            bottom: 0;
+            right: 0;
+            border-right: 3px solid #fe8e14;
+            border-bottom: 3px solid #fe8e14;
+          "
+        ></div>
+      </div>
+    </div>
+    <script>
+      const uiContainer = document.querySelector("#div-ui-container");
+
+      const init = async () => {
+        // Create 'CameraView' instance and set 'uiContainer' as its UI.
+        const cameraView = await Dynamsoft.DCE.CameraView.createInstance(
+          uiContainer
+        );
+        // Make scan laser visible.
+        cameraView.setScanLaserVisible(true);
+        // Create 'CameraEnhancer' instance and pass 'cameraView' to it for UI control.
+        const cameraEnhancer =
+          await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
+
+        // Add event handlers to 'cameraChange' and 'resolutionChange'.
+        cameraEnhancer.on("cameraChange", (deviceId, previousDeviceId) => {
+          document
+            .querySelectorAll("#ul_options_camera span")
+            .forEach((span) => {
+              if (span.id === deviceId) {
+                document.getElementById("selector_input_camera").value =
+                  span.textContent;
+                span.classList.add("selected");
+              } else {
+                span.classList.remove("selected");
+              }
+            });
+        });
+        cameraEnhancer.on(
+          "resolutionChange",
+          (resolution, previousResolution) => {
+            const gotResolution = document.querySelector("#gotResolution span");
+            gotResolution.textContent =
+              "got " + resolution.width + " x " + resolution.height;
+            gotResolution.id = resolution.width + "x" + resolution.height;
+            document.getElementById("selector_input_resolution").value =
+              gotResolution.textContent;
+          }
+        );
+
+        await cameraEnhancer.open();
+
+        renderCameraSelector();
+        renderResolutionSelector();
+
+        return { cameraView, cameraEnhancer };
+      };
+
+      let pInit = init();
+
+      const camOptions = document.getElementById("options_camera");
+      const resOptions = document.getElementById("options_resolution");
+
+      // timer for animation
+      let animateTimer = null;
+
+      // add the click event to the selector
+      document
+        .getElementById("cam_selector_switch")
+        .addEventListener("click", () => {
+          toggleOptionsView("camera");
+        });
+      document
+        .getElementById("res_selector_switch")
+        .addEventListener("click", () => {
+          toggleOptionsView("resolution");
+        });
+
+      // camera selector renderer
+      async function renderCameraSelector() {
+        const { cameraEnhancer } = await pInit;
+        const cameras = await cameraEnhancer.getAllCameras();
+        const currentCamera = cameraEnhancer.getSelectedCamera();
+        const optionsUl = document.getElementById("ul_options_camera");
+        optionsUl.innerHTML = "";
+
+        const camOptionSelected = async (e) => {
+          await cameraEnhancer.selectCamera(e.target.id);
+        };
+
+        cameras.forEach((camera) => {
+          let li = document.createElement("li");
+          let span = document.createElement("span");
+          span.addEventListener("click", camOptionSelected);
+          span.setAttribute("id", camera.deviceId);
+          span.textContent = camera.label;
+          if (camera.deviceId === currentCamera.deviceId) {
+            document.getElementById("selector_input_camera").value =
+              camera.label;
+            span.classList.add("selected");
+          }
+          li.appendChild(span);
+          optionsUl.appendChild(li);
+        });
+      }
+      // resolution selector renderer
+      async function renderResolutionSelector() {
+        const { cameraEnhancer } = await pInit;
+        const currentResolution = cameraEnhancer.getResolution();
+        const gotResolution = document.querySelector("#gotResolution span");
+        gotResolution.textContent =
+          "got " + currentResolution.width + " x " + currentResolution.height;
+        gotResolution.id =
+          currentResolution.width + "x" + currentResolution.height;
+        gotResolution.classList.add("selected");
+        document.getElementById("selector_input_resolution").value =
+          gotResolution.textContent;
+
+        const resOptionSelected = async (e) => {
+          const data = e.target.id.split("x");
+          await cameraEnhancer.setResolution({
+            width: parseInt(data[0]),
+            height: parseInt(data[1]),
+          });
+        };
+
+        const options = document.querySelectorAll(
+          "#ul_options_resolution span"
+        );
+        for (let option of options) {
+          option.addEventListener("click", resOptionSelected);
+        }
+      }
+      // when the selector is clicked
+      function toggleOptionsView(selectorType) {
+        const arrowId =
+          selectorType === "camera" ? "arrow_camera" : "arrow_resolution";
+        const options = selectorType === "camera" ? camOptions : resOptions;
+        // expanding and collapsing control options by changing the classList
+        clearTimeout(animateTimer);
+        options.classList.toggle("noheight");
+        document.getElementById(arrowId).classList.toggle("trans");
+        const hidden = options.classList.value.search("unshow");
+        if (hidden !== -1) {
+          options.classList.replace("unshow", "show");
+          document.addEventListener("click", clickToHiddenOptions);
+        } else {
+          // remove styles such as shadows after the transition ends
+          animateTimer = setTimeout(() => {
+            options.classList.replace("show", "unshow");
+          }, 200);
+        }
+      }
+
+      // click anywhere outside the options to collapse the options
+      function clickToHiddenOptions(e) {
+        const camViewable = camOptions.classList.value.search("unshow");
+        const resViewable = resOptions.classList.value.search("unshow");
+        if (
+          camViewable === -1 &&
+          e.target.id != "selector_input_camera" &&
+          e.target.id != "arrow_camera" &&
+          e.target.parentNode.id != "arrow_camera"
+        ) {
+          toggleOptionsView("camera");
+        }
+        if (
+          resViewable === -1 &&
+          e.target.id != "selector_input_resolution" &&
+          e.target.id != "arrow_resolution" &&
+          e.target.parentNode.id != "arrow_resolution"
+        ) {
+          toggleOptionsView("resolution");
+        }
+        if (camViewable !== -1 && resViewable !== -1) {
+          // trigger only once
+          document.removeEventListener("click", arguments.callee);
+        }
+      }
+    </script>
+  </body>
+</html>
diff --git a/customize-ui/index.html b/customize-ui/minimum-element.html
similarity index 54%
rename from customize-ui/index.html
rename to customize-ui/minimum-element.html
index aaebaae..8abec2f 100644
--- a/customize-ui/index.html
+++ b/customize-ui/minimum-element.html
@@ -2,26 +2,28 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Dynamsoft Camera Enhancer Sample - Customize UI</title>
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.10/dist/core.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.0/dist/dce.js"></script>
+    <title>Dynamsoft Camera Enhancer Sample - Minimum Element</title>
+    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.30/dist/core.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.2/dist/dce.js"></script>
   </head>
   <body>
+    <div id="div-ui-container" style="width: 100%; height: 90vh">
+      <div class="dce-video-container" style="width: 100%; height: 100%"></div>
+    </div>
     <script>
-      let cameraView;
-      let cameraEnhancer;
+      const uiContainer = document.querySelector("#div-ui-container");
+
+      let cameraView, cameraEnhancer;
       (async () => {
-        // Create 'CameraView' instance and set element in './ui.html' as its UI.
-        cameraView = await Dynamsoft.DCE.CameraView.createInstance("./ui.html");
-        // Set video's CSS style 'object-fit' to 'cover'.
-        cameraView.setVideoFit("cover");
-        // Get 'CameraView' instance's UI and append it to DOM.
-        document.body.append(cameraView.getUIElement());
+        // Create 'CameraView' instance and set 'uiContainer' as its UI.
+        cameraView = await Dynamsoft.DCE.CameraView.createInstance(uiContainer);
         // Create 'CameraEnhancer' instance and pass 'cameraView' to it for UI control.
         cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(
           cameraView
         );
+
         await cameraEnhancer.open();
       })();
     </script>
diff --git a/customize-ui/ui.html b/customize-ui/ui.html
deleted file mode 100644
index 4a31778..0000000
--- a/customize-ui/ui.html
+++ /dev/null
@@ -1,744 +0,0 @@
-<div class="dce-ui-container">
-  <div class="dce-main">
-    <div class="dce-bg-loading">
-      <div class="dce-loading-img">
-        <svg class="dce-svg-loop" viewBox="0 0 130 130">
-          <g transform="translate(-121 -252)">
-            <circle
-              cx="65"
-              cy="65"
-              r="65"
-              transform="translate(121 252)"
-              fill="#fff"
-              opacity="0.37"
-            />
-            <g transform="translate(186 252)">
-              <g>
-                <g style="isolation: isolate">
-                  <g>
-                    <g>
-                      <path
-                        data-name="Path 61"
-                        d="M0,5A60.012,60.012,0,0,1,57.706,48.58h5.2A65.025,65.025,0,0,0,0,0Z"
-                        fill="#fe8e14"
-                      />
-                    </g>
-                  </g>
-                </g>
-              </g>
-            </g>
-          </g>
-        </svg>
-        <svg class="dce-svg-loading-camera" viewBox="0 0 120 120">
-          <g transform="translate(-126 -257)">
-            <circle
-              cx="60"
-              cy="60"
-              r="60"
-              transform="translate(126 257)"
-              fill="#323234"
-            />
-            <g transform="translate(3 2)">
-              <g transform="translate(153 292)">
-                <path
-                  d="M132.976,48.883h-9.129a2.612,2.612,0,0,1-2.1-1.064c-3.362-4.585-4.6-6.761-7.027-6.761H101.676c-2.428,0-3.652,2.175-7.042,6.761a2.608,2.608,0,0,1-2.087,1.064H83.418c-3.912,0-5.217,1.771-5.217,4.494v29.7c0,2.721,1.3,4.927,5.363,4.927H132.83c4.059,0,5.363-2.207,5.363-4.927v-29.7C138.193,50.654,136.889,48.883,132.976,48.883Z"
-                  transform="translate(-78.201 -41.058)"
-                  fill="none"
-                  stroke="#fff"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="1"
-                />
-                <path
-                  d="M99.556,76.768A15.855,15.855,0,1,0,83.7,60.913,15.855,15.855,0,0,0,99.556,76.768Z"
-                  transform="translate(-69.952 -35.102)"
-                  fill="none"
-                  stroke="#fff"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="1"
-                />
-                <path
-                  d="M91.032,59.719A7.331,7.331,0,1,0,83.7,52.389,7.331,7.331,0,0,0,91.032,59.719Z"
-                  transform="translate(-61.428 -26.578)"
-                  fill="none"
-                  stroke="#fff"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="1"
-                />
-              </g>
-            </g>
-          </g>
-        </svg>
-      </div>
-      <div class="dce-loading-camera-tip">Loading camera...</div>
-    </div>
-    <div class="dce-bg-camera">
-      <svg viewBox="0 0 120 120">
-        <g transform="translate(-126 -257)">
-          <g>
-            <circle
-              cx="60"
-              cy="60"
-              r="60"
-              transform="translate(126 257)"
-              fill="#323234"
-            />
-          </g>
-          <g transform="translate(-110.314 -104.703)">
-            <g>
-              <g>
-                <g>
-                  <path
-                    d="M282.52,415.763a5.4,5.4,0,1,1,5.4-5.4A5.406,5.406,0,0,1,282.52,415.763Zm0-9.8a4.4,4.4,0,1,0,4.4,4.4A4.405,4.405,0,0,0,282.52,405.962Z"
-                    fill="#fff"
-                  />
-                </g>
-                <g>
-                  <path
-                    d="M287.422,435.364H275.167a.5.5,0,0,1-.424-.765l7.387-11.818a1.723,1.723,0,0,1,2.926,0l2.211,3.541,6.044-9.67a1.755,1.755,0,0,1,.549-.549,1.726,1.726,0,0,1,2.377.549l1.52,2.43a.5.5,0,0,1-.848.531l-1.52-2.431a.725.725,0,0,0-1.23,0l-6.468,10.348a.5.5,0,0,1-.424.235h0a.5.5,0,0,1-.424-.235l-2.635-4.22a.728.728,0,0,0-1-.232.718.718,0,0,0-.231.231l-6.91,11.055h11.353a.5.5,0,0,1,0,1Z"
-                    fill="#fff"
-                  />
-                </g>
-                <g>
-                  <path
-                    d="M292.324,450.076H270.265a2.957,2.957,0,0,1-2.951-2.952V395.655a2.956,2.956,0,0,1,2.951-2.952h32.58a2.941,2.941,0,0,1,2.087.865l9.086,9.086a2.932,2.932,0,0,1,.864,2.087v10.522a.5.5,0,1,1-1,0V404.741a1.939,1.939,0,0,0-.571-1.38l-9.086-9.086a1.952,1.952,0,0,0-1.381-.572H270.265a1.955,1.955,0,0,0-1.951,1.952v51.469a1.955,1.955,0,0,0,1.952,1.952h22.058a.5.5,0,0,1,0,1Z"
-                    fill="#fff"
-                  />
-                </g>
-                <g>
-                  <path
-                    d="M309.48,450.077h-.012a15.212,15.212,0,1,1,.012,0Zm0-29.413a14.206,14.206,0,0,0-.012,28.413l.012.5v-.5a14.206,14.206,0,0,0,0-28.413Z"
-                    fill="#fff"
-                  />
-                </g>
-                <g>
-                  <path
-                    d="M309.48,442.722a.5.5,0,0,1-.5-.5V427.516a.5.5,0,0,1,1,0v14.706A.5.5,0,0,1,309.48,442.722Z"
-                    fill="#fff"
-                  />
-                </g>
-                <g>
-                  <path
-                    d="M316.833,435.37H302.127a.5.5,0,0,1,0-1h14.706a.5.5,0,0,1,0,1Z"
-                    fill="#fff"
-                  />
-                </g>
-              </g>
-            </g>
-          </g>
-        </g>
-      </svg>
-    </div>
-    <div class="dce-video-container"></div>
-    <div class="dce-scanarea">
-      <div class="dce-scanlight"></div>
-    </div>
-  </div>
-  <header>
-    <div class="dce-camera">
-      <select class="dce-sel-camera"></select>
-    </div>
-    <div class="dce-resolution">
-      <select class="dce-sel-resolution">
-        <option class="dce-opt-gotResolution" value="got"></option>
-        <option data-width="3840" data-height="2160">3840x2160</option>
-        <option data-width="1920" data-height="1080">1920x1080</option>
-        <option data-width="1280" data-height="720">1280x720</option>
-        <option data-width="640" data-height="480">640x480</option>
-      </select>
-    </div>
-    <div class="dce-full-name">Dynamsoft Camera Enhancer</div>
-  </header>
-  <footer>
-    <div class="dce-footer-1">
-      <div class="dce-footer-logo">
-        <svg width="100%" height="100%" viewBox="0 0 142.5 34.898">
-          <g transform="translate(108.008 21.553)">
-            <g transform="translate(-108.008 -21.553)">
-              <path
-                d="M219.3,0l2.192,5.689L223.683,0Z"
-                transform="translate(-117.041)"
-                fill="#fff"
-              />
-              <g clip-path="url(#clip-path)">
-                <path
-                  d="M0,10.1H6.248c4.337,0,6.621,2.378,6.621,7.367v9.7c0,4.989-2.285,7.367-6.621,7.367H0ZM4.2,31.083H5.642c2.238,0,3.031-.839,3.031-3.4V17c0-2.565-.793-3.4-3.031-3.4H4.2Z"
-                  transform="translate(0 -5.39)"
-                  fill="#fff"
-                />
-                <path
-                  d="M41.373,23.5H45.2L40.441,43.084c-.793,3.311-2.331,4.383-5.176,4.383H33.633V44.343h.933c1.912,0,2.518-1.026,2.518-2.938a9.419,9.419,0,0,0-.42-2.425L32.7,23.5h3.87l2.425,11.657h.047Z"
-                  transform="translate(-17.452 -12.542)"
-                  fill="#fff"
-                />
-                <path
-                  d="M64.1,41.359V23.126h3.59v1.819c1.585-1.352,2.425-2.145,4.616-2.145s3.171,1.446,3.171,3.824V41.359H71.7V27.23a1.212,1.212,0,0,0-1.352-1.306,4.462,4.462,0,0,0-2.425,1.166V41.359Z"
-                  transform="translate(-34.21 -12.168)"
-                  fill="#fff"
-                />
-                <path
-                  d="M95.18,28.489c.187-3.684,2.518-5.689,6.108-5.689s5.5,1.632,5.5,4.943V39.4a12.963,12.963,0,0,0,.233,1.912h-3.637c-.047-.513-.187-.979-.187-1.446a6.443,6.443,0,0,1-4.43,1.772c-2.565,0-3.87-1.772-3.87-4.1,0-4.01,2.658-6.2,8.114-8.253V28.256c0-1.539-.606-2.331-1.865-2.331S99.05,26.95,99,28.489Zm7.834,3.637c-3.451,1.958-4.29,3.217-4.29,4.8s.606,1.679,1.772,1.679a3.11,3.11,0,0,0,2.518-1.679Z"
-                  transform="translate(-50.648 -12.168)"
-                  fill="#fff"
-                />
-                <path
-                  d="M136.207,41.359V27.23a1.212,1.212,0,0,0-1.306-1.306,4.462,4.462,0,0,0-2.425,1.166V41.359H128.7V23.126h3.59v1.819c1.585-1.352,2.425-2.145,4.2-2.145s2.518.7,3.311,2.145c1.819-1.772,2.844-2.145,4.243-2.145,2.378,0,3.544,1.446,3.544,3.824V41.359h-3.824V27.23a1.212,1.212,0,0,0-1.352-1.306,4.462,4.462,0,0,0-2.425,1.166V41.359Z"
-                  transform="translate(-68.688 -12.168)"
-                  fill="#fff"
-                />
-                <path
-                  d="M291.033,51.439H290.1V50.6h2.8v.839h-.933V56.2h-.933Z"
-                  transform="translate(-154.827 -27.005)"
-                  fill="#fff"
-                />
-                <path
-                  d="M301.117,50.6v5.6h-.839V51.812h0l-.886,4.383h-.466l-.886-4.383h0V56.2H297.2V50.6h1.259l.7,3.264h0l.7-3.264Z"
-                  transform="translate(-158.617 -27.005)"
-                  fill="#fff"
-                />
-                <path
-                  d="M182.834,28.056c-.28-1.446-.933-2.285-2.145-2.285s-1.679.513-1.679,1.446c0,2.844,7.088,4.01,7.088,9.419,0,3.264-2.238,4.9-5.316,4.9S175.56,39.62,175,36.449l3.311-.933c.233,1.539.793,2.891,2.518,2.891a1.539,1.539,0,0,0,1.679-1.585c0-3.171-7.088-4.337-7.088-9.326a4.854,4.854,0,0,1,5.083-4.9,5.649,5.649,0,0,1,5.549,4.849Z"
-                  transform="translate(-93.398 -12.062)"
-                  fill="#fe8e14"
-                />
-                <path
-                  d="M248.538,19.1H246.3V15.975h2.238V13.69c0-2.938,1.539-4.29,4.243-4.29h1.912v3.124h-1.073c-.933,0-1.259.326-1.259,1.212v2.238h2.145V19.1h-2.145V34.207h-3.777Z"
-                  transform="translate(-131.451 -5.017)"
-                  fill="#fe8e14"
-                />
-                <path
-                  d="M266.5,21.02V17.9h2.1V13h3.777v4.9h2.518V21.02h-2.518V31.512c0,.933.42,1.492,1.306,1.492h1.259v3.264a6.528,6.528,0,0,1-1.912.187c-2.844,0-4.43-1.306-4.43-4.1V21.02Z"
-                  transform="translate(-142.232 -6.938)"
-                  fill="#fe8e14"
-                />
-                <path
-                  d="M211.66,25.877V22.1a9.746,9.746,0,0,0-8.16,8.16h3.777a6.062,6.062,0,0,1,4.43-4.43"
-                  transform="translate(-108.609 -11.795)"
-                  fill="#fe8e14"
-                />
-                <path
-                  d="M227,25.877a6.062,6.062,0,0,1,4.43,4.43h3.777A9.746,9.746,0,0,0,227,22.1Z"
-                  transform="translate(-121.151 -11.795)"
-                  fill="#fe8e14"
-                />
-                <path
-                  d="M211.607,50.03a6.062,6.062,0,0,1-4.43-4.43H203.4a9.746,9.746,0,0,0,8.207,8.207Z"
-                  transform="translate(-108.555 -24.337)"
-                  fill="#fe8e14"
-                />
-                <path
-                  d="M226.947,50.083V53.86a9.746,9.746,0,0,0,8.16-8.16H231.33a6.062,6.062,0,0,1-4.43,4.43"
-                  transform="translate(-121.097 -24.39)"
-                  fill="#fe8e14"
-                />
-              </g>
-            </g>
-          </g>
-        </svg>
-      </div>
-      <div class="dce-footer-copyrigt-info">
-        © 2003 – 2023 Dynamsoft. All rights reserved. Privacy Statement / Site
-        Map
-      </div>
-    </div>
-    <div class="dce-footer-2">Powered by Dynamsoft</div>
-  </footer>
-</div>
-<style>
-  @keyframes dce-rotate {
-    from {
-      transform: rotate(0turn);
-    }
-    to {
-      transform: rotate(1turn);
-    }
-  }
-
-  @keyframes dce-scanlight {
-    from {
-      top: 0;
-    }
-    to {
-      top: 97%;
-    }
-  }
-
-  * {
-    padding: 0;
-    margin: 0;
-    box-sizing: border-box;
-  }
-
-  html {
-    width: 100%;
-    height: 100%;
-    font-size: 62.5%;
-  }
-
-  body {
-    width: 100%;
-    height: 100%;
-  }
-  .dce-ui-container {
-    width: 100%;
-    height: 100%;
-    min-width: 350px;
-    min-height: 100px;
-    position: relative;
-    color: white;
-  }
-  .dce-main {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgb(111, 111, 111);
-  }
-
-  .dce-main > .dce-video-container {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-  .dce-main > .dce-bg-loading {
-    display: none;
-    position: absolute;
-    left: 50%;
-    min-width: 130px;
-    transform: translateX(-50%);
-    font-size: 1.4em;
-  }
-
-  .dce-main > .dce-bg-loading > .dce-loading-img {
-    position: absolute;
-    left: 50%;
-    top: 0;
-    transform: translateX(-50%);
-  }
-  .dce-main > .dce-bg-loading > .dce-loading-img > .dce-svg-loop {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    animation: 1s linear infinite dce-rotate;
-  }
-
-  .dce-main > .dce-bg-loading > .dce-loading-img > .dce-svg-loading-camera {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
-  .dce-main > .dce-bg-loading > .dce-loading-camera-tip {
-    position: absolute;
-    width: 100%;
-    text-align: center;
-  }
-
-  .dce-main > .dce-bg-camera {
-    display: none;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    min-width: 120px;
-    transform: translate(-50%, -50%);
-  }
-
-  .dce-main > .dce-scanarea {
-    position: absolute;
-    pointer-events: none;
-  }
-
-  .dce-main > .dce-scanarea > .dce-scanlight {
-    position: absolute;
-    width: 100%;
-    height: 3px;
-    background: #fff;
-    border-radius: 50%;
-    box-shadow: 0px 0px 2vw 1px #00e5ff;
-    animation: 3s infinite dce-scanlight;
-    user-select: none;
-  }
-
-  header {
-    position: absolute;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    left: 0;
-    top: 0;
-    width: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
-  }
-
-  header > .dce-camera {
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 100%;
-  }
-
-  header > .dce-resolution {
-    position: absolute;
-    top: 0;
-    height: 100%;
-  }
-
-  header > .dce-camera > .dce-sel-camera,
-  header > .dce-resolution > .dce-sel-resolution {
-    width: 100%;
-    height: 100%;
-    color: white;
-    font-size: 1em;
-    background-color: rgb(34, 34, 34);
-    border: none;
-  }
-
-  header > .dce-full-name {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 1.1em;
-  }
-
-  footer {
-    position: absolute;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    background-color: rgba(0, 0, 0, 0.3);
-    pointer-events: none;
-  }
-
-  footer > .dce-footer-1 {
-    width: 51%;
-    height: 100%;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-evenly;
-  }
-  footer > .dce-footer-1 > .dce-footer-logo {
-    display: flex;
-    align-items: center;
-    width: 142.5px;
-    height: 35px;
-  }
-  footer > .dce-footer-1 > .dce-footer-copyrigt-info {
-    text-align: center;
-  }
-  /* Extra small devices (phones, 600px and down) */
-  @media screen and (max-width: 600px) {
-    .dce-ui-container {
-      font-size: 1.2rem;
-    }
-    .dce-main > .dce-bg-loading {
-      top: 31%;
-      width: 40vw;
-      height: 167px;
-    }
-    .dce-main > .dce-bg-loading > .dce-loading-img {
-      width: 130px;
-      height: 130px;
-    }
-    .dce-main > .dce-bg-loading > .dce-loading-img > .dce-svg-loading-camera {
-      top: 5px;
-      width: 120px;
-      height: 120px;
-    }
-    .dce-main > .dce-bg-loading > .dce-loading-camera-tip {
-      top: 144px;
-    }
-    .dce-main > .dce-bg-camera {
-      width: 150px;
-      height: 150px;
-    }
-    header {
-      height: 12.3vw;
-    }
-    header > .dce-camera {
-      width: 16%;
-    }
-
-    header > .dce-resolution {
-      left: calc(16% + 1px);
-      width: 16%;
-    }
-
-    header > .dce-full-name {
-      left: 37.3%;
-    }
-
-    footer {
-      height: 9.6vw;
-    }
-    footer > .dce-footer-1 {
-      display: none;
-    }
-  }
-  /* Small devices (portrait tablets and large phones, 600px and up) */
-  @media screen and (min-width: 600px) {
-    .dce-ui-container {
-      font-size: 1.6rem;
-    }
-    .dce-main > .dce-bg-loading {
-      top: 31%;
-      width: 40vw;
-      height: 240px;
-    }
-    .dce-main > .dce-bg-loading > .dce-loading-img {
-      width: 182px;
-      height: 182px;
-    }
-    .dce-main > .dce-bg-loading > .dce-loading-img > .dce-svg-loading-camera {
-      top: 7px;
-      width: 168px;
-      height: 168px;
-    }
-    .dce-main > .dce-bg-loading > .dce-loading-camera-tip {
-      top: 210px;
-    }
-    .dce-main > .dce-bg-camera {
-      width: 180px;
-      height: 180px;
-    }
-
-    header {
-      height: 12.3vw;
-    }
-    header > .dce-camera {
-      width: 16%;
-    }
-
-    header > .dce-resolution {
-      left: calc(16% + 1px);
-      width: 16%;
-    }
-
-    header > .dce-full-name {
-      left: 37.3%;
-    }
-
-    footer {
-      height: 9.6vw;
-    }
-    footer > .dce-footer-1 {
-      display: none;
-    }
-  }
-  /* Medium devices (landscape tablets, 768px and up) */
-  @media screen and (min-width: 768px) {
-    .dce-ui-container {
-      font-size: 1.6rem;
-    }
-    .dce-main > .dce-bg-loading {
-      top: 31%;
-      width: 40vw;
-      height: 240px;
-    }
-    .dce-main > .dce-bg-loading > .dce-loading-img {
-      width: 182px;
-      height: 182px;
-    }
-    .dce-main > .dce-bg-loading > .dce-loading-img > .dce-svg-loading-camera {
-      top: 7px;
-      width: 168px;
-      height: 168px;
-    }
-    .dce-main > .dce-bg-loading > .dce-loading-camera-tip {
-      top: 210px;
-    }
-    .dce-main > .dce-bg-camera {
-      width: 180px;
-      height: 180px;
-    }
-
-    header {
-      height: 12.3vw;
-    }
-    header > .dce-camera {
-      width: 16%;
-    }
-
-    header > .dce-resolution {
-      left: calc(16% + 1px);
-      width: 16%;
-    }
-
-    header > .dce-full-name {
-      left: 37.3%;
-    }
-
-    footer {
-      height: 9.6vw;
-    }
-    footer > .dce-footer-1 {
-      display: none;
-    }
-  }
-  /* Small devices, landscape */
-  @media screen and (min-width: 600px) and (orientation: landscape) {
-    .dce-ui-container {
-      font-size: 1.2rem;
-    }
-    .dce-main > .dce-bg-loading {
-      top: 26%;
-      width: 40vw;
-      height: 167px;
-    }
-    .dce-main > .dce-bg-loading > .dce-loading-img {
-      width: 130px;
-      height: 130px;
-    }
-    .dce-main > .dce-bg-loading > .dce-loading-img > .dce-svg-loading-camera {
-      top: 5px;
-      width: 120px;
-      height: 120px;
-    }
-    .dce-main > .dce-bg-loading > .dce-loading-camera-tip {
-      top: 144px;
-    }
-    .dce-main > .dce-bg-camera {
-      width: 120px;
-      height: 120px;
-    }
-
-    header {
-      height: 10vh;
-    }
-    header > .dce-camera {
-      width: 12%;
-    }
-
-    header > .dce-resolution {
-      left: calc(12% + 1px);
-      width: 12%;
-    }
-
-    header > .dce-full-name {
-      left: 37.3%;
-    }
-
-    footer {
-      height: 10vh;
-    }
-    footer > .dce-footer-1 {
-      display: none;
-    }
-  }
-  /* Large devices (laptops/desktops, 992px and up) */
-  @media screen and (min-width: 992px) {
-    .dce-ui-container {
-      font-size: 1.6rem;
-    }
-    .dce-main > .dce-bg-loading {
-      top: 31%;
-      width: 40vw;
-      height: 240px;
-    }
-    .dce-main > .dce-bg-loading > .dce-loading-img {
-      width: 182px;
-      height: 182px;
-    }
-    .dce-main > .dce-bg-loading > .dce-loading-img > .dce-svg-loading-camera {
-      top: 7px;
-      width: 168px;
-      height: 168px;
-    }
-    .dce-main > .dce-bg-loading > .dce-loading-camera-tip {
-      top: 210px;
-    }
-    .dce-main > .dce-bg-camera {
-      width: 200px;
-      height: 200px;
-    }
-
-    header {
-      height: 4.1vw;
-    }
-    header > .dce-camera {
-      width: 20.4%;
-    }
-
-    header > .dce-resolution {
-      left: calc(20.4% + 2px);
-      width: 10%;
-    }
-
-    header > .dce-full-name {
-      left: 37.3%;
-    }
-
-    footer {
-      height: 4.1vw;
-    }
-    footer > .dce-footer-1 {
-      display: flex;
-    }
-    footer > .dce-footer-2 {
-      display: none;
-    }
-  }
-  /* Extra large devices (large laptops and desktops, 1200px and up) */
-  @media screen and (min-width: 1200px) {
-    .dce-ui-container {
-      font-size: 1.6rem;
-    }
-    .dce-main > .dce-bg-loading {
-      top: 31%;
-      width: 40vw;
-      height: 240px;
-    }
-    .dce-main > .dce-bg-loading > .dce-loading-img {
-      width: 182px;
-      height: 182px;
-    }
-    .dce-main > .dce-bg-loading > .dce-loading-img > .dce-svg-loading-camera {
-      top: 7px;
-      width: 168px;
-      height: 168px;
-    }
-    .dce-main > .dce-bg-loading > .dce-loading-camera-tip {
-      top: 210px;
-    }
-    .dce-main > .dce-bg-camera {
-      width: 200px;
-      height: 200px;
-    }
-
-    header {
-      height: 4.1vw;
-    }
-    header > .dce-camera {
-      width: 20.4%;
-    }
-
-    header > .dce-resolution {
-      left: calc(20.4% + 2px);
-      width: 10%;
-    }
-    header > .dce-full-name {
-      left: 37.3%;
-    }
-
-    footer {
-      height: 4.1vw;
-    }
-    footer > .dce-footer-1 {
-      display: flex;
-    }
-    footer > .dce-footer-2 {
-      display: none;
-    }
-  }
-</style>
diff --git a/draw-shapes/index.html b/draw-shapes/index.html
index 3d11161..00572e5 100644
--- a/draw-shapes/index.html
+++ b/draw-shapes/index.html
@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Dynamsoft Camera Enhancer Sample - Drawing Shapes</title>
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.10/dist/core.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.0/dist/dce.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.30/dist/core.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.2/dist/dce.js"></script>
   </head>
   <body>
     <select id="select-shapes">
@@ -53,7 +53,7 @@
                 y = 0,
                 width = 100,
                 height = 200;
-              const rectItem = new Dynamsoft.DCE.DrawingItem.RectDrawingItem({
+              const rectItem = new Dynamsoft.DCE.RectDrawingItem({
                 x,
                 y,
                 width,
@@ -82,7 +82,7 @@
                   y: 300,
                 },
               ];
-              const quadItem = new Dynamsoft.DCE.DrawingItem.QuadDrawingItem({
+              const quadItem = new Dynamsoft.DCE.QuadDrawingItem({
                 points,
               });
               drawingLayer.addDrawingItems([quadItem]);
@@ -92,7 +92,7 @@
             {
               const startPoint = { x: 400, y: 100 },
                 endPoint = { x: 600, y: 300 };
-              const lineItem = new Dynamsoft.DCE.DrawingItem.LineDrawingItem({
+              const lineItem = new Dynamsoft.DCE.LineDrawingItem({
                 startPoint,
                 endPoint,
               });
@@ -106,7 +106,7 @@
                 y = 100,
                 width = 200,
                 height = 100;
-              const textItem = new Dynamsoft.DCE.DrawingItem.TextDrawingItem(
+              const textItem = new Dynamsoft.DCE.TextDrawingItem(
                 text,
                 {
                   x,
@@ -128,7 +128,7 @@
               image.src = "image.png";
               image.decode().then(() => {
                 const imageItem =
-                  new Dynamsoft.DCE.DrawingItem.ImageDrawingItem(
+                  new Dynamsoft.DCE.ImageDrawingItem(
                     image,
                     { x, y, width, height },
                     true
diff --git a/enhanced-features/index.html b/enhanced-features/index.html
index 2d0e0f2..0f2cbac 100644
--- a/enhanced-features/index.html
+++ b/enhanced-features/index.html
@@ -5,9 +5,9 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Dynamsoft Camera Enhancer Sample - Enhanced Features</title>
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.10/dist/core.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.0.11/dist/cvr.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.0/dist/dce.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.30/dist/core.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-license@3.0.20/dist/license.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.2/dist/dce.js"></script>
   </head>
   <body>
     <p>Tap the area you want to focus on.</p>
@@ -24,7 +24,7 @@
       /**
        * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dce&package=js to get your own trial license good for 30 days.
        * Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license.
-       * For more information, see https://www.dynamsoft.com/camera-enhancer/docs/programming/javascript/user-guide/index.html?ver=4.0.0&utm_source=github#specify-the-license or contact support@dynamsoft.com.
+       * For more information, see https://www.dynamsoft.com/camera-enhancer/docs/programming/javascript/user-guide/index.html?ver=4.0.2&utm_source=github#specify-the-license or contact support@dynamsoft.com.
        * LICENSE ALERT - THE END
        */
 
diff --git a/fetch-video-frame/index.html b/fetch-video-frame/index.html
index be7ef38..8961140 100644
--- a/fetch-video-frame/index.html
+++ b/fetch-video-frame/index.html
@@ -5,8 +5,8 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Dynamsoft Camera Enhancer Sample - Fetch Frame</title>
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.10/dist/core.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.0/dist/dce.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.30/dist/core.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.2/dist/dce.js"></script>
   </head>
   <body>
     <button id="btn-open-camera">open camera</button>
diff --git a/hello-world/angular/package.json b/hello-world/angular/package.json
index 8ebc368..42b4d15 100644
--- a/hello-world/angular/package.json
+++ b/hello-world/angular/package.json
@@ -18,7 +18,8 @@
     "@angular/platform-browser": "^15.2.0",
     "@angular/platform-browser-dynamic": "^15.2.0",
     "@angular/router": "^15.2.0",
-    "dynamsoft-camera-enhancer": "^4.0.0",
+    "dynamsoft-camera-enhancer": "^4.0.2",
+    "dynamsoft-core": "^3.0.30",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.12.0"
diff --git a/hello-world/angular/src/app/dce.ts b/hello-world/angular/src/app/dce.ts
index 521abb9..d3ada79 100644
--- a/hello-world/angular/src/app/dce.ts
+++ b/hello-world/angular/src/app/dce.ts
@@ -1,3 +1,7 @@
-import { CameraView } from 'dynamsoft-camera-enhancer';
+import { CoreModule } from 'dynamsoft-core';
 
-CameraView.engineResourcePath = 'https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.0/dist/';
\ No newline at end of file
+CoreModule.engineResourcePaths = {
+  std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.0.0/dist/",
+  core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.30/dist/",
+  dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.2/dist/"
+};
\ No newline at end of file
diff --git a/hello-world/hello-world.html b/hello-world/hello-world.html
index 464326e..f048b40 100644
--- a/hello-world/hello-world.html
+++ b/hello-world/hello-world.html
@@ -5,8 +5,8 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Dynamsoft Camera Enhancer Sample - Hello World</title>
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.10/dist/core.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.0/dist/dce.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.30/dist/core.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.2/dist/dce.js"></script>
   </head>
   <body>
     <div id="div-ui-container" style="width: 90vw; height: 90vh"></div>
diff --git a/hello-world/react/package.json b/hello-world/react/package.json
index e9c1e8e..a6420c0 100644
--- a/hello-world/react/package.json
+++ b/hello-world/react/package.json
@@ -4,7 +4,8 @@
   "private": true,
   "homepage": "./",
   "dependencies": {
-    "dynamsoft-camera-enhancer": "^4.0.0",
+    "dynamsoft-camera-enhancer": "^4.0.2",
+    "dynamsoft-core": "^3.0.30",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
diff --git a/hello-world/react/src/dce.ts b/hello-world/react/src/dce.ts
index 521abb9..d3ada79 100644
--- a/hello-world/react/src/dce.ts
+++ b/hello-world/react/src/dce.ts
@@ -1,3 +1,7 @@
-import { CameraView } from 'dynamsoft-camera-enhancer';
+import { CoreModule } from 'dynamsoft-core';
 
-CameraView.engineResourcePath = 'https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.0/dist/';
\ No newline at end of file
+CoreModule.engineResourcePaths = {
+  std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.0.0/dist/",
+  core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.30/dist/",
+  dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.2/dist/"
+};
\ No newline at end of file
diff --git a/hello-world/vue3/.gitignore b/hello-world/vue/.gitignore
similarity index 100%
rename from hello-world/vue3/.gitignore
rename to hello-world/vue/.gitignore
diff --git a/hello-world/vue3/README.md b/hello-world/vue/README.md
similarity index 100%
rename from hello-world/vue3/README.md
rename to hello-world/vue/README.md
diff --git a/hello-world/vue3/env.d.ts b/hello-world/vue/env.d.ts
similarity index 100%
rename from hello-world/vue3/env.d.ts
rename to hello-world/vue/env.d.ts
diff --git a/hello-world/vue3/index.html b/hello-world/vue/index.html
similarity index 100%
rename from hello-world/vue3/index.html
rename to hello-world/vue/index.html
diff --git a/hello-world/vue3/package.json b/hello-world/vue/package.json
similarity index 88%
rename from hello-world/vue3/package.json
rename to hello-world/vue/package.json
index 89cdafe..7c1a147 100644
--- a/hello-world/vue3/package.json
+++ b/hello-world/vue/package.json
@@ -10,7 +10,8 @@
     "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false"
   },
   "dependencies": {
-    "dynamsoft-camera-enhancer": "^4.0.0",
+    "dynamsoft-camera-enhancer": "^4.0.2",
+    "dynamsoft-core": "^3.0.30",
     "vue": "^3.3.4"
   },
   "devDependencies": {
diff --git a/hello-world/vue3/public/favicon.ico b/hello-world/vue/public/favicon.ico
similarity index 100%
rename from hello-world/vue3/public/favicon.ico
rename to hello-world/vue/public/favicon.ico
diff --git a/hello-world/vue3/src/App.vue b/hello-world/vue/src/App.vue
similarity index 100%
rename from hello-world/vue3/src/App.vue
rename to hello-world/vue/src/App.vue
diff --git a/hello-world/vue3/src/assets/base.css b/hello-world/vue/src/assets/base.css
similarity index 100%
rename from hello-world/vue3/src/assets/base.css
rename to hello-world/vue/src/assets/base.css
diff --git a/hello-world/vue3/src/assets/logo.svg b/hello-world/vue/src/assets/logo.svg
similarity index 100%
rename from hello-world/vue3/src/assets/logo.svg
rename to hello-world/vue/src/assets/logo.svg
diff --git a/hello-world/vue3/src/assets/main.css b/hello-world/vue/src/assets/main.css
similarity index 100%
rename from hello-world/vue3/src/assets/main.css
rename to hello-world/vue/src/assets/main.css
diff --git a/hello-world/vue3/src/components/CameraEnhancerComponent.vue b/hello-world/vue/src/components/CameraEnhancerComponent.vue
similarity index 100%
rename from hello-world/vue3/src/components/CameraEnhancerComponent.vue
rename to hello-world/vue/src/components/CameraEnhancerComponent.vue
diff --git a/hello-world/vue/src/dce.ts b/hello-world/vue/src/dce.ts
new file mode 100644
index 0000000..d3ada79
--- /dev/null
+++ b/hello-world/vue/src/dce.ts
@@ -0,0 +1,7 @@
+import { CoreModule } from 'dynamsoft-core';
+
+CoreModule.engineResourcePaths = {
+  std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.0.0/dist/",
+  core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.30/dist/",
+  dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.2/dist/"
+};
\ No newline at end of file
diff --git a/hello-world/vue3/src/main.ts b/hello-world/vue/src/main.ts
similarity index 100%
rename from hello-world/vue3/src/main.ts
rename to hello-world/vue/src/main.ts
diff --git a/hello-world/vue3/tsconfig.app.json b/hello-world/vue/tsconfig.app.json
similarity index 100%
rename from hello-world/vue3/tsconfig.app.json
rename to hello-world/vue/tsconfig.app.json
diff --git a/hello-world/vue3/tsconfig.json b/hello-world/vue/tsconfig.json
similarity index 100%
rename from hello-world/vue3/tsconfig.json
rename to hello-world/vue/tsconfig.json
diff --git a/hello-world/vue3/tsconfig.node.json b/hello-world/vue/tsconfig.node.json
similarity index 100%
rename from hello-world/vue3/tsconfig.node.json
rename to hello-world/vue/tsconfig.node.json
diff --git a/hello-world/vue3/vite.config.ts b/hello-world/vue/vite.config.ts
similarity index 100%
rename from hello-world/vue3/vite.config.ts
rename to hello-world/vue/vite.config.ts
diff --git a/hello-world/vue3/src/dce.ts b/hello-world/vue3/src/dce.ts
deleted file mode 100644
index 521abb9..0000000
--- a/hello-world/vue3/src/dce.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { CameraView } from 'dynamsoft-camera-enhancer';
-
-CameraView.engineResourcePath = 'https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.0/dist/';
\ No newline at end of file
