clarkeis.com/site/camera-info/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)
    // [un peu plus tard] pourquoi a-moi apprendré le français? c'est horrible
  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() {
      (async () => {
        let iframe = document.getElementById("final");
        const pdfDoc = await PDFLib.PDFDocument.create();
        const page = pdfDoc.addPage([1440, 960]);
        page.moveTo(0, 960 - 96);
        page.drawText(document.getElementById("title").value, { size : 96 });
        page.moveTo(0, 960 - 152);
        page.drawText(new Date().toLocaleString(), { size : 48});
        let lat = document.getElementById("lat").value;
        let long = document.getElementById("long").value;
        let res = await reverse_geocode(lat, long);
        page.moveTo(0, 960 - 208);
        page.drawText(res, { size : 48 });
        page.moveTo(0, 960 - 256);
        page.drawText("https://maps.google.com/maps?q=" + lat + "," + long, { size : 48 });
        page.moveTo(0, 960 - 308);
        page.drawText("Notes: " + document.getElementById("notes").value, { size : 48 });
        let static = await maps_static(lat, long);
        let embeddedImage = await pdfDoc.embedPng(static);
        let dims = embeddedImage.scale(1);
        page.drawImage(embeddedImage, {
          x: 365 * 2,
          y: 960 - 320 - dims.height,
          width : dims.width,
          height : dims.height
        });
        let image = document.getElementById("precanvas");
        let static2 = await fetch(image.toDataURL('image/png')).then(res => res.arrayBuffer());
        let embeddedImage2 = await pdfDoc.embedPng(static2);
        let dims2 = embeddedImage2.scale(1);
        page.drawImage(embeddedImage2, {
          x: 0,
          y: 960 - 320 - dims2.height / dims2.width * 720,
          width : 720,
          height : dims2.height / dims2.width * 720
        });
        //ctx.drawImage(image, 0, 320, 720, image.height / image.width * 720);
        const dataURI = await pdfDoc.saveAsBase64({ dataUri: true });
        iframe.src = dataURI;
      })()
    },
    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;
}


async function maps_static(lat, long) {
  return await fetch("https://maps.googleapis.com/maps/api/staticmap?size=710x600&key=AIzaSyD_zbdxwN7_aOMNH69eAL9bSS814Ix-UM8&markers=label:S%7C" + lat + "," + long).then((res) => res.arrayBuffer());
}


function getFilename() {
  var title = "camera-info-";
  for (char of document.getElementById("title").value) {
    let cc = char.charCodeAt(0);
    if ((cc > 47 && cc < 58) || (cc > 64 && cc < 91) || (cc > 96 && cc < 123)) {
      title += char.toLowerCase();
    }
    else {
      title += '-';
    }
  }
  return title + ".pdf";
}


function download() {
  let canvas = document.getElementById("final");
  let anchor = document.createElement("a");
  anchor.href = canvas.src;
  anchor.download = getFilename();
  anchor.click();
}