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.

ngWebcam suports the same browsers supported by WebcamJS.

To see live exemple, go to the sample page

bower install ng-webcam

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>

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

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

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

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

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

• 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

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

The MIT License (MIT)

Copyright (c) 2015 Weber Amaral

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