Usare la webcam in Angular

Oggi vediamo come usare la webcam in Angular.

Pparliamo sia di usare la webcam del pc, che la fotocamera del cellulare/tablet; testato con Windows 10 e Android, ma in tutti i casi vi verrà richiesto il permesso di usare la fotocamera.

Prima di tutto installiamo la libreria ngx-webcam:

$ npm install --save ngx-webcam

Poi dovete aggiungere il modulo WebcamModule nel file 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 {
}

Questo il codice Typescript del componente dove richiamiamo la webcam:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {

  @Output() getPicture = new EventEmitter<WebcamImage>();

  showWebcam = true;
  isCameraExist = true;

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

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

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

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

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

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

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

}

E questa la parte HTML:

<div *ngIf="isCameraExist; else noCameraExist">
  <div style="text-align:center">
    <div class="btn-group">
      <button class="button" (click)="scattaFoto()">Scatta foto</button>
      <button class="button" (click)="orientamentoWebcam(true)">Cambia orientamento</button>
      <button class="button" (click)="onOffWebcam()">On/Off webcam</button>
    </div>
    <br/>
    <webcam [height]="500" [width]="1000" [trigger]="triggerObservable" (imageCapture)="handleImage($event)"
            *ngIf="showWebcam" [switchCamera]="nextWebcamObservable"></webcam>
  </div>
</div>

<ng-template #noCameraExist>
  Nessuna webcam disponibile
</ng-template>

Con l'immagine scattata non ci facciamo nulla; ci limitiamo a visualizzare in console il data-uri.

Cosa volete farci dipenderà da voi!

Enjoy!