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

Last Updated : 21 Aug, 2020

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
```
package.json

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

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.

javascript

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:

html

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