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>
