{"_id":"@davidshen84/ngx-webcam","_rev":"3-b0ec90c9b892d7b5efea6912c27b645f","name":"@davidshen84/ngx-webcam","dist-tags":{"latest":"0.4.0"},"versions":{"0.2.1":{"name":"@davidshen84/ngx-webcam","version":"0.2.1","author":{"name":"davidshen84"},"license":"MIT","repository":{"type":"git","url":"git+ssh://git@github.com/davidshen84/ngx-webcam.git"},"keywords":["Webcam","Camera","Angular","Angular 4","Angular 5","Angular 6","Smartphone"],"scripts":{"ng":"ng","start":"ng serve","build":"ng build --prod","test":"ng test","lint":"ng lint","e2e":"ng e2e","packagr":"ng-packagr -p ng-package.json","docs":"npm run build -- --base-href /ngx-webcam/ --output-path docs"},"private":false,"peerDependencies":{"@angular/core":"^4.0.0 || ^5.0.0 || ^6.0.0","rxjs":"^5.0.0 || ^6.0.0"},"devDependencies":{"@angular-devkit/build-angular":"^0.10.4","@angular/animations":"^6.0.2","@angular/cli":"~6.0.3","@angular/common":"^6.0.2","@angular/compiler":"^6.0.2","@angular/compiler-cli":"^6.0.2","@angular/core":"^6.0.2","@angular/forms":"^6.0.2","@angular/http":"^6.0.2","@angular/language-service":"^6.0.2","@angular/platform-browser":"^6.0.2","@angular/platform-browser-dynamic":"^6.0.2","@angular/router":"^6.0.2","@types/jasmine":"~2.8.3","@types/jasminewd2":"~2.0.2","@types/node":"~6.0.60","codelyzer":"~4.2.1","core-js":"^2.4.1","jasmine-core":"~2.8.0","jasmine-spec-reporter":"~4.2.1","karma":"~2.0.0","karma-chrome-launcher":"~2.2.0","karma-cli":"~1.0.1","karma-coverage-istanbul-reporter":"^1.2.1","karma-jasmine":"~1.1.0","karma-jasmine-html-reporter":"^0.2.2","ng-packagr":"^1.6.0","protractor":"^5.4.1","rxjs":"^6.0.0","ts-node":"~3.2.0","tslint":"~5.9.1","typescript":"~2.7.2","zone.js":"^0.8.26"},"main":"bundles/ngx-webcam.umd.js","module":"@davidshen84/ngx-webcam.es5.js","es2015":"@davidshen84/ngx-webcam.js","typings":"ngx-webcam.d.ts","metadata":"ngx-webcam.metadata.json","description":"A simple Angular 4+ Webcam-Component. Pure & minimal, no Flash-Fallback. See the Demo!","bugs":{"url":"https://github.com/davidshen84/ngx-webcam/issues"},"homepage":"https://github.com/davidshen84/ngx-webcam#readme","_id":"@davidshen84/ngx-webcam@0.2.1","_npmVersion":"6.4.1","_nodeVersion":"8.10.0","_npmUser":{"name":"davidshen84-org","email":"davidshen84@gmail.com"},"dist":{"integrity":"sha512-P2rmL5XEimJ0Gsx8ZZxAxHTjUW1pmajknAlrpZHo4aGtB/BUKADer1Ozf2AQQdZOo0wDgKYOOz+LF9U8GwaS2g==","shasum":"851c52d4c831b6e9a97815d361b978fd7290dccf","tarball":"https://registry.npmjs.org/@davidshen84/ngx-webcam/-/ngx-webcam-0.2.1.tgz","fileCount":20,"unpackedSize":256085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4+b2CRA9TVsSAnZWagAAL5EP/0J/sECDEuVxZuIXmoXY\nv2ALdmCO9DvL1q7uYVkJKdRRsd01qZVKdnpGZXdWmVxOQAXurZmU8a+ibt8X\nqZO7koInl4fmiDWpizcVdNYpWQn9SP6TcyQK7o+kCpj+vUtu9CXvRUjHo4tR\n9Bkc4ZteMsoAcAj9iKdfhpxP54XTBvtEnf256B9A9rtPq9OKqfGrI6vuCt6f\nQmi2KRb1juElP0ap4FoFKOqAQbJrUWOK2+Bp/ckykwN6EVZUIlwTYDOsdiKx\nY6UczuK4n9X2+SDJhpXAAUmDJFVhI5xVk5o+fGnelCYS54bVqaCH/ef2wVcC\nTuG0wahfbylR33Kbdmdbpb1MQisCRkCZxcwAo9pUNj4HhwaLDIbaxqcMY97G\n6lBMQw2mbqil0F9bp06g0lpk0YVtJPs5JZmpIW4pz9mc13qk4kA+EvsAdfYd\nUXDVfQ4QRC1+0tt4rnHNjCX8wxd4crr4MlssOh+ystWDqUFyXj84P1W7+Ozv\n3hmQ6IbKdbyLlNELvS+6i+9+iJUfvyaXTHasDe+t06QfhK4jhWhAGuYJMPV8\nsYgzUGQdhQsvN5TwJINx7pGa3jAV5DxL/c8c6HENXcDk/O9f5/giH3AZIvLO\nGBeVsbxODqA1u8V7f4u9FjsxoK2TLvSI4cJbPmvwK3NqKJeKEDPlzVFhLIe2\nbjqq\r\n=cUX8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID6lgmpfDAp8Ikh0CqYGBtOH346QUiFjgROdgS26JcV4AiBQQWUPBd3IZ9EaGdursXd35T+cpX+kvq69e7SvxG5eZA=="}]},"maintainers":[{"name":"davidshen84-org","email":"davidshen84@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-webcam_0.2.1_1541662454104_0.6620329673319314"},"_hasShrinkwrap":false},"0.2.2":{"name":"@davidshen84/ngx-webcam","version":"0.2.2","author":{"name":"basst314"},"contributors":[{"name":"davidshen84"}],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/davidshen84/ngx-webcam.git"},"keywords":["Webcam","Camera","Angular","Angular 4","Angular 5","Angular 6","Smartphone"],"private":false,"peerDependencies":{"@angular/core":"^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0","rxjs":"^5.0.0 || ^6.0.0"},"devDependencies":{"@angular-devkit/build-angular":"^0.10.6","@angular/animations":"^7.0.4","@angular/cli":"~7.0.6","@angular/common":"^7.0.4","@angular/compiler":"^7.0.4","@angular/compiler-cli":"^7.0.4","@angular/core":"^7.0.4","@angular/forms":"^7.0.4","@angular/http":"^7.0.4","@angular/language-service":"^7.0.4","@angular/platform-browser":"^7.0.4","@angular/platform-browser-dynamic":"^7.0.4","@angular/router":"^7.0.4","@types/jasmine":"~3.3.0","@types/jasminewd2":"~2.0.6","@types/node":"~10.12.9","codelyzer":"~4.5.0","core-js":"^2.5.7","jasmine-core":"~3.3.0","jasmine-spec-reporter":"~4.2.1","karma":"~3.1.1","karma-chrome-launcher":"~2.2.0","karma-cli":"~1.0.1","karma-coverage-istanbul-reporter":"^2.0.4","karma-jasmine":"~2.0.1","karma-jasmine-html-reporter":"^1.4.0","ng-packagr":"^4.4.0","protractor":"^5.4.1","rxjs":"^6.3.3","ts-node":"~7.0.1","tsickle":"^0.34.0","tslib":"^1.9.3","tslint":"~5.11.0","typescript":"~3.1.6","zone.js":"^0.8.26"},"main":"bundles/davidshen84-ngx-webcam.umd.js","module":"fesm5/davidshen84-ngx-webcam.js","es2015":"fesm2015/davidshen84-ngx-webcam.js","esm5":"esm5/davidshen84-ngx-webcam.js","esm2015":"esm2015/davidshen84-ngx-webcam.js","fesm5":"fesm5/davidshen84-ngx-webcam.js","fesm2015":"fesm2015/davidshen84-ngx-webcam.js","typings":"davidshen84-ngx-webcam.d.ts","metadata":"davidshen84-ngx-webcam.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.9.0"},"description":"A simple Angular 4+ Webcam-Component. Pure & minimal, no Flash-Fallback. See the Demo!","bugs":{"url":"https://github.com/davidshen84/ngx-webcam/issues"},"homepage":"https://github.com/davidshen84/ngx-webcam#readme","_id":"@davidshen84/ngx-webcam@0.2.2","_npmVersion":"6.4.1","_nodeVersion":"8.11.1","_npmUser":{"name":"davidshen84-org","email":"davidshen84@gmail.com"},"dist":{"integrity":"sha512-d36qW0VW72fuYpDZNI+uHM9M10dmQoYcRJVxj3DFQIVtR/WAUGWjmsxW6dtb7Juq89uAPz6lM+6CQG9tmxV9GA==","shasum":"4ea77218b12c36f16b754ff0f59dd461f7b72f15","tarball":"https://registry.npmjs.org/@davidshen84/ngx-webcam/-/ngx-webcam-0.2.2.tgz","fileCount":36,"unpackedSize":499460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb8kOICRA9TVsSAnZWagAA/ssP/1AzrehCJM6ToB40j6ye\naQ2pOHyhgjdRxKRbJZfJBjHlRI2Cw4FB2gJpuBCQxADFh+d8wkGDN8ChzrL2\n4sUmhAADhBmyQIh6/0b4a138DaZQzejm5XI57cB0InaCgagaGbTiujCaqRj5\nxp7q7xTk/4Fu2DTuNBoYBBpHdyB9P+8/+xCgOQOLWO+PpqMzAAeoMuR/5c4q\nYu2rlQHkUoCtBtCFctu9oXvjSl9I7xg8AtAjiw4mXVuL3xzeVQDAxFY7PgOF\nMRGd01OI3cAanF8ZBggUEynb88RD7/Zn+q8wquDqikykVu4CVlxlddvMiZv/\nU4wGccA6AlmT+A3smCQwXkJ+dJI4RRRm1cIVQL0nJB/JjIXuMEaUuypx7zuo\n/RmprrrPtc51409/qFsNH5ZlmBEW0JhWSYbg7sE3MYNOVhlhoFjuX5aqGR6d\nyNwdfYrPDTbzV3x6g3aYTih3t/WoAIvbGpfxh10SqHgcJioGnyF7XvNYw5ns\nNs4WDHO5G9V5OPTZzGTrEuoW4knytyuG3ISbrXzY9DtevAgWDSGRvxPOCEjt\n/9bxDVS35GhonoLvYc2F7GwmW7Evg1wHKeLgHs8+rZbXtj4P1NzqWGjWoOYp\n18txj5od7q5YjyLZXJSl7lRcehGPljYO8xh1LHw3r6jfArvGUdJgN/WGXq24\nbYcx\r\n=FW55\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEyuMoUonYpGMC1/Zm4iWVJ7EFo7p6OH0wbetoJET5nvAiEA8Q2WR74aRh3eixdnj+LV012LclJSH/YlLd5JcE2t5Ak="}]},"maintainers":[{"name":"davidshen84-org","email":"davidshen84@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-webcam_0.2.2_1542603655656_0.4757339810554835"},"_hasShrinkwrap":false},"0.4.0":{"name":"@davidshen84/ngx-webcam","version":"0.4.0","author":{"name":"basst314"},"contributors":[{"name":"davidshen84"}],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/basst314/ngx-webcam.git"},"keywords":["Webcam","Camera","Angular","Angular 10","Smartphone","Phone","Tablet"],"private":false,"peerDependencies":{},"main":"bundles/davidshen84-ngx-webcam.umd.js","module":"fesm2015/davidshen84-ngx-webcam.js","es2015":"fesm2015/davidshen84-ngx-webcam.js","esm2015":"esm2015/davidshen84-ngx-webcam.js","fesm2015":"fesm2015/davidshen84-ngx-webcam.js","typings":"davidshen84-ngx-webcam.d.ts","metadata":"davidshen84-ngx-webcam.metadata.json","sideEffects":false,"dependencies":{"tslib":"^2.0.0"},"description":"A simple Angular webcam component. Pure & minimal, no Flash-fallback. See the Demo!","bugs":{"url":"https://github.com/basst314/ngx-webcam/issues"},"homepage":"https://github.com/basst314/ngx-webcam#readme","_id":"@davidshen84/ngx-webcam@0.4.0","_nodeVersion":"14.4.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-735tZAHvTTGiublXmFzNmHTnTuYuiEHRr+tAGHOFscEZozrcovtc2enu4/HNxcZK3qWmYcmrVwJZzf14EKOuNQ==","shasum":"05ec0f7ab43a9c2ee0cb0e77ac2667e529b8f21f","tarball":"https://registry.npmjs.org/@davidshen84/ngx-webcam/-/ngx-webcam-0.4.0.tgz","fileCount":26,"unpackedSize":242372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJRtxCRA9TVsSAnZWagAAI0wQAI0fndAmVzekn+R0gU97\nqfgwf2BRHrX4frkepJaFUUPOfveMo6f6BSjscUf70XmIZO7UDUHGr3v7A1zb\npV9bZqLq50038hiaOTMOx0h9SIlOHi3E13E2wxlvVbZJ91K5GqiHll4eFJA7\n8ScYIZ6LVgUGHHrcbliJGAVwbhJq7YU78ZFJAkfLvhOijxMjFAgKkHDbKzLD\nGwfuMB5QRwCqASVk54rUbwWaownn8dzTs4iTEJbxtabgZ8ENzwTrT5EoVwBf\n5EU+rmS97ct6RR42miZypXapz1OrN96YJ9T2WjM/iwSPmckHf0yRWbiPmoCH\n8cEiT7kYX1PiqWcrT9xXnhHaaDA9QiBDeuvZB/kIf5/G1mZ4ajQKE6aQHEw2\n/4NFTLAkn90QjW45McNfn2QEUI0SlcQ6ZGLjWiX6SuXH52vd4B2GdULatUl1\nbeUAwB+DKCakQOWlcq6Tvi7dk8Jv4Fm7QDap8ORqViCP8bajAPTuJ/IHTea5\nn6o1dpqkBqPYGVp29hRAjD3NmRyHIWb3AT3KUMDjCNASy9ThAO/NMnPD9WTy\nq5cSY/JjeqiP0UzrJ0vFS/Ua6TQUfK9kKntjSPecQ5mM3taXyYn0KVm772KI\n900Wh0Y9UnXTmO7UWW97eYW77feAs4qh0wg6DMGUlgS27p15eU5ZX/lgcXY+\nXu0N\r\n=E08n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDppqinI97/DbKdgWvvQGZOTnc2agRp7jb1TYlqkmwwMAIhAO/b7/CoWUA59GXuKwskbW1LQi5pMakATLRKQp8k8qrc"}]},"maintainers":[{"name":"davidshen84-org","email":"davidshen84@gmail.com"}],"_npmUser":{"name":"davidshen84-org","email":"davidshen84@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-webcam_0.4.0_1596267376728_0.6586430992135222"},"_hasShrinkwrap":false}},"time":{"created":"2018-11-08T07:34:13.939Z","0.2.1":"2018-11-08T07:34:14.234Z","modified":"2022-04-05T03:06:19.157Z","0.2.2":"2018-11-19T05:00:55.772Z","0.4.0":"2020-08-01T07:36:16.904Z"},"maintainers":[{"name":"davidshen84-org","email":"davidshen84@gmail.com"}],"description":"A simple Angular webcam component. Pure & minimal, no Flash-fallback. See the Demo!","homepage":"https://github.com/basst314/ngx-webcam#readme","keywords":["Webcam","Camera","Angular","Angular 10","Smartphone","Phone","Tablet"],"repository":{"type":"git","url":"git+https://github.com/basst314/ngx-webcam.git"},"author":{"name":"basst314"},"bugs":{"url":"https://github.com/basst314/ngx-webcam/issues"},"license":"MIT","readme":"# ngx-webcam [](https://badge.fury.io/js/ngx-webcam) [](https://travis-ci.org/basst314/ngx-webcam)\n\nA simple Angular webcam component. Pure & minimal, no Flash-fallback. See the Demo!\n\n**Plug-and-play.** This library contains a single module which can be imported into every standard Angular 9+ project.\n\n**Simple to use.** The one component gives you full control and lets you take snapshots via actions and event bindings.\n\n**Minimal.** No unnecessary Flash-fallbacks, no bundle-size bloating.\n\n## Demo\nTry out the Live-Demo or see the Demo-Project.\n\n## Features\n* Webcam live view\n* Photo capturing\n* Smartphone compatibility for modern OS's (OS must support [WebRTC/UserMedia API](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices))\n* Access to front- and back-camera, if multiple cameras exist\n* Portrait & Landscape mode on smartphones\n* Mirrored live-view for user-facing cameras - \"selfie view\" on phones\n* Capturing of lossless pixel image data for better post-processing.\n\n\n## Prerequisites\n\n### Runtime Dependencies\n**Note:** Starting from version `0.3.0` this project requires TypeScript `>= 3.7.0` (Angular 9). For older versions of Angular/TypeScript, please use version `0.2.6` of this library.\n* Angular: `>=9.0.0`\n* Typescript: `>=3.7.0`\n* RxJs: `>=5.0.0`\n* **Important:** Your app must be served on a secure context using `https://` or on localhost, for modern browsers to permit WebRTC/UserMedia access.\n\n### Client\n* [Current browser](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Browser_compatibility) w/ HTML5 and WebRTC/UserMedia support (Chrome >53, Safari >11, Firefox >38, Edge)\n* Webcam / camera\n* User permissions to access the camera\n\n## Usage\n1) Install the library via standard npm command:\n\n`npm install --save ngx-webcam`\n\n2) Import the `WebcamModule` into your Angular module:\n\n```typescript\nimport {WebcamModule} from 'ngx-webcam';\n\n@NgModule({\n imports: [\n WebcamModule,\n ...\n ],\n ...\n})\nexport class AppModule { }\n```\n\n3) Use the `WebcamComponent` on your pages:\n\n``\n\nAs simple as that. \n\nFor more examples, see the code in the Demo-Project.\n\n## Options and Events\nThis section describes the basic inputs/outputs of the component. All inputs are optional.\n### Inputs\n* `trigger: Observable`: An `Observable` to trigger image capturing. When it fires, an image will be captured and emitted (see Outputs).\n* `width: number`: The maximal video width of the webcam live view.\n* `height: number`: The maximal video height of the webcam live view. The actual view will be placed within these boundaries, respecting the aspect ratio of the video stream.\n* `videoOptions: MediaTrackConstraints`: Defines constraints ([MediaTrackConstraints](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints)) to apply when requesting the video track.\n* `mirrorImage: string | WebcamMirrorProperties`: Flag to control image mirroring. If the attribute is missing or `null` and the camera claims to be user-facing, the image will be mirrored (x-axis) to provide a better user experience (\"selfie view\"). A string value of `\"never\"` will prevent mirroring, whereas a value of `\"always\"` will mirror every camera stream, even if the camera cannot be detected as user-facing. For future extensions, the `WebcamMirrorProperties` object can also be used to set these values.\n* `allowCameraSwitch: boolean`: Flag to enable/disable camera switch. If enabled, a switch icon will be displayed if multiple cameras are found.\n* `switchCamera: Observable`: Can be used to cycle through available cameras (true=forward, false=backwards), or to switch to a specific device by deviceId (string).\n* `captureImageData: boolean = false`: Flag to enable/disable capturing of a lossless pixel ImageData object when a snapshot is taken. ImageData will be included in the emitted `WebcamImage` object.\n* `imageType: string = 'image/jpeg'`: [Image type](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL) to use when capturing snapshots. Default is 'image/jpeg'.\n* `imageQuality: number = 0.92`: [Image quality](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL) to use when capturing snapshots. Must be a number between 0..1. Default is 0.92.\n\n### Outputs\n* `imageCapture: EventEmitter`: Whenever an image is captured (i.e. triggered by `[trigger]`), the image is emitted via this `EventEmitter`. The image data is contained in the `WebcamImage` data structure as both, plain Base64 string and data-url.\n* `imageClick: EventEmitter`: An `EventEmitter` to signal clicks on the webcam area.\n* `initError: EventEmitter`: An `EventEmitter` to signal errors during the webcam initialization.\n* `cameraSwitched: EventEmitter`: Emits the active deviceId after the active video device has been switched.\n\n## Good To Know\n### How to determine if a user has denied camera access\nWhen camera initialization fails for some reason, the component emits a `WebcamInitError` via the `initError` EventEmitter. If provided by the browser, this object contains a field `mediaStreamError: MediaStreamError` which contains information about why UserMedia initialization failed. According to [Mozilla API docs](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia), this object contains a `name` attribute which gives insight about the reason.\n> If the user denies permission, or matching media is not available, then the promise is rejected with NotAllowedError or NotFoundError respectively.\n\nDetermine if a user has denied permissions:\n```\n \n```\n```\n public handleInitError(error: WebcamInitError): void {\n if (error.mediaStreamError && error.mediaStreamError.name === \"NotAllowedError\") {\n console.warn(\"Camera access was not allowed by user!\");\n }\n }\n```\n\n## Development\nHere you can find instructions on how to start developing this library.\n\n### Build\nRun `npm run packagr` to build the library. The build artifacts will be stored in the `dist/` directory.\n\n### Start\nRun `npm start` to build and run the surrounding demo app with the `WebcamModule`. Essential for live-developing.\n\n### Generate docs/\nRun `npm run docs` to generate the live-demo documentation pages in the `docs/` directory.\n\n### Running Unit Tests\nRun `npm run test` to run unit-tests.\n","readmeFilename":"README.md","contributors":[{"name":"davidshen84"}]}