ng-webcam

ngWebcam is an AngularJS directive for capturing images from your computer's camera, and delivering then to you as JPEG or PNG Data URIs. The images can then be displayed in your web page, render into a canvas or submited to your server. ngWebcam uses WebcamJS to provide the core functionality.

Browser suport

ngWebcam suports the same browsers supported by WebcamJS.

Live exemple

To see live exemple, go to the sample page

Instalation

Using Bower

bower install ng-webcam

Usage

Import files scripts

ngWebcam uses WebcamJS to work properly so you need to add the script in your main file, don't forget to load the directive file:

<script src"/path/to/webcam.js"></script>
<script src"/path/to/ng-webcam.js"></script>

Add the module as dependency

Simply add the module as dependency to your main application module likes this:

angular.module("app", ["ng-webcam"]);

The directive

<ng-webcam 
    config="vm.config"
    on-error="vm.onError(err)"
    on-load="vm.onLoad()"
    on-live="vm.onLive()"
    on-capture-progress="vm.onCaptureProgress(src, progress)"
    on-capture-complete="vm.onCaptureComplete(src)">
</ng-webcam>

Options

ng-webcam comes with lots of options to simplify tour development:

Callbacks

on-error function Callback function for error. Fires when the WebcamJS library erro occurs (your callback function is passed an error string)
on-capture-complete function Callback function for capture complete action. Fires when the capture completes (your callback function is passed an array string (data_uri) in src parameter)
on-load function Callback function for load action camera. Fires when the WebcamJS library finisheds loading
on-live function Callback function for live action camera. Fires when the user's camera goes live - this will only happen after the user allows access to their camera
on-capture-progress function Callback function for each capturing image with progress. Fires repeatedly while an capturing progress (your callback function is passed an string (data_uri) in src parameter and an number (progress) in progress parameter)

Config

config object Config options for init params in WebcamJS e directive | optional
- viewerWidth number Width of live camera viewer in pixels| default to actual size of the DOM element auto
- viewerHeight number Height of live camera viewer in pixels| default to actual size of the DOM element auto
- outputWidth number Width of captured snapshot image in pixels | default 320
- outputHeight number Height of captured snapshot image in pixels | default 240
- delay number Number of seconds to wait and display before getting snapshot | default 0
- shots number Number of shots captured images | default 1
- shutterUrl string Shutter sound's url to play when taking snapshot | optional
- flahFallbackUrl string Url of the Adobe Flash player to enable the fallback and crossbrowser modes, default based on navigator.getUserMedia
- countdown number Number of seconds to wait and display camera frame | optional

Dispatches events

ngWebcam_capture event Notifies when it should be carried out to capture the camera
ngWebcam_on event Notifies when the camera must be on
ngWebcam_off event Notifies when the camera should be turned off

Working example

A working example is available in gh-pages branch. Make sure to install bower and node dependencies, after checkout branch.

npm install && bower install

Then start the node server, it will ne accessible on http://0.0.0.0:3000

node server.js

License

The MIT License (MIT)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARR

bartekbp/ng-webcam