ngWebcam is an AngularJS directive for capturing images from your computer's camera, and delivering then to you as JPEG or PNG Data URIs. The images can then be displayed in your web page, render into a canvas or submited to your server. ngWebcam uses WebcamJS to provide the core functionality.
ngWebcam suports the same browsers supported by WebcamJS.
To see live exemple, go to the sample page
Using Bower
bower install ng-webcamngWebcam uses WebcamJS to work properly so you need to add the script in your main file, don't forget to load the directive file:
<script src"/path/to/webcam.js"></script>
<script src"/path/to/ng-webcam.js"></script>Simply add the module as dependency to your main application module likes this:
angular.module("app", ["ng-webcam"]);<ng-webcam
config="vm.config"
on-error="vm.onError(err)"
on-load="vm.onLoad()"
on-live="vm.onLive()"
on-capture-progress="vm.onCaptureProgress(src, progress)"
on-capture-complete="vm.onCaptureComplete(src)">
</ng-webcam>ng-webcam comes with lots of options to simplify tour development:
on-errorfunction Callback function for error. Fires when the WebcamJS library erro occurs (your callback function is passed an error string)on-capture-completefunction Callback function for capture complete action. Fires when the capture completes (your callback function is passed an array string (data_uri) insrcparameter)on-loadfunction Callback function for load action camera. Fires when the WebcamJS library finisheds loadingon-livefunction Callback function for live action camera. Fires when the user's camera goes live - this will only happen after the user allows access to their cameraon-capture-progressfunction Callback function for each capturing image with progress. Fires repeatedly while an capturing progress (your callback function is passed an string (data_uri) insrcparameter and an number (progress) inprogressparameter)
configobject Config options for init params in WebcamJS e directive | optionalviewerWidthnumber Width of live camera viewer in pixels| default to actual size of the DOM elementautoviewerHeightnumber Height of live camera viewer in pixels| default to actual size of the DOM elementautooutputWidthnumber Width of captured snapshot image in pixels | default 320outputHeightnumber Height of captured snapshot image in pixels | default 240delaynumber Number of seconds to wait and display before getting snapshot | default 0shotsnumber Number of shots captured images | default 1shutterUrlstring Shutter sound's url to play when taking snapshot | optionalflahFallbackUrlstring Url of the Adobe Flash player to enable the fallback and crossbrowser modes, default based onnavigator.getUserMediacountdownnumber Number of seconds to wait and display camera frame | optional
ngWebcam_captureevent Notifies when it should be carried out to capture the camerangWebcam_onevent Notifies when the camera must be onngWebcam_offevent Notifies when the camera should be turned off
A working example is available in gh-pages branch. Make sure to install bower and node dependencies, after checkout
branch.
npm install && bower installThen start the node server, it will ne accessible on http://0.0.0.0:3000
node server.jsThe MIT License (MIT)
Copyright (c) 2015 Weber Amaral
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARR
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent