Socket
Socket
Sign inDemoInstall

ack-angular-webcam

Package Overview
Dependencies
0
Maintainers
1
Versions
40
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

ack-angular-webcam


Version published
Maintainers
1
Created

Readme

Source

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

hire me npm version npm downloads Dependency Status

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

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

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

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

Example Usage

app.component.ts

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 = `
<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>
`

@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

[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<Error> = 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

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

<ack-media-devices
  [(array)]="devices"
  [(error)]="deviceListingError"
></ack-media-devices>

Bindings

[(array)]:MediaDeviceInfo[] = []
[(error)]:Error
[(videoInputs)]:MediaDeviceInfo[]
[(audioInputs)]:MediaDeviceInfo[]
[(audioOutputs)]: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

Spec References

Keywords

FAQs

Last updated on 10 Jun 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc