Merge pull request #5 from basst314/basst314/improvement-properly-dea…

…ctivate-webcam Basst314/improvement properly deactivate webcam
basst314 · Mar 10, 2018 · 4d5d642 · 4d5d642
2 parents 81e6ff1 + b8bef18
commit 4d5d642
Show file tree

Hide file tree

Showing 10 changed files with 40 additions and 14 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><title>NgxWebcam</title><base href="/ngx-webcam/"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico"><link href="styles.9c0ad738f18adc3d19ed.bundle.css" rel="stylesheet"/></head><body><app-root></app-root><script type="text/javascript" src="inline.6fe74b06ba6c6732d9f2.bundle.js"></script><script type="text/javascript" src="polyfills.c6749d43b2c4f745f09a.bundle.js"></script><script type="text/javascript" src="main.dcf5d53c5cb30158fe72.bundle.js"></script></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"><title>NgxWebcam</title><base href="/ngx-webcam/"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico"><link href="styles.9c0ad738f18adc3d19ed.bundle.css" rel="stylesheet"/></head><body><app-root></app-root><script type="text/javascript" src="inline.346884ab99674cb3bcef.bundle.js"></script><script type="text/javascript" src="polyfills.c6749d43b2c4f745f09a.bundle.js"></script><script type="text/javascript" src="main.91ce3066a85c3cea78a5.bundle.js"></script></body></html>
diff --git a/docs/inline.346884ab99674cb3bcef.bundle.js b/docs/inline.346884ab99674cb3bcef.bundle.js
diff --git a/docs/inline.6fe74b06ba6c6732d9f2.bundle.js b/docs/inline.6fe74b06ba6c6732d9f2.bundle.js
diff --git a/docs/main.dcf5d53c5cb30158fe72.bundle.js → docs/main.91ce3066a85c3cea78a5.bundle.js b/docs/main.dcf5d53c5cb30158fe72.bundle.js → docs/main.91ce3066a85c3cea78a5.bundle.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-webcam",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "author": "basst314",
   "license": "MIT",
   "repository": {

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -4,9 +4,10 @@ <h1>
   </h1>
 
   <div>
-    <webcam [trigger]="triggerObservable" (imageCapture)="handleImage($event)"></webcam>
+    <webcam [trigger]="triggerObservable" (imageCapture)="handleImage($event)" *ngIf="showWebcam"></webcam>
     <br/>
-    <button id="snapshotBtn" (click)="triggerSnapshot();">Take A Snapshot</button>
+    <button class="actionBtn" (click)="triggerSnapshot();">Take A Snapshot</button>
+    <button class="actionBtn" (click)="toggleWebcam();">Toggle Webcam</button>
   </div>
 </div>
 

diff --git 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
@@ -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<void> = new Subject<void>();
+  // toggle webcam on/off
+  public showWebcam = true;
 
   // latest snapshot
   public webcamImage: WebcamImage = null;
 
+  // webcam snapshot trigger
+  private trigger: Subject<void> = new Subject<void>();
+
   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
@@ -19,6 +19,9 @@ export class WebcamComponent implements AfterViewInit, OnDestroy {
   private _trigger: Observable<void>;
   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<WebcamImage> = new EventEmitter<WebcamImage>();
   /** 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(<MediaStreamConstraints>{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
    */
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html lang="en"><head><meta charset="utf-8"><title>NgxWebcam</title><base href="/ngx-webcam/"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico"><link href="styles.9c0ad738f18adc3d19ed.bundle.css" rel="stylesheet"/></head><body><app-root></app-root><script type="text/javascript" src="inline.6fe74b06ba6c6732d9f2.bundle.js"></script><script type="text/javascript" src="polyfills.c6749d43b2c4f745f09a.bundle.js"></script><script type="text/javascript" src="main.dcf5d53c5cb30158fe72.bundle.js"></script></body></html>
		<!doctype html><html lang="en"><head><meta charset="utf-8"><title>NgxWebcam</title><base href="/ngx-webcam/"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico"><link href="styles.9c0ad738f18adc3d19ed.bundle.css" rel="stylesheet"/></head><body><app-root></app-root><script type="text/javascript" src="inline.346884ab99674cb3bcef.bundle.js"></script><script type="text/javascript" src="polyfills.c6749d43b2c4f745f09a.bundle.js"></script><script type="text/javascript" src="main.91ce3066a85c3cea78a5.bundle.js"></script></body></html>