add files via upload

uzair004 · Oct 3, 2021 · 0d8d9c1 · 0d8d9c1
1 parent 42d9db8
commit 0d8d9c1
Show file tree

Hide file tree

Showing 5 changed files with 356 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Get User Media Code Along!</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+  <div class="photobooth">
+    <div class="controls">
+      <div class="filters-container">
+        <button class="photo-taker">Take Photo</button>
+        <button class="red-effect">Red Filter</button>
+        <button class="rgb-effect">Rgb Filter</button>
+
+        <div class="css-filters">
+          <button class="grayscale-effect" data-filtername="grayscale" data-filtervalue="100%">GrayScale</button>
+          <button class="blur-effect" data-filtername="blur" data-filtervalue="5px">Blur</button>
+          <button class="huerotate-effect" data-filtername="hue-rotate" data-filtervalue="180deg">Huerotate</button>
+          <button class="invert-effect" data-filtername="invert" data-filtervalue="100%">Invert</button>
+          <button class="sepia-effect" data-filtername="sepia" dana-filtervalue="100%">Sepia</button>
+          <button class="saturate-effect" data-filtername="saturate" data-filtervalue="8">Saturate</button>
+        </div>
+
+      </div>
+      <div class="rgb">
+        <button class="green-screen-effect">Green Screen</button>
+        <label for="rmin">Red Min:</label>
+        <input type="range" min=0 max=255 name="rmin">
+        <label for="rmax">Red Max:</label>
+        <input type="range" min=0 max=255 name="rmax">
+
+        <br>
+
+        <label for="gmin">Green Min:</label>
+        <input type="range" min=0 max=255 name="gmin">
+        <label for="gmax">Green Max:</label>
+        <input type="range" min=0 max=255 name="gmax">
+
+        <br>
+
+        <label for="bmin">Blue Min:</label>
+        <input type="range" min=0 max=255 name="bmin">
+        <label for="bmax">Blue Max:</label>
+        <input type="range" min=0 max=255 name="bmax">
+      </div>
+    </div>
+
+    <canvas class="photo"></canvas>
+    <video class="player"></video>
+    <div class="strip"></div>
+  </div>
+
+  <audio class="snap" src="./snap.mp3" hidden></audio>
+
+  <script src="scripts.js"></script>
+
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "gum",
+  "version": "1.0.0",
+  "description": "",
+  "main": "scripts.js",
+  "scripts": {
+    "start": "browser-sync start --server --files \"*.css, *.html, *.js\""
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "browser-sync": "^2.12.5 <2.23.2"
+  }
+}
diff --git a/scripts.js b/scripts.js
@@ -0,0 +1,196 @@
+const video = document.querySelector('.player');
+const canvas = document.querySelector('.photo');
+const ctx = canvas.getContext('2d');
+const strip = document.querySelector('.strip');
+const snap = document.querySelector('.snap');
+const captureButton = document.querySelector('.photo-taker');
+// filters buttons
+let rgbSplitFilter = document.querySelector('.rgb-effect');
+let redFilter = document.querySelector('.red-effect');
+let greenScreenFilter = document.querySelector('.green-screen-effect');
+let cssFiltersButtons = document.querySelectorAll('.css-filters button'); // all css filters buttons
+
+// get video from webcam
+function getVideo() {
+  navigator.mediaDevices.getUserMedia({video: true, audio: false})
+  .then(MediaStream => {
+    video.srcObject = MediaStream;
+    video.play();
+  })
+  .catch(err => {
+      console.error('OH Noo! ', err);
+  });
+}
+
+// draw on canvas
+function paintToCanvas() {
+    const width = video.videoWidth;
+    const height = video.videoHeight;
+    canvas.width = width;
+    canvas.height = height;
+
+    return setInterval(() => {
+        ctx.drawImage(video, 0, 0, width, height);
+
+        if(applyRed) {
+          let pixels = ctx.getImageData(0, 0, width, height);
+          pixels = redEffect(pixels);
+          ctx.putImageData(pixels, 0, 0);
+        }
+
+        if(applyRgbSplit) {
+          let pixels = ctx.getImageData(0, 0, width, height);
+          pixels = rgbSplit(pixels);
+          ctx.putImageData(pixels, 0, 0);
+        }
+
+        if(applyGreenScreen) {
+          let pixels = ctx.getImageData(0, 0, width, height);
+          pixels =  greenScreen(pixels);
+          ctx.putImageData(pixels, 0, 0);
+        }
+
+        if(applyCssFilter) {
+          canvas.style.filter = `${cssFilterTarget.dataset.filtername}(${cssFilterTarget.dataset.filtervalue})`;
+        } else {
+          canvas.style.filter = '';
+        }
+
+      }, 16);
+}
+
+function takePhoto() {
+    // playing snapshot sound
+    snap.currentTime = 0;
+    snap.play();
+
+    // taking snapshot & put image in strip below video
+    const data = canvas.toDataURL('image/jpeg');
+    const link = document.createElement('a');
+    //below two lines of code is outdated, can't access base64 data directly anymore
+    // suppose to download image, chk canvas.toBlob() given below
+    // link.href = data;
+    // link.setAttribute('downlaod', 'handsome');
+    link.innerHTML = `<img src="${data}" alt="Handsome Man" />`;
+    strip.insertAdjacentElement('afterbegin', link);
+
+    // show image in new tab
+
+    // debugBase64(data);
+
+    // function debugBase64(base64URL){
+    //     var win = window.open();
+    //     var iframe = '<iframe src="' + base64URL  + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>';
+    //     win.document.write(iframe);
+    // }
+
+    // prompt to download image when clicked
+    link.addEventListener('click', () => {
+      canvas.toBlob(
+        blob => {
+          const anchor = document.createElement('a');
+          anchor.download = 'my-file-name.jpg'; 
+          anchor.href = URL.createObjectURL(blob);
+
+          anchor.click(); // ✨ magic!
+
+          URL.revokeObjectURL(anchor.href); // remove it from memory and save on memory! 😎
+        },
+        'image/jpeg',
+        0.9,
+      );
+    })
+
+}
+
+// custom filters
+function redEffect(pixels) {
+  for (let i = 0; i < pixels.data.length; i+=4) {
+    pixels.data[i + 0] = pixels.data[i + 0] + 100; //red
+    pixels.data[i + 1] = pixels.data[i + 1] - 50; //green
+    pixels.data[i + 2] = pixels.data[i + 2] * 0.5; //blue
+  }
+  return pixels;
+}
+
+
+function rgbSplit(pixels) {
+  for (let i = 0; i < pixels.data.length; i+=4) {
+    pixels.data[i - 150] = pixels.data[i + 0];
+    pixels.data[i + 500] = pixels.data[i + 1];
+    pixels.data[i - 550] = pixels.data[i + 2];
+  }
+  return pixels;
+}
+
+
+function greenScreen(pixels) {
+  let levels = {};
+
+  document.querySelectorAll('.rgb input').forEach(input => {
+    levels[input.name] = input.value;
+  });
+
+  for (let i = 0; i < pixels.data.length; i+=4) {
+    red = pixels.data[i + 0];
+    green = pixels.data[i + 1];
+    blue = pixels.data[i + 2];
+    alpha = pixels.data[i + 3];
+
+    if(red >= levels.rmin
+      && green >= levels.gmin
+      && blue >= levels.bmin
+      && red <= levels.rmax
+      && green <= levels.gmax
+      && blue <= levels.bmax) {
+
+        pixels.data[i + 3] = 0;
+      }
+
+  }
+  return pixels;
+}
+
+
+getVideo();
+
+video.addEventListener('canplay', paintToCanvas);
+captureButton.addEventListener('click', takePhoto);
+
+let applyRgbSplit = false;
+let applyRed = false;
+let applyGreenScreen = false;
+let applyCssFilter = false;
+let cssFilterTarget;
+
+redFilter.addEventListener('click', () => {
+  applyRed = !applyRed;
+  applyRgbSplit = false;
+  console.log(applyRed)
+});
+
+rgbSplitFilter.addEventListener('click', () => {
+  applyRgbSplit = !applyRgbSplit;
+  applyRed = false;
+  console.log(applyRgbSplit)
+});
+
+greenScreenFilter.addEventListener('click', () => {
+  applyGreenScreen = !applyGreenScreen;
+  applyRed = false;
+  applyRgbSplit = false;
+  console.log(applyGreenScreen)
+});
+
+// css filters events
+cssFiltersButtons.forEach(button => {
+  button.addEventListener('click', (event) => {
+    applyCssFilter = !applyCssFilter;
+    applyGreenScreen = false;
+    applyRed = false;
+    applyRgbSplit = false;
+    cssFilterTarget = event.target;
+    console.log(applyCssFilter)
+  })
+});
+
diff --git a/snap.mp3 b/snap.mp3
diff --git a/style.css b/style.css
@@ -0,0 +1,86 @@
+html {
+  box-sizing: border-box;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+html {
+  font-size: 10px;
+  background: #ffc600;
+}
+
+.photobooth {
+  background: white;
+  max-width: 150rem;
+  margin: 2rem auto;
+  border-radius: 2px;
+}
+
+/*clearfix*/
+.photobooth:after {
+  content: '';
+  display: block;
+  clear: both;
+}
+
+.photo {
+  width: 100%;
+  float: left;
+}
+
+.player {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  width:200px;
+}
+
+/*
+  Strip!
+*/
+
+.strip {
+  padding: 2rem;
+}
+
+.strip img {
+  width: 100px;
+  overflow-x: scroll;
+  padding: 0.8rem 0.8rem 2.5rem 0.8rem;
+  box-shadow: 0 0 3px rgba(0,0,0,0.2);
+  background: white;
+}
+
+.strip a:nth-child(5n+1) img { transform: rotate(10deg); }
+.strip a:nth-child(5n+2) img { transform: rotate(-2deg); }
+.strip a:nth-child(5n+3) img { transform: rotate(8deg); }
+.strip a:nth-child(5n+4) img { transform: rotate(-11deg); }
+.strip a:nth-child(5n+5) img { transform: rotate(12deg); }
+
+.filters-container {
+  width: 75%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: left;
+  align-items: left;
+}
+
+.css-filters {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: left;
+  align-items: left;
+  z-index: 9999;
+}
+
+.rgb {
+  max-width: 75%;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+