Thursday, July 17, 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
32143 POSTS0 COMMENTS
Milvus
67 POSTS0 COMMENTS
Nango Kala
6526 POSTS0 COMMENTS
Nicole Veronica
11674 POSTS0 COMMENTS
Nokonwaba Nkukhwana
11729 POSTS0 COMMENTS
Shaida Kate Naidoo
6616 POSTS0 COMMENTS
Ted Musemwa
6893 POSTS0 COMMENTS
Thapelo Manthata
6585 POSTS0 COMMENTS
Umr Jansen
6573 POSTS0 COMMENTS