added screenshot and video capture buttons and capabilities

cavemutt · Jun 24, 2023 · 152cac6 · 152cac6
1 parent 80ac86b
commit 152cac6
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -4,8 +4,9 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link rel="icon" type="image/png" href="./assets/jcacmLogo400.png">
-        <link rel="stylesheet" href="style.css">
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js" defer></script>
         <script src="script.js" defer></script>
+        <link rel="stylesheet" href="style.css">
         <title>Sine Waves</title>
     </head>
     <body>
@@ -21,6 +22,10 @@ <h1>Surf some Sine Waves</h1>
                 <h2 class="menu" data-dynamics>Wave Dynamics</h2>
                 <h2 class="menu" data-color>Wave Color</h2>
             </div>
+            <div class="capture-btns">
+                <button id="capture">Screenshot</button>
+                <button id="video">Video</button>
+            </div>
         </header>
         <section class="slider-section">
             <div class="wave-sliders slider-container">

diff --git a/script.js b/script.js
@@ -7,6 +7,8 @@ const sliders = document.querySelectorAll('input[type="range"]')
 const menus = document.querySelectorAll('.menu')
 const waveSliders = document.querySelector('.wave-sliders')
 const colorSliders = document.querySelector('.wave-color-sliders')
+const captureBtn = document.querySelector('#capture')
+const videoBtn = document.querySelector('#video')
 let shaper = 0;
 let increment = 0.01;
 
@@ -39,6 +41,59 @@ const fillStyle = {
     a: 0.1
 }
 
+
+// take screenshot
+captureBtn.addEventListener('click', () => {
+    try {
+        html2canvas(canvas).then(function(canvas) {
+            document.body.appendChild(canvas);
+            const url = canvas.toDataURL('image/png')
+            const a = document.createElement('a')
+            a.setAttribute('download', 'imageName.png')
+            a.setAttribute('href', url)
+            a.click()
+        })
+    } catch (err) {
+        alert('Error taking screenshot :' + err)
+    }
+});
+
+// take video 
+videoBtn.addEventListener('click', () => {
+    startCapture()
+})
+
+async function startCapture() {
+    let captureStream = null
+    try {
+        captureStream = await navigator.mediaDevices.getDisplayMedia();
+    } catch (err) {
+        console.error(`Capture error : ${err}`)
+    }
+    const data = []
+    const mediaRecorder = new MediaRecorder(captureStream)
+
+    mediaRecorder.ondataavailable = (e) => {
+        data.push(e.data)
+        console.log(e.data)
+    }
+    mediaRecorder.start()
+    setTimeout(() => {
+        mediaRecorder.stop()
+    }, 10000)
+    mediaRecorder.onstop = (e) => {
+        const url = URL.createObjectURL(
+            new Blob(data)
+        )
+        const a = document.createElement('a')
+        a.setAttribute('download', 'SineWaves.mp4')
+        a.setAttribute('href', url)
+        a.click()
+    }
+    console.log(captureStream)
+    return captureStream
+}
+
 menus.forEach(menu => {
     menu.addEventListener("click", (e) => {
         if('dynamics' in e.target.dataset) {
@@ -121,4 +176,3 @@ const animate = () => {
 
 animate()
 
-
diff --git a/style.css b/style.css
@@ -6,6 +6,10 @@
     padding: 0;
 }
 
+html {
+    overflow: hidden;
+}
+
 body {
     margin: 0;
 }
@@ -25,7 +29,7 @@ header {
 .logo {
     display: grid;
     place-items: center;
-    background: rgb(255 255 255 / 0.3);
+    background: rgb(255 255 255 / 0.4);
     padding: 0.1em 0.3em;
     border-radius:51%49%50%50%/84%84%16%16%;
     -webkit-border-radius:51%49%50%50%/84%84%16%16%;
@@ -42,26 +46,26 @@ header {
 .logo p {
     font-size: 0.4rem;
     opacity: 0.7;
-    /* cursor: default; */
 }
 
 h1 {
+    padding-inline: 0.5rem;
     font-size: 1.2rem;
     opacity: 0.9;
     cursor: default;
     letter-spacing: 0.1rem;
-    border-bottom: 2px solid rgb(255 255 255 / 0.5);
-    border-top: 2px solid rgb(255 255 255 / 0.3);
+    border-bottom: 2px solid rgba(129, 182, 243, 0.5);
+    border-top: 2px solid rgba(129, 182, 243, 0.3);
     border-radius:50%50%50%50%/67%67%33%33%;
     -webkit-border-radius:50%50%50%50%/67%67%33%33%;
     -moz-border-radius:50%50%50%50%/67%67%33%33%;
     -ms-border-radius:50%50%50%50%/67%67%33%33%;
     -o-border-radius:50%50%50%50%/67%67%33%33%;
-
+    box-shadow: inset 0 0 0.5rem 0.01rem rgb(255 255 255 / 0.1);
 }
 
 .expander {
-    width: 60%;
+    width: 35%;
     display: flex;
     justify-content: space-around;
     align-items: center;
@@ -73,13 +77,14 @@ h2 {
     font-weight: 500;
     opacity: 0.9;
     cursor: pointer;
-    background: radial-gradient(transparent 50%, rgb(255 255 255 / 0.6));
+    background: radial-gradient(transparent 50%, rgb(255 255 255 / 0.3));
     transition: 150ms ease;
     -webkit-transition: 150ms ease;
     -moz-transition: 150ms ease;
     -ms-transition: 150ms ease;
     -o-transition: 150ms ease;
-    border: 1px solid #6f6e6e;
+    border-top: 1px solid rgba(129, 182, 243, 0.5);
+    border-bottom: 1px solid rgba(129, 182, 243, 0.5);
     padding: 0.3rem 0.9rem;
     border-radius:50%50%50%50%/67%67%33%33%;
     -webkit-border-radius:50%50%50%50%/67%67%33%33%;
@@ -103,6 +108,31 @@ h2.open {
     -ms-border-radius: 0.8rem 0.8rem 0 0;
     -o-border-radius: 0.8rem 0.8rem 0 0;
 }
+.capture-btns {
+    display: flex;
+    gap: 1em;
+    padding-inline-end: 1em; 
+}
+
+button {
+    text-transform: uppercase;
+    background: none;
+    font-size: 0.5rem;
+    cursor: pointer;
+    padding: 0.3rem 0.5rem;
+    color: inherit;
+    font-weight: 600;
+    font-family: 'Poppins', sans-serif;
+    border-left: 0;
+    border-right: 0;
+    border-bottom: 2px solid rgba(129, 182, 243, 0.5);
+    border-top: 2px solid rgba(129, 182, 243, 0.3);
+    border-radius:50%50%50%50%/67%67%33%33%;
+    -webkit-border-radius:50%50%50%50%/67%67%33%33%;
+    -moz-border-radius:50%50%50%50%/67%67%33%33%;
+    -ms-border-radius:50%50%50%50%/67%67%33%33%;
+    -o-border-radius:50%50%50%50%/67%67%33%33%;
+}
 
 .slider-section {
     position: relative;