Angular2 webcam component. Based on MediaDevices and getUserMedia.js
npm install ack-angular-webcamgetUserMedia() implementation, otherwise an optional Flash fallback is available. Demo Page Here



- Screenshot
- Notes
- ack-webcam Component
- Getting Started
- Installation
- Importing
- Example Usage
- Bindings
- Flash Fallback
- Example and Tests
- Locally-Test
- ack-media-devices Directive
- WoRk On ThIs PaCkAgE
- If You Like ack-webpack
- Credits
- Spec References
This component is based on MediaDevices and getUserMedia.js Polyfill.
Please, check original repository for clear understanding
bash
npm install ack-angular-webcam --save-dev
`$3
`javascript
import { WebCamModule } from 'ack-angular-webcam';@NgModule({
imports: [
BrowserModule,
WebCamModule
],
declarations: [
AppComponent
],
bootstrap: [ AppComponent ]
})
class AppModule {
}
export default AppModule;
`$3
app.component.ts
`javascript
import { Component } from '@angular/core';
import { Http, Request } from '@angular/http';//imported here just for type checking. Optional
import { WebCamComponent } from 'ack-angular-webcam';
const template =
@Component({
selector:'app-component',
template:template
}) export class AppComponent{
base64
constructor(public http:Http){}
genBase64( webcam:WebCamComponent ){
webcam.getBase64()
.then( base=>this.base64=base)
.catch( e=>console.error(e) )
}
//get HTML5 FormData object and pretend to post to server
genPostData( webcam:WebCamComponent ){
webcam.captureAsFormData({fileName:'file.jpg'})
.then( formData=>this.postFormData(formData) )
.catch( e=>console.error(e) )
}
//a pretend process that would post the webcam photo taken
postFormData(formData){
const config = {
method:"post",
url:"http://www.aviorsciences.com/",
body: formData
}
const request = new Request(config)
return this.http.request( request )
}
onCamError(err){}
onCamSuccess(){}
}
`Bindings
ack-angular-webcam inputs and outputs`typescript
[videoDevice] : MediaDeviceInfo
[videoDeviceId] : string
[audioDeviceId] : string
[mime] : string = 'image/jpeg'
[useParentWidthHeight] : boolean = false
[facingMode] : "user"|"environment"|"left"|"right"|string
[reflect]:boolean //mirror camera image(success) = new EventEmitter()
(catch) : EventEmitter = new EventEmitter()
[(error)] : Error
[options]:{
video : boolean | MediaTrackConstraints
audio : boolean
width : number
height : number
fallback : boolean
fallbackSrc: string
fallbackMode: string
fallbackQuality: number
}
`> Binding Resource Links
>> - MediaDeviceInfo
>> - MediaTrackConstraints
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
`$3
Type the following commands in a command prompt terminalStep 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`html
[(array)]="devices"
[(error)]="deviceListingError"
>
`Bindings
`typescript
[(array)]:MediaDeviceInfo[] = []
[(error)]:Error
[(videoInputs)]:MediaDeviceInfo[]
[(audioInputs)]:MediaDeviceInfo[]
[(audioOutputs)]:MediaDeviceInfo[](catch):EventEmitter = new EventEmitter()
``> Source files are on not the default github branch