script.js

// import { Image } from "image-js"

const canvas = document.querySelector("canvas"),
  ctx = canvas.getContext("2d"),
  fileChooser = document.querySelector(".file-chooser"),
  gsButton = document.querySelector(".green-screen"),
  photobooth = document.querySelector(".photobooth"),
  reset = document.querySelector(".reset-green-screen"),
  // snap = document.querySelector(".snap"),
  strip = document.querySelector(".strip"),
  video = document.querySelector("video");

function getVideo() {
  navigator.mediaDevices
    .getUserMedia({ video: true, audio: false })
    .then((localMediaStream) => {
      video.srcObject = localMediaStream;
      video.play();
    })
    .catch((err) => console.error(err));
}

function paintToCanvas() {
  const width = video.videoWidth,
    height = video.videoHeight;
  canvas.width = width;
  canvas.height = height;

  return setInterval(() => {
    ctx.drawImage(video, 0, 0, canvas.offsetWidth, canvas.offsetHeight);
    let pixels = ctx.getImageData(
      0,
      0,
      canvas.offsetWidth,
      canvas.offsetHeight
    );
    ctx.putImageData(pixels, 0, 0);
  }, 16);
}

async function takePhoto() {
  const data = canvas.toDataURL("image/jpeg");
  let image = await IJS.Image.load(document.getElementById("colorImage").src);
  let grey = image.grey();
  let rotate = image.rotate(30);
  let resize = image.resize({ width: 200 });
  let luma709Algo = image.grey({algorithm:'luma709'})
  let cyanAlgo = image.grey({algorithm:'cyan'})
  document.getElementById("greyImage").src = grey.toDataURL();
  document.getElementById("rotateImage").src = rotate.toDataURL();
  document.getElementById("resizeImage").src = resize.toDataURL();
  document.getElementById("luma709Algo").src = luma709Algo.toDataURL();
  document.getElementById("cyanAlgo").src = cyanAlgo.toDataURL();
  link = document.createElement("a");
  link.href = data;
  link.setAttribute("download", "image");
  link.innerHTML = `<img src="${data}" alt="Downloaded photo" />`;
  strip.insertBefore(link, strip.firstChild);
}

function selectFile() {
  const file = this.files[0];
  const fileUrl = URL.createObjectURL(file);
  canvas.style.backgroundImage = `url(${fileUrl})`;
}

getVideo();

fileChooser.addEventListener("change", selectFile);
video.addEventListener("canplay", paintToCanvas);