{"id":17609605,"url":"https://github.com/basst314/ngx-webcam","last_synced_at":"2025-05-16T03:05:46.808Z","repository":{"id":28438120,"uuid":"117163988","full_name":"basst314/ngx-webcam","owner":"basst314","description":"A simple Angular webcam component / pure \u0026 minimal, no flash-fallback","archived":false,"fork":false,"pushed_at":"2023-03-04T02:31:50.000Z","size":5863,"stargazers_count":232,"open_issues_count":57,"forks_count":108,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-04-08T13:12:26.962Z","etag":null,"topics":["angular","angular9","camera","live","multiple-cameras","ngx-webcam","phone","smartphone","tablet","webcam","webcam-live"],"latest_commit_sha":null,"homepage":"https://basst314.github.io/ngx-webcam/?","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/basst314.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-01-11T23:01:47.000Z","updated_at":"2024-12-08T14:06:29.000Z","dependencies_parsed_at":"2024-06-18T12:29:25.072Z","dependency_job_id":"77004ddb-6994-48a7-b91d-f5dcecab8ade","html_url":"https://github.com/basst314/ngx-webcam","commit_stats":{"total_commits":164,"total_committers":7,"mean_commits":"23.428571428571427","dds":"0.22560975609756095","last_synced_commit":"db71daa10ac441c8293ab4554017a011b2c0650a"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basst314%2Fngx-webcam","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basst314%2Fngx-webcam/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basst314%2Fngx-webcam/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basst314%2Fngx-webcam/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/basst314","download_url":"https://codeload.github.com/basst314/ngx-webcam/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253384849,"owners_count":21899935,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular9","camera","live","multiple-cameras","ngx-webcam","phone","smartphone","tablet","webcam","webcam-live"],"created_at":"2024-10-22T17:09:18.290Z","updated_at":"2025-05-16T03:05:41.797Z","avatar_url":"https://github.com/basst314.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ngx-webcam [![npm version](https://badge.fury.io/js/ngx-webcam.svg)](https://badge.fury.io/js/ngx-webcam) [![Build Status](https://api.travis-ci.com/basst314/ngx-webcam.svg?branch=master)](https://app.travis-ci.com/github/basst314/ngx-webcam)\n\nA simple Angular webcam component. Pure \u0026amp; minimal, no\nFlash-fallback. \u003ca href=\"https://basst314.github.io/ngx-webcam/?\" target=\"_blank\"\u003eSee the Demo!\u003c/a\u003e\n\n**Plug-and-play.** This library contains a single module which can be imported into every standard Angular 13+ 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\n\nTry out the \u003ca href=\"https://basst314.github.io/ngx-webcam/?\" target=\"_blank\"\u003eLive-Demo\u003c/a\u003e or see\nthe \u003ca href=\"https://github.com/basst314/ngx-webcam-demo\" target=\"_blank\"\u003eDemo-Project\u003c/a\u003e.\n\n## Features\n\n- Webcam live view\n- Photo capturing\n- Smartphone compatibility for modern OS's (OS must\n  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 \u0026 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## Prerequisites\n\n### Runtime Dependencies\n\n**Note:** For older versions of Angular/TypeScript, please use previous releases of this library.\n\n- Angular: `\u003e=13.0.0`\n- Typescript: `\u003e=4.4.4`\n- RxJs: `\u003e=6.6.0`\n- **Important:** Your app must be served on a secure context using `https://` or on localhost, for modern browsers to\n  permit WebRTC/UserMedia access.\n\n### Client\n\n- [Current browser](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Browser_compatibility) w/\n  HTML5 and WebRTC/UserMedia support (Chrome \u003e53, Safari \u003e11, Firefox \u003e38, Edge)\n- Webcam / camera\n- User permissions to access the camera\n\n## Usage\n\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```\n\n3. Use the `WebcamComponent` on your pages:\n\n`\u003cwebcam\u003e\u003c/webcam\u003e`\n\nAs simple as that.\n\nFor more examples, see the code in the \u003ca href=\"https://github.com/basst314/ngx-webcam-demo\" target=\"_blank\"\u003e\nDemo-Project\u003c/a\u003e.\n\n## Options and Events\n\nThis section describes the basic inputs/outputs of the component. All inputs are optional.\n\n### Inputs\n\n- `trigger: Observable\u003cvoid\u003e`: An `Observable` to trigger image capturing. When it fires, an image will be captured and\n  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\n  boundaries, respecting the aspect ratio of the video stream.\n- `videoOptions: MediaTrackConstraints`: Defines\n  constraints ([MediaTrackConstraints](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints)) to apply\n  when requesting the video track.\n- `mirrorImage: string | WebcamMirrorProperties`: Flag to control image mirroring. If the attribute is missing or `null`\n  and the camera claims to be user-facing, the image will be mirrored (x-axis) to provide a better user experience (\"\n  selfie view\"). A string value of `\"never\"` will prevent mirroring, whereas a value of `\"always\"` will mirror every\n  camera stream, even if the camera cannot be detected as user-facing. For future extensions,\n  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\n  multiple cameras are found.\n- `switchCamera: Observable\u003cboolean|string\u003e`: Can be used to cycle through available cameras (true=forward,\n  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\n  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)\n  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)\n  to use when capturing snapshots. Must be a number between 0..1. Default is 0.92.\n\n### Outputs\n\n- `imageCapture: EventEmitter\u003cWebcamImage\u003e`: Whenever an image is captured (i.e. triggered by `[trigger]`), the image is\n  emitted via this `EventEmitter`. The image data is contained in the `WebcamImage` data structure as both, plain Base64\n  string and data-url.\n- `imageClick: EventEmitter\u003cvoid\u003e`: An `EventEmitter` to signal clicks on the webcam area.\n- `initError: EventEmitter\u003cWebcamInitError\u003e`: An `EventEmitter` to signal errors during the webcam initialization.\n- `cameraSwitched: EventEmitter\u003cstring\u003e`: Emits the active deviceId after the active video device has been switched.\n\n## Good To Know\n\n### How to determine if a user has denied camera access\n\nWhen camera initialization fails for some reason, the component emits a `WebcamInitError` via the `initError`\nEventEmitter. If provided by the browser, this object contains a field `mediaStreamError: MediaStreamError` which\ncontains information about why UserMedia initialization failed. According\nto [Mozilla API docs](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia), this object contains\na `name` attribute which gives insight about the reason.\n\u003e 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  \u003cwebcam (initError)=\"handleInitError($event)\"\u003e\u003c/webcam\u003e\n```\n\n```\n  public handleInitError(error: WebcamInitError): void {\n    if (error.mediaStreamError \u0026\u0026 error.mediaStreamError.name === \"NotAllowedError\") {\n      console.warn(\"Camera access was not allowed by user!\");\n    }\n  }\n```\n\n## Development\n\nHere you can find instructions on how to start developing this library.\n\n### Build\n\nRun `npm run packagr` to build the library. The build artifacts will be stored in the `dist/` directory.\n\n### Start\n\nRun `npm start` to build and run the surrounding demo app with the `WebcamModule`. Essential for live-developing.\n\n### Generate docs/\n\nRun `npm run docs` to generate the live-demo documentation pages in the `docs/` directory.\n\n### Running Unit Tests\n\nRun `npm run test` to run unit-tests.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbasst314%2Fngx-webcam","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbasst314%2Fngx-webcam","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbasst314%2Fngx-webcam/lists"}