GithubHelp home page GithubHelp logo

alaawahbah / ngx-webcam Goto Github PK

View Code? Open in Web Editor NEW

This project forked from basst314/ngx-webcam

0.0 2.0 0.0 914 KB

A simple Angular 4+ Webcam-Component / pure & minimal, no Flash-Fallback

Home Page: https://basst314.github.io/ngx-webcam/?

TypeScript 78.98% JavaScript 6.27% HTML 6.67% CSS 8.08%

ngx-webcam's Introduction

Ngx-Webcam npm version Build Status

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.

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 view for user-facing cameras, to enhance user experience (i.e. on smartphones)

Prerequisites

Runtime Dependencies:

  • Angular: ^4.0.0 || ^5.0.0 || ^6.0.0
  • RxJs: ^5.0.0 || ^6.0.0
  • App must be served on a secure context (https or localhost)

Client:

  • Current Browser w/ HTML5 and WebRTC/UserMedia support (Chrome >53, Safari >11, Firefox >38, Edge)
  • Webcam :)
  • User permissions to access the webcam

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 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.
  • 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).

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.

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 webapp 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.

ngx-webcam's People

Contributors

basst314 avatar rickdroio avatar

Watchers

James Cloos avatar Alaa Wahbah avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.