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

Fork and clone this repository
Install dependencies

npm install
Build/test with grunt

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

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

gongxiancao/webcam-directive