如何使用ngx-webcam在Angular 10中启用网络摄像头？

ngx-webcam组件提供了访问Webcam的权限，只需通过Angular 10中的操作和事件绑定即可拍摄快照。此组件使我们能够完全控制并允许以简单的方式捕获图像。

将网络摄像头添加到您的应用程序的步骤：

• 安装Angular 10
• 创建一个Angular CLI项目
• 通过标准npm命令安装软件包：

  npm i ngx-webcam

  

• 将WebcamModule组件导入添加到app.module.ts文件，如下所示：

• 现在，将ngx-webcam包库中的WebcamImage组件添加到app.component.ts文件中，并在AppComponent类中使用它来处理网络摄像头的功能。

  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 = new Subject();
    triggerSnapshot(): void {
     this.trigger.next();
    }
    handleImage(webcamImage: WebcamImage): void {
     console.info('Saved webcam image', webcamImage);
     this.webcamImage = webcamImage;
    }
     
    public get triggerObservable(): Observable {
     return this.trigger.asObservable();
    }
  }
  

• 以下是app.component.html代码：

  
  
   
    
  
      Click Here and take the Shot
    
  
    
  Here is your image!
    
  
  

• 要运行此应用程序，请在终端上运行以下命令：

  ng serve --open

• 转到浏览器并打开Localhost：4200：

• 按下按钮，查看输出快照：