You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A simple Angular 4+ Webcam-Component. Pure & minimal, no Flash-Fallback. <ahref="https://basst314.github.io/ngx-webcam/?"target="_blank">See the Demo!</a>
3
+
A simple Angular 9+ webcam component. Pure & minimal, no Flash-Fallback. <ahref="https://basst314.github.io/ngx-webcam/?"target="_blank">See the Demo!</a>
4
4
5
-
**Plug-and-play.** This library contains a single webcam-module which can be imported into nearly every Angular 4+ project.
5
+
**Plug-and-play.** This library contains a single module which can be imported into every standard Angular 9+ project.
6
6
7
7
**Simple to use.** The one component gives you full control and lets you take snapshots via actions and event bindings.
8
8
@@ -14,24 +14,25 @@ Try out the <a href="https://basst314.github.io/ngx-webcam/?" target="_blank">Li
14
14
## Features
15
15
* Webcam live view
16
16
* Photo capturing
17
-
* Smartphone compatibility for modern OS's (OS must support WebRTC/UserMedia API)
17
+
* Smartphone compatibility for modern OS's (OS must support [WebRTC/UserMedia API](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices))
18
18
* Access to front- and back-camera, if multiple cameras exist
19
19
* Portrait & Landscape mode on smartphones
20
-
* Mirrored view for user-facing cameras, to enhance user experience (e.g. on smartphones)
20
+
* Mirrored live-view for user-facing cameras - "selfie view" on phones
21
21
* Capturing of lossless pixel image data for better post-processing.
* App must be served on a secure context (https or localhost)
27
+
* Angular: `>=9.0.0`
28
+
* Typescript: `>=3.7.0`
29
+
* RxJs: `>=5.0.0`
30
+
***Important:** Your app must be served on a secure context using `https://` or on localhost, for modern browsers to permit WebRTC/UserMedia access.
30
31
31
32
### Client
32
-
*[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)
33
-
* Webcam :)
34
-
* User permissions to access the webcam
33
+
*[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)
34
+
* Webcam / camera
35
+
* User permissions to access the camera
35
36
36
37
## Usage
37
38
1) Install the library via standard npm command:
@@ -68,7 +69,7 @@ This section describes the basic inputs/outputs of the component. All inputs are
68
69
*`width: number`: The maximal video width of the webcam live view.
69
70
*`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.
70
71
*`videoOptions: MediaTrackConstraints`: Defines constraints ([MediaTrackConstraints](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints)) to apply when requesting the video track.
71
-
*`mirrorImage: string | WebcamMirrorProperties`: Flag to control image mirroring. If the attribute is missing or `null` and 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 `WebcamMirrorProperties` object can also be used to set these values.
72
+
*`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.
72
73
*`allowCameraSwitch: boolean`: Flag to enable/disable camera switch. If enabled, a switch icon will be displayed if multiple cameras are found.
73
74
*`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).
74
75
*`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.
@@ -82,11 +83,11 @@ This section describes the basic inputs/outputs of the component. All inputs are
82
83
*`cameraSwitched: EventEmitter<string>`: Emits the active deviceId after the active video device has been switched.
83
84
84
85
## Good To Know
85
-
### How to determine if the user denied camera access
86
+
### How to determine if a user has denied camera access
86
87
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](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia), this object contains a `name` attribute which gives insight about the reason.
87
88
> If the user denies permission, or matching media is not available, then the promise is rejected with NotAllowedError or NotFoundError respectively.
88
89
89
-
In case a user denied permissions this can be determined like this:
0 commit comments