Angular 16 Capture Images from System Webcam Tutorial
In this quick guide, we will show you how to enable a webcam and capture images from the system’s webcam in an angular application using the ngx-webcam package.
The ngx webcam is a handy module; it is a simple angular webcam component which comes with an easy-to-implement process. It offers many profound features that help you capture images from a mobile or desktop browser.
- 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.
How to Capture Picture from Webcam in Angular 16
- Step 1: Install Angular CLI
- Step 2: Download Angular App
- Step 3: Install Ngx Webcam Module
- Step 4: Register Webcam in App Module
- Step 5: Capture Image from Webcam
- Step 6: Update View File
- Step 7: Run Angular Server
Install Angular CLI
Angular CLI tool allows to develop angular apps, use the given command to install the tool.
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
Conclusion
A webcam is a digital video device that usually comes integrated into devices such as mobile and laptops. The primary use of a webcam is to capture pictures of a person sitting in-front of it.
In this profound tutorial, we have found the easiest way to capture images from the system through the angular application.