如何使用NGX-WEBCAM捕获照片录制视频

发布于 2025-02-04 01:18:33 字数 1404 浏览 2 评论 0原文

我目前正在使用可以在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>

原文

I am currently working on a camera that would record videos in my angular app. Currently, with the below code, I can access my camera and take snapshots.

Can someone please advise what I should amend in my code in order to have the ability to take a video?

App.module.ts file:

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

app.component.ts file:

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 file:

<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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

跨年 2025-02-11 01:18:34

ngx-webcam尚未支持盒子录制。 https://github.com/basst314/ngx-webcam/ngx-webcam/sissues/38
＆nbsp;
它内置的功能
＆nbsp;

网络摄像头实时视图
照片捕获
现代操作系统的智能手机兼容性（OS必须支持WEBRTC/USERMEDIA API）
访问前置和背相机的访问，如果存在多个摄像机，则存在
肖像＆amp;智能手机上的景观模式
镜像用于面向用户的摄像机的实时视图 - 手机上的“自拍视图”
捕获无损像素图像数据，以更好地后处理。
＆nbsp;
我建议研究不同的软件包或方法。
＆nbsp;
如何使用javascript 通过网络摄像机录制视频
＆nbsp;
您可能必须最终获得较低的水平并构建自己的解决方案。
＆nbsp;
https://developers.google.com/woogle.com/web/web/fundamentals/fundamentals/media/recording---recordamental-recording--视频