ack-angular-webcam - npm Package Compare versions

Comparing version 1.7.3 to 1.7.5

package.json

 {
   "name": "ack-angular-webcam",
-  "version": "1.7.3",
+  "version": "1.7.5",
   "description": "Angular2 webcam component. Based on MediaDevices and getUserMedia.js ",
@@ -5,0 +5,0 @@ "main": "index.js",

webcam.component.d.ts

@@ -20,2 +20,3 @@ import { ElementRef, EventEmitter } from '@angular/core';
     videoDeviceId: string;
+    reflect: boolean;
     facingMode: "user" | "enviroment" | "left" | "right" | string;
@@ -34,3 +35,5 @@ mime: string;
     ngAfterViewInit(): void;
+    ngOnChanges(changes: any): void;
     afterInitCycles(): void;
+    applyReflect(): void;
     applyStream(stream: any): void;
@@ -37,0 +40,0 @@ createVideoResizer(): void;

webcam.component.js

@@ -31,12 +31,9 @@ "use strict";
     };
-    /*ngOnChanges() {
-      this.onResize()
-    }*/
-    /*ngOnChanges() {
-        this.onResize()
-      }*/
-    WebCamComponent.prototype.afterInitCycles = /*ngOnChanges() {
-        this.onResize()
-      }*/
-    function () {
+    WebCamComponent.prototype.ngOnChanges = function (changes) {
+        //this.onResize()
+        if (changes.reflect) {
+            this.applyReflect();
+        }
+    };
+    WebCamComponent.prototype.afterInitCycles = function () {
         var _this = this;
@@ -70,5 +67,17 @@ var media = videoHelp_1.getMedia();
     };
+    WebCamComponent.prototype.applyReflect = function () {
+        var videoElm = this.getVideoElm();
+        if (!videoElm)
+            return;
+        if (this.reflect) {
+            videoElm.style.transform = "scaleX(-1)";
+        }
+        else {
+            videoElm.style.transform = "scaleX(1)";
+        }
+    };
     WebCamComponent.prototype.applyStream = function (stream) {
         var videoElm = this.getVideoElm();
         videoElm.srcObject = stream;
+        this.applyReflect();
     };
@@ -264,3 +273,8 @@ WebCamComponent.prototype.createVideoResizer = function () {
             this.setCanvasWidth(canvas, video);
-            canvas.getContext('2d').drawImage(video, 0, 0);
+            var ctx = canvas.getContext('2d');
+            if (this.reflect) {
+                ctx.translate(canvas.width, 0);
+                ctx.scale(-1, 1);
+            }
+            ctx.drawImage(video, 0, 0);
             return Promise.resolve(canvas.toDataURL(mime));
@@ -333,2 +347,3 @@ }
         "videoDeviceId": [{ type: core_1.Input },],
+        "reflect": [{ type: core_1.Input },],
         "facingMode": [{ type: core_1.Input },],
@@ -335,0 +350,0 @@ "mime": [{ type: core_1.Input },],

webcam.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"vidElmOptions":{"__symbolic":"interface"},"WebCamComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":21,"character":1},"arguments":[{"selector":"ack-webcam","template":"<video id=\"video\" *ngIf=\"(isSupportUserMedia||isSupportWebRTC)\" autoplay=\"\" playsinline=\"\">Video stream not available</video>","exportAs":"webcam"}]}],"members":{"videoDevice":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"videoDeviceId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"facingMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"mime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":3}}]}],"useParentWidthHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"ref":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":3}}]}],"refChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":46,"character":3}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":3}}]}],"success":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":49,"character":3}}]}],"error":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":3}}]}],"errorChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":52,"character":3}}]}],"catcher":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":53,"character":3},"arguments":["catch"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer","line":55,"character":33},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":55,"character":64}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"afterInitCycles":[{"__symbolic":"method"}],"applyStream":[{"__symbolic":"method"}],"createVideoResizer":[{"__symbolic":"method"}],"applyDefaults":[{"__symbolic":"method"}],"onWebRTC":[{"__symbolic":"method"}],"promiseVideoOptions":[{"__symbolic":"method"}],"resizeVideo":[{"__symbolic":"method"}],"getVideoDimensions":[{"__symbolic":"method"}],"getVideoElm":[{"__symbolic":"method"}],"setWebcam":[{"__symbolic":"method"}],"catchError":[{"__symbolic":"method"}],"promiseStreamByVidOptions":[{"__symbolic":"method"}],"processSuccess":[{"__symbolic":"method"}],"startCapturingVideo":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"getCanvas":[{"__symbolic":"method"}],"getBase64":[{"__symbolic":"method"}],"setCanvasWidth":[{"__symbolic":"method"}],"createVidElmOb":[{"__symbolic":"method"}],"setupFallback":[{"__symbolic":"method"}],"captureAsFormData":[{"__symbolic":"method"}],"dataUriToFormData":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"vidElmOptions":{"__symbolic":"interface"},"WebCamComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":21,"character":1},"arguments":[{"selector":"ack-webcam","template":"<video id=\"video\" *ngIf=\"(isSupportUserMedia||isSupportWebRTC)\" autoplay=\"\" playsinline=\"\">Video stream not available</video>","exportAs":"webcam"}]}],"members":{"videoDevice":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"videoDeviceId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"reflect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"facingMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":3}}]}],"mime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"useParentWidthHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3}}]}],"ref":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"refChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":47,"character":3}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":3}}]}],"success":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":50,"character":3}}]}],"error":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":3}}]}],"errorChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":53,"character":3}}]}],"catcher":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":54,"character":3},"arguments":["catch"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer","line":56,"character":33},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":56,"character":64}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"afterInitCycles":[{"__symbolic":"method"}],"applyReflect":[{"__symbolic":"method"}],"applyStream":[{"__symbolic":"method"}],"createVideoResizer":[{"__symbolic":"method"}],"applyDefaults":[{"__symbolic":"method"}],"onWebRTC":[{"__symbolic":"method"}],"promiseVideoOptions":[{"__symbolic":"method"}],"resizeVideo":[{"__symbolic":"method"}],"getVideoDimensions":[{"__symbolic":"method"}],"getVideoElm":[{"__symbolic":"method"}],"setWebcam":[{"__symbolic":"method"}],"catchError":[{"__symbolic":"method"}],"promiseStreamByVidOptions":[{"__symbolic":"method"}],"processSuccess":[{"__symbolic":"method"}],"startCapturingVideo":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"getCanvas":[{"__symbolic":"method"}],"getBase64":[{"__symbolic":"method"}],"setCanvasWidth":[{"__symbolic":"method"}],"createVidElmOb":[{"__symbolic":"method"}],"setupFallback":[{"__symbolic":"method"}],"captureAsFormData":[{"__symbolic":"method"}],"dataUriToFormData":[{"__symbolic":"method"}]}}}}]

No alert changes

Improved metrics

Total package byte prevSize

54288

1.69%

Lines of code

848

2.17%

No dependency changes