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

如果你正在开发一个需要使用网络摄像头的Angular应用程序，你可以使用ngx-webcam来启用网络摄像头。ngx-webcam是一个Angular库，它封装了WebRTC WebAPI，帮助Angular开发者轻松地在浏览器中启用网络摄像头。

以下是在Angular 10中使用ngx-webcam启用网络摄像头的步骤：

安装ngx-webcam

首先，你需要在你的Angular应用程序中安装ngx-webcam。你可以使用npm进行安装：

npm install ngx-webcam --save

配置AppModule

然后，在app.module.ts文件中引入ngx-webcam并将它添加到imports数组中：

import { WebcamModule } from 'ngx-webcam';

@NgModule({
  imports: [
    BrowserModule,
    WebcamModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

添加Webcam组件

接下来，在你的组件模板中添加Webcam组件：

<webcam [height]="480" [width]="640"></webcam>

这将在你的应用程序中显示一个网络摄像头。你可以设置相应的高度和宽度属性。

在组件中访问网络摄像头

最后，在你的组件中添加以下代码来访问网络摄像头：

import { Component, OnInit } from '@angular/core';
import { WebcamImage, WebcamInitError, WebcamUtil } from 'ngx-webcam';

@Component({
  selector: 'app-webcam',
  templateUrl: './webcam.component.html',
  styleUrls: ['./webcam.component.scss']
})
export class WebcamComponent implements OnInit {
  public webcamImage: WebcamImage = null;
  public error: WebcamInitError = null;

  public ngOnInit(): void {
    WebcamUtil.getAvailableVideoInputs()
      .then((mediaDevices: MediaDeviceInfo[]) => {
        console.log(mediaDevices);
      });
  }

  public triggerSnapshot(): void {
    this.webcamImage = null;
    this.webcam.capture()
      .then((image: WebcamImage) => {
        this.webcamImage = image;
      })
      .catch((error: WebcamInitError) => {
        this.error = error;
      });
  }

  public handleInitError(error: WebcamInitError): void {
    this.error = error;
  }

  public handleImage(webcamImage: WebcamImage): void {
    console.log('received webcam image', webcamImage);
  }

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

在这个组件中，我们可以使用ngOnInit函数来获取可用的视频输入设备。接下来，我们定义了一个triggerSnapshot函数来捕获网络摄像头图像。该函数使用capture()方法来捕获图像，并在webcamImage变量上设置它。我们也有一些处理错误的函数，以及处理捕获的图像函数。

结论

现在你已经了解了如何在Angular 10中使用ngx-webcam启用网络摄像头。使用这个库，你可以轻松地访问网络摄像头并获取图像。