¿Cómo habilitar la cámara web en Angular 10 usando ngx-webcam?

El componente ngx-webcam brinda acceso a la cámara web para tomar instantáneas simplemente a través de acciones y enlaces de eventos en Angular 10. Este componente nos brinda control total y permiso para capturar imágenes de una manera fácil.

Pasos para agregar una cámara web a su aplicación:

Instalar Angular 10
Crear un proyecto CLI angular
Instale el paquete con el comando npm estándar:
```
npm i ngx-webcam
```

Agregue la importación del componente WebcamModule al archivo app.module.ts como se muestra a continuación:

Ahora agregue el componente WebcamImage de la biblioteca de paquetes ngx-webcam en el archivo app.component.ts y utilícelo en AppComponent Class para manejar la funcionalidad de la cámara web.

import { Component } from '@angular/core';
import {WebcamImage} from 'ngx-webcam';
import {Subject, Observable} from 'rxjs';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'gfgangularwebcam';
  
  public webcamImage: WebcamImage = null;
  private trigger: Subject<void> = new Subject<void>();
  triggerSnapshot(): void {
   this.trigger.next();
  }
  handleImage(webcamImage: WebcamImage): void {
   console.info('Saved webcam image', webcamImage);
   this.webcamImage = webcamImage;
  }
   
  public get triggerObservable(): Observable<void> {
   return this.trigger.asObservable();
  }
}

A continuación se muestra el código app.component.html:

<div>
<webcam [height]="400" 
        [width]="1000" 
        [trigger]="triggerObservable"
            (imageCapture)="handleImage($event)">
 </webcam>
  
<button class="actionBtn" (click)="triggerSnapshot();">
    Click Here and take the Shot</button>
  
<div class="snapshot" *ngIf="webcamImage">
  <h2>Here is your image!</h2>
  <img [src]="webcamImage.imageAsDataUrl"/>
</div>

Para ejecutar esta aplicación, ejecute el siguiente comando en la terminal:
```
ng serve --open
```

Vaya al navegador y abra Localhost:4200:

Presione el botón y vea la instantánea de salida:

Publicación traducida automáticamente

Artículo escrito por ShilpiBose2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta