Usare la webcam in Angular

Mattepuffo's logo
Usare la webcam in Angular

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!


Condividi su Facebook

Commentami!