Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

Angular 14 Project to Take Selfie Pictures JPG,PNG From Webcam in Browser Using ngx-webcam Library

Posted on January 19, 2023

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

 

 

TypeScript
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

 

 

TypeScript
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

 

 

 

 

 

Recent Posts

  • Build a JWT Login & Registration Auth System in Node.js & Express Using MongoDB in Browser
  • React-Admin Example to Create CRUD REST API Using JSON-Server Library in Browser Using Javascript
  • Javascript Papaparse Example to Parse CSV Files and Export to JSON File and Download it as Attachment
  • Javascript Select2.js Example to Display Single & Multi-Select Dropdown & Fetch Remote Data Using Ajax in Dropdown
  • Video.js Video Player Plugin Library in Javascript For Playing Videos in Browser
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme