📸 UserCamera Angular Library

A modern Angular 20+ component for accessing user cameras, supporting front/back (user/environment) switching, optional canvas rendering, and reactive signals — fully zoneless.

Features

• 🎥 Access user camera via MediaStream API
• 🔄 Toggle between front (user) and back (environment) camera
• 🖌 Optional canvas rendering for overlays, filters, or capture
• ⚡ Reactive Signals (WritableSignal) for state management
• 🧩 Emits events for stream ready, canvas frame, facing mode change, and errors
• 🧹 Automatic cleanup of tracks and animation frames on destroy
• 🏗 Fully compatible with Zoneless Angular 20+

Installation

npm install @tomaszatoo/ngx-user-camera

Usage

Import the component

Standalone import:

import { UserCamera } from '@tomaszatoo/ngx-user-camera';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [UserCamera],
  template: `<user-camera></user-camera>`
})
export class DemoComponent {}

NgModule import:

import { UserCamera } from '@tomaszatoo/ngx-user-camera';

@NgModule({
  declarations: [UserCamera],
  exports: [UserCamera]
})
export class SharedModule {}

Template example

<user-camera
  [useCanvas]="true"
  [facingMode]="cameraMode"
  (facingModeChange)="cameraMode = $event"
  (streamInitialised)="onStream($event)"
  (canvasRender)="onCanvas($event)"
  (error)="onError($event)">
</user-camera>

<button (click)="cameraMode = cameraMode === 'user' ? 'environment' : 'user'">
  Flip Camera
</button>

Inputs

| Name | Type | Default | Description | |------|------|---------|-------------| | useCanvas | boolean | false | Whether to render the video on a canvas | | constraints | MediaStreamConstraints | { audio: false, video: true } | MediaStream constraints | | facingMode | 'user' \| 'environment' | 'user' | Camera facing mode (front/back) | |

Outputs

| Name | Type | Description | |------|------|-------------| | facingModeChange | EventEmitter<'user' \| 'environment'> | Emits when facing mode changes | | streamInitialised | EventEmitter<MediaStream> | Emits the camera MediaStream once ready | | canvasRender | EventEmitter<CanvasRenderingContext2D> | Emits canvas context for each frame | | error | EventEmitter<Error> | Emits any errors (permission denied, device missing, or unsupported features) |

Example Component

export class DemoComponent {
  cameraMode: 'user' | 'environment' = 'user';

  onStream(stream: MediaStream) {
    console.log('Camera stream ready', stream);
  }

  onCanvas(ctx: CanvasRenderingContext2D) {
    // Draw overlays or filters
  }

  onError(error: Error) {
    console.error('Camera error', error);
  }

  toggleCamera() {
    this.cameraMode = this.cameraMode === 'user' ? 'environment' : 'user';
  }
}

Notes

• Works best on modern browsers that support MediaDevices.getUserMedia.
• useCanvas allows custom rendering or photo capture from video.
• Signals-based state means zero NgZone overhead for zoneless apps.
• Always handle error output for devices without camera switching support.

Developer Setup

The following instructions assume you have Node ≥ 20 and the Angular CLI installed globally.
If you don’t have the CLI yet, install it first:

npm i -g @angular/cli

1. Clone the repository

git clone https://codeberg.org/tomaszatoo/ngx-user-camera.git
cd ngx-user-camera

2. Install dependencies

npm ci

npm ci installs exactly the versions specified in package-lock.json, ensuring reproducible builds.

3. Run the example app

The repository ships with an example Angular app that demonstrates how to use the library.
Start it with:

ng serve --open

This will:

• Compile the library in development mode.
• Spin up the example app on http://localhost:4200/.
• Open the default browser automatically.

4. Build the library for distribution

When you’re ready to test a production build or publish the package, run:

npm run build --project @tomaszatoo/ngx-user-camera

The compiled output lives in dist/ngx-user-camera and can be used locally with:

npm install ../dist/ngx-user-camera

5. Run tests, lint, and format

# Unit tests
npm run test

6. Publish to npm (optional)

If you’re the package maintainer, you can publish the built library with:

cd dist/tomaszatoo/ngx-user-camera
npm publish --access public

Make sure you’re logged in to npm (npm login) and have the correct publish access.

Happy hacking! 🚀

License

MIT © 2025 Tomas Zato