ngx-webcam0.2.2 • Public • Published
A simple Angular 4+ Webcam-Component. Pure & minimal, no Flash-Fallback. See the Demo!
Plug-and-play. This library contains a single webcam-module which can be imported into nearly every Angular 4+ 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.
- 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 view for user-facing cameras, to enhance user experience (i.e. on smartphones)
- Capturing of lossless pixel image data for better post-processing.
^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
^5.0.0 || ^6.0.0
- App must be served on a secure context (https or localhost)
- Current Browser w/ HTML5 and WebRTC/UserMedia support (Chrome >53, Safari >11, Firefox >38, Edge)
- Webcam :)
- User permissions to access the webcam
- Install the library via standard npm command:
npm install --save ngx-webcam
- Import the
WebcamModuleinto your Angular module:
- Use the
WebcamComponenton your pages:
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.
trigger: Observable<void>: An
Observableto 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 or
nulland a webcam claims to be user-facing, the image will be mirrored (x-axis) to provide a better user experience. A string value of
"never"will prevent mirroring, whereas a value of
"always"will mirror every webcam stream, even if the webcam cannot be detected as user-facing. For future extensions, the
WebcamMirrorPropertiesobject 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 emitted
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.
imageCapture: EventEmitter<WebcamImage>: Whenever an image is captured (i.e. triggered by
[trigger]), the image is emitted via this
EventEmitter. The image data is contained in the
WebcamImagedata structure as both, plain Base64 string and data-url.
imageClick: EventEmitter<void>: An
EventEmitterto signal clicks on the webcam area.
initError: EventEmitter<WebcamInitError>: An
EventEmitterto signal errors during the webcam initialization.
cameraSwitched: EventEmitter<string>: Emits the active deviceId after the active video device has been switched.
Here you can find instructions on how to start developing this library.
npm run packagr to build the library. The build artifacts will be stored in the
npm start to build and run the surrounding webapp with the
WebcamModule. Essential for live-developing.
npm run docs to generate the live-demo documentation pages in the
Running Unit Tests
npm run test to run unit-tests.