JarCastingWebcam 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
npm install webcam
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