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 NPM
``shell
npm install webcam
`
#### Using Bower
`shell
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
`html

`

Usage

#### Add module "webcam" as dependency
`js
angular.module('myapp', ['webcam']);
`

#### Then add the new element in HTML
`html

`

Advanced Usage

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

`

#### Callbacks
`js
function MyController($scope) {
$scope.onError = function (err) {...};
$scope.onStream = function (stream) {...};
$scope.onSuccess = function () {...};
}
`
`html
on-stream="onStream(stream)"
on-streaming="onSuccess()"
on-error="onError(err)">

`
#### Set a channel to bind data
`js
function MyController($scope) {
$scope.myChannel = {
// the fields below are all optional
videoHeight: 800,
videoWidth: 600,
video: null // Will reference the video element on success
};
}
`
`html
channel="myChannel">

``

$3

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

[angularjs]:http://angularjs.org