ack-angular-webcam

ack-angular-webcam

A cross-browser angular2 component, it will use the browser's native getUserMedia() implementation, otherwise an optional Flash fallback is available.

Demo Page

Table of Contents

• Screenshot
• Notes
• Getting Started
  • Installation
  • Importing
  • Example Usage
• Options
• Flash Fallback
• Example and Tests
• Credits
• Spec References

Screenshot

Notes

This component is based on MediaDevices and getUserMedia.js Polyfill.

Please, check original repository for clear understanding

Getting Started

Installation

npm install ack-angular-webcam --save-dev

Importing

Use webcam as a pure angular2 component

• Add component into your module

import { WebCamComponent } from 'ack-angular-webcam';

@NgModule({
  imports: [
    BrowserModule
  ],
  declarations: [
    AppComponent,
    WebCamComponent
  ],
  bootstrap: [ AppComponent ]
})
class AppModule {
}
export default AppModule;

Example Usage

app.component.ts

import { Component } from '@angular/core';
import { Http, Request } from '@angular/http';

const template = `
<ack-webcam [(ref)]="webcam" [options]="options" (onSuccess)="onCamSuccess($event)" (onError)="onCamError($event)"></ack-webcam>
<button (click)="genBase64()"> generate base64 </button>
<button (click)="genPostData()"> generate post data </button>
`

@Component({
  selector:'app-component',
  template:template
}) export class AppComponent{
  public webcam//will be populated by ack-webcam [(ref)]
  public base64

  constructor(public http:Http){}

  genBase64(){
    this.webcam.getBase64()
    .then( base=>this.base64=base)
    .catch( e=>console.error(e) )
  }

  //get HTML5 FormData object and pretend to post to server
  genPostData(){
    this.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(){}
}

Options

{
  audio: boolean,
  video: boolean,
  width: number,
  height: number,
  fallbackMode: 'callback',
  fallbackSrc: 'jscam_canvas_only.swf',
  fallbackQuality: 85,
  cameraType: 'front' || 'back'
};

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

Credits

• pre-fork package credits
• Fork from : Artur Basak
• Forked by : Acker Apple

Spec References

• MediaDevices
• getUserMedia()
• WebRTC 1.0