Proctorec SDK

A lightweight, zero-dependency frontend JavaScript SDK to record combined screen share and webcam streams on the client side. Ideal for online interviews, test-taking platforms, remote coding assessments, and browser-based remote proctoring applications.

View on npm

Key Features

Circular/Rectangular Webcam Overlay: Renders the webcam feed on top of the screen share feed in real-time.
Dynamic Styling Options: Position the overlay in any corner, set shapes, sizes, and borders dynamically.
Real-Time Video Composition: Built with off-screen HTML Canvas drawing loops.
Dual-Audio Mixing: Mixes microphone audio and screen share system sounds together seamlessly.
Audio Level Analyser: Real-time microphone audio frequency metrics for visual indicator feedback.
IndexedDB Crash Recovery: Auto-saves video chunks sequentially. If the candidate closes the tab or the browser crashes, the video can be fully recovered and downloaded on reload.
Vanilla JS/TypeScript: Highly universal; can be integrated into any frontend framework (React, Vue, Svelte, Angular, Vanilla JS).

The Challenge

Recording high-resolution video and audio streams simultaneously on the client-side without relying on external media servers introduces major performance hurdles. Specifically, mixing multiple video feeds (screen share + webcam) and audio inputs (microphone + system audio) dynamically while maintaining a high frame rate and preventing browser crashes presents three key problems:

Frame Dropping & CPU Spikes: Mixing feeds via high-frequency UI updates can easily cause frame drops.
Browser Crash & Session Loss: If a candidate refreshes the page or their tab crashes during an assessment, standard MediaRecorder memory buffers are lost forever.
Audio Desynchronization: Combining distinct inputs like a microphone track and system audio track into a single mixed output stream can easily result in drift.

The Architecture & Solution

To solve these constraints, the SDK leverages high-performance browser APIs and a robust offline recovery system:

Off-Screen HTML Canvas Drawing Loop: The video feeds are composited on an off-screen canvas. RequestAnimationFrame controls a precise rendering loop that handles scaling, masks (circular/rectangular overlays), and positioning without blocking the browser UI thread.
Web Audio API Node Mixing: We create an audio context using the AudioContext API. A microphone node and system audio node are mixed using a custom gain controller node before feeding the combined audio track directly into the media stream.
IndexedDB Chunk Storage & Recovery: The MediaRecorder emits data chunks every second. Instead of keeping them in-memory, the SDK sequentially streams them to a local IndexedDB instance. If the browser or tab crashes, the SDK detects the saved session on reload, letting the user compile the chunks back into a playable WebM file.

Technical Specifications

Core Tech Stack: Vanilla JavaScript, TypeScript
APIs & Specifications: WebRTC MediaStreams, HTML5 Canvas 2D Context, Web Audio API, IndexedDB, MediaRecorder API
Compatibility: Chromium-based browsers, Firefox, Safari (desktop)