npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@davidshen84/ngx-webcam

v0.4.0

Published

A simple Angular webcam component. Pure &amp; minimal, no Flash-fallback. <a href="https://basst314.github.io/ngx-webcam/?" target="_blank">See the Demo!</a>

Downloads

24

Readme

ngx-webcam npm version Build Status

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

  1. Install the library via standard npm command:

npm install --save ngx-webcam

  1. Import the WebcamModule into your Angular module:
import {WebcamModule} from 'ngx-webcam';

@NgModule({
  imports: [
    WebcamModule,
    ...
  ],
  ...
})
export class AppModule { }
  1. Use the WebcamComponent on 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>: An Observable to 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 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.
  • 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 WebcamImage object.
  • 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 this EventEmitter. The image data is contained in the WebcamImage data structure as both, plain Base64 string and data-url.
  • imageClick: EventEmitter<void>: An EventEmitter to signal clicks on the webcam area.
  • initError: EventEmitter<WebcamInitError>: An EventEmitter to 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.