Angular 16 Tutorial: Capture Images from System’s Webcam

Last Updated on by in Angular

A digital video camera, directly or indirectly linked to a computer is called webcam. Webcams help with live streaming, video conferencing, stream recording, and capturing images from browsers to post straight to social media.

In this tutorial we will learn how to use the ngx-webcam package to capture images, photos from system’s webcam using an Angular application, as well as how to programmatically enable a webcam.

How does ngx-webcam assist in capturing images from a webcam within Angular

The ngx-webcam is a dynamic JavaScript-based component that gives full control over the system’s webcam. It prepares your Angular app for live broadcasting and helps you use your computer’s webcam to take selfies from a browser.

A light-weight library comes with no unnecessary Flash fallbacks and no bundle-size bloating. It provides convenient ways that allow web developers to create specialized components for managing webcam-related operations and provide direct access to webcams through the Angular platform.

Checkout the comprehensive array of ngx-webcam features:

  • 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.

Install Angular CLI

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

sudo 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

Angular 16 Capture Images from System Webcam Tutorial

Conclusion

A webcam is a digital video device typically integrated into devices like computers, mobile phones, and laptops. Its primary function is to capture pictures of a person and enable live-streaming or video telephony.

In this short guide, we have learned how to start the webcam in the browser and capture the images, including computer selfies, from the webcam using the angular component.

In this post, we have focused on the basics of how to use webcams in Angular. Although, there are many more areas that remain uncovered. For example, providing fallback options for unsupported browsers and devices, handling errors while accessing the webcam, etc. You can delve deeply into the topic and extend the functionalities based on your requirements.

If you liked this guide, make sure to share it with others.

Suggested Links

Reference: NGX Webcam

Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.