Visitor sign in kiosk: multi-site, badge printing, WWCC expiry warnings, admin accounts with 2FA

public/js/admin.js

@@ -396,11 +396,15 @@ function wirePhotoEditor() {
   });
 
   $('#photo-shoot').addEventListener('click', () => {
+    // Square, cropped from the centre, to match the kiosk camera and the badge.
+    const side = Math.min(video.videoWidth, video.videoHeight);
+    if (!side) return toast('The camera is not ready yet. Try again in a moment.', true);
     const canvas = document.createElement('canvas');
-    const width = 720;
-    canvas.width = width;
-    canvas.height = Math.round((video.videoHeight / video.videoWidth) * width) || 540;
-    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
+    canvas.width = 640;
+    canvas.height = 640;
+    canvas
+      .getContext('2d')
+      .drawImage(video, (video.videoWidth - side) / 2, (video.videoHeight - side) / 2, side, side, 0, 0, 640, 640);
     photoEditor.dataUrl = canvas.toDataURL('image/jpeg', 0.72);
     photoEditor.remove = false;
     stopPhotoCamera();

public/js/kiosk.js

@@ -258,15 +258,24 @@ function stopCamera() {
   $('#cam-video').srcObject = null;
 }
 
+const PHOTO_SIZE = 640;
+
+/**
+ * Takes a square photo, cropped from the centre of whatever shape the camera
+ * gives us. The preview frame, the saved file and the space on the badge are all
+ * square, so nothing is stretched and what the visitor sees is what prints.
+ */
 function capture() {
   const video = $('#cam-video');
   const canvas = $('#cam-canvas');
-  const width = 720;
-  const height = Math.round((video.videoHeight / video.videoWidth) * width) || 540;
-  canvas.width = width;
-  canvas.height = height;
-  const ctx = canvas.getContext('2d');
-  ctx.drawImage(video, 0, 0, width, height);
+  const side = Math.min(video.videoWidth, video.videoHeight);
+  if (!side) return say('The camera is not ready yet. Try again in a moment.');
+
+  const sx = (video.videoWidth - side) / 2;
+  const sy = (video.videoHeight - side) / 2;
+  canvas.width = PHOTO_SIZE;
+  canvas.height = PHOTO_SIZE;
+  canvas.getContext('2d').drawImage(video, sx, sy, side, side, 0, 0, PHOTO_SIZE, PHOTO_SIZE);
   state.photo = canvas.toDataURL('image/jpeg', 0.72);
 
   const shot = $('#cam-shot');