Angular Webcam Capture Image from Camera Example

In this short tutorial we will cover an angular webcam capture photo. Here you will learn capture image from webcam angular. This article goes in detailed on capture image from camera angular. I explained simply about angular capture image from camera. you will do the following things for angular get image from camera.

You can use this example with angular 8, angular 9, angular 10, angular 11, angular 12, angular 13, angular 14, angular 15, angular 16 and angular 17 version.

In this example, we will use the @ngx-webcam npm package to access the webcam in angular. Then we will simply start the webcam in div with the "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...