Angular 10Angular 9Javascript

How to access webcam in angular 10 application?

angular 10 webcam access

Hello to all, welcome to therichpost.com. In this post, I will tell you, how to access webcam in angular 10 application?

angular 10 webcam access
angular 10 webcam access

Angular 10 came and if you are new in Angular 10 then please check my old posts related to angular 10.

Post Working:

In this post, I am telling you, how to access webcam into our angular 10 application and its features and we can also take photos and in my next post, I will you, how to make video recording in angular 10 application.

Here is the code snippet and please follow carefully:

1. Very first, here are common basics steps to add angular 10 application on your machine:

npm install -g @angular/cli

ng new angularwebcam // Set Angular10 Application on your pc

cd angularwebcam // Go inside project folder

ng serve // Run project

http://localhost:4200/  //Check working Local server

 

2. Now run below command into your terminal to include ngx webcam package into your angular 10 application:

npm i ngx-webcam

 

3. Now add below code into your app.module.ts file:

...
import {WebcamModule} from 'ngx-webcam';
...
imports: [
    ...
    WebcamModule
]

 

4. Now add below code into your app.component.ts file:

...
import {WebcamImage} from 'ngx-webcam';
import {Subject, Observable} from 'rxjs';
...
export class AppComponent {
...
   // latest snapshot
   public webcamImage: WebcamImage = null;

   // webcam snapshot trigger
   private trigger: Subject<void> = new Subject<void>();
   triggerSnapshot(): void {
    this.trigger.next();
   }
   handleImage(webcamImage: WebcamImage): void {
    console.info('received webcam image', webcamImage);
    this.webcamImage = webcamImage;
   }
  
   public get triggerObservable(): Observable<void> {
    return this.trigger.asObservable();
   }
}

 

5. Finally here is the code for app.component.html file:

<webcam [height]="500" [width]="500" [trigger]="triggerObservable" (imageCapture)="handleImage($event)"></webcam>

<!-- Button Takes Photo -->
<button class="actionBtn" (click)="triggerSnapshot();">Take A Snapshot</button>

<!-- Snapshot Div where image will be shown -->
<div class="snapshot" *ngIf="webcamImage">
  <h2>Take your image or get another</h2>
  <img [src]="webcamImage.imageAsDataUrl"/>
</div>

 

This is it and if you have any kind of query then please watch above video or you can comment below.

Jassa

Thanks

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10 Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

20 Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.