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("precanvas").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
    // [encore plus tard...] c'est "ai-je", pas "a-moi" - j'étais bête!
  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 helvetica = await pdfDoc.embedFont(PDFLib.StandardFonts.Helvetica);
        const helveticaBold = await pdfDoc.embedFont(PDFLib.StandardFonts.HelveticaBold);
        const page = pdfDoc.addPage([1440, 960]);
	page.setFont(helveticaBold)
        page.moveTo(0, 960 - 96);
        page.drawText(document.getElementById("title").value, { size : 85, font: helveticaBold });
        page.moveTo(0, 960 - 152);
        let datestring = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"][new Date().getMonth()] + " " + new Date().getDate()
                          + ", " + new Date().getUTCFullYear() + " at " + new Date().toLocaleTimeString();
        page.drawText(datestring, { 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, color: PDFLib.rgb(0, 0.5, 1) });
        page.moveTo(0, 960 - 308);
        page.drawText(document.getElementById("notes").value, { size : 48 });

        let static = await maps_static(lat, long);
        let embeddedMap = await pdfDoc.embedPng(static);
        let dimsMap = embeddedMap.scale(1);
        let image = document.getElementById("precanvas");
        let static2 = await fetch(image.toDataURL('image/png')).then(res => res.arrayBuffer());
        let embeddedPicture = await pdfDoc.embedPng(static2);
        let dimsPicture = embeddedPicture.scale(1);

	let mapAspect = dimsMap.width / dimsMap.height;
	let picAspect = dimsPicture.width / dimsPicture.height;
	let mapRatio = mapAspect / (mapAspect + picAspect); // the proportion of the width filled by the map
        let picRatio = 1 - mapRatio;

	const fullWidth = 1440;
	let mapWidth = mapRatio * fullWidth;
	let picWidth = picRatio * fullWidth;

	let combinedHeight = mapWidth / mapAspect;

        page.drawImage(embeddedMap, {
          x: fullWidth - mapWidth,
          y: 960 - 320 - combinedHeight,
          width : mapWidth,
          height : combinedHeight
        });
        page.drawImage(embeddedPicture, {
          x: 0,
          y: 960 - 320 - combinedHeight,
          width : picWidth,
          height : combinedHeight
        });
        //ctx.drawImage(image, 0, 320, 720, image.height / image.width * 720);
        const dataURI = await pdfDoc.saveAsBase64({ dataUri: true });
        iframe.src = dataURI + "#toolbar=0&navpanes=0";
      })()
    },
    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();
}