Thursday, August 28, 2025
HomeLanguagesAngularHow to Capture Image from Webcam in Angular

How to Capture Image from Webcam in Angular

Capture images from a webcam in angular app; Through this tutorial, we will learn how to capture images from webcam in angular applications.

How to Capture Image from Webcam in Angular

  • Step 1 – Create New Angular App
  • Step 2 – Install Webcam npm Package
  • Step 3 – Import WebcamModule
  • Step 4 – Update Ts File
  • Step 5 – Update HTML File
  • Step 6 – Run Angular App

Step 1 – Create New Angular App

First of all, open a terminal and execute the following command on the command line or terminal to create a new angular app:

ng new myApp

Step 2 – Install Webcam npm Package

Then execute the following command on the command line to install the webcam npm package:

npm i ngx-webcam

Step 3 – Import WebcamModule

Visit src/app/ directory and open the app.module.ts file. And after that, import the webcam module in the app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
  
import { AppComponent } from './app.component';
  
import { WebcamModule } from 'ngx-webcam';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    WebcamModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4 – Update Ts File

Visit src/app/ directory and open the app.component.ts file. And after that, update the following code into it:

import { Component, OnInit } from '@angular/core';
import { Subject, Observable } from 'rxjs';
import { WebcamImage, WebcamInitError, WebcamUtil } from 'ngx-webcam';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  
    private trigger: Subject = new Subject();

    public webcamImage!: WebcamImage;
    private nextWebcam: Subject = new Subject();

    captureImage  = '';
  
    ngOnInit() {}
  
    /*------------------------------------------
    --------------------------------------------
    triggerSnapshot()
    --------------------------------------------
    --------------------------------------------*/
    public triggerSnapshot(): void {
        this.trigger.next();
    }
  
    /*------------------------------------------
    --------------------------------------------
    handleImage()
    --------------------------------------------
    --------------------------------------------*/
    public handleImage(webcamImage: WebcamImage): void {
        this.webcamImage = webcamImage;
        this.captureImage = webcamImage!.imageAsDataUrl;
        console.info('received webcam image', this.captureImage);
    }
  
    /*------------------------------------------
    --------------------------------------------
    triggerObservable()
    --------------------------------------------
    --------------------------------------------*/
    public get triggerObservable(): Observable {

        return this.trigger.asObservable();
    }
  
    /*------------------------------------------
    --------------------------------------------
    nextWebcamObservable()
    --------------------------------------------
    --------------------------------------------*/
    public get nextWebcamObservable(): Observable {

        return this.nextWebcam.asObservable();
    }
 
}

Step 5 – Update HTML File

Update html file code, so visit src/app/ directory and open app.component.html file. Then update the following code into it:

<div class="container">
  
    <h1>Angular Webcam Capture Image from Camera - Tutsmake.com</h1>
  
    <div class="row">
        <div class="col-md-6">
  
            <webcam 
                [trigger]="triggerObservable" 
                (imageCapture)="handleImage($event)"></webcam>
              
            <button class="btn btn-success" (click)="triggerSnapshot();">Take A Snapshot</button>
        </div>
        <div class="col-md-6">
  
            <div id="results">Your captured image will appear here...</div>
            <img src="{{ captureImage }}" height="300px">
  
        </div>
    </div>
</div>

Step 6 – Run Angular App

Execute the following command on the command line to start the angular app:

ng serve

Open a web browser, and type the given URL into it:

http://localhost:4200

Conclusion

Through this tutorial, we have learned how to capture images from webcams in angular applications.

Recommended Tutorials

RELATED ARTICLES

Most Popular

Dominic
32236 POSTS0 COMMENTS
Milvus
80 POSTS0 COMMENTS
Nango Kala
6609 POSTS0 COMMENTS
Nicole Veronica
11779 POSTS0 COMMENTS
Nokonwaba Nkukhwana
11828 POSTS0 COMMENTS
Shaida Kate Naidoo
6719 POSTS0 COMMENTS
Ted Musemwa
7002 POSTS0 COMMENTS
Thapelo Manthata
6678 POSTS0 COMMENTS
Umr Jansen
6690 POSTS0 COMMENTS