Skip to main content

saccade.js estimates where a participant is looking, from an ordinary webcam.

Add it to any jsPsych trial, and that trial's data records where the participant looked, once for every frame of webcam video. It also works without jsPsych.

Each participant follows a dot for about twenty seconds to calibrate, then a second set of dots measures how accurate the tracker is for them. All the processing happens in the participant's browser: no video leaves their computer.

Live demo

Calibrate your own webcam in this page, then check how accurate it is, record a scanpath over a painting, or watch the estimate move as you look around.

Open the live demo →

Use it in jsPsych

Setup steps (camera, timing, calibration, accuracy check) are ready-made plugins. Recording gaze during your own trials takes one extra line per trial.

Getting started →

What it records

Gaze samples

Each camera frame with a face in it adds one row: an x and y position in pixels, and a time t. Name the elements on your page, such as two pictures, and their positions are recorded too, so you can count which one each look landed on.

Calibration and validation

Calibration takes about twenty seconds, with thirteen dots. A second set of nine dots, mostly in new positions, then measures the typical error as a fraction of the screen, so accuracy can be compared across participants with different screens.

Timing correction

A webcam sees the screen change a little late, and how late differs from one computer to the next. The saccade-time-sync plugin measures this delay on each participant's computer and corrects every gaze timestamp for it.

Example

A minimal experiment

The setup steps are ordinary jsPsych trials that go in your timeline like any other. To record gaze during a trial, add the extension to it. The trial itself can use any plugin.

Getting started →
const jsPsych = initJsPsych({
  extensions: [{ type: jsPsychExtensionSaccade }],
});

jsPsych.run([
  { type: jsPsychSaccadePreview },     // camera and model
  { type: jsPsychSaccadeCalibrate },   // 13 points
  { type: jsPsychSaccadeValidate },    // 9 held-out points
  {
    type: jsPsychHtmlKeyboardResponse,
    stimulus: '<img id="face" src="face.png">',
    extensions: [
      { type: jsPsychExtensionSaccade, params: { targets: ["#face"] } },
    ],
  },
]);

What you need

  • A webcam on a laptop or desktop, and a page served over https:// or from localhost.
  • WebGPU in the browser, so the tracker can use the graphics card. Without it, the tracker still runs, but more slowly.
  • About 25 MB downloaded on a participant's first visit, cached by the browser afterwards.

The packages