Webcam manipulation with HTML5

An AngularJS directive to manipulate the webcam.

You can easily add it as a module to your own app.

A complete example can be found at http://jonashartmann.github.io/webcam-directive (gh-pages)

Download

Using Bower

bower install webcam-directive

There is a tag for each version, with the built javascript file inside the dist directory

Ex.: dist/webcam.min.js

Installation

Using script tag

<script type="text/javascript" src="webcam.min.js"></script>

Usage

Add module "webcam" as dependency

angular.module('myapp', ['webcam']);

Then add the new element in HTML

<webcam></webcam>

Advanced Usage

Set a custom placeholder image to be shown while loading the stream

<webcam placeholder="'img/ajax-loader.gif'">

Callbacks

function MyController($scope) {
  $scope.onError = function (err) {...};
  $scope.onStream = function (stream) {...};
  $scope.onSuccess = function () {...};
}

<webcam
  on-stream="onStream(stream)"
  on-streaming="onSuccess()"
  on-error="onError(err)">
</webcam>

Set a channel to bind data

function MyController($scope) {
  $scope.myChannel = {
    // the fields below are all optional
    videoHeight: 800,
    videoWidth: 600,
    video: null // Will reference the video element on success
  };
}

<webcam
  channel="myChannel">
</webcam>

see more examples wiki

Contribute

1. Fork and clone this repository

2. Install dependencies

   npm install

3. Build/test with grunt

   grunt test

4. Make a Pull Request (it will only be merged if it passes the Travis build)

Or just help by creating issues.

Technologies used in this project

• AngularJS
• Yeoman
• getUserMedia
• canvas
• video

The code is licensed under the MIT License. @see LICENSE file