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

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

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 {
}

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

<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>

<h2>Angular Webcam Capture Image from Camera</h2>

<webcam

[trigger]="invokeObservable"

(imageCapture)="captureImg($event)"

></webcam>

</div>

Capture Image

</button>

</div>

<div id="results">Your taken image manifests here...</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

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();
  }
}

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