feat download data

CybTekk-LLP · Jun 12, 2024 · 7bd6221 · 7bd6221
1 parent 23e1c2d
commit 7bd6221
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 35 deletions.
diff --git a/js/photo-capture-and-save.mjs b/js/photo-capture-and-save.mjs
@@ -1,9 +1,10 @@
 export const capturePhoto = () => {
   const photoButton = document.querySelector(".capture-button");
   photoButton.addEventListener("click", () => {
-
-    const isVideoMode = document.querySelector(
-      ".switch-camera-video-photo-mode input[type='radio'][name='modes']:checked").value === "video-mode"
+    const isVideoMode =
+      document.querySelector(
+        ".switch-camera-video-photo-mode input[type='radio'][name='modes']:checked"
+      ).value === "video-mode";
     if (isVideoMode) return;
     const facingModeButton = document.querySelector(
       ".switch-camera-facing-mode"
@@ -12,21 +13,24 @@ export const capturePhoto = () => {
     setTimeout(() => {
       photoButton.classList.remove("click");
     }, 500);
-    const isDualMode = document.querySelector(
-      ".switch-camera-video-photo-mode input[type='radio'][name='modes']:checked").value === "dual-mode"
+    const isDualMode =
+      document.querySelector(
+        ".switch-camera-video-photo-mode input[type='radio'][name='modes']:checked"
+      ).value === "dual-mode";
     if (isDualMode) {
       setTimeout(() => {
-        document.querySelector(".switch-camera-facing-mode").click()
+        document.querySelector(".switch-camera-facing-mode").click();
         setTimeout(() => {
-          drawOnCanvasAndSavePhoto(facingModeButton.dataset.facingMode === "front");
-        }, 800)
-      }, 1000)
+          drawOnCanvasAndSavePhoto(
+            facingModeButton.dataset.facingMode === "front"
+          );
+        }, 800);
+      }, 1000);
     }
     drawOnCanvasAndSavePhoto(facingModeButton.dataset.facingMode === "front");
   });
 };
 
-
 let dualPreview = false;
 
 const drawOnCanvasAndSavePhoto = async (isMirrored = false) => {
@@ -58,31 +62,28 @@ const drawOnCanvasAndSavePhoto = async (isMirrored = false) => {
   }, 200);
   context.drawImage(video, 0, 0, canvas.width, canvas.height);
 
-
   try {
     const imageDataUrl = canvas.toDataURL("image/png", 0.9);
     const link = document.createElement("a");
     const timestamp = new Date().toISOString().replace(/[:.]/g, "");
     link.href = imageDataUrl;
     link.download = `photo_${timestamp}.png`;
-    // link.click();
+    link.click();
 
-    const isDualMode = document.querySelector(
-      ".switch-camera-video-photo-mode input[type='radio'][name='modes']:checked").value === "dual-mode"
-    document.querySelector(".preview")?.classList?.remove("video")
-    if (!isDualMode)
-      document.querySelector(".preview").src = imageDataUrl;
+    const isDualMode =
+      document.querySelector(
+        ".switch-camera-video-photo-mode input[type='radio'][name='modes']:checked"
+      ).value === "dual-mode";
+    document.querySelector(".preview")?.classList?.remove("video");
+    if (!isDualMode) document.querySelector(".preview").src = imageDataUrl;
     if (isDualMode) {
       dualPreview = !dualPreview;
       if (!dualPreview)
         document.querySelector(".preview-dual").src = imageDataUrl;
-      if (dualPreview)
-        document.querySelector(".preview").src = imageDataUrl;
+      if (dualPreview) document.querySelector(".preview").src = imageDataUrl;
+    } else {
+      document.querySelector(".preview-dual").src = "./assets/rect-dual.svg";
     }
-    else {
-      document.querySelector(".preview-dual").src = "./assets/rect-dual.svg"
-    }
-
   } catch (error) {
     console.error("Error capturing photo:", error);
   }

diff --git a/js/video-capture-and-save.mjs b/js/video-capture-and-save.mjs
@@ -7,8 +7,10 @@ const recordingIndicator = document.createElement("div");
 export const captureVideo = () => {
   const videoButton = document.querySelector(".capture-button");
   videoButton.addEventListener("click", () => {
-    const isVideoMode = document.querySelector(
-      ".switch-camera-video-photo-mode input[type='radio'][name='modes']:checked").value === "video-mode"
+    const isVideoMode =
+      document.querySelector(
+        ".switch-camera-video-photo-mode input[type='radio'][name='modes']:checked"
+      ).value === "video-mode";
     if (!isVideoMode) return;
     const facingModeButton = document.querySelector(
       ".switch-camera-facing-mode"
@@ -19,12 +21,14 @@ export const captureVideo = () => {
 const modes = document.querySelectorAll(
   ".switch-camera-video-photo-mode input[type='radio']"
 );
-modes.forEach(mode => mode.addEventListener("change", () => {
-  if (mediaRecorder && mediaRecorder.state === "recording") {
-    mediaRecorder.stop();
-    clearInterval(timerInterval);
-  }
-}));
+modes.forEach((mode) =>
+  mode.addEventListener("change", () => {
+    if (mediaRecorder && mediaRecorder.state === "recording") {
+      mediaRecorder.stop();
+      clearInterval(timerInterval);
+    }
+  })
+);
 
 const recordVideo = async (facingModeButton) => {
   const video = document.getElementById("stream");
@@ -58,7 +62,6 @@ const recordVideo = async (facingModeButton) => {
       clearInterval(timerInterval);
     };
 
-
     facingModeButton.addEventListener("click", () => {
       if (mediaRecorder && mediaRecorder.state === "recording") {
         mediaRecorder.stop();
@@ -83,10 +86,10 @@ const saveRecordedVideo = () => {
   const link = document.createElement("a");
   link.href = videoUrl;
   link.download = filename;
-  // link.click();
+  link.click();
   document.querySelector(".preview").src = videoUrl;
-  document.querySelector(".preview").classList.add("video")
-  document.querySelector(".preview-dual").src = "./assets/rect-dual.svg"
+  document.querySelector(".preview").classList.add("video");
+  document.querySelector(".preview-dual").src = "./assets/rect-dual.svg";
   chunks = [];
 };