How to Capture Picture from Webcam in Angular 13?

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