Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jonashartmann/webcam-directive
Angularjs directive to access the webcam
https://github.com/jonashartmann/webcam-directive
angularjs webcam
Last synced: about 14 hours ago
JSON representation
Angularjs directive to access the webcam
- Host: GitHub
- URL: https://github.com/jonashartmann/webcam-directive
- Owner: jonashartmann
- License: mit
- Created: 2013-04-26T21:13:35.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2021-03-11T11:42:21.000Z (almost 4 years ago)
- Last Synced: 2024-04-15T00:18:57.907Z (8 months ago)
- Topics: angularjs, webcam
- Language: JavaScript
- Homepage: https://jonas.hartmann.site/webcam-directive
- Size: 6.6 MB
- Stars: 239
- Watchers: 24
- Forks: 121
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Webcam manipulation with HTML5
An [AngularJS][] directive to manipulate the webcam.
[](https://travis-ci.org/jonashartmann/webcam-directive)
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](http://jonashartmann.github.io/webcam-directive) (*gh-pages*)
## Download
[](https://nodei.co/npm/webcam/)
#### Using [NPM](http://www.npmjs.com)
```shell
npm install webcam
```
#### Using [Bower](http://bower.io/)
```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
```
#### 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
```
### see more examples [wiki](https://github.com/jonashartmann/webcam-directive/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](http://yeoman.io/)
- [getUserMedia](https://developer.mozilla.org/en-US/docs/WebRTC/navigator.getUserMedia)
- [canvas](https://developer.mozilla.org/en-US/docs/HTML/Canvas)
- [video](https://developer.mozilla.org/en-US/docs/HTML/Element/video)
The code is licensed under the MIT License. @see LICENSE file
[angularjs]:http://angularjs.org