How to Enable Webcam in Angular 10 using ngx-webcam ?

ngx-webcam component provides access of webcam to take snapshots simply via actions and event-bindings in Angular 10. This component gives us full control and permission to capture images in an easy way.

Steps to add webcam to your application:

• Install Angular 10
• Create a Angular CLI Project
• Install the package by standard npm command :

  npm i ngx-webcam

  

• Add the WebcamModule component import to app.module.ts file as shown below:

• Now add the WebcamImage component from ngx-webcam package library in app.component.ts file and use it in AppComponent Class to handle the functionality of webcam.

  import { Component } from '@angular/core';
  import {WebcamImage} from 'ngx-webcam';
  import {Subject, Observable} from 'rxjs';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
  })
  export class AppComponent {
    title = 'gfgangularwebcam';
  
    public webcamImage: WebcamImage = null;
    private trigger: Subject<void> = new Subject<void>();
    triggerSnapshot(): void {
     this.trigger.next();
    }
    handleImage(webcamImage: WebcamImage): void {
     console.info('Saved webcam image', webcamImage);
     this.webcamImage = webcamImage;
    }
  
    public get triggerObservable(): Observable<void> {
     return this.trigger.asObservable();
    }
  }

• Below is the app.component.html code:

  <div>
  <webcam [height]="400"
          [width]="1000"
          [trigger]="triggerObservable"
              (imageCapture)="handleImage($event)">
   </webcam>
  
  <button class="actionBtn" (click)="triggerSnapshot();">
      Click Here and take the Shot</button>
  
  <div class="snapshot" *ngIf="webcamImage">
    <h2>Here is your image!</h2>
    <img [src]="webcamImage.imageAsDataUrl"/>
  </div>

• To run this application, run the following command at the terminal:

  ng serve --open

• Go to the browser and open the Localhost:4200:

• Press the button and see the output snapshot: