如何使用 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 它的内置功能

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

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

How to record a video in Angular with the use of ngx-webcam- capturing photos works

video

webcam

angular