skull reaction

site/camera-info/main.js

@@ -0,0 +1,143 @@
+function frame(e) {
+  for (let el of document.querySelectorAll("body > div")) {
+    if (el.style.display != "none") {
+      el.style.display = "none";
+      window.app[el.id].exit();
+    }
+  }
+  document.getElementById(e).style.display = "";
+  window.app[e].enter();
+}
+
+let canvas = document.getElementById("precanvas");
+let ctx = canvas.getContext("2d");
+let video = document.getElementById("magic_video");
+
+function takepicture() {
+  let box = video.getBoundingClientRect();
+  video.classList.add("unbounded");
+  document.getElementById("endcamera").style.display = "";
+  ctx.canvas.classList.remove("offscreen");
+  document.getElementById("camview").classList.add("took")
+    // si c'est portrait, nous doivons le tourner à landscape (parce que le canvas ont besoin d'un photo landscape pour marcher bien)
+  if (box.height > box.width) {
+    canvas.width = box.height;
+    canvas.height = box.width;
+    ctx.translate(box.width/2, box.height/2);
+    ctx.rotate(Math.PI / 2);
+    ctx.drawImage(video, -box.width/2, -box.height/2, box.width, box.height);
+    ctx.rotate(-Math.PI / 2);
+    ctx.translate(-box.width/2, -box.height/2);
+  }
+  else {
+    canvas.width = box.width;
+    canvas.height = box.height;
+    ctx.drawImage(video, 0, 0, box.width, box.height);
+  }
+  video.classList.remove("unbounded");
+}
+
+function setdetails() {
+  frame("details");
+}
+
+
+if ("geolocation" in navigator) {
+  document.getElementById("here").style.display = "";
+}
+
+function populateLocation() {
+  navigator.geolocation.getCurrentPosition(pos => {
+    document.getElementById("long").value = pos.coords.longitude;
+    document.getElementById("lat").value = pos.coords.latitude;
+  });
+}
+
+function render() {
+  frame("finalresult");
+}
+
+window.app = {
+  "home": {
+    enter() {
+      let preview = document.getElementById("preview");
+      navigator.mediaDevices.getUserMedia({ video: {
+        facingMode: { ideal: "environment" }
+      }, audio : false }).then((stream) => {
+        video.srcObject = stream;
+        video.play();
+        preview.srcObject = stream;
+        preview.play();
+        window.app.stream = stream;
+      });
+    },
+    exit() {
+      window.app.stream.getTracks().forEach(track => {
+        track.stop();
+      });
+    }
+  },
+  "details": {
+    enter() {
+    },
+    exit() {
+      
+    }
+  },
+  "finalresult": {
+    enter() {
+      let canvas = document.getElementById("final");
+      let ctx = canvas.getContext("2d");
+      ctx.font = "bold 48px sans-serif";
+      ctx.filLStyle = "black";
+      ctx.fillText(document.getElementById("title").value, 0, 48);
+      ctx.font = "bold 24px sans-serif";
+      ctx.fillText(new Date().toLocaleString(), 0, 76);
+      let lat = document.getElementById("lat").value;
+      let long = document.getElementById("long").value;
+      reverse_geocode(lat, long).then(res => {
+        ctx.fillText(res, 0, 104);
+      });
+      ctx.fillText("https://maps.google.com/maps?q=" + lat + "," + long, 0, 128);
+      ctx.fillText("Notes: " + document.getElementById("notes").value, 0, 154);
+      let image = document.getElementById("precanvas");
+      ctx.drawImage(image, 0, 160, 720 * 1/2, image.height / image.width * 720 * 1/2);
+      maps_static(lat, long, img => {
+        ctx.drawImage(img, 365, 160);
+      });
+    },
+    exit() {
+      
+    }
+  }
+}
+
+frame("home");
+
+
+async function reverse_geocode(lat, long) {
+  let res = await fetch("https://maps.googleapis.com/maps/api/geocode/json?zoom=6&latlng=" + lat + "," + long + "&key=AIzaSyD_zbdxwN7_aOMNH69eAL9bSS814Ix-UM8");
+  let json = await res.json();
+  return json.results[0].formatted_address;
+}
+
+
+function maps_static(lat, long, cbk) {
+  let img = document.createElement("img");
+  document.body.appendChild(img);
+  img.classList.add("offscreen");
+  img.src = "https://maps.googleapis.com/maps/api/staticmap?size=355x300&key=AIzaSyD_zbdxwN7_aOMNH69eAL9bSS814Ix-UM8&markers=label:S%7C" + lat + "," + long;
+  img.crossOrigin = "anonymous";
+  img.onload = () => {
+    cbk(img);
+  };
+}
+
+
+function download() {
+  let canvas = document.getElementById("final");
+  let anchor = document.createElement("a");
+  anchor.href = canvas.toDataURL();
+  anchor.download = "file.png";
+  anchor.click();
+}