Introducing the MonitorExam Proctoring SDK: Embed Secure Exam Proctoring in Your Platform

MonitorExam Team · July 2026 · 8 min read

⚡ Quick Summary

What: A JavaScript SDK for adding AI-powered exam proctoring to any web application

Package: @monitorexam/proctoring via npm

Features: Face detection, browser lockdown, audio monitoring, credibility scoring, real-time alerts

Integration: React hooks, Context API, or vanilla JavaScript

Why We Built the SDK

Assessment platforms should focus on delivering great learning experiences — not rebuilding browser lockdown, AI monitoring, identity verification, evidence collection, and exam integrity from scratch.

The MonitorExam Proctoring SDK allows developers to integrate enterprise-grade online proctoring into existing products while keeping their own user experience, branding and assessment workflow.

Build your assessment platform. Let MonitorExam handle trust.

What's Included

Camera monitoring

Face detection, candidate presence monitoring, and periodic image capture with configurable intervals.

Browser lockdown

Fullscreen enforcement, tab switch detection, copy/paste blocking, right-click prevention, and DevTools detection.

Audio monitoring

Voice activity detection with configurable thresholds and silence delays.

Credibility scoring

Real-time integrity scoring with weighted penalties and severity levels (critical, major, minor).

Event subscriptions

Subscribe to 20+ event types including violations, device status changes, and session lifecycle.

Backend sync

Automatic state synchronisation and metering with your backend systems.

Installation

npm install @monitorexam/proctoring

Or include via CDN:

<script src="https://unpkg.com/@monitorexam/proctoring/dist/proctoring.umd.js"></script>

Quick Start

React Hook (recommended)

import React, { useEffect } from 'react';
import {
  useProctoringSession,
  ProctoringOverlay,
  proctoringMeter
} from '@monitorexam/proctoring';

// Configure metering (once at app startup)
proctoringMeter.configure({
  endpoint: 'https://api.yourplatform.com/meter',
  apiKey: process.env.MONITOREXAM_API_KEY
});

const ExamComponent = ({ user, exam }) => {
  const proctoring = useProctoringSession({
    userId: user.id,
    examId: exam.id,
    invigId: exam.invig_id,

    // Feature flags
    enableCamera: true,
    enableMic: true,
    enableFaceDetection: true,
    enableTabSwitch: true,
    enableFullscreen: true,

    // Callbacks
    onWarning: (warning) => console.log('Warning:', warning.type),
    onSessionEnd: (report) => console.log('Report:', report)
  });

  useEffect(() => {
    proctoring.initSession();
    return () => proctoring.endSession();
  }, []);

  return (
    <div>
      {/* Camera preview */}
      <video
        ref={(el) => proctoring.setVideoElement(el)}
        autoPlay
        playsInline
        muted
      />

      {/* Your exam content */}
      <iframe src={exam.url} />

      {/* Proctoring UI overlay */}
      <ProctoringOverlay
        activeWarning={proctoring.activeWarning}
        warnings={proctoring.warnings}
      />
    </div>
  );
};

Framework-agnostic SDK

import { ProctoringSDK } from '@monitorexam/proctoring';

const sdk = new ProctoringSDK({
  apiKey: process.env.MONITOREXAM_API_KEY,
  userId: 'student_123',
  examId: 'exam_456',

  // Feature configuration
  enableCamera: true,
  enableMic: true,
  enableFaceDetection: true,
  enableTabSwitch: true,
  enableFullscreen: true
});

// Initialize and validate license
const { success, sessionId } = await sdk.initialize();

// Check device readiness
const deviceStatus = await sdk.checkDevice();
console.log('Camera:', deviceStatus.camera.available);
console.log('Network:', deviceStatus.network.quality);

// Subscribe to events
sdk.subscribe('VIOLATION_DETECTED', (violation) => {
  console.log('Violation:', violation.type, violation.message);
});

sdk.subscribe('CREDIBILITY_CHANGE', ({ score, level }) => {
  console.log('Credibility:', score, level);
});

// Start proctoring
await sdk.startProctoring();

// End session and get report
const { report } = await sdk.endAssessment('submit');
console.log('Final credibility score:', report.credScore);

Event Types

The SDK emits events for all proctoring activities. Subscribe to specific events or use subscribeMany() for multiple event types.

Use Cases

Learning management systems

Add secure online examinations to your LMS without replacing your assessment engine. Perfect for universities, colleges, schools, and coaching institutes.

Certification bodies

Deliver trusted certification exams anywhere with AI-powered remote monitoring. Ideal for professional certifications, licensing, and government examinations.

Corporate training

Verify compliance assessments and training completion. Perfect for employee onboarding, partner certification, and internal technical assessments.

Licence tiers and capabilities

The SDK enforces feature access based on your licence tier. Features not included in your tier are automatically disabled.

Getting Started

1. Request your API key — Contact the MonitorExam team or sign up at monitorexam.com
2. Install the SDK — npm install @monitorexam/proctoring
3. Configure metering — Set up your endpoint and API key
4. Initialise a session — Call sdk.initialize() with user and exam IDs
5. Check device readiness — Use sdk.checkDevice() before starting
6. Start proctoring — Call sdk.startProctoring() when the exam begins
7. Subscribe to events — Handle violations and status changes in real time
8. End session — Call sdk.endAssessment() to get the final report

Most integrations can be completed in less than a day.

Theming

Customise the proctoring UI to match your brand:

import { createTheme, ProctoringOverlay } from '@monitorexam/proctoring';

const customTheme = createTheme({
  colors: {
    primary: '#6366f1',
    danger: '#ef4444',
    background: '#1f2937',
    text: '#f9fafb'
  },
  fonts: {
    family: 'Inter, sans-serif'
  },
  sizes: {
    fontBase: '16px',
    borderRadius: '12px'
  }
});

<ProctoringOverlay theme={customTheme} {...props} />

Built-in themes available: defaultTheme, darkTheme, compactTheme, largeTheme

FAQ

Does the SDK work with React, Vue, Angular, or vanilla JavaScript? Yes. The core ProctoringSDK class is framework-agnostic and works with any JavaScript application. We also provide React-specific hooks and components for easier integration.

What browsers are supported? The SDK supports all modern browsers with WebRTC capabilities: Chrome 70+, Firefox 65+, Safari 14+, Edge 79+. The checkDevice() method validates browser compatibility before starting.

How does licensing work? The SDK validates your API key on initialisation and enforces feature access based on your licence tier. Features not included in your plan are automatically disabled.

Can I customise the violation penalties? The default penalty weights are optimised for most use cases. Contact the MonitorExam team for enterprise customisation options.

Is the SDK GDPR compliant? Yes. The SDK is designed with privacy in mind. Images and events are only stored according to your configured retention policies, and all data can be deleted on request.

What's the difference between practice mode and exam mode? Practice mode (practiceMode: true) disables credibility penalties and uses softer warning messages. Use it for system checks and candidate onboarding before the real exam.