Angular 14 Capture Pictures from Webcam Tutorial

In this guide, we are going to learn about how to capture images or pictures using a webcam from an Angular application using the ngx-webcam module. Not just that, we will also teach you how to access webcam through angular component.

Every laptop comes with a webcam, and you can also additionally integrate a webcam into desktop systems. A webcam is a video camera connected to a computer; It allows users to capture images or motion videos.

We will show you how to build an angular app from scratch. In this app, we will create a component to write the code to implement image capturing from the webcam using the ngx-webcam. The webcam module is available through the NPM library, and it is effortless to install and even easier to set up in angular.

How to Take or Click Picture from Webcam with Angular 14

  • Step 1: Create Angular Project
  • Step 2: Install Webcam Package
  • Step 3: Inject Webcam in Main Module
  • Step 4: Build Image Capture Feature
  • Step 5: Set Up View File
  • Step 6: Run Angular Project

Create Angular Project

Let’s start building the functionality, we assume you must have installed the Angular CLI if not then run the following command.

npm install -g @angular/cli

Create the new angular app by using the angular cli command.

ng new angular-blog

Navigate to the application folder.

cd angular-blog

Install Webcam Package

We need to install the ngx-webcam module, In order to access the webcam via angular.

Execute the suggested command from the terminal.

npm i ngx-webcam

Inject Webcam in Main Module

We need to make the webcam package available throughout the angular app, for that we need to register or inject the webcam module in app.module.ts file.

import { WebcamModule } from 'ngx-webcam';

@NgModule({
  declarations: [],
  imports: [WebcamModule],
  providers: [],
  bootstrap: [],
})

export class AppModule {}

Build Image Capture Feature

Navigate to the app.component.ts file, import the WebcamImage, Observable and Subject modules define these modules with custom functions in AppComponent class.

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

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})

export class AppComponent implements OnInit {
  private initSub: Subject<any> = new Subject();

  public imgWebcam!: WebcamImage;
  private nextWebcam: Subject<any> = new Subject();

  imgDevice = "";

  ngOnInit() {}

  public getPicture(): void {
    this.initSub.next(void 0);
  }

  public getCapturePicture(webcamImage: WebcamImage): void {
    this.imgWebcam = webcamImage;
    this.imgDevice = webcamImage!.imageAsDataUrl;
    console.info("Webcam picture", this.imgDevice);
  }

  public get initObs(): Observable<any> {
    return this.initSub.asObservable();
  }

  public get nextWebcamObs(): Observable<any> {
    return this.nextWebcam.asObservable();
  }
}

Set Up View File

We must add the webcam directive, a button, and an img tag in the view template.

The webcam directive offers trigger and imageCapture properties, pass the corresponding methods and functions that we created in the TypeScript template.

The img placeholder will show the image which we capture using the webcam device.

Add the code in app.component.html file.

<div class="container">
  <div class="col-12">
    <webcam
      [trigger]="initObs"
      (imageCapture)="getCapturePicture($event)"
    ></webcam>
  </div>
  <div class="col-12">
    <button class="btn btn-dark" (click)="getPicture()">
      Take Picture
    </button>
  </div>
  <div class="col-12">
    <div id="output">Captured image goes here.</div>

    <img [src]="imgWebcam?.imageAsDataUrl" height="300px" />
  </div>
</div>

Run Angular Project

We have created the component, now we will test the app. Make sure to invoke the given command.

ng serve

Once the angular server is started, open the given url to test the app.

http://localhost:4200

Angular Capture Pictures from Webcam Tutorial

Summary

Thats all we have for you. Now you are ready to build the essential feature where you can take or click images from a webcam using the angular application.