A simple Angular webcam component / pure & minimal, no flash-fallback
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.
Try out the Live-Demo or see the Demo-Project.
Note: Starting from version
0.3.0this project requires TypeScript
>= 3.7.0(Angular 9). For older versions of Angular/TypeScript, please use version
0.2.6of 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.
1) Install the library via standard npm command:
npm install --save ngx-webcam
2) Import the
WebcamModuleinto your Angular module:
import {WebcamModule} from 'ngx-webcam';@NgModule({ imports: [ WebcamModule, ... ], ... }) export class AppModule { }
3) Use the
WebcamComponenton your pages:
As simple as that.
For more examples, see the code in the Demo-Project.
This section describes the basic inputs/outputs of the component. All inputs are optional.
trigger: Observable: 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 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
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: 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
WebcamImageobject.
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: 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: An
EventEmitterto signal clicks on the webcam area.
initError: EventEmitter: An
EventEmitterto signal errors during the webcam initialization.
cameraSwitched: EventEmitter: Emits the active deviceId after the active video device has been switched.
When camera initialization fails for some reason, the component emits a
WebcamInitErrorvia the
initErrorEventEmitter. If provided by the browser, this object contains a field
mediaStreamError: MediaStreamErrorwhich contains information about why UserMedia initialization failed. According to Mozilla API docs, this object contains a
nameattribute 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:
public handleInitError(error: WebcamInitError): void { if (error.mediaStreamError && error.mediaStreamError.name === "NotAllowedError") { console.warn("Camera access was not allowed by user!"); } }
Here you can find instructions on how to start developing this library.
Run
npm run packagrto build the library. The build artifacts will be stored in the
dist/directory.
Run
npm startto build and run the surrounding demo app with the
WebcamModule. Essential for live-developing.
Run
npm run docsto generate the live-demo documentation pages in the
docs/directory.
Run
npm run testto run unit-tests.