Skip to content

Repository files navigation

Angular Camera Directive

An Angular directive for easily taking pictures from your webcam.

ngCamera in action

Getting started

  1. Install via Bower using bower install angular-camera
  2. Load the omr.directives module in your application: angular.module('app', ['omr.directives']);

Using ngCamera

<ng-cameratype="photo"
enabled="true"
width="640"
height="480"
countdown="3"
ng-model="media"
overlay-src="http://example.com/photo-frame.png"
capture="callback(media)"
capture-message="Go!"></ng-camera>

Options

  • typestring Type of media the capture (photo, video, gif). Photo is currently the only one supported
  • enabledboolean Enables or disables the stream by turning on/off webcam access
  • widthinteger Width in pixels for the video feed
  • heightinteger Height in pixels for the video feed
  • countdowninteger Countdown time in seconds. Zero is replaced with capture-message text.
  • ng-modelobject Scope variable to data-bind resulting Base64-encoded image
  • overlay-srcstring Optional. Reference to image frame to overlay onto media. Automatically resizes to fit canvas.
  • capturefunction Callback for "Take Picture" button for use in parent scope. Passes Base64-encoded output as parameter
  • capture-messagestring Optional. Text to show during countdown instead of "0"

Built by Zach Dunn from work on the Robin Platform

About

Angular directive for easy webcam capture

Resources

Stars

62 stars

Watchers

7 watching

Forks

Releases

Packages

Used by

Contributors

Languages