saccade.js
saccade.js estimates where a participant is looking from an ordinary webcam, in the browser. Nothing is installed and no video leaves the participant's computer. It is built for jsPsych, and the core library works on its own in any web experiment.
After a short calibration, expect a median error of roughly a tenth of the screen. That is enough to separate quadrants or a handful of well-spaced regions of interest. It is not enough for reading or for small stimuli.
Try the live demo Getting started
What you need
- Chrome or Edge, on a laptop or desktop. Other browsers run the tracker but may not supply camera capture timestamps, which the timing measurement needs.
- A webcam, and a page served over
https://orlocalhost. - WebGPU for full frame rate. Without it the model runs on WebAssembly, more slowly.
- About 25 MB downloaded on a participant's first visit, cached by the browser afterwards.
The packages
| Package | What it does | Browser global |
|---|---|---|
@saccadejs/core | Tracker, calibration, validation, timing loopback. No jsPsych dependency. | Saccade |
@saccadejs/extension | Records {x, y, t} per camera frame during any trial. | jsPsychExtensionSaccade |
@saccadejs/plugin-preview | Starts the camera and lets the participant position themselves. | jsPsychSaccadePreview |
@saccadejs/plugin-time-sync | Measures screen-to-camera lag and applies it to gaze timestamps. | jsPsychSaccadeTimeSync |
@saccadejs/plugin-calibrate | Calibration trial. | jsPsychSaccadeCalibrate |
@saccadejs/plugin-validate | Validation trial. | jsPsychSaccadeValidate |
Where to go next
- Getting started. A complete experiment you can copy and paste.
- Migrating from WebGazer. Mostly search and replace.
- How it works. The pipeline in a page.