How to Add Proctoring to an Angular Exam Portal

Where does the SDK fit in an Angular app?

The SDK is imperative and the camera lives in a cross-origin iframe enclave that mounts itself, so it does not belong in a template. It belongs in a component’s lifecycle hooks, and the session itself belongs in an injectable service. Angular’s job is to tell you when the exam component appears and disappears; the SDK’s job is to start when it appears and tear down when it goes. Map each SDK call to the Angular moment that should trigger it and the integration writes itself.

This is the same three-part split covered in How to add proctoring to a web application, applied to Angular’s lifecycle. If your exams run in a different framework, the React assessment app guide covers the same calls with hooks. If you are still choosing between the SDK, the REST API, and the Moodle plugin, start with Proctoring SDK vs API vs LMS plugin. New to the field? Read What is online proctoring? and What is AI proctoring? first.

Step 2: Hold the SDK in an injectable service

Put the whole lifecycle in one service so your exam component stays about questions, not cameras. Create the session inside a start() method, hold the instance on the service, wire the events once, and expose a stop() the component can call. A service also survives navigation when you provide it at the right level, which matters when one attempt spans several routes.

npm install @proctorlink/sdk

The loader is published on npm as @proctorlink/sdk, so it installs like any other dependency and works with npm, pnpm, or yarn. You get your API keys when you sign up at app.proctorlink.com.

// proctoring.service.ts
import { Injectable, NgZone } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { firstValueFrom } from 'rxjs';
import { ProctorLink } from '@proctorlink/sdk';

type MintResult = { session_jwt: string; session_id: string; resumed?: boolean };

@Injectable({ providedIn: 'root' })
export class ProctoringService {
  private session: ReturnType<typeof ProctorLink.createSession> | null = null;

  constructor(private http: HttpClient, private zone: NgZone) {}

  async start(jwt: string, sessionId: string, attemptId: string) {
    const session = ProctorLink.createSession({ jwt, sessionId });
    this.session = session;

    session.on('permission', ({ camera }) => {
      if (camera === 'denied') {
        // Update the view from inside the zone so change detection runs.
        this.zone.run(() => { /* block or warn, your policy */ });
      }
    });
    session.onEvent((event) => console.log(event.type, event));

    // Safety net for exams that outlast the token.
    session.on('token-expired', async () => {
      const res = await this.remint(attemptId);
      if (res.resumed) {
        session.updateToken(res.session_jwt);   // same session, carry on
      }
      // If res.resumed is false the old session ended; start a fresh one.
    });

    await session.start();
  }

  stop() {
    this.session?.stop();
    this.session?.destroy();
    this.session = null;
  }

  private remint(attemptId: string): Promise<MintResult> {
    // Your own backend endpoint that calls POST /v1/sessions.
    return firstValueFrom(
      this.http.post<MintResult>('/api/proctoring/session', { attempt_id: attemptId }),
    );
  }
}

Two events earn a listener. The permission event reports whether the candidate granted the camera, so you can enforce your own policy. The token-expired event fires only if a token dies mid-attempt, so capture never fails silently. Both callbacks can run outside Angular’s zone, so wrap any part that updates the view in NgZone.run(). The default flow records as soon as the camera is granted and uses the first captured frame as the identity reference. If you want matching against a deliberate photo instead, create the session with autoStartCapture: false, call captureIdentity() after start() resolves, then call beginCapture().

Step 4: Keep long exams alive through token expiry

The session token is short-lived. For an exam that can outlast it, the token-expired handler in the service re-mints on your backend for the same attempt_id. Because that attempt still has an active session, ProctorLink returns the existing session_id with a fresh token and resumed set to true, and you pass the new token to updateToken(). Events queued while the token was dead are flushed as soon as it lands, so nothing from the gap is lost.

Check resumed before calling updateToken(). A re-mint only resumes while the session is still active; if the abandonment sweep has already closed it, the mint creates a new session whose token belongs to a different attempt. The simplest way to avoid the whole situation is to set ttl_seconds generously at mint and treat token-expired as a safety net.

Common mistakes in an Angular integration

• Creating the session in the constructor or a field initializer. A constructor runs during Angular Universal server render, where there is no camera, and before the view exists. Fix: create the session in ngOnInit (or behind isPlatformBrowser), never in the constructor or a class field.
• Providing the service on the exam component when an attempt spans routes. A service listed in a component’s providers is destroyed and recreated on navigation, so a multi-route attempt tears the session down and re-mints. Fix: provide it with providedIn: 'root' or at a parent that survives the whole attempt.
• Missing ngOnDestroy cleanup. Without a hook that calls stop() then destroy(), navigating between exams leaves an enclave running and can stack a second camera preview. Fix: implement OnDestroy and stop the session there.
• Updating the view from an event without NgZone. The permission, event, and token-expired callbacks can fire outside Angular’s zone, so a field you set from them may not refresh the template. Fix: wrap the UI update in NgZone.run(), or call markForCheck() with OnPush.
• Generating attempt_id on init. A value created with crypto.randomUUID() in ngOnInit defeats resume, so every refresh mints a new session and bills the attempt twice. Fix: derive attempt_id from your own attempt record so it is stable for the attempt.
• Refreshing a token by recreating the component. Re-navigating to “restart” proctoring runs ngOnDestroy, which ends the attempt server-side, and the next mint creates a separate session: two reports for one attempt. Fix: handle token-expired and call updateToken() with a freshly minted token for the same attempt_id.

Frequently Asked Questions

Next steps

Ready to proctor exams in your Angular app? Sign up at app.proctorlink.com to get your API keys, wire the service above into a real attempt, and check the reviewer workload before you commit.

More Proctoring Guides