Welcome folks today in this blog post we will be taking selfie pictures
from webcam and download it as jpg and png
using ngx-webcam
library in browser using ngx-webcam
library. All the full source code of the application is shown below.
Get Started
In order to get started you need to make a new angular
project using the below command as shown below
ng new sampleapp
And now you need to install the below libraries using the npm
command as shown below
npm i ngx-webcam
And after that you will see the below directory
structure of the angular project as shown below
And now we need to include the ngx-webcam
inside the app.module.ts
file as shown below
app.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import {BrowserModule} from '@angular/platform-browser'; import {NgModule} from '@angular/core'; import {AppComponent} from './app.component'; import {FormsModule} from '@angular/forms'; import {WebcamModule} from 'ngx-webcam'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, WebcamModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
Now we need to go to app.component.html
file and copy paste the below html
code
app.component.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<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> |
As you can see we have the area
where we will be displaying the user
webcam and then we have the button to take the snapshot
or selfie image of the user. And also we have the option to change the webcam
And now if you go to app.component.ts
file and copy paste the below typescript
code
app.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
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(); } } |
As you can see we are defining the method
to capture the screenshot of the user webcam and then downloading
it as an attachment