ack-angular-webcam - npm Package Compare versions

Comparing version 1.3.5 to 1.3.6

package.json

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

webcam.component.d.ts

@@ -67,2 +67,4 @@ import { ElementRef, EventEmitter } from '@angular/core';
     setCanvasWidth(canvas?: any, video?: any): void;
+    /** older browsers (IE11) cannot dynamically apply most attribute changes to object elements. Use this method during fallback */
+    createVidElmOb(): HTMLObjectElement;
     /**
@@ -69,0 +71,0 @@ * Implement fallback external interface

webcam.component.js

@@ -6,3 +6,3 @@ "use strict";
 var videoHelp = require("./videoHelp");
-var template = "\n<video id=\"video\" *ngIf=\"isSupportWebRTC && videoSrc\" [src]=\"videoSrc\" autoplay>Video stream not available</video>\n\n<object *ngIf=\"isFallback\" data=\"jscam_canvas_only.swf\">\n  Video stream not available\n  <param name=\"FlashVars\" value=\"mode=callback&amp;quality=200\">\n  <param name=\"allowScriptAccess\" value=\"always\">\n  <param name=\"movie\" value=\"jscam_canvas_only.swf\">\n</object>\n";
+var template = "\n<video id=\"video\" *ngIf=\"isSupportWebRTC && videoSrc\" [src]=\"videoSrc\" autoplay>Video stream not available</video>\n";
 /**
@@ -260,2 +260,27 @@ * Render WebCam Component
     };
+    /** older browsers (IE11) cannot dynamically apply most attribute changes to object elements. Use this method during fallback */
+    WebCamComponent.prototype.createVidElmOb = function () {
+        var rtnElm = document.createElement('object');
+        rtnElm.innerHTML = 'Video stream not available';
+        rtnElm.setAttribute('type', 'application/x-shockwave-flash');
+        rtnElm.setAttribute('data', this.options.fallbackSrc);
+        var paramVar = document.createElement('param');
+        paramVar.setAttribute('name', 'FlashVars');
+        paramVar.setAttribute('value', 'mode=callback&amp;quality=200');
+        rtnElm.appendChild(paramVar);
+        paramVar = document.createElement('param');
+        paramVar.setAttribute('name', 'allowScriptAccess');
+        paramVar.setAttribute('value', 'always');
+        rtnElm.appendChild(paramVar);
+        paramVar = document.createElement('param');
+        paramVar.setAttribute('name', 'movie');
+        paramVar.setAttribute('value', this.options.fallbackSrc);
+        rtnElm.appendChild(paramVar);
+        var obs = this.element.nativeElement.getElementsByTagName('object');
+        if (obs.length) {
+            this.element.nativeElement.removeChild(obs[0]);
+        }
+        this.element.nativeElement.appendChild(rtnElm);
+        return rtnElm;
+    };
     /**
@@ -266,11 +291,3 @@ * Implement fallback external interface
         this.isFallback = true;
-        var vidElm = this.getVideoElm();
-        vidElm.setAttribute('data', this.options.fallbackSrc);
-        var params = vidElm.getElementsByTagName('param');
-        for (var x = params.length - 1; x >= 0; --x) {
-            if (params[x].getAttribute('name') == 'movie') {
-                params[x].setAttribute('value', this.options.fallbackSrc);
-                break;
-            }
-        }
+        var vidElm = this.getVideoElm() || this.createVidElmOb();
         this.flashPlayer = new videoHelp.Fallback(vidElm);
@@ -277,0 +294,0 @@ };

webcam.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"MediaDevice":{"__symbolic":"interface"},"WebCamComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ack-webcam","template":"\n<video id=\"video\" *ngIf=\"isSupportWebRTC && videoSrc\" [src]=\"videoSrc\" autoplay>Video stream not available</video>\n\n<object *ngIf=\"isFallback\" data=\"jscam_canvas_only.swf\">\n  Video stream not available\n  <param name=\"FlashVars\" value=\"mode=callback&amp;quality=200\">\n  <param name=\"allowScriptAccess\" value=\"always\">\n  <param name=\"movie\" value=\"jscam_canvas_only.swf\">\n</object>\n"}]}],"members":{"mime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ref":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"refChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onSuccess":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onError":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"getMedia":[{"__symbolic":"method"}],"afterInitCycles":[{"__symbolic":"method"}],"createVideoResizer":[{"__symbolic":"method"}],"applyDefaults":[{"__symbolic":"method"}],"onWebRTC":[{"__symbolic":"method"}],"resizeVideo":[{"__symbolic":"method"}],"getVideoDimensions":[{"__symbolic":"method"}],"getVideoElm":[{"__symbolic":"method"}],"setWebcam":[{"__symbolic":"method"}],"processSuccess":[{"__symbolic":"method"}],"startCapturingVideo":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"getCanvas":[{"__symbolic":"method"}],"getBase64":[{"__symbolic":"method"}],"setCanvasWidth":[{"__symbolic":"method"}],"setupFallback":[{"__symbolic":"method"}],"captureAsFormData":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"MediaDevice":{"__symbolic":"interface"},"WebCamComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ack-webcam","template":"\n<video id=\"video\" *ngIf=\"isSupportWebRTC && videoSrc\" [src]=\"videoSrc\" autoplay>Video stream not available</video>\n\n<object *ngIf=\"isFallback\" data=\"jscam_canvas_only.swf\">\n  Video stream not available\n  <param name=\"FlashVars\" value=\"mode=callback&amp;quality=200\">\n  <param name=\"allowScriptAccess\" value=\"always\">\n  <param name=\"movie\" value=\"jscam_canvas_only.swf\">\n</object>\n"}]}],"members":{"mime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ref":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"refChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onSuccess":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onError":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"getMedia":[{"__symbolic":"method"}],"afterInitCycles":[{"__symbolic":"method"}],"createVideoResizer":[{"__symbolic":"method"}],"applyDefaults":[{"__symbolic":"method"}],"onWebRTC":[{"__symbolic":"method"}],"resizeVideo":[{"__symbolic":"method"}],"getVideoDimensions":[{"__symbolic":"method"}],"getVideoElm":[{"__symbolic":"method"}],"setWebcam":[{"__symbolic":"method"}],"processSuccess":[{"__symbolic":"method"}],"startCapturingVideo":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"getCanvas":[{"__symbolic":"method"}],"getBase64":[{"__symbolic":"method"}],"setCanvasWidth":[{"__symbolic":"method"}],"setupFallback":[{"__symbolic":"method"}],"captureAsFormData":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"MediaDevice":{"__symbolic":"interface"},"WebCamComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ack-webcam","template":"\n<video id=\"video\" *ngIf=\"isSupportWebRTC && videoSrc\" [src]=\"videoSrc\" autoplay>Video stream not available</video>\n"}]}],"members":{"mime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ref":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"refChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onSuccess":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onError":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"getMedia":[{"__symbolic":"method"}],"afterInitCycles":[{"__symbolic":"method"}],"createVideoResizer":[{"__symbolic":"method"}],"applyDefaults":[{"__symbolic":"method"}],"onWebRTC":[{"__symbolic":"method"}],"resizeVideo":[{"__symbolic":"method"}],"getVideoDimensions":[{"__symbolic":"method"}],"getVideoElm":[{"__symbolic":"method"}],"setWebcam":[{"__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"}]}}}},{"__symbolic":"module","version":1,"metadata":{"MediaDevice":{"__symbolic":"interface"},"WebCamComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ack-webcam","template":"\n<video id=\"video\" *ngIf=\"isSupportWebRTC && videoSrc\" [src]=\"videoSrc\" autoplay>Video stream not available</video>\n"}]}],"members":{"mime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ref":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"refChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onSuccess":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onError":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"getMedia":[{"__symbolic":"method"}],"afterInitCycles":[{"__symbolic":"method"}],"createVideoResizer":[{"__symbolic":"method"}],"applyDefaults":[{"__symbolic":"method"}],"onWebRTC":[{"__symbolic":"method"}],"resizeVideo":[{"__symbolic":"method"}],"getVideoDimensions":[{"__symbolic":"method"}],"getVideoElm":[{"__symbolic":"method"}],"setWebcam":[{"__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"}]}}}}]

No alert changes

Improved metrics

Lines of code

628

2.95%

Worsened metrics

Total package byte prevSize

38729

-46.95%

Number of package files

16

-20%

No dependency changes