UNPKG

ngx-webcam2

Version:

A simple Angular webcam component. Pure &amp; minimal, no Flash-fallback. <a href="https://basst314.github.io/ngx-webcam/?" target="_blank">See the Demo!</a>

16 lines (14 loc) 14.2 kB
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("ngx-webcam",["exports","@angular/core","@angular/common"],t):t((e=e||self)["ngx-webcam"]={},e.ng.core,e.ng.common)}(this,(function(e,t,i){"use strict"; /*! ***************************************************************************** Copyright (c) Microsoft Corporation. Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted. THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. ***************************************************************************** */function n(e,t,i,n){return new(i||(i=Promise))((function(r,a){function o(e){try{c(n.next(e))}catch(e){a(e)}}function s(e){try{c(n.throw(e))}catch(e){a(e)}}function c(e){var t;e.done?r(e.value):(t=e.value,t instanceof i?t:new i((function(e){e(t)}))).then(o,s)}c((n=n.apply(e,t||[])).next())}))}function r(e,t){var i,n,r,a,o={label:0,sent:function(){if(1&r[0])throw r[1];return r[1]},trys:[],ops:[]};return a={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function s(a){return function(s){return function(a){if(i)throw new TypeError("Generator is already executing.");for(;o;)try{if(i=1,n&&(r=2&a[0]?n.return:a[0]?n.throw||((r=n.return)&&r.call(n),0):n.next)&&!(r=r.call(n,a[1])).done)return r;switch(n=0,r&&(a=[2&a[0],r.value]),a[0]){case 0:case 1:r=a;break;case 4:return o.label++,{value:a[1],done:!1};case 5:o.label++,n=a[1],a=[0];continue;case 7:a=o.ops.pop(),o.trys.pop();continue;default:if(!(r=(r=o.trys).length>0&&r[r.length-1])&&(6===a[0]||2===a[0])){o=0;continue}if(3===a[0]&&(!r||a[1]>r[0]&&a[1]<r[3])){o.label=a[1];break}if(6===a[0]&&o.label<r[1]){o.label=r[1],r=a;break}if(r&&o.label<r[2]){o.label=r[2],o.ops.push(a);break}r[2]&&o.ops.pop(),o.trys.pop();continue}a=t.call(e,o)}catch(e){a=[6,e],n=0}finally{i=r=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,s])}}}Object.create;Object.create;var a=function(){function e(e,t,i){this._mimeType=null,this._imageAsBase64=null,this._imageAsDataUrl=null,this._imageData=null,this._mimeType=t,this._imageAsDataUrl=e,this._imageData=i}return e.getDataFromDataUrl=function(e,t){return e.replace("data:"+t+";base64,","")},Object.defineProperty(e.prototype,"imageAsBase64",{get:function(){return this._imageAsBase64?this._imageAsBase64:this._imageAsBase64=e.getDataFromDataUrl(this._imageAsDataUrl,this._mimeType)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"imageAsDataUrl",{get:function(){return this._imageAsDataUrl},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"imageData",{get:function(){return this._imageData},enumerable:!1,configurable:!0}),e}(),o=function(){function e(){}return e.hasVideoInputs=function(){return!!e.availableVideoInputs.find((function(e){return!!e.deviceId}))},e.getAvailableVideoInputs=function(){return n(this,void 0,void 0,(function(){var t;return r(this,(function(i){switch(i.label){case 0:if(!navigator.mediaDevices||!navigator.mediaDevices.enumerateDevices)throw new Error("enumerateDevices() not supported.");return this.hasVideoInputs()?[3,2]:[4,navigator.mediaDevices.enumerateDevices()];case 1:t=i.sent(),e.availableVideoInputs=t.filter((function(e){return"videoinput"===e.kind})),i.label=2;case 2:return[2,e.availableVideoInputs]}}))}))},e.availableVideoInputs=[],e}(),s=function(){function e(){this.width=640,this.height=480,this.videoOptions=e.DEFAULT_VIDEO_OPTIONS,this.allowCameraSwitch=!0,this.captureImageData=!1,this.imageType=e.DEFAULT_IMAGE_TYPE,this.imageQuality=e.DEFAULT_IMAGE_QUALITY,this.imageCapture=new t.EventEmitter,this.initError=new t.EventEmitter,this.imageClick=new t.EventEmitter,this.cameraSwitched=new t.EventEmitter,this.availableVideoInputs=[],this.videoInitialized=!1,this.activeVideoInputIndex=-1,this.mediaStream=null,this.activeVideoSettings=null}return Object.defineProperty(e.prototype,"trigger",{set:function(e){var t=this;this.triggerSubscription&&this.triggerSubscription.unsubscribe(),this.triggerSubscription=e.subscribe((function(){t.takeSnapshot()}))},enumerable:!1,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:!1,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.ngAfterViewInit=function(){return n(this,void 0,void 0,(function(){var e;return r(this,(function(t){switch(t.label){case 0:return t.trys.push([0,2,,3]),[4,this.detectAvailableDevices()];case 1:return t.sent(),[3,3];case 2:return e=t.sent(),this.initError.next({message:e.message}),[3,3];case 3:return this.switchToVideoInput(null),[2]}}))}))},e.prototype.ngOnDestroy=function(){this.stopMediaTracks(),this.unsubscribeFromSubscriptions()},e.prototype.takeSnapshot=function(){var t=this.nativeVideoElement,i={width:this.width,height:this.height};t.videoWidth&&(i.width=t.videoWidth,i.height=t.videoHeight);var n=this.canvas.nativeElement;n.width=i.width,n.height=i.height;var r=n.getContext("2d");r.drawImage(t,0,0);var o=this.imageType?this.imageType:e.DEFAULT_IMAGE_TYPE,s=this.imageQuality?this.imageQuality:e.DEFAULT_IMAGE_QUALITY,c=n.toDataURL(o,s),u=null;this.captureImageData&&(u=r.getImageData(0,0,n.width,n.height)),this.imageCapture.next(new a(c,o,u))},e.prototype.rotateVideoInput=function(e){if(this.availableVideoInputs&&this.availableVideoInputs.length>1){var t=e?1:this.availableVideoInputs.length-1,i=(this.activeVideoInputIndex+t)%this.availableVideoInputs.length;this.switchToVideoInput(this.availableVideoInputs[i].deviceId)}},e.prototype.switchToVideoInput=function(e){this.videoInitialized=!1,this.stopMediaTracks(),this.initWebcam(e,this.videoOptions)},e.prototype.videoResize=function(){},Object.defineProperty(e.prototype,"videoWidth",{get:function(){var e=this.getVideoAspectRatio();return Math.min(this.width,this.height*e)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"videoHeight",{get:function(){var e=this.getVideoAspectRatio();return Math.min(this.height,this.width/e)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"videoStyleClasses",{get:function(){var e="";return this.isMirrorImage()&&(e+="mirrored "),e.trim()},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"nativeVideoElement",{get:function(){return this.video.nativeElement},enumerable:!1,configurable:!0}),e.prototype.getVideoAspectRatio=function(){var e=this.nativeVideoElement;return e.videoWidth&&e.videoWidth>0&&e.videoHeight&&e.videoHeight>0?e.videoWidth/e.videoHeight:this.width/this.height},e.prototype.initWebcam=function(t,i){var a=this,o=this.nativeVideoElement;if(navigator.mediaDevices&&navigator.mediaDevices.getUserMedia){var s=e.getMediaConstraintsForDevice(t,i);navigator.mediaDevices.getUserMedia({video:s}).then((function(t){return n(a,void 0,void 0,(function(){var i;return r(this,(function(n){switch(n.label){case 0:return this.mediaStream=t,o.srcObject=t,o.play(),this.activeVideoSettings=t.getVideoTracks()[0].getSettings(),i=e.getDeviceIdFromMediaStreamTrack(t.getVideoTracks()[0]),this.cameraSwitched.next(i),[4,this.detectAvailableDevices()];case 1:return n.sent(),this.activeVideoInputIndex=i?this.availableVideoInputs.findIndex((function(e){return e.deviceId===i})):-1,this.videoInitialized=!0,[2]}}))}))})).catch((function(e){a.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.video.nativeElement.pause(),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(){return n(this,void 0,void 0,(function(){var e;return r(this,(function(t){switch(t.label){case 0:return e=this,[4,o.getAvailableVideoInputs()];case 1:return e.availableVideoInputs=t.sent(),[2]}}))}))},e.DEFAULT_VIDEO_OPTIONS={facingMode:"environment"},e.DEFAULT_IMAGE_TYPE="image/jpeg",e.DEFAULT_IMAGE_QUALITY=.92,e.decorators=[{type:t.Component,args:[{selector:"webcam",template:'<div class="webcam-wrapper" (click)="imageClick.next();">\n <video #video [width]="videoWidth" [height]="videoHeight" [class]="videoStyleClasses" autoplay muted playsinline (resize)="videoResize()"></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:[".webcam-wrapper{display:inline-block;position:relative;line-height:0}.webcam-wrapper video.mirrored{transform:scale(-1,1)}.webcam-wrapper canvas{display:none}.webcam-wrapper .camera-switch{background-color:rgba(0,0,0,.1);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);background-repeat:no-repeat;border-radius:5px;position:absolute;right:13px;top:10px;height:48px;width:48px;background-size:80%;cursor:pointer;background-position:center;transition:background-color .2s}.webcam-wrapper .camera-switch:hover{background-color:rgba(0,0,0,.18)}"]}]}],e.propDecorators={width:[{type:t.Input}],height:[{type:t.Input}],videoOptions:[{type:t.Input}],allowCameraSwitch:[{type:t.Input}],mirrorImage:[{type:t.Input}],captureImageData:[{type:t.Input}],imageType:[{type:t.Input}],imageQuality:[{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",{static:!0}]}],canvas:[{type:t.ViewChild,args:["canvas",{static:!0}]}],trigger:[{type:t.Input}],switchCamera:[{type:t.Input}]},e}(),c=[s],u=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[i.CommonModule],declarations:[c],exports:[c]}]}],e}(),d=function(){this.message=null,this.mediaStreamError=null},g=function(){};e.WebcamComponent=s,e.WebcamImage=a,e.WebcamInitError=d,e.WebcamMirrorProperties=g,e.WebcamModule=u,e.WebcamUtil=o,Object.defineProperty(e,"__esModule",{value:!0})})); //# sourceMappingURL=ngx-webcam.umd.min.js.map