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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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();
      }
    }

    chevron_right

    
    

  • Below is the app.component.html code:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    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>

    chevron_right

    
    

  • 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:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.