Take Capture WebCam Images in Angular using NGX Webcam

In this tutorial, we will discuss how to take webcam images by using the laptop or PC camera in the Angular application and also display the preview.

To use utilize the system WebCam in the Angular application, we will use the NGX Webcam package module. It is a very simple, minimal and lightweight component to use in applications.

NGX WebCam allows image capture in Angular app on mobile or desktop by using the camera APIs of the browser and supports the following features:

 

How to Access Webcam and Capture Images in Angular App?

You can follow these quick steps to access system WebCam and take pictures:

Step 1 – Create Angular App

Step 2 – Install NGX WebCam  Package

Step 3 – Import NGX WebCam Module

Step 4 – Access Camera and Capture Images

Step 5 – Update HTML Template

Step 6 – See In Action

 

Create Angular App

To create a new Angular application, make sure you have installed the Angular CLI tool:

npm install -g @angular/cli

 

Now you can easily create a new app by executing the below ng command by providing the name:

ng new angular-webcam-app

 

Enter inside the application directory

cd angular-webcam-app

 

Install NGX WebCam  Package

Afterwards, we will install the NGX WebCam library package, which will access the camera api and help users to capture images in the Angular application:

npm install ngx-webcam

 

Import NGX WebCam Module

Now we will register the WebcamModule provided by the NGX Webcam package which enables us to use its APIs in our application.

Open the app.module.ts file and update it as shown below:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

import { WebcamModule } from 'ngx-webcam';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule, 
    WebcamModule // <-- Module added here
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

 

Access Camera and Capture Images

Now open the app.component.ts file and update the class to access the camera and capture images to show on view:

import { Component } from '@angular/core';
import { Observable, Subject } from 'rxjs';

import { WebcamImage, WebcamInitError, WebcamUtil } from 'ngx-webcam';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  // toggle webcam on/off
  public showWebcam = true;
  public allowCameraSwitch = true;
  public multipleWebcamsAvailable = false;
  public deviceId!: string;
  public errors: WebcamInitError[] = [];

  // latest snapshot
  public webcamImage!: WebcamImage;

  // webcam snapshot trigger
  private trigger: Subject<void> = new Subject<void>();
  // switch to next / previous / specific webcam; true/false: forward/backwards, string: deviceId
  private nextWebcam: Subject<boolean | string> = new Subject<
    boolean | string
  >();

  // Check if multiple camera devices available
  public ngOnInit(): void {
    WebcamUtil.getAvailableVideoInputs().then(
      (mediaDevices: MediaDeviceInfo[]) => {
        this.multipleWebcamsAvailable = mediaDevices && mediaDevices.length > 1;
      }
    );
  }

  // Capture Image
  public takeSnapshot(): void {
    this.trigger.next();
  }

  // ON OFF Camera
  public toggleWebcam(): void {
    this.showWebcam = !this.showWebcam;
  }

  // Switch to next camera device if avaiable
  public showNextWebcam(directionOrDeviceId: boolean | string): void {
    this.nextWebcam.next(directionOrDeviceId);
  }

  public handleInitError(error: WebcamInitError): void {
    this.errors.push(error);
  }

  public takePicture(webcamImage: WebcamImage): void {
    console.info('received webcam image', webcamImage);
    this.webcamImage = webcamImage;
  }

  public cameraWasSwitched(deviceId: string): void {
    console.log('active device: ' + deviceId);
    this.deviceId = deviceId;
  }

  public get initObservable(): Observable<void> {
    return this.trigger.asObservable();
  }

  public get nextWebcamObservable(): Observable<boolean | string> {
    return this.nextWebcam.asObservable();
  }
}

 

Update HTML Template

Now add the <webcam> component in the HTML template. It takes various events and properties to control the Webcam access and modify its behaviour.

Open the app.component.html file and update as shown below:

<div style="text-align: center">
  <h1>Capture Images using Webcam in Angular</h1>
  <div>
    <webcam
      [height]="500"
      [width]="500"
      [trigger]="initObservable"
      (imageCapture)="takePicture($event)"
      *ngIf="showWebcam"
      [imageQuality]="1"
      (cameraSwitched)="cameraWasSwitched($event)"
      (initError)="handleInitError($event)"
    ></webcam>
    <br />
    <button class="actionBtn" (click)="takeSnapshot()">Capture Picture</button>
    <button class="actionBtn" (click)="toggleWebcam()">Toggle Webcam</button>
    <br />
    <button
      class="actionBtn"
      (click)="showNextWebcam(true)"
      [disabled]="!multipleWebcamsAvailable"
    >
      Next Webcam
    </button>
  </div>
  <div class="snapshot" *ngIf="webcamImage">
    <h2>Here's Your Snap</h2>
    <img [src]="webcamImage.imageAsDataUrl" />
  </div>
</div>

 

See In Action

We are ready to test its working. execute the following command to run the development web server:

npm start

It will open the application on the following URL:

http://localhost:4200/

 

Conclusion

We discussed how to access the system camera and capture images to use inside the Angular application using the NGX Webcam. This feature can have multiple use cases where users are required to enter their live or real-time images. Angular applications across various devices like mobile or laptops can access device cameras either front, back, portrait or landscape for image capture.