Implementing Webcam Image Capture with ngx-webcam in Angular

Implementing Webcam Image Capture with ngx-webcam in Angular

In this blog post we'll walk through the process of creating an Angular application that allows users to capture images from their webcams directly. 

To achieve this, we'll leverage the ngx-webcam library, which seamlessly integrates webcam functionality and covers the installation of the library and the basic setup of the Angular application into the project.

Step 1. Create a new Angular project

If you haven't already, install the Angular CLI globally by running the following command in your terminal or command prompt:

npm install -g @angular/cli

Create a new Angular project:

ng new CaptureImage

Navigate to the project directory:

cd D:\Angular\Project\CaptureImage

Step 2. Install ngx-webcam Library

npm install ngx-webcam

Step 3. Integrate ngx-webcam into Your Angular Application

Open the src/app/app.module.ts file and import the WebcamModule from ngx-webcam:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ImageWebcamComponent } from './image-webcam/image-webcam.component';
import { WebcamModule } from 'ngx-webcam';

@NgModule({
  declarations: [
    AppComponent,
    ImageWebcamComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    WebcamModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4. Create Webcam Component

Create a new component that will handle webcam functionality. In your terminal, run:

ng generate component image-webcam

Open src/app/image-webcam/image-webcam.component.ts and implement the logic for capturing images:

import { Component } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { WebcamImage, WebcamInitError, WebcamUtil } from 'ngx-webcam';
@Component({
  selector: 'app-image-webcam',
  templateUrl: './image-webcam.component.html',
  styleUrls: ['./image-webcam.component.css']
})
export class ImageWebcamComponent {
  
  private trigger: Subject<any> = new Subject();
  webcamImage: any; 
  private nextWebcam: Subject<any> = new Subject();

  sysImage = '';

  ngOnInit() {}

  public getSnapshot(): void {
    this.trigger.next(void 0);
  }

  public captureImg(webcamImage: WebcamImage): void {
    this.webcamImage = webcamImage;
    this.sysImage = webcamImage!.imageAsDataUrl;
    console.info('got webcam image', this.sysImage);
  }

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

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

Open src/app/image-webcam/image-webcam.component.html and add the following code

<div class="container mt-5">
  <h2>Angular Webcam Capture Image from Camera</h2>

  <div class="col-md-12">
    <webcam
      [trigger]="invokeObservable"
      (imageCapture)="captureImg($event)"
    ></webcam>
  </div>
  <div class="col-md-12">
    <button class="btn btn-danger" (click)="getSnapshot()">
      Capture Image
    </button>
  </div>
  <div class="col-12">
    <div id="results">Your taken image manifests here...</div>

    <img [src]="webcamImage?.imageAsDataUrl" height="400px" />
  </div>
</div>

Step 5. Integrate Webcam Component

Open src/app/app.component.html and add the following code:

<app-image-webcam></app-image-webcam>
<router-outlet></router-outlet>

Step 6. Run your Angular Application

ng serve -o

You should see your Angular application with webcam functionality. This covers the basic setup for integrating the ngx-webcam library into an Angular project.

If you encounter any issues or have further questions, feel free to let me know, and I'll be glad to assist.

Thank you for reading, and I hope this post has helped provide you with a better understanding of how to implement webcam image capture with ngx-webcam in Angular.

"Keep coding, keep innovating, and keep pushing the boundaries of what's possible.

Happy Coding.