angular - 使用 ngx-webcam 捕获图像后暂停或冻结图像

Question

按下相机按钮后，我想冻结窗口中的网络摄像头视频（例如图片）。但我不确定是否可以使用ngx-webcam 选项

我查看了传入的不同选项，并尝试了几个不同的选项，例如：

[captureImageData]="真"

我尝试通过这样的打字稿访问和拍照

@ViewChild('webcam') webcamComp: 网络摄像头组件；this.webcamComp.takeSnapshot(); // 触发 imageCaptured()

但似乎没有任何效果。

这是我拍摄网络摄像头图像的一些代码

imageBase64: any;
croppedImage: any;
deviceId: string;
webcamImage: WebcamImage = null;
trigger: Subject<void> = new Subject<void>();
nextWebcam: Subject<boolean|string> = new Subject<boolean|string>();



imageCaptured(webcamImage: WebcamImage): void {
  this.webcamImage = webcamImage;
  this.imageBase64 = webcamImage.imageAsDataUrl;

  // other code here
}
 
get triggerObservable(): Observable<void> {
  return this.trigger.asObservable();
}

get nextWebcamObservable(): Observable<boolean|string> {
  return this.nextWebcam.asObservable();
}

cameraWasSwitched(deviceId: string): void {
  this.deviceId = deviceId;
}

triggerSnapshot(): void {
  this.trigger.next();
}

showNextWebcam(directionOrDeviceId: boolean|string): void {
  this.nextWebcam.next(directionOrDeviceId);
}

<webcam *ngIf="showWebcam"
    (imageCapture)="imageCaptured($event)" 
    (initError)="handleInitError($event)"
    [trigger]="triggerObservable"    
    [allowCameraSwitch]="true" 
    [switchCamera]="nextWebcamObservable"
    [width]="webcamWidth"
    [height]="webcamHeight"
    [captureImageData]="true"
    (cameraSwitched)="cameraWasSwitched($event)">
</webcam>

我可以从现场演示中看到您可以将图像放在 img 源中，但我想使用图像代替网络摄像头（冻结图像）。我不想在页面的其他区域显示它。

标签： angulartypescriptngx-webcam