How to capture camera images in Angular?

In the Angular web application, we can implement an Angular camera using a different library. In the mobile application, we can use a native camera to take a snapshot from the camera or to choose images from the mobile device image library.

In this tutorial, we’ll learn how to used ngx-webcam library to capture image from our mobile or desktop browser. This library provide simple angular webcam component and it is very simple to use. The one component gives you full control and lets you take snapshots via actions and event bindings.

Different approach of capturing an image in Angular

There are different libraries to capture images in angular. The first approach using a native HTML video tag and MediaDevice interface to implement an angular camera without third-party libraries. WebRTC standard provides APIs for accessing cameras and microphones connected to the computer or smartphone. These devices are commonly referred to as Media Devices and can be accessed with JavaScript through the navigator.mediaDevices object, which implements the MediaDevices interface.

The second approach and most common way of capturing images are using the ngx-webcam library. There are lots of other third-party libraries, we will use the most popular Angular camera library called ngx-webcam.

Example of Angular camera to capture Image

In these articles, we’ll implement a capturing image using ngx-webcam library. Let first create an Angular project and add a new angular component called the camera to implement camera activities. Also need to install a third-party library ngx-webcam to capture an image in our angular application. The ngx-webcam, angular webcam component has the following features.

  • Webcam live view
  • Photo capturing
  • Access to front- and back-camera, if multiple cameras exist
  • Smartphone compatibility for modern OS’s (OS must support WebRTC/UserMedia API)
  • Mirrored live-view for user-facing cameras – “selfie view” on phones
  • Portrait & Landscape mode on smartphones
  • Capturing of lossless pixel image data for better post-processing.

Here is a screenshot of what we are building

Angular camera example
Angular camera example screenshot
ng new angularCamera
cd angularCamera
ng generate component camera
npm i ngx-webcam --save

Running the above command in the terminal will create our angular project, camera component, and install the ngx-webcam library to our application.

Import WebcamModule in our angular Module

We need to import our WebcamModule from our ngx-webcam in our app.module.ts file as.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { WebcamModule } from 'ngx-webcam';
import { CameraComponent } from './camera/camera.component';


@NgModule({
  declarations: [
    AppComponent,
    CameraComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule,
    WebcamModule
  ],
  providers: [ CourseService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Configuring Angular camera Component

In our camera component, we’ll be handling all tasks related to the angular camera. In modern devices, most of the devices have more than one camera. In our camera component, we’ll perform camera activities like switching between cameras if having more than, one camera, showing|hiding camera, and capturing an image. Let’s add a three-button to our camera component to perform the above task. Edit camera.component.html file as.

<div *ngIf="isCameraExist; else noCameraExist">
    <div style="text-align:center">
        <div class="btn-group">
            <button class="button" (click)="takeSnapshot()">Take Picture</button>
            <button class="button" (click)="changeWebCame(true)">Toggle Camera</button>
            <button class="button" (click)="onOffWebCame()">Switch camera</button>
        </div> <br />
        <webcam [height]="500" [width]="1000" [trigger]="triggerObservable" (imageCapture)="handleImage($event)"
            *ngIf="showWebcam" [switchCamera]="nextWebcamObservable"></webcam>
    </div>

    <div *ngIf="errors.length > 0">
        <h4>Error Messages:</h4>
        <ul *ngFor="let error of errors">
            <li>{{ error | json }}</li>
        </ul>
    </div>
</div>

<ng-template #noCameraExist>
    Camera device not available
</ng-template>

We have the isCameraExist variable to check if the camera exists or not, if not, we are displaying a message saying the camera does not exist on the device. Edit camera.component.ts file.

import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { WebcamImage, WebcamInitError, WebcamUtil } from 'ngx-webcam';
import { Observable, Subject } from 'rxjs';

@Component({
  selector: 'app-camera',
  templateUrl: './camera.component.html',
  styleUrls: ['./camera.component.scss']
})
export class CameraComponent implements OnInit {
  @Output() getPicture = new EventEmitter<WebcamImage>();
  showWebcam = true;
  isCameraExist = true;

  errors: WebcamInitError[] = [];

  // webcam snapshot trigger
  private trigger: Subject<void> = new Subject<void>();
  private nextWebcam: Subject<boolean | string> = new Subject<boolean | string>();

  constructor() { }


  ngOnInit(): void {
    WebcamUtil.getAvailableVideoInputs()
      .then((mediaDevices: MediaDeviceInfo[]) => {
        this.isCameraExist = mediaDevices && mediaDevices.length > 0;
      });
  }

  takeSnapshot(): void {
    this.trigger.next();
  }

  onOffWebCame() {
    this.showWebcam = !this.showWebcam;
  }

  handleInitError(error: WebcamInitError) {
    this.errors.push(error);
  }

  changeWebCame(directionOrDeviceId: boolean | string) {
    this.nextWebcam.next(directionOrDeviceId);
  }

  handleImage(webcamImage: WebcamImage) {
    this.getPicture.emit(webcamImage);
    this.showWebcam = false;
  }

  get triggerObservable(): Observable<void> {
    return this.trigger.asObservable();
  }

  get nextWebcamObservable(): Observable<boolean | string> {
    return this.nextWebcam.asObservable();
  }

}


In ngOnInit method, we are checking if the camera exists or not and we also have a method to toggle to show and hide the camera. The takeSnapshot() method takes snapshot images from the camera in our angular application.

The @Output() decorator is linked to events that can be used to listen for data changes or other events that a parent component might be interested in and can also be used to share data up the component tree from the child to the parent component. Once we have a snapshot image, we are hiding the camera, and then we are passing the image from the camera component to its parent component.

For ngx-webcam, webcam component we have input and output all input is optional. We’ll discuss some import input and output
1. trigger: Observable: Is an input observable to trigger image capturing. When it fires, an image will be captured and emitted (via event binding which we have discussed before).
2. imageCapture: EventEmitter: Is an output and whenever an image is captured (i.e. triggered by [trigger]), the image is emitted via this EventEmitter. The image data is contained in the WebcamImage data structure as both, plain Base64 string and data-url.
3. cameraSwitched: EventEmitter: Emits the active deviceId after the active video device has been switched.

Edit camera.component.scss file to add style for camera and button.

.button {
  color: white;
  background-color: blue;
  padding: 4px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 2px;
}

ul.links {
  padding-bottom: 10px;
}

Displaying Angular camera image in the parent component

In our parent component app.component.ts, we have to receive a snapshot image from the camera component and will display the image in the parent component. We have a child camera tag in our parent component as <app-camera (getPicture)=”handleImage($event)”></app-camera>. The (getPicture) tells Angular that this is an event binding, which is a form of one-way binding where data flows from the element to the rest of the application.

<app-camera (getPicture)="handleImage($event)"></app-camera>

<div class="webcam-image" *ngIf="webcamImage">
  <img [src]="webcamImage.imageAsDataUrl" />
</div>

Edit app.component.ts file as.

import { Component } from '@angular/core';
import { WebcamImage } from 'ngx-webcam';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  webcamImage: WebcamImage = null;

  handleImage(webcamImage: WebcamImage) {
    this.webcamImage = webcamImage;
  }
}

In our child component, we have @Output() event binding, which pass are images from our child component to the parent component. In our case camera component is a child, whenever the image is captured it passes the image value to the parent component app.component.

Conclusion
We have completed our articles on how to capture images from a camera in an Angular application using ngx-webcam. You can customize the style of the camera component to your needs. If you want the code for the Angular camera, we have this in our Github repository.

Related posts

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top