BlinkExam Proctoring API Integration Documentation

Name: BlinKExam
Brand: BlinkExam
Rating: 5 (10 reviews)

Overview

The BlinkExam Proctoring API Integration is a JavaScript module for integrating online proctoring into web applications. It supports camera and microphone checks, face detection, screen sharing, and photo/ID capture to monitor test-takers and prevent cheating. The API calculates a Trust Score and generates violation reports. It offers three proctoring modes: live, recorded, and combo, with recording options image or vScreen. This documentation guides developers on integrating the API using CDN-loaded scripts, compatible with vanilla JavaScript or frameworks like AngularJS.

Prerequisites

Browser Compatibility: Modern browsers supporting WebRTC, Canvas, and MediaStream APIs (e.g., Chrome 90+, Firefox 88+, Edge 90+). Requires HTTPS.
AngularJS: Optional, version 1.x for scope management if using AngularJS.
WebRTC: For real-time communication in live and combo modes.
Server Configuration: A window.apiConfig object with js_path pointing to CDN-hosted utility scripts.
Service Access Key: Obtain a serviceAccessKey by registering at https://blinkexam.com/register.

Installation and Setup

Integrate the BlinkExam Proctoring API by loading its main script and utility scripts from a CDN. Scripts must be loaded sequentially to resolve dependencies.

Script Loading

Load the API and utilities on DOMContentLoaded.


window.apiConfig = { js_path: 'https://cdn.blinkexam.com' };
document.addEventListener('DOMContentLoaded', async () => {
  // Load main API script
  await loadScript('https://dqxf2of07o2qg.cloudfront.net/v2/blinkexam.min.js');

  // Load utility scripts
  const scriptUrls = [
    `${window.apiConfig.js_path}/util/v2/variable.js`,
    `${window.apiConfig.js_path}/util/v2/config.js`,
    `${window.apiConfig.js_path}/util/v2/fileworker.js`,
    `${window.apiConfig.js_path}/util/v2/mediaHandler.js`,
    `${window.apiConfig.js_path}/util/v2/eventRecordingUtil.js`,
    `${window.apiConfig.js_path}/util/v2/proctoringEvents.js`
  ];
  await loadScriptsInOrder(scriptUrls);

  // Load WebRTC and meeting scripts
  await loadScriptsInOrder([
    `${window.apiConfig.js_path}/util/v2/meetingv2.js`,
    `${window.apiConfig.js_path}/util/v2/mzRTC.js`
  ]);

  console.log('BlinkExam Proctoring API initialized');
});

// Utility functions
async function loadScriptsInOrder(urls) {
  for (const url of urls) {
    await loadScript(url);
  }
}

function loadScript(url) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = url;
    script.async = true;
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild(script);
  });
}

Set window.apiConfig.js_path to your CDN base URL (e.g., https://cdn.blinkexam.com). Register at https://blinkexam.com/register to obtain your serviceAccessKey.

Quick Setup

Before implementing the BlinkExam Proctoring API, you must connect with the BlinkExam team to obtain a serviceAccessKey. This key is essential for authenticating and enabling the API integration.

Contact the BlinkExam team via support@blinkexam.com or call +91 95828 74969 to request your serviceAccessKey.
The BlinkExam team will provide the admin with a unique serviceAccessKey for your organization.
Use this key in the API configuration (see Configuration section) to initialize the API.

Ensure you keep the serviceAccessKey secure and do not expose it publicly.

Accessing Functions

After loading the API scripts, functions are available globally under the BlinkExam namespace (e.g., BlinkExam.preCheckCameraAndMic). If no namespace is used, functions are attached to window.

Vanilla JavaScript: Call functions like BlinkExam.preCheckCameraAndMic('localVideo', 'canvas_output').
AngularJS (Optional): Use $scope for state management, e.g., $scope.stream = await BlinkExam.preCheckCameraAndMic(...).

Verify Availability:


if (typeof BlinkExam !== 'undefined') {
  console.log('BlinkExam Proctoring API loaded');
} else {
  console.error('BlinkExam Proctoring API not loaded');
}

Configuration

Initialize the API with a configuration object passed to setConfig. The serviceAccessKey is mandatory for authentication.

Setting Configuration


const config = { /* ... */ };
BlinkExam.setConfig(config);

Configuration Properties

Property	Type	Required	Description
`serviceAccessKey`	String	Yes	Unique key from BlinkExam registration.
`clientId`	String	Yes	Client identifier.
`testId`	String	Yes	Test identifier.
`candidateId`	String	Yes	Candidate identifier.
`proctorMode`	String	Yes	Mode: `recorded`, `live`, or `combo`.
`roomInfo.roomId`	String	Yes	Session ID (e.g., `${serviceAccessKey}${testId}${batchId}`).
`attemptNumber`	String	Yes	Attempt number for the session.
`captureCandidate`	Boolean	Yes	Enable candidate photo capture.
`captureIdentity`	Boolean	Yes	Enable ID capture.
`faceAuth`	Boolean	Yes	Enable face authentication.
`roomInspection`	Boolean	Yes	Enable room inspection.
`inspectionType`	String	Yes	Inspection mode: `recorded` or `live`.
`recordingCategory`	String	Yes	Recording type: `image` or `vScreen`.
`containerId`	String	Yes	ID of the HTML container for proctoring UI.
`fileNamePrefix`	String	Yes	File prefix (e.g., `${testId}_${candidateId}_${attemptNumber}`).
`position`	Object	Yes	UI positions (e.g., `{ verification: 'center', id: 'center', liveCam: 'top-right' }`).
`preUploadPath`	String	Yes	Temporary file storage path.

Example Configuration


const config = {
  serviceAccessKey: 'your-secret-key',
  clientId: '1',
  testId: '596',
  candidateId: '323',
  proctorMode: 'combo',
  roomInfo: {
    roomId: 'your-secret-key5962' // ${serviceAccessKey}${testId}${batchId}
  },
  attemptNumber: '1',
  captureCandidate: true,
  captureIdentity: true,
  faceAuth: true,
  roomInspection: true,
  inspectionType: 'recorded',
  recordingCategory: 'vScreen',
  containerId: 'proctoringContainer',
  fileNamePrefix: '596_323_1',
  position: {
    verification: 'center',
    id: 'center',
    liveCam: 'top-right'
  },
  preUploadPath: 'testResources'
};
BlinkExam.setConfig(config);

Key Functions

Camera and Microphone Handling

BlinkExam.preCheckCameraAndMic(localVideoId, canvasId)

Checks camera and microphone availability.

Parameters:
- localVideoId (String): ID of the element.
- canvasId (String): ID of the element.
Returns: Promise or throws an error.

Example:


async function initCamera() {
  try {
    const stream = await BlinkExam.preCheckCameraAndMic('localVideo', 'canvas_output');
    console.log('Camera and mic ready:', stream);
  } catch (error) {
    console.error('Camera/mic error:', error);
  }
}

BlinkExam.checkMicLevel(stream, colorPids)

Monitors microphone input and updates visual indicators.

Parameters:
- stream (MediaStream): Audio stream.
- colorPids (Array/Object): Indicator configuration.

Example:


BlinkExam.checkMicLevel(stream, { low: 'green', high: 'red' });

Face Detection

BlinkExam.calculateFaceCount(video, canvas, callback)

Detects faces using machine learning models.

Parameters:
- video (HTMLVideoElement): Video feed.
- canvas (HTMLCanvasElement): Canvas for output.
- callback (Function): Handles face count.

Example:


async function initFaceDetection() {
  const video = document.getElementById('localVideo');
  const canvas = document.getElementById('canvas_output');
  BlinkExam.calculateFaceCount(video, canvas, count => console.log(`Faces: ${count}`));
}

BlinkExam.stopFaceDetection()

Stops face detection.

Example:


BlinkExam.stopFaceDetection();

Screen Detection

BlinkExam.multipleScreensAttached()

Checks for multiple screens.

Returns: Promise.

Example:


async function checkScreens() {
  const hasMultipleScreens = await BlinkExam.multipleScreensAttached();
  console.log(hasMultipleScreens ? 'Multiple screens detected' : 'Single screen');
}

Photo and ID Capture

BlinkExam.capturePhotoAndIdCanva(videoId, canvasId)

Captures a snapshot for photo/ID verification.

Parameters:
- videoId (String): Video element ID.
- canvasId (String): Canvas element ID.

Example:


async function captureSnapshot() {
  await BlinkExam.capturePhotoAndIdCanva('blink-live-feed', 'blink-live-canva');
  console.log('Snapshot captured');
}

BlinkExam.captureAndSubmitPhoto(id, errorHandler, submissionCallback, config)

Captures and submits a photo or ID.

Parameters:
- id (String): photo or id.
- errorHandler (Function): Error callback.
- submissionCallback (Function): Success callback.
- config (Object): Configuration object.

Example:


BlinkExam.captureAndSubmitPhoto(
  'photo',
  error => console.error('Photo error:', error),
  () => console.log('Photo submitted'),
  config
);

Proctoring Modes

BlinkExam.recordedImg()

Recorded proctoring with image capture.

Example:


if (config.recordingCategory === 'image') {
  BlinkExam.recordedImg();
}

BlinkExam.recordedVScreen()

Recorded proctoring with video.

Example:


if (config.recordingCategory === 'vScreen') {
  BlinkExam.recordedVScreen();
}

BlinkExam.liveVScreen()

Live proctoring with screen sharing.

Example:


if (config.proctorMode === 'live' && config.recordingCategory === 'vScreen') {
  BlinkExam.liveVScreen();
}

BlinkExam.comboVScreen()

Combined live and recorded proctoring.

Example:


if (config.proctorMode === 'combo' && config.recordingCategory === 'vScreen') {
  BlinkExam.comboVScreen();
}

Usage Examples

Example 1: Recorded Proctoring Session


window.apiConfig = { js_path: 'https://cdn.blinkexam.com' };
document.addEventListener('DOMContentLoaded', async () => {
  await loadScript('https://dqxf2of07o2qg.cloudfront.net/v2/blinkexam.min.js');
  await loadScriptsInOrder([
    `${window.apiConfig.js_path}/util/v2/variable.js`,
    `${window.apiConfig.js_path}/util/v2/config.js`,
    `${window.apiConfig.js_path}/util/v2/fileworker.js`,
    `${window.apiConfig.js_path}/util/v2/mediaHandler.js`,
    `${window.apiConfig.js_path}/util/v2/eventRecordingUtil.js`,
    `${window.apiConfig.js_path}/util/v2/proctoringEvents.js`,
    `${window.apiConfig.js_path}/util/v2/meetingv2.js`,
    `${window.apiConfig.js_path}/util/v2/mzRTC.js`
  ]);

  BlinkExam.setConfig(config);
  if (config.recordingCategory === 'image' && window.proctorPluginVersion === 'v2') {
    BlinkExam.recordedImg();
  }
});

Example 2: Photo Capture


async function capturePhoto() {
  try {
    await BlinkExam.captureAndSubmitPhoto(
      'photo',
      error => { throw new Error(`Photo capture failed: ${error}`); },
      () => console.log('Photo submitted'),
      config
    );
  } catch (error) {
    console.error(error);
  }
}

Example 3: Face Detection with Camera


async function startProctoring() {
  try {
    const stream = await BlinkExam.preCheckCameraAndMic('localVideo', 'canvas_output');
    BlinkExam.calculateFaceCount(
      document.getElementById('localVideo'),
      document.getElementById('canvas_output'),
      count => console.log(`Detected ${count} faces`)
    );
  } catch (error) {
    console.error('Proctoring setup failed:', error);
  }
}

Example 4: AngularJS Integration


angular.module('proctorApp', []).controller('ProctorCtrl', function($scope) {
  const config = { /* ... */ };
  BlinkExam.setConfig(config);
  $scope.proctorMode = config.proctorMode;
  async function init() {
    try {
      $scope.stream = await BlinkExam.preCheckCameraAndMic('localVideo', 'canvas_output');
    } catch (error) {
      console.error('Camera error:', error);
    }
  }
  init();
});

Error Handling

Use try-catch blocks and error callbacks to handle issues like permission denials or script failures.

Example:


async function captureAndSubmit() {
  try {
    await BlinkExam.captureAndSubmitPhoto(
      'id',
      error => { throw new Error(`ID capture failed: ${error}`); },
      () => console.log('ID submitted'),
      config
    );
  } catch (error) {
    console.error(error);
    alert('Failed to capture ID. Please try again.');
  }
}

Troubleshooting

Issue	Cause	Solution
`preCheckCameraAndMic` fails	Missing permissions	Prompt user to allow camera/mic; ensure HTTPS.
Script loading fails	Incorrect `js_path`	Verify `window.apiConfig.js_path`.
WebRTC errors	Browser incompatibility	Use Chrome/Firefox; ensure HTTPS.
Photo submission fails	Invalid endpoint	Check `config.preUploadPath` and server logs.

Versioning

The API supports version v2 (window.proctorPluginVersion).


if (window.proctorPluginVersion === 'v2') {
  BlinkExam.recordedImg();
} else {
  console.warn('Unsupported API version');
}

Pricing

For more information about API integration and pricing, contact us:
📞 Sales Enquiry: +91 95828 74969
📧 Support: support@blinkexam.com

To get started, request a demo.

Docs

BlinkExam Proctoring API Integration Documentation

Overview

Prerequisites

Installation and Setup

Script Loading

Quick Setup

Accessing Functions

Configuration

Setting Configuration

Configuration Properties

Example Configuration

Key Functions

Camera and Microphone Handling

Face Detection

Screen Detection

Photo and ID Capture

Proctoring Modes

Usage Examples

Example 1: Recorded Proctoring Session

Example 2: Photo Capture

Example 3: Face Detection with Camera

Example 4: AngularJS Integration

Error Handling

Troubleshooting

Versioning

Pricing