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