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

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();

// ... exam in progress ...

// 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

License Tiers & Capabilities

The SDK enforces feature access based on your license 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. Initialize 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

Customize 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