clarkeis.com/frog-realestate-pwa/main.js

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();
}