@blinkmobile/angular-camera

Angular 1 Camera

An Angular 1 wrapper around https://github.com/blinkmobile/camera

Installation

npm i @blinkmobile/angular-camera --save

Requirements

Angular 1.5+ (tested on 1.6+)

If you are building for a Cordova project be sure to install the Cordova Camera plugin as well.

cordova plugin add cordova-plugin-camera --save

WebRTC projects require the getUserMedia Shim to be loaded.

Usage

First, you need to add the module to your angular 1.x project:

angular.module('my-module', ['bmCamera'])

and in your markup:

<bm-camera ng-model="myStillImage"></bm-camera>

Advanced Usage

This component supports transclusion, easily allowing you to add your own buttons for image manipulation

<bm-camera ng-model="myStillImage" width="320" height="240" on-camera-error="myErrorHandler(err)">
  <button type="button" ng-click="rotate(-90, myStillImage)">Rotate Left</button>
  <button type="button" ng-click="rotate(90, myStillImage)">Rotate Right</button>
</bm-camera>

Image Display

The captured image is stored in the ng-model, and displayed by a HTML <img class="bm-camera__image" /> element.

Configuration Options

Various options can be set via element attributes. See the [example/webrtc](webrtc example) for details on how to use the options.

Attributes

width

height

Default: 640x480 (4:3 ratio)

Width and Height control the size of the image captured from the camera. It is important to note that not all Webcams and cameras support the same sizes. More often than not, the default size will suffice.

thumbWidth

thumbHeight

Default 128x96 (4:3 ratio)

The size to display the thumbnail of the image camptured by the camera.

showDeviceSelect

If truthy, a select box with the available devices will be displayed, allowing the user to select a device.

Callbacks

onCameraOpen(videoEl)

Arguments: videoEl (HTMLVideoElement)

Called once the camera has been opened and passed the HTML video element used to display the camera feed. This is useful for detecting the actual video dimensions

onCameraError(err)

Arguments: err Error

Called if there was an error in opening the camera. Usually this would be if the user has not granted access to the camera or if you have specified a size that the webcam does not support

Styling

By default we do not apply any styling to the component. We use the BEM naming syntax for our class selectors and these are outlined in the the CSS Documentation

Changelog

1.1.4

Fixed

• build files not built for [RELEASE] 1.1.3