How To Capture Photo Using Ngx-webcam In Angular 12

In this article, we will learn how to capture a photo using an ngx-webcam in Angular 12.

What is ngx-webcam?

ngx-webcam library is used to capture images from our mobile or desktop browser. This library provides a simple angular webcam component and it is very simple to use. The one component gives you full control and lets you take snapshots via actions and event bindings. Plug-and-play This library contains a single module that can be imported into every standard Angular 13+ project.

ngx-webcam features

1. Webcam live view.
2. Photo capturing.
3. Access to front- and back cameras, if multiple cameras exist.
4. Smartphone compatibility for modern OS (OS must support WebRTC/UserMedia API).
5. Mirrored live-view for user-facing cameras – “selfie view” on phones.
6. Portrait & Landscape mode on smartphones.
7. Capturing lossless pixel image data for better post-processing.

Prerequisites:

• Basic knowledge of Angular.
• Code editor likes VS Code.

First, create a new project in Angular using this command.

ng new AngularCamera

Then open the project in visual code and installs the following package.

npm i ngx-webcam --save

Open the app.module.ts and paste the following code into it.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { WebcamModule } from 'ngx-webcam';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    WebcamModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Open the app.component.ts and paste the following code into it.

import { Component } from '@angular/core';
import { Subject } from "rxjs/Subject";
import { Observable } from "rxjs/Observable";
import { WebcamImage } from 'ngx-webcam';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  seconds: number | any;
  trigger: Subject<void> = new Subject<void>();

  webcamImage: WebcamImage | any;

  takePicture(): void {
    this.seconds = 3;
    setTimeout(() => {
      this.seconds = 2;
      setTimeout(() => {
        this.seconds = 1
        setTimeout(() => {
          this.trigger.next();
          this.seconds = null;
        }, 2000)
      }, 2000)
    }, 2000)
  }

  handleImage(webcamImage: WebcamImage): void {
    this.webcamImage = webcamImage;
    console.log(webcamImage.imageAsDataUrl);
  }

  get triggerObservable(): Observable<void> {
    return this.trigger.asObservable();
  }
}

Open the app.component.html and paste the following code into it.

<div style="text-align:center">
  <div>
    <p>{{seconds}}</p>
    <webcam [trigger]="triggerObservable" (imageCapture)="handleImage($event)"></webcam>
    <br />
    <div class="takePicture" (click)="takePicture()" title="Take Picture"><i class="fa fa-camera"></i></div>
  </div>
</div>
<div class="snapshot" *ngIf="webcamImage">
  <img [src]="webcamImage.imageAsDataUrl" style="padding-left: 620px;" />
</div>

Open the app.component.css and paste the following code into it.

p {
  position:absolute;
  top:50px;
  left:900px;
  font-size: 120px;
  font-weight: bold;
  z-index:10;
}
.takePicture {
  font-size: 100px;
  cursor: pointer;
}

Now add this CDN to your main index.html.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Output

Conclusion

In our article, we learn how to capture images from a camera in an Angular 12 application using ngx-webcam. You can customize the style of the camera component as per your needs. You can download the code from my Github repository.

Also, check How To Record Video In Angular 12