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