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