-
+
-
+
+
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index c9e31ba..48db085 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,4 +1,4 @@
-#snapshotBtn {
+.actionBtn {
margin-top: 5px;
font-size: 1.2em;
}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index d4cc24f..af494e6 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,6 +1,6 @@
import {Component} from '@angular/core';
-import {Subject} from "rxjs/Subject";
-import {Observable} from "rxjs/Observable";
+import {Subject} from 'rxjs/Subject';
+import {Observable} from 'rxjs/Observable';
import {WebcamImage} from "./modules/webcam/domain/webcam-image";
@Component({
@@ -9,16 +9,23 @@ import {WebcamImage} from "./modules/webcam/domain/webcam-image";
styleUrls: ['./app.component.scss']
})
export class AppComponent {
- // webcam snapshot trigger
- private trigger: Subject = new Subject();
+ // toggle webcam on/off
+ public showWebcam = true;
// latest snapshot
public webcamImage: WebcamImage = null;
+ // webcam snapshot trigger
+ private trigger: Subject = new Subject();
+
public triggerSnapshot(): void {
this.trigger.next();
}
+ public toggleWebcam(): void {
+ this.showWebcam = !this.showWebcam;
+ }
+
public handleImage(webcamImage: WebcamImage): void {
console.info("received webcam image", webcamImage);
this.webcamImage = webcamImage;
diff --git a/src/app/modules/webcam/webcam/webcam.component.ts b/src/app/modules/webcam/webcam/webcam.component.ts
index a1cddbf..f46ca92 100644
--- a/src/app/modules/webcam/webcam/webcam.component.ts
+++ b/src/app/modules/webcam/webcam/webcam.component.ts
@@ -19,6 +19,9 @@ export class WebcamComponent implements AfterViewInit, OnDestroy {
private _trigger: Observable;
private triggerSubscription: Subscription;
+ /** MediaStream object in use for streaming UserMedia data */
+ private mediaStream: MediaStream = null;
+
/** EventEmitter which fires when an image has been captured */
@Output() public imageCapture: EventEmitter = new EventEmitter();
/** Emits a mediaError if webcam cannot be initialized (e.g. missing user permissions) */
@@ -37,6 +40,7 @@ export class WebcamComponent implements AfterViewInit, OnDestroy {
}
public ngOnDestroy(): void {
+ this.stopMediaTracks();
this.unsubscribeFromSubscriptions();
}
@@ -90,8 +94,9 @@ export class WebcamComponent implements AfterViewInit, OnDestroy {
let _video = this.video.nativeElement;
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
// TODO allow video options as Input()
- navigator.mediaDevices.getUserMedia({video: {facingMode: "environment"}})
- .then(stream => {
+ navigator.mediaDevices.getUserMedia({video: {facingMode: "environment"}})
+ .then((stream: MediaStream) => {
+ this.mediaStream = stream;
_video.srcObject = stream;
_video.play();
})
@@ -104,6 +109,19 @@ export class WebcamComponent implements AfterViewInit, OnDestroy {
}
}
+ /**
+ * Stops all active media tracks.
+ * This prevents the webcam from being indicated as active,
+ * even if it is no longer used by this component.
+ */
+ private stopMediaTracks() {
+ if (this.mediaStream && this.mediaStream.getTracks) {
+ // getTracks() returns all media tracks (video+audio)
+ this.mediaStream.getTracks()
+ .forEach((track: MediaStreamTrack) => track.stop());
+ }
+ }
+
/**
* Unsubscribe from all open subscriptions
*/