⚽️ Playground

https://monitorer-playground.codingblocks.com

🔨 Installation

npm install @coding-blocks/monitorer

🧑‍🔧 Usage

import Monitorer from "@coding-blocks/monitorer";

// create a monitorer instance
const monitorerInstance = new Monitorer();

async function init() {
  // enable the services you want to track
  await monitorerInstance.enable({
    tabSwitch: true,
    noFace: true,
  });
}

// listen for events fired on violation
window.addEventListener("monitorerfault", (e) => {
  if (e.code === "TAB_SWITCHED") {
  }

  if (e.code === "NO_FACE_DETECTED") {
  }
});

init();

🗺️ Guide

Creating Monitorer instance

To use monitorer, you have to create a Monitorer instance

import Monitorer from "@coding-block/monitorer";

const monitorerInstance = new Monitorer();

Enabling Monitorers

You can enable any or all of the four detectors (we call them monitorers) using the enable() method on the Monitorer instance.

• Tab Switch detection tabSwitch
• No Face detection noFace
• Multiple Faces detection multipleFaces
• Window Resize detection windowResize
• Right Click detection rightClick
• Keyboard events detection keyboard

// Enable tab switch and window resize detection
await monitorerInstance.enable({
  tabSwitch: true,
  windowResize: true,
});

To enable all the monitorers, do not pass anything to enable()

// Enable all the monitorers
await monitorerInstance.enable();

API

🚧 enable() is an asynchronous method.

type enable = (options?: MonitorerEnableOptions): Promise<void>;

type MonitorerEnableOptions = {
  tabSwitch?: true;       // enable tab switch detection
  windowResize?: true;    // enable window resize detection
  windowMove?: true;      // enable window move detection
  noFace?: true;          // enable no face detection
  multipleFaces?: true    // enable multiple faces detection
  noise?: {               // enable noise detection
    volume: number
  }
  rightClick?: true       // enable right click detection
  keyboard?: {            // enable keyboard events detection
    copy?: true,          // enable keyboard copy detection
    paste?: true,         // enable keyboard paste detection
    console?: true        // enable keyboard console detection
  }       
}

Listening for Monitorer Events

After enabling monitorers you can listen to thw following events on the window object.

| Event name | Description | Event Type | | ------------------ | -------------------------------------------------- | ----------------------- | | monitorersuccess | Success event | MonitorerSuccessEvent | | monitorerfault | Fault event (Dispatched when violation occurs) | MonitorerFaultEvent | | monitorererror | Error event (Dispatched when something went wrong) | MonitorerErrorEvent |

Example code to listen for monitorersuccess

// javascript
window.addEventListener("monitorersuccess", (e) => {
  console.log(e);
});

// typescript
window.addEventListener("monitorersuccess", ((
  e: CustomEvent<MonitorerSuccessEvent>
) => {
  console.log(e);
}) as EventListener);

API

type MonitorerSuccessEvent = {
  name: "monitorersuccess";
  message: string;
  code: "MONITORER_ENABLED" | "MONITORERE_DISABLED";
};

type MonitorerFaultEvent =
  | {
      name: "monitorerfault";
      code: "TAB_SWITCHED" | "WINDOW_RESIZED";
      message: string;
    }
  | {
      name: "monitorerfault";
      code: "NO_FACE_DETECTED" | "MULTIPLE_FACES_DETECTED";
      message: string;
      imageBlob: Blob | null;
    };

type MonitorerErrorEvent = {
  name: "monitorererror";
  code: string;
  message: string;
};

Disabling Monitorers

Similar to Enabling Monitorers

You can disable any or all of the four detectors (we call them monitorers) using the disable() method on the Monitorer instance.

• Tab Switch detection tabSwitch
• No Face detection noFace
• Multiple Faces detection multipleFaces
• Window Resize detection windowResize
• Right Click detection rightClick
• Keyboard events detection keyboard

// Disable tab switch and window resize detection
monitorerInstance.disable({
  tabSwitch: true,
  windowResize: true,
});

To disable all the monitorers, do not pass anything to disable()

// Disable all the monitorers
monitorerInstance.disable();

API

type disable = (options?: MonitorerDisableOptions): Promise<void>;

type MonitorerDisableOptions = {
  tabSwitch?: true;       // disable tab switch detection
  windowResize?: true;    // disable window resize detection
  windowMove?: true;      // disable window move detection
  noFace?: true;          // disable no face detection
  multipleFaces?: true    // disable multiple faces detection
  noise?: true            // disable noise detection
  rightClick?: true       // disable right click detection
  keyboard?:  true        // disable keyboard event detection
}

Made with ❤️ and 🧠 @CodingBlocks