Web Applications

Integrating with JavaScript and HTML

To integrate Gazefilter into your web application using plain JavaScript and HTML, you need to:

1. Add an <iframe /> element pointing to gazefilter.app
2. Handle the initial message from the iframe containing a MessagePort
3. Add a message handler to the message port for ongoing communication

Let’s go through each step in detail.

Step 1: Add an iframe element

Add the following HTML code where you want the gazefilter interface to appear:

<iframe
  src="https://gazefilter.app"
  width="640"
  height="480"
  allowfullscreen
  allow="camera">
</iframe>

Explanation of the attributes:

• src: The URL of the gazefilter application. See available parameters for advanced initialization.

• allow="camera": This mandatory attribute grants the iframe permission to access the user’s camera, which is necessary for the gazefilter’s functionality.

• (optional) width and height: These set the size of the iframe. See Interface Behaviour for details.

• (optional) allowfullscreen: Necessary if gaze calibration need to be started by a user gesture requiring fullscreen mode.

Step 2: Handle the initial message

Add an event listener to handle the initial message:

// initialize placeholder variable for message port
let port = null;

window.addEventListener('message', event => {
  // check if the current event comes from gazefilter
  if (event.origin !== 'https://gazefilter.app') return;

  // check channel event which holds a message port
  if (event.data.type === 'channel') {
    // close previous message port
    if (port !== null) port.close();

    // set message port
    port = event.ports[0];
    port.onmessage = ongazefilter; // this function is described in the next step
  }
});

Step 3: Define handler for the message port

Implement the function to handle incoming events from the message port:

function ongazefilter(event) {
    const data = event.data;

    switch (data.type) {
      case 'capture':
        console.log('Gazefilter capture:', data);
        break;

      case 'interface':
        console.log('Gazefilter mode:', data.interfaceMode);
        break;

      case 'connect':
        console.log('Gazefilter connected ', data.deviceLabel);
        break;

      case 'dispose':
        console.log('Gazefilter disconnected from camera');
        break;

      // Add more cases for other message types as needed
    }
}

This basic setup allows to receive and handle messages from the eye-tracker. The message handler can be expanded to process other types of messages. See Gazefilter Events for detailed description.

For a full working example following this guide you can check out this CodePen.