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

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
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();  }}
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>
<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
ng serve --open
Go to the browser and open the Localhost:4200:
Press the button and see the output snapshot:
AngularJS-Misc
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Angular Libraries For Web Developers
Auth Guards in Angular 9/10/11
What is AOT and JIT Compiler in Angular ?
How to set focus on input field automatically on page load in AngularJS ?
How to bundle an Angular app for production?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Convert a string to an integer in JavaScript