ack-angular-webcam
A cross-browser Angular component, it will use the browser's native getUserMedia()
implementation, otherwise an optional Flash fallback is available. Demo Page Here
BEWARE
- HTTPS or localhost required
- Host must be localhost or an https connection
- SAFARI seems to always always always require an https connection (no localhost)
- Internet Explorer
- Internet Explorer is not at all supported. Sorry not sorry
- Internet Edge is fully supported
Table of Contents
- Screenshot
- Notes
- ack-webcam Component
- ack-media-devices Directive
- WoRk On ThIs PaCkAgE
- If You Like ack-webpack
- Credits
- Spec References
Screenshot
Notes
This component is based on MediaDevices and getUserMedia.js Polyfill.
Please, check original repository for clear understanding
ack-webcam Component
Getting Started
Installation
npm install ack-angular-webcam --save-dev
Importing
; @ ;
Example Usage
app.component.ts
;; //imported here just for type checking. Optional; const template = `<ack-webcam #webcam [options] = "options" (success) = "onCamSuccess($event)" (catch) = "onCamError($event)"></ack-webcam><button (click)="genBase64(webcam)"> generate base64 </button><button (click)="genPostData(webcam)"> generate post data </button>` @ base64 {} { webcam } //get HTML5 FormData object and pretend to post to server { webcam } //a pretend process that would post the webcam photo taken { const config = method:"post" url:"http://www.aviorsciences.com/" body: formData const request = config return thishttp } {} {}
Bindings
ack-angular-webcam inputs and outputs
: MediaDeviceInfo : string : string : string = 'image/jpeg' : boolean = false : "user"|"environment"|"left"|"right"|string:boolean //mirror camera image success = new EventEmittercatch : EventEmitter<Error> = new EventEmitter : Error :
Binding Resource Links
Tested for tablet (Android 4.4.2 GT-N5110) and phone (Android 4.1.2 GT-I8268)
Flash Fallback
Quite Simple: You must indicate the URL of the swf fallback file named jscam_canvas_only.swf
This file is included and located at ack-angular-webcam/jscam_canvas_only.swf
Example and Tests
You can check example using following npm commands:
npm run watch
Locally Test
Type the following commands in a command prompt terminal
Step 1 of 4
git clone https://github.com/ackerapple/ack-angular-webcam -b master
Step 2 of 4
cd ack-angular-webcam
Step 3 of 4
npm install
Step 4 of 4
npm run watch
After step 4, a web browser should auto open a demo page and any code changes you perform to ack-angular-webcam will cause an auto-refresh of browser
ack-media-devices Directive
Get listing of users media devices
Bindings
:MediaDeviceInfo = :Error:MediaDeviceInfo:MediaDeviceInfo:MediaDeviceInfo catch:EventEmitter<Error> = new EventEmitter
WoRk On ThIs PaCkAgE
Nobodies perfect
Source files are on not the default github branch
Process to pull request
- Make changes in master branch
- Change package version number based on impact of change 0.0.0
- npm run build
If You Like ack-webpack
You might also want to give these packages a try
Credits
- pre-fork package credits
- Fork from : Artur Basak
- Forked by : Acker Apple