Gathering detailed insights and metrics for @cbdev/ngx-webcam
Gathering detailed insights and metrics for @cbdev/ngx-webcam
A simple Angular webcam component / pure & minimal, no flash-fallback
Installations
npm install @cbdev/ngx-webcamDeveloper Guide
BETA
Typescript
No
Module System
ESM
Node Version
16.10.0
NPM Version
7.24.0
Releases
20
Languages
4
TypeScript
SCSS
HTML
JavaScript
TypeScript (80.35%)
SCSS (7.16%)
HTML (6.93%)
JavaScript (5.56%)
Developer
Download Statistics
Total Downloads
6,853
Last Day
6
Last Week
62
Last Month
235
Last Year
2,708
GitHub Statistics
MIT License
235 Stars
203 Commits
109 Forks
13 Watchers
15 Branches
6 Contributors
Updated on Jun 25, 2025
Bundle Size
25.22 kB
Minified
8.41 kB
Minified + Gzipped
Maintainers
3
Package Meta Information
Latest Version
0.3.4
Package Id
@cbdev/ngx-webcam@0.3.4
Unpacked Size
198.02 kB
Size
41.59 kB
File Count
23
NPM Version
7.24.0
Node Version
16.10.0
Total Downloads
Cumulative downloads
Total Downloads
6,853
Dependencies
1
ngx-webcam 
A simple Angular webcam component. Pure & minimal, no Flash-fallback. See the Demo!
Plug-and-play. This library contains a single module which can be imported into every standard Angular 9+ project.
Simple to use. The one component gives you full control and lets you take snapshots via actions and event bindings.
Minimal. No unnecessary Flash-fallbacks, no bundle-size bloating.
Demo
Try out the Live-Demo or see the Demo-Project.
Features
- Webcam live view
- Photo capturing
- Smartphone compatibility for modern OS's (OS must support WebRTC/UserMedia API)
- Access to front- and back-camera, if multiple cameras exist
- Portrait & Landscape mode on smartphones
- Mirrored live-view for user-facing cameras - "selfie view" on phones
- Capturing of lossless pixel image data for better post-processing.
Prerequisites
Runtime Dependencies
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.
- Angular:
>=9.0.0 - Typescript:
>=3.7.0 - RxJs:
>=5.0.0 - Important: Your app must be served on a secure context using
https://or on localhost, for modern browsers to permit WebRTC/UserMedia access.
Client
- Current browser w/ HTML5 and WebRTC/UserMedia support (Chrome >53, Safari >11, Firefox >38, Edge)
- Webcam / camera
- User permissions to access the camera
Usage
- Install the library via standard npm command:
npm install --save ngx-webcam
- Import the
WebcamModuleinto your Angular module:
1import {WebcamModule} from 'ngx-webcam'; 2 3@NgModule({ 4 imports: [ 5 WebcamModule, 6 ... 7 ], 8 ... 9}) 10export class AppModule { }
- Use the
WebcamComponenton your pages:
<webcam></webcam>
As simple as that.
For more examples, see the code in the Demo-Project.
Options and Events
This section describes the basic inputs/outputs of the component. All inputs are optional.
Inputs
trigger: Observable<void>: AnObservableto trigger image capturing. When it fires, an image will be captured and emitted (see Outputs).width: number: The maximal video width of the webcam live view.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.videoOptions: MediaTrackConstraints: Defines constraints (MediaTrackConstraints) to apply when requesting the video track.mirrorImage: string | WebcamMirrorProperties: Flag to control image mirroring. If the attribute is missing ornulland 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, theWebcamMirrorPropertiesobject can also be used to set these values.allowCameraSwitch: boolean: Flag to enable/disable camera switch. If enabled, a switch icon will be displayed if multiple cameras are found.switchCamera: Observable<boolean|string>: Can be used to cycle through available cameras (true=forward, false=backwards), or to switch to a specific device by deviceId (string).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 emittedWebcamImageobject.imageType: string = 'image/jpeg': Image type to use when capturing snapshots. Default is 'image/jpeg'.imageQuality: number = 0.92: Image quality to use when capturing snapshots. Must be a number between 0..1. Default is 0.92.
Outputs
imageCapture: EventEmitter<WebcamImage>: Whenever an image is captured (i.e. triggered by[trigger]), the image is emitted via thisEventEmitter. The image data is contained in theWebcamImagedata structure as both, plain Base64 string and data-url.imageClick: EventEmitter<void>: AnEventEmitterto signal clicks on the webcam area.initError: EventEmitter<WebcamInitError>: AnEventEmitterto signal errors during the webcam initialization.cameraSwitched: EventEmitter<string>: Emits the active deviceId after the active video device has been switched.
Good To Know
How to determine if a user has denied camera access
When 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, this object contains a name attribute which gives insight about the reason.
If the user denies permission, or matching media is not available, then the promise is rejected with NotAllowedError or NotFoundError respectively.
Determine if a user has denied permissions:
<webcam (initError)="handleInitError($event)"></webcam>
public handleInitError(error: WebcamInitError): void {
if (error.mediaStreamError && error.mediaStreamError.name === "NotAllowedError") {
console.warn("Camera access was not allowed by user!");
}
}
Development
Here you can find instructions on how to start developing this library.
Build
Run npm run packagr to build the library. The build artifacts will be stored in the dist/ directory.
Start
Run npm start to build and run the surrounding demo app with the WebcamModule. Essential for live-developing.
Generate docs/
Run npm run docs to generate the live-demo documentation pages in the docs/ directory.
Running Unit Tests
Run npm run test to run unit-tests.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 3/16 approved changesets -- score normalized to 1
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
Project has not signed or included provenance with any releases.
Details
- Warn: release artifact 0.4.1 not signed: https://api.github.com/repos/basst314/ngx-webcam/releases/54547692
- Warn: release artifact 0.3.2 not signed: https://api.github.com/repos/basst314/ngx-webcam/releases/34287572
- Warn: release artifact 0.3.0 not signed: https://api.github.com/repos/basst314/ngx-webcam/releases/24742879
- Warn: release artifact 0.2.6 not signed: https://api.github.com/repos/basst314/ngx-webcam/releases/19359485
- Warn: release artifact 0.2.5 not signed: https://api.github.com/repos/basst314/ngx-webcam/releases/18023705
- Warn: release artifact 0.4.1 does not have provenance: https://api.github.com/repos/basst314/ngx-webcam/releases/54547692
- Warn: release artifact 0.3.2 does not have provenance: https://api.github.com/repos/basst314/ngx-webcam/releases/34287572
- Warn: release artifact 0.3.0 does not have provenance: https://api.github.com/repos/basst314/ngx-webcam/releases/24742879
- Warn: release artifact 0.2.6 does not have provenance: https://api.github.com/repos/basst314/ngx-webcam/releases/19359485
- Warn: release artifact 0.2.5 does not have provenance: https://api.github.com/repos/basst314/ngx-webcam/releases/18023705
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 17 are checked with a SAST tool
Reason
69 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-c75v-2vq8-878f
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-273r-mgr4-v34f
- Warn: Project is vulnerable to: GHSA-r7qp-cfhv-p84w
- Warn: Project is vulnerable to: GHSA-q9mw-68c2-j6m5
- Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
- Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh
- Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-36fh-84j7-cv5h
- Warn: Project is vulnerable to: GHSA-7x7c-qm48-pq9c
- Warn: Project is vulnerable to: GHSA-rc3x-jf5g-xvc5
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-82v2-mx6x-wq7q
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-qrpm-p2h7-hrv2
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-25hc-qcg6-38wj
- Warn: Project is vulnerable to: GHSA-qm95-pgcg-qqfq
- Warn: Project is vulnerable to: GHSA-cqmj-92xf-r6r9
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
- Warn: Project is vulnerable to: GHSA-hc6q-2mpp-qw7j
- Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
- Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-776f-qx25-q3cc
Score
1.7
/10
Last Scanned on 2025-06-30
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More