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.
