angular - 如何使用 ngx-webcam 在 Angular 中录制视频 - 捕获照片有效

Question

我目前正在开发一款可以在我的 Angular 应用程序中录制视频的相机。目前，使用以下代码，我可以访问我的相机并拍摄快照。

有人可以建议我应该在我的代码中修改什么以便能够拍摄视频吗？

App.module.ts 文件:

import {WebcamModule} from 'ngx-webcam';
...
imports: [
    ...
    WebcamModule
]

app.component.ts 文件:

import {WebcamImage} from 'ngx-webcam';
import {Subject, Observable} from 'rxjs';
...
export class AppComponent {
...
   // latest snapshot
   public webcamImage: WebcamImage = null;
   // webcam snapshot trigger
   private trigger: Subject<void> = new Subject<void>();
   triggerSnapshot(): void {
    this.trigger.next();
   }
   handleImage(webcamImage: WebcamImage): void {
    console.info('received webcam image', webcamImage);
    this.webcamImage = webcamImage;
   }
  
   public get triggerObservable(): Observable<void> {
    return this.trigger.asObservable();
   }
}

app.component.html 文件:

<webcam [height]="500" [width]="500" [trigger]="triggerObservable" (imageCapture)="handleImage($event)"></webcam>
<!-- Button Takes Photo -->
<button class="actionBtn" (click)="triggerSnapshot();">Take A Snapshot</button>
<!-- Snapshot Div where image will be shown -->
<div class="snapshot" *ngIf="webcamImage">
  <h2>Take your image or get another</h2>
  <img [src]="webcamImage.imageAsDataUrl"/>
</div>

Answer 1

ngx-webcam 还不支持开箱即用的录制。 https://github.com/basst314/ngx-webcam/issues/38它的内置功能

• 网络摄像头实时取景
• 拍照
• 现代操作系统的智能手机兼容性(操作系统必须支持 WebRTC/UserMedia API)
• 访问前置和后置摄像头(如果存在多个摄像头)
• 智能手机上的纵向和横向模式
• 面向用户的摄像头的镜像实时取景 - 手机上的“自拍 View ”
• 捕获无损像素图像数据以进行更好的后期处理。我建议研究不同的包或方法。
• how to record the video through webcam using javascript您可能最终不得不降低级别并构建自己的解决方案。
• https://developers.google.com/web/fundamentals/media/recording-video