Minimal Working Example

// ── 1. Credentials ──────────────────────────────────
// Replace with your actual credentials
const CLIENT_ID = 'your-client-id'
const CLIENT_SECRET = 'your-client-secret' // ⚠️ Backend-only in production!
const TEST_ATTEMPT_ID = 'unique-id-from-your-database'

// Compute HMAC-SHA256 hash (move this to your backend in production)
async function computeHash(message, secret) {
    const enc = new TextEncoder()
    const key = await crypto.subtle.importKey(
        'raw', enc.encode(secret),
        { name: 'HMAC', hash: 'SHA-256' }, false, ['sign']
    )
    const sig = await crypto.subtle.sign('HMAC', key, enc.encode(message))
    return btoa(String.fromCharCode(...new Uint8Array(sig)))
}

const hashedTestAttemptId = await computeHash(TEST_ATTEMPT_ID, CLIENT_SECRET)
const credentials = {
    clientId: CLIENT_ID,
    testAttemptId: TEST_ATTEMPT_ID,
    hashedTestAttemptId: hashedTestAttemptId
}

// ── 2. Proctoring Options ────────────────────────────
const proctoringOptions = {
    trackingOptions: {
        audio: true,           // Detect background noise
        numHumans: true,       // Detect multiple faces or no face
        tabSwitch: true,       // Detect tab/window switches
        photosAtRandom: true,  // Capture random photos
    }
}

// ── 3. Start Proctoring ─────────────────────────────
let apInst = new AutoProctor(credentials)
await apInst.setup(proctoringOptions)
apInst.start()

// Show your test content once monitoring begins
window.addEventListener('apMonitoringStarted', () => {
    document.getElementById('test-content').style.display = 'block'
})

// ── 4. Stop Proctoring (when candidate submits) ─────
function submitTest() {
    apInst.stop()
}

window.addEventListener('apMonitoringStopped', () => {
    // Redirect to results or confirmation page
    window.location.href = '/test-complete'
})

// ── 5. Report (on a separate page) ──────────────────
// const apInst = new AutoProctor(credentials)
// apInst.showReport(reportOptions)