├── .gitignore ├── Gruntfile.js ├── LICENSE ├── README.md ├── bower.json ├── dist ├── angular-camera.js └── angular-camera.min.js ├── package.json └── src └── directives └── angular-camera.coffee /.gitignore: -------------------------------------------------------------------------------- 1 | *.js 2 | !Gruntfile.js 3 | !dist/*.js 4 | node_modules/ 5 | .idea -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function(grunt) { 4 | // load all grunt tasks 5 | require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks); 6 | grunt.initConfig({ 7 | clean: { 8 | dist: { 9 | files: [{ 10 | dot: true, 11 | src: ['.tmp', 'dist/*', '!dist/.git*'] 12 | }] 13 | } 14 | }, 15 | coffee: { 16 | dev: { 17 | options: { 18 | sourceMap: false 19 | }, 20 | files: [{ 21 | expand: true, 22 | cwd: 'src/directives', 23 | src: '{,*/}*.coffee', 24 | dest: 'src/directives', 25 | ext: '.js' 26 | }] 27 | } 28 | }, 29 | concat: { 30 | src: { 31 | src: ['src/directives/angular-camera.js'], 32 | dest: 'dist/angular-camera.js' 33 | } 34 | }, 35 | ngmin: { 36 | src: { 37 | src: '<%= concat.src.src %>', 38 | dest: '<%= concat.src.dest %>' 39 | } 40 | }, 41 | uglify: { 42 | src: { 43 | files: { 44 | 'dist/angular-camera.min.js': '<%= concat.src.dest %>' 45 | } 46 | } 47 | } 48 | }); 49 | 50 | grunt.registerTask('build', ['dev', 'clean:dist', 'concat', 'ngmin', 'uglify']); 51 | grunt.registerTask('dev', ['coffee:dev']); 52 | grunt.registerTask('default', ['build']); 53 | }; 54 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | GNU GENERAL PUBLIC LICENSE 2 | Version 2, June 1991 3 | 4 | Copyright (C) 1989, 1991 Free Software Foundation, Inc., 5 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA 6 | Everyone is permitted to copy and distribute verbatim copies 7 | of this license document, but changing it is not allowed. 8 | 9 | Preamble 10 | 11 | The licenses for most software are designed to take away your 12 | freedom to share and change it. By contrast, the GNU General Public 13 | License is intended to guarantee your freedom to share and change free 14 | software--to make sure the software is free for all its users. This 15 | General Public License applies to most of the Free Software 16 | Foundation's software and to any other program whose authors commit to 17 | using it. (Some other Free Software Foundation software is covered by 18 | the GNU Lesser General Public License instead.) You can apply it to 19 | your programs, too. 20 | 21 | When we speak of free software, we are referring to freedom, not 22 | price. Our General Public Licenses are designed to make sure that you 23 | have the freedom to distribute copies of free software (and charge for 24 | this service if you wish), that you receive source code or can get it 25 | if you want it, that you can change the software or use pieces of it 26 | in new free programs; and that you know you can do these things. 27 | 28 | To protect your rights, we need to make restrictions that forbid 29 | anyone to deny you these rights or to ask you to surrender the rights. 30 | These restrictions translate to certain responsibilities for you if you 31 | distribute copies of the software, or if you modify it. 32 | 33 | For example, if you distribute copies of such a program, whether 34 | gratis or for a fee, you must give the recipients all the rights that 35 | you have. You must make sure that they, too, receive or can get the 36 | source code. And you must show them these terms so they know their 37 | rights. 38 | 39 | We protect your rights with two steps: (1) copyright the software, and 40 | (2) offer you this license which gives you legal permission to copy, 41 | distribute and/or modify the software. 42 | 43 | Also, for each author's protection and ours, we want to make certain 44 | that everyone understands that there is no warranty for this free 45 | software. If the software is modified by someone else and passed on, we 46 | want its recipients to know that what they have is not the original, so 47 | that any problems introduced by others will not reflect on the original 48 | authors' reputations. 49 | 50 | Finally, any free program is threatened constantly by software 51 | patents. We wish to avoid the danger that redistributors of a free 52 | program will individually obtain patent licenses, in effect making the 53 | program proprietary. To prevent this, we have made it clear that any 54 | patent must be licensed for everyone's free use or not licensed at all. 55 | 56 | The precise terms and conditions for copying, distribution and 57 | modification follow. 58 | 59 | GNU GENERAL PUBLIC LICENSE 60 | TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 61 | 62 | 0. This License applies to any program or other work which contains 63 | a notice placed by the copyright holder saying it may be distributed 64 | under the terms of this General Public License. The "Program", below, 65 | refers to any such program or work, and a "work based on the Program" 66 | means either the Program or any derivative work under copyright law: 67 | that is to say, a work containing the Program or a portion of it, 68 | either verbatim or with modifications and/or translated into another 69 | language. (Hereinafter, translation is included without limitation in 70 | the term "modification".) Each licensee is addressed as "you". 71 | 72 | Activities other than copying, distribution and modification are not 73 | covered by this License; they are outside its scope. The act of 74 | running the Program is not restricted, and the output from the Program 75 | is covered only if its contents constitute a work based on the 76 | Program (independent of having been made by running the Program). 77 | Whether that is true depends on what the Program does. 78 | 79 | 1. You may copy and distribute verbatim copies of the Program's 80 | source code as you receive it, in any medium, provided that you 81 | conspicuously and appropriately publish on each copy an appropriate 82 | copyright notice and disclaimer of warranty; keep intact all the 83 | notices that refer to this License and to the absence of any warranty; 84 | and give any other recipients of the Program a copy of this License 85 | along with the Program. 86 | 87 | You may charge a fee for the physical act of transferring a copy, and 88 | you may at your option offer warranty protection in exchange for a fee. 89 | 90 | 2. You may modify your copy or copies of the Program or any portion 91 | of it, thus forming a work based on the Program, and copy and 92 | distribute such modifications or work under the terms of Section 1 93 | above, provided that you also meet all of these conditions: 94 | 95 | a) You must cause the modified files to carry prominent notices 96 | stating that you changed the files and the date of any change. 97 | 98 | b) You must cause any work that you distribute or publish, that in 99 | whole or in part contains or is derived from the Program or any 100 | part thereof, to be licensed as a whole at no charge to all third 101 | parties under the terms of this License. 102 | 103 | c) If the modified program normally reads commands interactively 104 | when run, you must cause it, when started running for such 105 | interactive use in the most ordinary way, to print or display an 106 | announcement including an appropriate copyright notice and a 107 | notice that there is no warranty (or else, saying that you provide 108 | a warranty) and that users may redistribute the program under 109 | these conditions, and telling the user how to view a copy of this 110 | License. (Exception: if the Program itself is interactive but 111 | does not normally print such an announcement, your work based on 112 | the Program is not required to print an announcement.) 113 | 114 | These requirements apply to the modified work as a whole. If 115 | identifiable sections of that work are not derived from the Program, 116 | and can be reasonably considered independent and separate works in 117 | themselves, then this License, and its terms, do not apply to those 118 | sections when you distribute them as separate works. But when you 119 | distribute the same sections as part of a whole which is a work based 120 | on the Program, the distribution of the whole must be on the terms of 121 | this License, whose permissions for other licensees extend to the 122 | entire whole, and thus to each and every part regardless of who wrote it. 123 | 124 | Thus, it is not the intent of this section to claim rights or contest 125 | your rights to work written entirely by you; rather, the intent is to 126 | exercise the right to control the distribution of derivative or 127 | collective works based on the Program. 128 | 129 | In addition, mere aggregation of another work not based on the Program 130 | with the Program (or with a work based on the Program) on a volume of 131 | a storage or distribution medium does not bring the other work under 132 | the scope of this License. 133 | 134 | 3. You may copy and distribute the Program (or a work based on it, 135 | under Section 2) in object code or executable form under the terms of 136 | Sections 1 and 2 above provided that you also do one of the following: 137 | 138 | a) Accompany it with the complete corresponding machine-readable 139 | source code, which must be distributed under the terms of Sections 140 | 1 and 2 above on a medium customarily used for software interchange; or, 141 | 142 | b) Accompany it with a written offer, valid for at least three 143 | years, to give any third party, for a charge no more than your 144 | cost of physically performing source distribution, a complete 145 | machine-readable copy of the corresponding source code, to be 146 | distributed under the terms of Sections 1 and 2 above on a medium 147 | customarily used for software interchange; or, 148 | 149 | c) Accompany it with the information you received as to the offer 150 | to distribute corresponding source code. (This alternative is 151 | allowed only for noncommercial distribution and only if you 152 | received the program in object code or executable form with such 153 | an offer, in accord with Subsection b above.) 154 | 155 | The source code for a work means the preferred form of the work for 156 | making modifications to it. For an executable work, complete source 157 | code means all the source code for all modules it contains, plus any 158 | associated interface definition files, plus the scripts used to 159 | control compilation and installation of the executable. However, as a 160 | special exception, the source code distributed need not include 161 | anything that is normally distributed (in either source or binary 162 | form) with the major components (compiler, kernel, and so on) of the 163 | operating system on which the executable runs, unless that component 164 | itself accompanies the executable. 165 | 166 | If distribution of executable or object code is made by offering 167 | access to copy from a designated place, then offering equivalent 168 | access to copy the source code from the same place counts as 169 | distribution of the source code, even though third parties are not 170 | compelled to copy the source along with the object code. 171 | 172 | 4. You may not copy, modify, sublicense, or distribute the Program 173 | except as expressly provided under this License. Any attempt 174 | otherwise to copy, modify, sublicense or distribute the Program is 175 | void, and will automatically terminate your rights under this License. 176 | However, parties who have received copies, or rights, from you under 177 | this License will not have their licenses terminated so long as such 178 | parties remain in full compliance. 179 | 180 | 5. You are not required to accept this License, since you have not 181 | signed it. However, nothing else grants you permission to modify or 182 | distribute the Program or its derivative works. These actions are 183 | prohibited by law if you do not accept this License. Therefore, by 184 | modifying or distributing the Program (or any work based on the 185 | Program), you indicate your acceptance of this License to do so, and 186 | all its terms and conditions for copying, distributing or modifying 187 | the Program or works based on it. 188 | 189 | 6. Each time you redistribute the Program (or any work based on the 190 | Program), the recipient automatically receives a license from the 191 | original licensor to copy, distribute or modify the Program subject to 192 | these terms and conditions. You may not impose any further 193 | restrictions on the recipients' exercise of the rights granted herein. 194 | You are not responsible for enforcing compliance by third parties to 195 | this License. 196 | 197 | 7. If, as a consequence of a court judgment or allegation of patent 198 | infringement or for any other reason (not limited to patent issues), 199 | conditions are imposed on you (whether by court order, agreement or 200 | otherwise) that contradict the conditions of this License, they do not 201 | excuse you from the conditions of this License. If you cannot 202 | distribute so as to satisfy simultaneously your obligations under this 203 | License and any other pertinent obligations, then as a consequence you 204 | may not distribute the Program at all. For example, if a patent 205 | license would not permit royalty-free redistribution of the Program by 206 | all those who receive copies directly or indirectly through you, then 207 | the only way you could satisfy both it and this License would be to 208 | refrain entirely from distribution of the Program. 209 | 210 | If any portion of this section is held invalid or unenforceable under 211 | any particular circumstance, the balance of the section is intended to 212 | apply and the section as a whole is intended to apply in other 213 | circumstances. 214 | 215 | It is not the purpose of this section to induce you to infringe any 216 | patents or other property right claims or to contest validity of any 217 | such claims; this section has the sole purpose of protecting the 218 | integrity of the free software distribution system, which is 219 | implemented by public license practices. Many people have made 220 | generous contributions to the wide range of software distributed 221 | through that system in reliance on consistent application of that 222 | system; it is up to the author/donor to decide if he or she is willing 223 | to distribute software through any other system and a licensee cannot 224 | impose that choice. 225 | 226 | This section is intended to make thoroughly clear what is believed to 227 | be a consequence of the rest of this License. 228 | 229 | 8. If the distribution and/or use of the Program is restricted in 230 | certain countries either by patents or by copyrighted interfaces, the 231 | original copyright holder who places the Program under this License 232 | may add an explicit geographical distribution limitation excluding 233 | those countries, so that distribution is permitted only in or among 234 | countries not thus excluded. In such case, this License incorporates 235 | the limitation as if written in the body of this License. 236 | 237 | 9. The Free Software Foundation may publish revised and/or new versions 238 | of the General Public License from time to time. Such new versions will 239 | be similar in spirit to the present version, but may differ in detail to 240 | address new problems or concerns. 241 | 242 | Each version is given a distinguishing version number. If the Program 243 | specifies a version number of this License which applies to it and "any 244 | later version", you have the option of following the terms and conditions 245 | either of that version or of any later version published by the Free 246 | Software Foundation. If the Program does not specify a version number of 247 | this License, you may choose any version ever published by the Free Software 248 | Foundation. 249 | 250 | 10. If you wish to incorporate parts of the Program into other free 251 | programs whose distribution conditions are different, write to the author 252 | to ask for permission. For software which is copyrighted by the Free 253 | Software Foundation, write to the Free Software Foundation; we sometimes 254 | make exceptions for this. Our decision will be guided by the two goals 255 | of preserving the free status of all derivatives of our free software and 256 | of promoting the sharing and reuse of software generally. 257 | 258 | NO WARRANTY 259 | 260 | 11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY 261 | FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN 262 | OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES 263 | PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED 264 | OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF 265 | MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS 266 | TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE 267 | PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, 268 | REPAIR OR CORRECTION. 269 | 270 | 12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING 271 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR 272 | REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, 273 | INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING 274 | OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED 275 | TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY 276 | YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER 277 | PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE 278 | POSSIBILITY OF SUCH DAMAGES. 279 | 280 | END OF TERMS AND CONDITIONS 281 | 282 | How to Apply These Terms to Your New Programs 283 | 284 | If you develop a new program, and you want it to be of the greatest 285 | possible use to the public, the best way to achieve this is to make it 286 | free software which everyone can redistribute and change under these terms. 287 | 288 | To do so, attach the following notices to the program. It is safest 289 | to attach them to the start of each source file to most effectively 290 | convey the exclusion of warranty; and each file should have at least 291 | the "copyright" line and a pointer to where the full notice is found. 292 | 293 | Angular camera directive 294 | Copyright (C) 2013 One Mighty Roar 295 | 296 | This program is free software; you can redistribute it and/or modify 297 | it under the terms of the GNU General Public License as published by 298 | the Free Software Foundation; either version 2 of the License, or 299 | (at your option) any later version. 300 | 301 | This program is distributed in the hope that it will be useful, 302 | but WITHOUT ANY WARRANTY; without even the implied warranty of 303 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 304 | GNU General Public License for more details. 305 | 306 | You should have received a copy of the GNU General Public License along 307 | with this program; if not, write to the Free Software Foundation, Inc., 308 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA. 309 | 310 | Also add information on how to contact you by electronic and paper mail. 311 | 312 | If the program is interactive, make it output a short notice like this 313 | when it starts in an interactive mode: 314 | 315 | Gnomovision version 69, Copyright (C) year name of author 316 | Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'. 317 | This is free software, and you are welcome to redistribute it 318 | under certain conditions; type `show c' for details. 319 | 320 | The hypothetical commands `show w' and `show c' should show the appropriate 321 | parts of the General Public License. Of course, the commands you use may 322 | be called something other than `show w' and `show c'; they could even be 323 | mouse-clicks or menu items--whatever suits your program. 324 | 325 | You should also get your employer (if you work as a programmer) or your 326 | school, if any, to sign a "copyright disclaimer" for the program, if 327 | necessary. Here is a sample; alter the names: 328 | 329 | Yoyodyne, Inc., hereby disclaims all copyright interest in the program 330 | `Gnomovision' (which makes passes at compilers) written by James Hacker. 331 | 332 | {signature of Ty Coon}, 1 April 1989 333 | Ty Coon, President of Vice 334 | 335 | This General Public License does not permit incorporating your program into 336 | proprietary programs. If your program is a subroutine library, you may 337 | consider it more useful to permit linking proprietary applications with the 338 | library. If this is what you want to do, use the GNU Lesser General 339 | Public License instead of this License. 340 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Angular Camera Directive 2 | 3 | An Angular directive for easily taking pictures from your webcam. 4 | 5 | ![ngCamera in action](http://onemightyroar.s3.amazonaws.com/github/dalek-camera-example.jpeg) 6 | 7 | ## Getting started 8 | 9 | 1. Install via Bower using `bower install angular-camera` 10 | 2. Load the `omr.directives` module in your application: `angular.module('app', ['omr.directives']);` 11 | 12 | ## Using ngCamera 13 | 14 | ```html 15 | 25 | ``` 26 | 27 | ### Options 28 | * `type` _string_ Type of media the capture (photo, video, gif). Photo is currently the only one supported 29 | * `enabled` _boolean_ Enables or disables the stream by turning on/off webcam access 30 | * `width` _integer_ Width in pixels for the video feed 31 | * `height` _integer_ Height in pixels for the video feed 32 | * `countdown` _integer_ Countdown time in seconds. Zero is replaced with `capture-message` text. 33 | * `ng-model` _object_ Scope variable to data-bind resulting Base64-encoded image 34 | * `overlay-src` _string_ Optional. Reference to image frame to overlay onto media. Automatically resizes to fit canvas. 35 | * `capture` _function_ Callback for "Take Picture" button for use in parent scope. Passes Base64-encoded output as parameter 36 | * `capture-message` _string_ Optional. Text to show during countdown instead of "0" 37 | 38 | _Built by [Zach Dunn](https://github.com/zachdunn) from work on the [Robin Platform](http://getrobin.com)_ 39 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-camera", 3 | "version": "0.1.3", 4 | "homepage": "https://github.com/onemightyroar/angular-camera", 5 | "authors": [ 6 | "Zach Dunn " 7 | ], 8 | "description": "A camera directive for Angular", 9 | "main": "dist/angular-camera.js", 10 | "keywords": [ 11 | "webcam", 12 | "camera", 13 | "photo", 14 | "video" 15 | ], 16 | "dependencies": { 17 | "angular": "~1.2.0" 18 | }, 19 | "license": "GNU" 20 | } 21 | -------------------------------------------------------------------------------- /dist/angular-camera.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | angular.module('omr.directives', []).directive('ngCamera', [ 4 | '$timeout', 5 | '$sce', 6 | function ($timeout, $sce) { 7 | return { 8 | require: 'ngModel', 9 | template: '

Loading Camera...

Couldn\'t find a camera to use

{{countdownText}}

', 10 | replace: false, 11 | transclude: true, 12 | restrict: 'E', 13 | scope: { 14 | type: '@', 15 | media: '=ngModel', 16 | width: '@', 17 | height: '@', 18 | overlaySrc: '=', 19 | countdown: '@', 20 | captureCallback: '&capture', 21 | enabled: '=', 22 | captureMessage: '@' 23 | }, 24 | link: function (scope, element, attrs, ngModel) { 25 | scope.activeCountdown = false; 26 | navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; 27 | window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL; 28 | scope.$on('$destroy', function () { 29 | if (scope.stream && typeof scope.stream.stop === 'function') { 30 | scope.stream.stop(); 31 | } 32 | }); 33 | /** 34 | * @description Set mediastream source and notify camera 35 | */ 36 | scope.enableCamera = function () { 37 | return navigator.getUserMedia({ 38 | audio: false, 39 | video: true 40 | }, function (stream) { 41 | return scope.$apply(function () { 42 | scope.stream = stream; 43 | scope.isLoaded = true; 44 | return scope.videoStream = $sce.trustAsResourceUrl(window.URL.createObjectURL(stream)); 45 | }); 46 | }, function (error) { 47 | return scope.$apply(function () { 48 | scope.isLoaded = true; 49 | return scope.noCamera = true; 50 | }); 51 | }); 52 | }; 53 | /** 54 | * @description Disable mediastream source and notify camera 55 | */ 56 | scope.disableCamera = function () { 57 | return navigator.getUserMedia({ 58 | audio: false, 59 | video: true 60 | }, function (stream) { 61 | return scope.$apply(function () { 62 | return scope.videoStream = ''; 63 | }); 64 | }, function (error) { 65 | return scope.$apply(function () { 66 | scope.isLoaded = true; 67 | return scope.noCamera = true; 68 | }); 69 | }); 70 | }; 71 | /** 72 | * @description Capture current state of video stream as photo 73 | */ 74 | scope.takePicture = function () { 75 | var canvas, context, countdownTick, countdownTime; 76 | canvas = window.document.getElementById('ng-photo-canvas'); 77 | countdownTime = scope.countdown != null ? parseInt(scope.countdown) * 1000 : 0; 78 | if (canvas != null) { 79 | if (countdownTime > 0) { 80 | scope.activeCountdown = true; 81 | scope.hideUI = true; 82 | } 83 | context = canvas.getContext('2d'); 84 | if (scope.countdownTimer) { 85 | $timeout.cancel(scope.countdownTimer); 86 | } 87 | scope.countdownTimer = $timeout(function () { 88 | var cameraFeed; 89 | scope.activeCountdown = false; 90 | cameraFeed = window.document.getElementById('ng-camera-feed'); 91 | context.drawImage(cameraFeed, 0, 0, scope.width, scope.height); 92 | if (scope.overlaySrc != null) { 93 | scope.addFrame(context, scope.overlaySrc, function (image) { 94 | scope.$apply(function () { 95 | return scope.media = canvas.toDataURL('image/jpeg'); 96 | }); 97 | if (scope.captureCallback != null) { 98 | return scope.captureCallback(scope.media); 99 | } 100 | }); 101 | } else { 102 | scope.media = canvas.toDataURL('image/jpeg'); 103 | if (scope.captureCallback != null) { 104 | scope.captureCallback(scope.media); 105 | } 106 | } 107 | return scope.hideUI = false; 108 | }, countdownTime + 1000); 109 | scope.countdownText = parseInt(scope.countdown); 110 | countdownTick = setInterval(function () { 111 | return scope.$apply(function () { 112 | var nextTick; 113 | nextTick = parseInt(scope.countdownText) - 1; 114 | if (nextTick === 0) { 115 | scope.countdownText = scope.captureMessage != null ? scope.captureMessage : 'GO!'; 116 | return clearInterval(countdownTick); 117 | } else { 118 | return scope.countdownText = nextTick; 119 | } 120 | }); 121 | }, 1000); 122 | } else { 123 | } 124 | return false; 125 | }; 126 | /** 127 | * @description Add overlay frame to canvas render 128 | * @param {Object} context Reference to target canvas context 129 | */ 130 | scope.addFrame = function (context, url, callback) { 131 | var overlay; 132 | if (callback == null) { 133 | callback = false; 134 | } 135 | overlay = new Image(); 136 | overlay.onload = function () { 137 | context.drawImage(overlay, 0, 0, scope.width, scope.height); 138 | if (callback) { 139 | return callback(context); 140 | } 141 | }; 142 | overlay.crossOrigin = ''; 143 | return overlay.src = url; 144 | }; 145 | /** 146 | * @description Keeps a packaged version of media ready 147 | * @param {Base64} newVal Prefix-stripped Base64 of of canvas image 148 | */ 149 | scope.$watch('media', function (newVal) { 150 | if (newVal != null) { 151 | return scope.packagedMedia = scope.media.replace(/^data:image\/\w+;base64,/, ''); 152 | } 153 | }); 154 | /** 155 | * @description Preloader for overlay image 156 | */ 157 | scope.$watch('overlaySrc', function (newVal, oldVal) { 158 | var preloader; 159 | if (scope.overlaySrc != null) { 160 | scope.isLoaded = false; 161 | preloader = new Image(); 162 | preloader.crossOrigin = ''; 163 | preloader.src = newVal; 164 | return preloader.onload = function () { 165 | return scope.$apply(function () { 166 | return scope.isLoaded = true; 167 | }); 168 | }; 169 | } else { 170 | return scope.isLoaded = true; 171 | } 172 | }); 173 | /** 174 | * @description Watch for when to turn on/off camera feed 175 | */ 176 | scope.$watch('enabled', function (newVal, oldVal) { 177 | if (newVal) { 178 | if (!oldVal) { 179 | return scope.enableCamera(); 180 | } 181 | } else { 182 | if (oldVal != null) { 183 | return scope.disableCamera(); 184 | } 185 | } 186 | }); 187 | /** 188 | * @description Check format type of camera. 189 | * @todo Future support for different media types (GIF, Video) 190 | */ 191 | return scope.$watch('type', function () { 192 | switch (scope.type) { 193 | case 'photo': 194 | if (scope.enabled) { 195 | return scope.enableCamera(); 196 | } 197 | break; 198 | default: 199 | if (scope.enabled) { 200 | return scope.enableCamera(); 201 | } 202 | } 203 | }); 204 | } 205 | }; 206 | } 207 | ]); 208 | }.call(this)); -------------------------------------------------------------------------------- /dist/angular-camera.min.js: -------------------------------------------------------------------------------- 1 | (function(){"use strict";angular.module("omr.directives",[]).directive("ngCamera",["$timeout","$sce",function(a,b){return{require:"ngModel",template:'

Loading Camera...

Couldn\'t find a camera to use

{{countdownText}}

',replace:!1,transclude:!0,restrict:"E",scope:{type:"@",media:"=ngModel",width:"@",height:"@",overlaySrc:"=",countdown:"@",captureCallback:"&capture",enabled:"=",captureMessage:"@"},link:function(c,d,e,f){return c.activeCountdown=!1,navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia,window.URL=window.URL||window.webkitURL||window.mozURL||window.msURL,c.$on("$destroy",function(){c.stream&&"function"==typeof c.stream.stop&&c.stream.stop()}),c.enableCamera=function(){return navigator.getUserMedia({audio:!1,video:!0},function(a){return c.$apply(function(){return c.stream=a,c.isLoaded=!0,c.videoStream=b.trustAsResourceUrl(window.URL.createObjectURL(a))})},function(a){return c.$apply(function(){return c.isLoaded=!0,c.noCamera=!0})})},c.disableCamera=function(){return navigator.getUserMedia({audio:!1,video:!0},function(a){return c.$apply(function(){return c.videoStream=""})},function(a){return c.$apply(function(){return c.isLoaded=!0,c.noCamera=!0})})},c.takePicture=function(){var b,d,e,f;return b=window.document.getElementById("ng-photo-canvas"),f=null!=c.countdown?1e3*parseInt(c.countdown):0,null!=b&&(f>0&&(c.activeCountdown=!0,c.hideUI=!0),d=b.getContext("2d"),c.countdownTimer&&a.cancel(c.countdownTimer),c.countdownTimer=a(function(){var a;return c.activeCountdown=!1,a=window.document.getElementById("ng-camera-feed"),d.drawImage(a,0,0,c.width,c.height),null!=c.overlaySrc?c.addFrame(d,c.overlaySrc,function(a){return c.$apply(function(){return c.media=b.toDataURL("image/jpeg")}),null!=c.captureCallback?c.captureCallback(c.media):void 0}):(c.media=b.toDataURL("image/jpeg"),null!=c.captureCallback&&c.captureCallback(c.media)),c.hideUI=!1},f+1e3),c.countdownText=parseInt(c.countdown),e=setInterval(function(){return c.$apply(function(){var a;return a=parseInt(c.countdownText)-1,0===a?(c.countdownText=null!=c.captureMessage?c.captureMessage:"GO!",clearInterval(e)):c.countdownText=a})},1e3)),!1},c.addFrame=function(a,b,d){var e;return null==d&&(d=!1),e=new Image,e.onload=function(){return a.drawImage(e,0,0,c.width,c.height),d?d(a):void 0},e.crossOrigin="",e.src=b},c.$watch("media",function(a){return null!=a?c.packagedMedia=c.media.replace(/^data:image\/\w+;base64,/,""):void 0}),c.$watch("overlaySrc",function(a,b){var d;return null!=c.overlaySrc?(c.isLoaded=!1,d=new Image,d.crossOrigin="",d.src=a,d.onload=function(){return c.$apply(function(){return c.isLoaded=!0})}):c.isLoaded=!0}),c.$watch("enabled",function(a,b){if(a){if(!b)return c.enableCamera()}else if(null!=b)return c.disableCamera()}),c.$watch("type",function(){switch(c.type){case"photo":if(c.enabled)return c.enableCamera();break;default:if(c.enabled)return c.enableCamera()}})}}}])}).call(this); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-camera", 3 | "version": "0.1.3", 4 | "dependencies": {}, 5 | "devDependencies": { 6 | "grunt": "~0.4.1", 7 | "grunt-cli": "~0.1.7", 8 | "grunt-contrib-copy": "~0.4.0", 9 | "grunt-contrib-concat": "~0.1.3", 10 | "grunt-contrib-coffee": "~0.6.4", 11 | "grunt-contrib-uglify": "~0.2.0", 12 | "grunt-contrib-compass": "~0.1.3", 13 | "grunt-contrib-jshint": "~0.3.0", 14 | "grunt-contrib-clean": "~0.4.0", 15 | "grunt-usemin": "~0.1.10", 16 | "grunt-rev": "~0.1.0", 17 | "grunt-open": "~0.2.0", 18 | "matchdep": "~0.1.1", 19 | "grunt-ngmin": "~0.0.2" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/directives/angular-camera.coffee: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | angular.module('omr.directives', []) 4 | .directive 'ngCamera', ($timeout, $sce) -> 5 | require: 'ngModel' 6 | template: '
7 |

Loading Camera...

8 |

Couldn\'t find a camera to use

9 |
10 |
11 |

{{countdownText}}

12 |
13 | 14 | 15 | 16 |
17 |
18 | 19 |
20 |
' 21 | replace: false 22 | transclude: true 23 | restrict: 'E' 24 | scope: 25 | type: '@' 26 | media: '=ngModel' 27 | width: '@' 28 | height: '@' 29 | overlaySrc: '=' 30 | countdown: '@' 31 | captureCallback: '&capture' 32 | enabled: '=' 33 | captureMessage: "@" 34 | link: (scope, element, attrs, ngModel) -> 35 | 36 | scope.activeCountdown = false 37 | 38 | # Remap common references 39 | navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia 40 | window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL 41 | scope.$on('$destroy', () -> 42 | if scope.stream and typeof scope.stream.stop == 'function' 43 | scope.stream.stop() 44 | return 45 | ) 46 | ###* 47 | * @description Set mediastream source and notify camera 48 | ### 49 | scope.enableCamera = -> 50 | navigator.getUserMedia 51 | audio: false 52 | video: true 53 | , (stream) -> 54 | scope.$apply -> 55 | scope.stream = stream 56 | scope.isLoaded = true 57 | video = window.document.getElementById('ng-camera-feed') 58 | video.srcObject = stream 59 | scope.videoStream = video.srcObject 60 | , (error) -> 61 | scope.$apply -> 62 | scope.isLoaded = true 63 | scope.noCamera = true 64 | 65 | ###* 66 | * @description Disable mediastream source and notify camera 67 | ### 68 | scope.disableCamera = -> 69 | navigator.getUserMedia 70 | audio: false 71 | video: true 72 | , (stream) -> 73 | scope.$apply -> 74 | scope.videoStream.getTracks().forEach (track) -> 75 | track.stop() 76 | return 77 | 78 | stream.getTracks().forEach (track) -> 79 | track.stop() 80 | return 81 | false 82 | , (error) -> 83 | scope.$apply -> 84 | scope.videoStream.getTracks().forEach (track) -> 85 | track.stop() 86 | return 87 | 88 | scope.isLoaded = true 89 | scope.noCamera = true 90 | 91 | ###* 92 | * @description Capture current state of video stream as photo 93 | ### 94 | scope.takePicture = -> 95 | canvas = window.document.getElementById('ng-photo-canvas') 96 | 97 | # Get countdown time in seconds from attribute 98 | countdownTime = if scope.countdown? then parseInt(scope.countdown) * 1000 else 0 99 | 100 | # Make sure there's a canvas to work with 101 | if canvas? 102 | 103 | # Hide UI if countdown occurs 104 | if countdownTime > 0 105 | scope.activeCountdown = true 106 | scope.hideUI = true 107 | 108 | context = canvas.getContext('2d') 109 | 110 | $timeout.cancel scope.countdownTimer if scope.countdownTimer 111 | 112 | # Start timer to photo shot 113 | scope.countdownTimer = $timeout -> 114 | scope.activeCountdown = false 115 | 116 | # Draw current video feed to canvas (photo source) 117 | cameraFeed = window.document.getElementById('ng-camera-feed') 118 | context.drawImage cameraFeed, 0, 0, scope.width, scope.height 119 | 120 | # Add overlay if present 121 | if scope.overlaySrc? 122 | scope.addFrame context, scope.overlaySrc, (image) -> 123 | # Wait for overlay image to load before making dataURL 124 | scope.$apply -> 125 | scope.media = canvas.toDataURL('image/jpeg') 126 | scope.captureCallback({media: scope.media}) if scope.captureCallback? 127 | else 128 | scope.media = canvas.toDataURL('image/jpeg') # Assign to ngModel 129 | scope.captureCallback({media: scope.media}) if scope.captureCallback? 130 | 131 | scope.hideUI = false 132 | , countdownTime + 1000 # Add extra second for final message 133 | 134 | scope.countdownText = parseInt(scope.countdown) 135 | 136 | # Countdown ticker until photo 137 | countdownTick = setInterval -> 138 | scope.$apply -> 139 | nextTick = parseInt(scope.countdownText) - 1 140 | if nextTick is 0 141 | # Replace zero with better copy 142 | scope.countdownText = if scope.captureMessage? then scope.captureMessage else 'GO!' 143 | clearInterval countdownTick # End countdown on last tick 144 | else 145 | scope.countdownText = nextTick 146 | , 1000 147 | else 148 | # We have no canvas to work with 149 | return false 150 | 151 | ###* 152 | * @description Add overlay frame to canvas render 153 | * @param {Object} context Reference to target canvas context 154 | ### 155 | scope.addFrame = (context, url, callback = false) -> 156 | # Load returned overlay image and draw onto photo canvas 157 | overlay = new Image() 158 | overlay.onload = -> 159 | context.drawImage overlay, 0, 0, scope.width, scope.height 160 | callback(context) if callback 161 | overlay.crossOrigin = '' 162 | overlay.src = url 163 | 164 | ###* 165 | * @description Keeps a packaged version of media ready 166 | * @param {Base64} newVal Prefix-stripped Base64 of of canvas image 167 | ### 168 | scope.$watch 'media', (newVal) -> 169 | # Strip the Base64 prefix 170 | scope.packagedMedia = scope.media.replace /^data:image\/\w+;base64,/, "" if newVal? 171 | 172 | ###* 173 | * @description Preloader for overlay image 174 | ### 175 | scope.$watch 'overlaySrc', (newVal, oldVal) -> 176 | # If an overlay was provided 177 | if scope.overlaySrc? 178 | # We're waiting on this to load 179 | scope.isLoaded = false 180 | preloader = new Image() 181 | preloader.crossOrigin = '' 182 | preloader.src = newVal 183 | preloader.onload = -> 184 | scope.$apply -> 185 | scope.isLoaded = true 186 | else 187 | # No frame. Skip it. 188 | scope.isLoaded = true 189 | 190 | ###* 191 | * @description Watch for when to turn on/off camera feed 192 | ### 193 | scope.$watch 'enabled', (newVal, oldVal) -> 194 | if newVal 195 | scope.enableCamera() if !oldVal # Turn on feed if actual change 196 | else 197 | scope.disableCamera() if oldVal? # Turn off feed if actual change 198 | 199 | ###* 200 | * @description Check format type of camera. 201 | * @todo Future support for different media types (GIF, Video) 202 | ### 203 | scope.$watch 'type', -> 204 | switch scope.type 205 | when 'photo' 206 | # Photo 207 | scope.enableCamera() if scope.enabled 208 | else 209 | # Defaulting to photo 210 | scope.enableCamera() if scope.enabled 211 | --------------------------------------------------------------------------------