ItSolutionStuff.com

How to Capture Picture from Webcam in Angular 13?

By Hardik Savani • October 20, 2023
Angular

Hello,

Today, angular 13 webcam capture photo is our main topic. Here you will learn capture image from webcam angular 13. This post will give you simple example of capture image from camera angular 13. it's simple example of angular 13 capture image from camera.

In this example, we will use @ngx-webcam npm package for accessing the webcam in angular. Then we will simply start the webcam in div with "take a Snapshot" button. When you click on the button then take a picture and show you on the right side div. here we will get images in base64 string and display them.

So, let's follow the below step to take a Snapshot from your webcam or camera.

Preview:

Step 1: Create New App

You can easily create your angular app using bellow command:

ng new myNewApp

Step 2: Install Webcam npm Package

Now in this step, we need to just install @ngx-webcam in our angular application. so let's add as like bellow:

npm i ngx-webcam

Step 3: Import WebcamModule

we will import WebcamModule module as like bellow code:

src/app/app.module.ts

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

here, we need to update ts file as like bellow:

src/app/app.component.ts

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

here, we need to update html file as like bellow code:

src/app/app.component.html

<div class="container">

<h1>Angular Webcam Capture Image from Camera - ItSolutionStuff.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>

Run Angular App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Angular app:

ng serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:4200

now you can check it.

I hope it can help you...

Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube

We Are Recommending You

How to Use Material Font Icons in Angular 13?

Read Now →

How to use Fullcalendar in Angular 13?

Read Now →

Angular 13 Stripe Payment Integration Example

Read Now →

How to Create/Generate QR Code in Angular 13?

Read Now →

Angular 13 Google Maps Integration Example

Read Now →

Angular 13 Server Side Pagination Example

Read Now →

Angular 13 RxJS Observable with Httpclient Example

Read Now →

Angular 13 CRUD Application Example Tutorial

Read Now →

Angular 13 Multiple File Upload Tutorial

Read Now →

Angular 13 Image Upload with Preview Tutorial

Read Now →

Angular 13 Reactive Forms Validation Tutorial Example

Read Now →