Save captured image

components/global.js

@@ -25,6 +25,7 @@ export const thisExperimentInfo = {
 
   EasyEyesID: undefined,
   PavloviaSessionID: undefined,
+  actualPavloviaSessionID: undefined, // The real UUID from Pavlovia's server
 
   ProlificParticipantID: undefined,
   ProlificSessionID: undefined,

components/save-snapshots/boxIntegration.js

@@ -0,0 +1,40 @@
+import { captureError } from "../../../source/sentry";
+
+export const saveSnapshot = async (image, experimentID, participantID) => {
+  try {
+    const response = await fetch(getBoxApiUrl(), {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        image,
+        experimentID,
+        participantID,
+      }),
+    });
+
+    if (!response.ok) {
+      const err = await response
+        .json()
+        .catch(() => ({ error: response.statusText }));
+      const errorMessage = `Box upload failed: ${err.error} (Status: ${response.status})`;
+      captureError(new Error(errorMessage), "Snapshot upload error");
+      return null;
+    }
+
+    return await response.json();
+  } catch (err) {
+    captureError(err, "Snapshot upload error")
+    return null;
+  }
+};
+
+const getBaseUrl = () => {
+  const urlParams = new URLSearchParams(window.location.search);
+  const previewDeployBase = urlParams.get("preview-deploy");
+
+  if (previewDeployBase) return previewDeployBase;
+  if (window.location.hostname === "localhost") return "http://localhost:8888";
+  return "https://easyeyes.app";
+};
+
+const getBoxApiUrl = () => getBaseUrl() + "/.netlify/functions/box-api";

components/save-snapshots/capturedVideoFrameListener.js

@@ -0,0 +1,58 @@
+import { psychoJS } from "../globalPsychoJS";
+import { saveSnapshot } from "./boxIntegration";
+import { thisExperimentInfo } from "../global";
+import { captureError } from "../sentry";
+
+// Listen for video frame captures from remote-calibrator.
+// Dispatched in remote-calibrator/src/check/captureVideoFrame.js
+// with detail: { image: base64JPEG }
+export const capturedVideoFrameListener = () => {
+  document.addEventListener("rc-video-frame-captured", async (e) => {
+    const { image } = e.detail;
+    if (!image) return;
+
+    try {
+      const result = await saveSnapshot(image, experimentId(), participantId());
+      addSnapshotsLinkToExperimentResult(result.snapshotsLink);
+    } catch (error) {
+      captureError(error, "capturedVideoFrameListener", {
+        experimentId: experimentId(),
+        participantId: participantId(),
+        hasImage: !!image,
+      });
+    }
+  });
+};
+
+const addSnapshotsLinkToExperimentResult = (snapshotsLink) => {
+  if (snapshotsLink && psychoJS?.experiment) {
+    const hasSnapshotsLink =
+      psychoJS.experiment._currentTrialData.hasOwnProperty("snapshotsLink");
+    if (!hasSnapshotsLink) {
+      psychoJS.experiment.addData("snapshotsLink", snapshotsLink);
+    }
+  }
+};
+
+const experimentId = () => {
+  let experimentID;
+  const urlSegments = window.location.pathname.split("/").filter((s) => s);
+
+  if (window.location.hostname === "localhost") {
+    // Localhost: http://localhost:5500/examples/generated/TEST-EXPERIMENT-NAME/index.html
+    // Dev: find experiment name before /index.html
+    const htmlIndex = urlSegments.indexOf("index.html");
+    experimentID =
+      htmlIndex > 0
+        ? urlSegments[htmlIndex - 1]
+        : urlSegments[urlSegments.length - 1];
+  } else {
+    // Production: https://run.pavlovia.org/USERNAME/TEST-EXPERIMENT-NAME
+    experimentID = urlSegments[urlSegments.length - 1];
+  }
+  return experimentID;
+};
+
+const participantId = () => {
+  return thisExperimentInfo.PavloviaSessionID;
+};

components/useCalibration.js

@@ -399,6 +399,7 @@ export const formCalibrationList = (reader) => {
           .match(/\d+/g)
           .map(Number),
         calibrateDistanceCameraHz: reader.read("_calibrateDistanceCameraHz")[0],
+        saveSnapshots: reader.read("_saveSnapshotsBool")[0],
       },
     });
 
@@ -411,6 +412,7 @@ export const formCalibrationList = (reader) => {
         showVideo: false,
         calibrationCount: 1,
         fullscreen: !debug,
+        saveSnapshots: reader.read("_saveSnapshotsBool")[0],
       },
     });