ngx-simple-webcam
Version:
A simple Angular 4+ Webcam-Component. Pure & minimal, no Flash-Fallback. <a href="https://basst314.github.io/ngx-simple-webcam/?" target="_blank">See the Demo!</a>
3 lines (2 loc) • 11.2 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/common"],t):t(e["ngx-simple-webcam"]={},e.ng.core,e.ng.common)}(this,function(e,t,i){"use strict";var n=function(){function e(e,t){this._mimeType=null,this._imageAsBase64=null,this._imageAsDataUrl=null,this._mimeType=t,this._imageAsDataUrl=e}return Object.defineProperty(e.prototype,"imageAsBase64",{get:function(){return this._imageAsBase64?this._imageAsBase64:this._imageAsBase64=this.getDataFromDataUrl(this._imageAsDataUrl)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"imageAsDataUrl",{get:function(){return this._imageAsDataUrl},enumerable:!0,configurable:!0}),e.prototype.getDataFromDataUrl=function(e){return e.replace("data:"+this._mimeType+";base64,","")},e}(),r=function(){function e(){}return e.getAvailableVideoInputs=function(){return navigator.mediaDevices&&navigator.mediaDevices.enumerateDevices?new Promise(function(e,t){navigator.mediaDevices.enumerateDevices().then(function(t){e(t.filter(function(e){return"videoinput"===e.kind}))})["catch"](function(e){t(e.message||e)})}):Promise.reject("enumerateDevices() not supported.")},e}(),a=function(){function e(){this.width=640,this.height=480,this.videoOptions=e.DEFAULT_VIDEO_OPTIONS,this.allowCameraSwitch=!0,this.mediaStream=null,this.availableVideoInputs=[],this.activeVideoInputIndex=-1,this.videoInitialized=!1,this.imageCapture=new t.EventEmitter,this.initError=new t.EventEmitter,this.imageClick=new t.EventEmitter,this.cameraSwitched=new t.EventEmitter,this.activeVideoSettings=null}return e.prototype.ngAfterViewInit=function(){var e=this;this.detectAvailableDevices().then(function(t){e.switchToVideoInput(t.length>1?t[1].deviceId:t.length>0?t[0].deviceId:null)})["catch"](function(t){e.initError.next({message:t}),e.switchToVideoInput(null)})},e.prototype.ngOnDestroy=function(){this.stopMediaTracks(),this.unsubscribeFromSubscriptions()},Object.defineProperty(e.prototype,"trigger",{set:function(e){var t=this;this.triggerSubscription&&this.triggerSubscription.unsubscribe(),this.triggerSubscription=e.subscribe(function(){t.takeSnapshot()})},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"switchCamera",{set:function(e){var t=this;this.switchCameraSubscription&&this.switchCameraSubscription.unsubscribe(),this.switchCameraSubscription=e.subscribe(function(e){"string"==typeof e?t.switchToVideoInput(e):t.rotateVideoInput(!1!==e)})},enumerable:!0,configurable:!0}),e.getMediaConstraintsForDevice=function(e,t){var i=t||this.DEFAULT_VIDEO_OPTIONS;return e&&(i.deviceId={exact:e}),i},e.getDeviceIdFromMediaStreamTrack=function(t){if(t.getSettings&&t.getSettings()&&t.getSettings().deviceId)return t.getSettings().deviceId;if(t.getConstraints&&t.getConstraints()&&t.getConstraints().deviceId){var i=t.getConstraints().deviceId;return e.getValueFromConstrainDOMString(i)}},e.getFacingModeFromMediaStreamTrack=function(t){if(t){if(t.getSettings&&t.getSettings()&&t.getSettings().facingMode)return t.getSettings().facingMode;if(t.getConstraints&&t.getConstraints()&&t.getConstraints().facingMode){var i=t.getConstraints().facingMode;return e.getValueFromConstrainDOMString(i)}}},e.isUserFacing=function(t){var i=e.getFacingModeFromMediaStreamTrack(t);return!!i&&"user"===i.toLowerCase()},e.getValueFromConstrainDOMString=function(e){if(e){if(e instanceof String)return String(e);if(Array.isArray(e)&&Array(e).length>0)return String(e[0]);if("object"==typeof e){if(e.exact)return String(e.exact);if(e.ideal)return String(e.ideal)}}return null},e.prototype.takeSnapshot=function(){var e=this.video.nativeElement,t={width:this.width,height:this.height};e.videoWidth&&(t.width=e.videoWidth,t.height=e.videoHeight);var i=this.canvas.nativeElement;i.width=t.width,i.height=t.height,i.getContext("2d").drawImage(this.video.nativeElement,0,0);var r="image/jpeg",a=i.toDataURL(r);this.imageCapture.next(new n(a,r))},e.prototype.rotateVideoInput=function(e){if(this.availableVideoInputs&&this.availableVideoInputs.length>1){var t=e?1:this.availableVideoInputs.length-1;this.switchToVideoInput(this.availableVideoInputs[(this.activeVideoInputIndex+t)%this.availableVideoInputs.length].deviceId)}},e.prototype.switchToVideoInput=function(e){this.videoInitialized=!1,this.stopMediaTracks(),this.initWebcam(e,this.videoOptions)},Object.defineProperty(e.prototype,"videoWidth",{get:function(){var e=this.getVideoAspectRatio(this.activeVideoSettings);return Math.min(this.width,this.height*e)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"videoHeight",{get:function(){var e=this.getVideoAspectRatio(this.activeVideoSettings);return Math.min(this.height,this.width/e)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"videoStyleClasses",{get:function(){var e="";return this.isMirrorImage()&&(e+="mirrored "),e.trim()},enumerable:!0,configurable:!0}),e.prototype.getVideoAspectRatio=function(e){if(e){if(e.aspectRatio)return e.aspectRatio;if(e.width&&e.width>0&&e.height&&e.height>0)return e.width/e.height}return this.width/this.height},e.prototype.initWebcam=function(t,i){var n=this,r=this.video.nativeElement;if(navigator.mediaDevices&&navigator.mediaDevices.getUserMedia){var a=e.getMediaConstraintsForDevice(t,i);navigator.mediaDevices.getUserMedia({video:a}).then(function(t){n.mediaStream=t,r.srcObject=t,r.play(),n.activeVideoSettings=t.getVideoTracks()[0].getSettings();var i=e.getDeviceIdFromMediaStreamTrack(t.getVideoTracks()[0]);n.activeVideoInputIndex=i?n.availableVideoInputs.findIndex(function(e){return e.deviceId===i}):-1,n.videoInitialized=!0,n.cameraSwitched.next(i)})["catch"](function(e){n.initError.next({message:e.message,mediaStreamError:e})})}else this.initError.next({message:"Cannot read UserMedia from MediaDevices."})},e.prototype.getActiveVideoTrack=function(){return this.mediaStream?this.mediaStream.getVideoTracks()[0]:null},e.prototype.isMirrorImage=function(){if(!this.getActiveVideoTrack())return!1;var t="auto";switch(this.mirrorImage&&("string"==typeof this.mirrorImage?t=String(this.mirrorImage).toLowerCase():this.mirrorImage.x&&(t=this.mirrorImage.x.toLowerCase())),t){case"always":return!0;case"never":return!1}return e.isUserFacing(this.getActiveVideoTrack())},e.prototype.stopMediaTracks=function(){this.mediaStream&&this.mediaStream.getTracks&&this.mediaStream.getTracks().forEach(function(e){return e.stop()})},e.prototype.unsubscribeFromSubscriptions=function(){this.triggerSubscription&&this.triggerSubscription.unsubscribe(),this.switchCameraSubscription&&this.switchCameraSubscription.unsubscribe()},e.prototype.detectAvailableDevices=function(){var e=this;return new Promise(function(t,i){r.getAvailableVideoInputs().then(function(i){e.availableVideoInputs=i,t(i)})["catch"](function(t){e.availableVideoInputs=[],i(t)})})},e}();a.DEFAULT_VIDEO_OPTIONS={facingMode:"environment"},a.decorators=[{type:t.Component,args:[{selector:"webcam",template:'\n <div class="webcam-wrapper" (click)="imageClick.next();">\n <video #video [width]="videoWidth" [height]="videoHeight" [class]="videoStyleClasses" autoplay muted playsinline></video>\n <div class="camera-switch" *ngIf="allowCameraSwitch && availableVideoInputs.length > 1 && videoInitialized" (click)="rotateVideoInput(true)"></div>\n <canvas #canvas [width]="width" [height]="height"></canvas>\n </div>\n ',styles:['\n .webcam-wrapper {\n display: inline-block;\n position: relative;\n line-height: 0; }\n .webcam-wrapper video.mirrored {\n -webkit-transform: scale(-1, 1);\n transform: scale(-1, 1); }\n .webcam-wrapper canvas {\n display: none; }\n .webcam-wrapper .camera-switch {\n background-color: rgba(0, 0, 0, 0.1);\n background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAE9UlEQVR42u2aT2hdRRTGf+cRQqghSqihdBFDkRISK2KDfzDWxHaRQHEhaINKqa1gKQhd6EZLN+IidCH+Q0oWIkVRC21BQxXRitVaSbKoJSGtYGoK2tQ/tU1jY5v0c5F54Xl7b/KSO/PyEt+3e5f75p7zzZwzZ74zUEIJJfyfYaEGllQGVAGZlENdBy6Z2cSiYFTSKkkfS/pH/nBF0kFJdUW9AiRVASeAukD8DgNrzOySrwEzng18KaDzALXuG8W3AiStAvqBisBRNg40mtlPxbYCOgvgPO4bncWW+JpVeDQXRQhIygDfA00F5r0XuNfMrgclQFI98DDQCNQA5ZFXqoCWBVp8XwHRHeEqcN7loy/NbHBesyqpQ1KfFj/6nC+ZvFaApFrgPaCZpYVvgCfNbDiRAElNwGFg+RIt/X8H2s2s9wYCJDUAR4HqJX7++RN40MwGpgmQVAH0AQ2BPz4AHHPl8nBOAqtyFWQjsA6oL4Ada81sPDv7uwImod8kvSJp9RyS8O2SXnb/DYVd2Y9VSroQ4ANXJO2WVJmixqh0kzMWwL4LkiqRtDnA4D1zmfE8j9g9AezcnAHaPcfXdbfdnPZ2Yps6+DwAvO/Z1naTdApY7Xng48BDZnY1MpMVQBuw3iXc5Tnb0wBwBPjUzP6eoezuArZ6svM0geJLkvZEYnl3nkntoqROSbckSW2Suj3ZOIangc7GPJuUtNGdFIfmMeavktoSSKiW9LMPw30Q8JqkekmjCbOZRhuclLQjgYSNxUBAj6RyZ9ATgUJpUtJTCSR8vpAEXHAyWK5BXYFIGHOlepSAloUk4NEYgyoknQhEwhFJ0e8h6VSaQeerCb5uZgdi9utxYBNwOUD93hIVXswM4INCi6K9wAszFC2DwLOBDjHbYp59karIUnRdzYy/3ClqVklaUhfwTICj7K25OqA7a4wWagVsm4Me/xzwg2cCqqONFzO7DPxSCAJi436GUBgHHguQD2oTlJ55oSzP9ybccsttSJw1szdjFOSnI/8dTCGZHwcORp4Nx7y3B1iZ8/sm4MW8/Euxg5wIsS/HaAp3zeP4/G7obRDXI4jiTIA22H7Xdc7X+S3A5lC7QBQ357aq3VAjCeSkwUfAJrfvz+R8A9ADLAtZB+TinpjC5JMA+//jwPZZnF8G7J+L8z4IWB/zbG+gIujVWfLBW/NStVMmqaG4POJRsIjix7h8IGnLQuoBbQki5sVAJHyYm7YkNaRRtXwQ8G1cHpX0iKRrgUjYno17Sf0LrQhJUkdCeHWkVITGJI0k1QeS3ikGSUzOyJUJJNznYneuOCnpTldcxa2kP3xJYqOeSDjqZG8ShJLnE8TTuMS6Iyu1BW7djZqkfo9N0QOuYJmYQddfB7RG+gLTNzqAY9FrL+5/nwEbvDdJJe3zzOrhNP3AWRqmk55t3ZcBuj3b2gb0Sbrbo/NNzk7fFzu7s/E5EiC+rrmeQU0Kx2skvRFoOx2ZzlmSdgbsw49JetvtBpk8nM64d/cGbNtJ0s7cGyJlwHeEv+t3nqnLSgPAUOSGyG3AHUxdzqoJbEcvcL+ZTeTeEapzJKxgaeOcc/7Mf06D7kFrguS0VDAMtGadv+E47DT9tcChJej8ISfpD+abgTe45uOkFi8mnQ+JBVQ+d4VXuOptjavcyot8pq86mfwk8LWZnaOEEkoooYQSSojDv8AhQNeGfe0jAAAAAElFTkSuQmCC");\n background-repeat: no-repeat;\n border-radius: 5px;\n position: absolute;\n right: 13px;\n top: 10px;\n height: 48px;\n width: 48px;\n background-size: 80%;\n cursor: pointer;\n background-position: center;\n -webkit-transition: background-color 0.2s ease;\n transition: background-color 0.2s ease; }\n .webcam-wrapper .camera-switch:hover {\n background-color: rgba(0, 0, 0, 0.18); }\n ']}]}],a.ctorParameters=function(){return[]},a.propDecorators={width:[{type:t.Input}],height:[{type:t.Input}],videoOptions:[{type:t.Input}],allowCameraSwitch:[{type:t.Input}],mirrorImage:[{type:t.Input}],imageCapture:[{type:t.Output}],initError:[{type:t.Output}],imageClick:[{type:t.Output}],cameraSwitched:[{type:t.Output}],video:[{type:t.ViewChild,args:["video"]}],canvas:[{type:t.ViewChild,args:["canvas"]}],trigger:[{type:t.Input}],switchCamera:[{type:t.Input}]};var o=[a],s=function(){return function(){}}();s.decorators=[{type:t.NgModule,args:[{imports:[i.CommonModule],declarations:[o],exports:[o]}]}],s.ctorParameters=function(){return[]};var c=function(){return function(){this.message=null,this.mediaStreamError=null}}(),u=function(){return function(){}}();e.WebcamModule=s,e.WebcamComponent=a,e.WebcamImage=n,e.WebcamInitError=c,e.WebcamMirrorProperties=u,e.WebcamUtil=r,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=ngx-simple-webcam.umd.min.js.map