Developer Documentation

Quick Start

Install the Proctora React SDK to start proctoring your exams.

npm install @proctora/react

React Integration

Wrap your exam component with the ProctorProvider and add the ProctorCamera component.

import { ProctorProvider, ProctorCamera } from '@proctora/react'

export default function ExamPage({ sessionId }) {
  return (
    <ProctorProvider
      publicKey={process.env.NEXT_PUBLIC_PROCTORA_PUBLIC_KEY}
      sessionId={sessionId}
      onViolation={(v) => console.warn('Violation:', v)}
    >
      <ProctorCamera position="top-right" size="md" />
      <YourExamContent />
    </ProctorProvider>
  )
}

Vanilla JS / CDN

For non-React projects, use our vanilla JS bundle.

<script src="https://sdk.proctora.com/v1/proctora.js"></script>
<script>
  const session = Proctora.init({
    publicKey: 'pk_live_...',
    sessionId: 'ses_...',
    onViolation: (v) => console.warn('Violation:', v),
  })
  session.start().then(() => session.mount('#camera'))
</script>

Creating Sessions (Server-Side)

Generate a proctoring session from your backend before the exam starts.

import { createProctora } from '@proctora/eden'

const proctora = createProctora({ secretKey: process.env.PROCTORA_SECRET_KEY })

// Before rendering the exam page
const { data } = await proctora.v1.sessions.post({
  examId: 'exam_abc',
  candidateId: req.user.id,
})
// Pass data.sessionId to the client