Angular 1 Camera
An Angular 1 wrapper around https://github.com/blinkmobile/camera
npm i @blinkmobile/angular-camera --save
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.
First, you need to add the module to your angular 1.x project:
and in your markup:
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>
The captured image is stored in the
ng-model, and displayed by a HTML
<img class="bm-camera__image" /> element.
Various options can be set via element attributes. See the example/webrtc(webrtc example) for details on how to use the options.
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.
Default 128x96 (4:3 ratio)
The size to display the thumbnail of the image camptured by the camera.
If truthy, a select box with the available devices will be displayed, allowing the user to select a device.
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
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