feat: use webcam to take picture

1 files changed, 39 insertions, 4 deletions

diff --git a/main.js b/main.js
index 0960448..378e716 100644
--- a/main.js
+++ b/main.js
@@ -1,4 +1,5 @@
 let canvas;
+let video;
 let ctx;
 let settings = {
   brightness: {},
@@ -12,10 +13,12 @@ const img = new Image();
 document.addEventListener("DOMContentLoaded", function() {
   canvas = document.getElementById("myCanvas");
   ctx = canvas.getContext("2d");
-  document.getElementById("back").addEventListener("click", () => document.body.classList.remove("editor-enabled"));
+  video = document.getElementById("video");
+  document.getElementById("back").addEventListener("click", () => document.body.className = "import-active");
 
   // bind listeners
-  document.getElementById("take-picture").addEventListener("click", take_picture);
+  document.getElementById("take-picture").addEventListener("click", use_camera);
+  document.getElementById("cheese").addEventListener("click", take_picture);
   document.getElementById("upload-image").addEventListener("change", upload_image)
 
   document.getElementById("save").addEventListener("click", save_image)
@@ -23,6 +26,20 @@ document.addEventListener("DOMContentLoaded", function() {
 
   window.addEventListener("resize", () => draw(true))
 
+  video.addEventListener("canplay", function() {
+    const width = 320;
+    let height = video.videoHeight / (video.videoWidth / width);
+
+    // Firefox currently has a bug where the height can't be read from
+    // the video, so we will make assumptions if this happens.
+
+      if (isNaN(height)) {
+        height = width / (4 / 3);
+      }
+    video.width = width;
+    video.height = height;
+  });
+
   for (let setting in settings) {
     // make an array out of an iterable
     const elements = [...document.getElementsByClassName(setting)];
@@ -48,13 +65,31 @@ function reset_all(setting) {
   draw(true);
 }
 
+function use_camera() {
+  navigator.mediaDevices
+    .getUserMedia({ video: true, audio: false })
+    .then((stream) => {
+      video.srcObject = stream;
+      video.play();
+      document.body.className = "camera-active";
+    })
+    .catch((err) => {
+      console.error(`An error occurred: ${err}`);
+    });
+}
+
 function take_picture() {
-  document.body.classList.add("editor-enabled");
+  canvas.width = video.width;
+  canvas.height = video.height;
+  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+  img.src = canvas.toDataURL("image/png");
+  img.onload = () => draw(true);
 
+  document.body.className = "editor-active";
 }
 
 function upload_image() {
-  document.body.classList.add("editor-enabled");
+  document.body.className = "editor-active";
 
   console.log(this.files[0]);