diff --git a/js/photo-capture-and-save.mjs b/js/photo-capture-and-save.mjs index 0ac86ea..03f1675 100644 --- 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 index 7f78a0f..ea9012b 100644 --- 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 = []; };