Angular 16 Capture Images from System Webcam Tutorial

In this quick guide, we will show you how to enable a webcam and capture images from the system’s webcam in an angular application using the ngx-webcam package.

The ngx webcam is a handy module; it is a simple angular webcam component which comes with an easy-to-implement process. It offers many profound features that help you capture images from a mobile or desktop browser.

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

How to Capture Picture from Webcam in Angular 16

• Step 1: Install Angular CLI
• Step 2: Download Angular App
• Step 3: Install Ngx Webcam Module
• Step 4: Register Webcam in App Module
• Step 5: Capture Image from Webcam
• Step 6: Update View File
• Step 7: Run Angular Server

Install Angular CLI

Angular CLI tool allows to develop angular apps, use the given command to install the tool.

npm install -g @angular/cli

Download Angular App

In this step, we need to create a new angular app, here is the command which will install the app.

ng new ng-demo

After that, enter into the app folder.

cd ng-demo

Install Ngx Webcam Module

On to the terminal type the following command and install the ngx webcam module.

npm install ngx-webcam

Register Webcam in App Module

Head over to app/app.module.ts file, next start importing WebcamModule from ‘ngx-webcam’ package and add the module inside the imports array.

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

Capture Image from Webcam

You require to place the following code into the angular typescript template, hence go to app.component.ts file then add the given code.

import { Component, OnInit } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { WebcamImage, WebcamInitError, WebcamUtil } from 'ngx-webcam';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  private trigger: Subject<any> = new Subject();
  public webcamImage!: WebcamImage;
  private nextWebcam: Subject<any> = new Subject();
  sysImage = '';
  ngOnInit() {}
  public getSnapshot(): void {
    this.trigger.next(void 0);
  }
  public captureImg(webcamImage: WebcamImage): void {
    this.webcamImage = webcamImage;
    this.sysImage = webcamImage!.imageAsDataUrl;
    console.info('got webcam image', this.sysImage);
  }
  public get invokeObservable(): Observable<any> {
    return this.trigger.asObservable();
  }
  public get nextWebcamObservable(): Observable<any> {
    return this.nextWebcam.asObservable();
  }
}

Update View File

In this step, we will update the angular view template, therefore go to app.component.html file and put the given code within the file.

<div class="container mt-5">
  <h2>Angular Webcam Capture Image from Camera</h2>
  <div class="col-md-12">
    <webcam
      [trigger]="invokeObservable"
      (imageCapture)="captureImg($event)"
    ></webcam>
  </div>
  <div class="col-md-12">
    <button class="btn btn-danger" (click)="getSnapshot()">
      Capture Image
    </button>
  </div>
  <div class="col-12">
    <div id="results">Your taken image manifests here...</div>
    <img [src]="webcamImage?.imageAsDataUrl" height="400px" />
  </div>
</div>

Run Angular Server

To start the angular app you need to execute the given command, it will start your app on the given url.

ng serve --open

http://localhost:4200

Conclusion

A webcam is a digital video device that usually comes integrated into devices such as mobile and laptops. The primary use of a webcam is to capture pictures of a person sitting in-front of it.

In this profound tutorial, we have found the easiest way to capture images from the system through the angular application.