ackerapple/ack-angular-webcam

ack-angular-webcam's Issues

Chrome on Android 7.0: NotReadableError: Could not start source

Thanks for this very useful lib. I am running into an issue where on some devices (Android 7.0), I am unable to start the camera using Chrome with the error:

NotReadableError: Could not start source

The camera is not being used by any other device.

Any pointers on what could be the issue and how to resolve it?

New Safari not working

New Safari supports getUserMedia() now. The camera DOES seem to turn on. However, the video element is not displaying the camera result. Inspecting element, shows the video tag as missing and instead only a html comment exists

An error in the Safari console can be seen. Photo attached.

camera not working when app is hosted at different system

Hi,

I've my Angular app running at one system and access that app from other system and getting below error on that:

DOMException: Only secure origins are allowed

TypeError: Failed to execute 'getUserMedia' on 'MediaDevices': parameter 1 ('constraints') is not an object.

Error: Both configs failed. Neither object nor string works

Missing TypeScript File ?

Hi,
A general question, shouldn't there be a "webcam.component.ts" file, given that there is a "webcam.component.d.ts" declaration file it would seem that typescript is being used ?

"webcam.component.js" even looks like code that the typescript compiler would generate.

Observer disconnect truble

if using this lib problem in -> this.observer.disconnect()

ERROR TypeError: Cannot read property 'disconnect' of undefined
at WebCamComponent.ngOnDestroy (webcam.component.js:233)
at callProviderLifecycles (core.es5.js:11182)
at callElementProvidersLifecycles (core.es5.js:11147)
at callLifecycleHooksChildrenFirst (core.es5.js:11131)
at destroyView (core.es5.js:12470)
at callViewAction (core.es5.js:12619)
at execEmbeddedViewsAction (core.es5.js:12557)
at destroyView (core.es5.js:12468)
at callViewAction (core.es5.js:12619)
at execComponentViewsAction (core.es5.js:12531)

Metadata version mismatch for module... found version 4, expected 3

Hi! I just installed ack-angular-webcam for some testing, when I import the module in an angular-cli project I am getting a Metadata version mismatch for module , found version 4, expected 3.

Not asking for permission. Video stream not available

Hi Acker, my code works well on browser but not on mobile devices. On mobile devices, I don't get the permission prompt. I followed your doc. I don't know what went wrong. You test url https://ackerapple.github.io/ack-angular-webcam/ works well on both web and mobile. Is it possible for you to share the source code of it?
thx.

Reflect camera view

Can i do reflect camera view??

Can't set camera component size

Hi.
When is use width & height parameters in options object there's no effect :(
Help pls :).

Not working in IE11

Hello,

I tried using this module in my application. It works fine in Chrome but in IE11 it just displays "Video Stream not available". Also the the Demo page link given in the Readme shows the Camera in Chrome but not in IE11. I have provided below options for fallback to flash.

options = {
audio: false,
video: true,
width: 500,
height: 500,
fallback: true,
fallbackMode: 'callback',
fallbackSrc: 'jscam_canvas_only.swf',
fallbackQuality: 100
};

Does it require any other configuration ?

Thanks.

Hardcoded values in template for swf url

var template = "\n<video id="video" *ngIf="isSupportWebRTC && videoSrc" [src]="videoSrc" autoplay>Video stream not available\n\n<object *ngIf="isFallback" data="jscam_canvas_only.swf">\n Video stream not available\n <param name="FlashVars" value="mode=callback&quality=200">\n <param name="allowScriptAccess" value="always">\n <param name="movie" value="jscam_canvas_only.swf">\n\n";
Here "jscam_canvas_only.swf" is passed as hardcoded which should take actually fallbacksrc.
This will create issue in passing the fallbacksrc in options.

Can you please remove the hardcode dependencies?
Requesting you to please revert me once you have any update over it.

-Meghal

Failed to execute 'getUserMedia' on 'MediaDevices': parameter 1 ('constraints') is not an object.

Hello, i need help with this (please)

Failed to execute 'getUserMedia' on 'MediaDevices': parameter 1 ('constraints') is not an object.

Unable to get blob from base64Image in microsoft edge

Doesn't support internet explorer 11

Hello the directive throws the error 'Object doesn't support property or method 'subscribe' in Internet Explorer 11. Even the demo website does it. Our team have tested it using several workstations. I have read this:

"A polyfill will be needed. The function Object.assign and other missing functionality in Internet Explorer will need to be polyfilled."

We did it, but still it doesn't work.

Not working with Ipad

When I start to test on Ipad, it shows me the following error,

t.videoObject.capture is not a function. (In 't.videoObject.capture()', 't.videoObject.capture' is undefined)
(anonymous function) — index.js:39:276532
t — index.js:39:264598
captureToCanvas — index.js:39:276435
captureBase64 — index.js:39:276603
captureBase64 — index.js:39:227157
(anonymous function) — index.js:39:646539
(anonymous function) — index.js:39:19500
(anonymous function) — index.js:39:130928
onInvokeTask — index.js:39:79398
runTask — index.js:39:254706
invoke — index.js:39:260505

Can you please suggest the solution asap as i have put the code on live too.

Appreciated!

jscam_canvas_only.swf file is throwing 404

I tried ack-angular-webcam with Angular 4 and it was working fine with Google Chrome, Firefox, Internet Explorer, Edge, but 2 weeks before it stop working in Internet Explorer i tried to debug and found that jscam_canvas_only was throwing 404 in network console of IE.
Below are the options i am providing.

this.options = {
audio: false,
video: true,
width: 400,
height: 320,
fallbackMode: 'callback',
fallbackQuality: 500,
fallbackSrc: 'fallback/jscam_canvas_only',
cameraType: 'back'
};

Formdata is empty

Using the example provided below from the main page
//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) ) }

once the promise is returned, the formdata is null. I've looked and can't find why its returning null. Is something missing?

Add video recording

I'm using angular 2 and I wanted to record video with audio and Capture photo and Record Audio. so my question is can I use this single component to use all three task.

Failed build

Hi! I'm trying to build my project using webpack and get this error

ERROR in Error: Metadata version mismatch for module /home/developer/projects/demo/front/node_modules/ack-angular-webcam/index.d.ts, found version 4, expected 3

Can you help me please?

If user press Block camera , catch emitter not working properly

Hi.
I have to make user photo from web cam. So when i press allow , all is working properly. But when i press Block on Block/Allow camera permission popup i have an uncaught error in console and no error data in error object.

Error is

public onCameraError(error: Error): void {
        // .... my code....
    }

Camera declaration in html

<ack-webcam class="take-photo-page-container-webcam"
                            [(ref)]="webcam"
                            [options]="webcamOptions"
                            (success)="onCameraSuccess($event)"
                            (catch)="onCameraError($event)">
  </ack-webcam>

My web cam options object

this.webcamOptions = {
            audio: false,
            fallbackSrc: 'fallback/jscam_canvas_only.swf',
            height: 400,
            video: false,
            width: 400,
        };

What should i do?
Thanks.

Browser Chrome Version 63.0.3239.132 (Official Build) (64-bit)
Framework - Angular 5

Add bind attribute useParentWidthHeight

Issue #13 ended thinking we could use a parent offset width/height to drive video elm width/height

optionString is not used to try to initialize mediaDevices.getUserMedia()

On line 175 of webcam.component.js, the fallback is supposed to try to initialize the webcam using the configuration string optionString instead of a JavaScript object, but the optionObject variable is used both times.

The error message "Both configs failed. Neither object nor string works" leads me to believe that the optionString is supposed to be used during the second attempt. Unless I'm reading this incorrectly.

// if the config object failes, we try a config string
_this.browser.mediaDevices.getUserMedia(optionObject)  // <--- this should be optionString

Failing to build NPM package using ng-packagr

Hi,
I'm struggling to get built NPM package using ng-packagr which has components with this ack-angular-webcam.

Here is build output:

Building Angular library from [source_path]\ng-package.json BUILD ERROR 'WebCamComponent' is not exported by node_modules\ack-angular-webcam\index.js Error: 'WebCamComponent' is not exported by node_modules\ack-angular-webcam\index.js at error ([source_path]\node_modules\rollup\dist\rollup.js:185:14) at Module.error ([source_path]\node_modules\rollup\dist\rollup.js:8170:3) at Module.trace ([source_path]\node_modules\rollup\dist\rollup.js:8263:10) at ModuleScope.findDeclaration ([source_path]\node_modules\rollup\dist\rollup.js:7871:22) at Identifier.bind ([source_path]\node_modules\rollup\dist\rollup.js:6873:34) at eachChild.child ([source_path]\node_modules\rollup\dist\rollup.js:5674:34) at value.forEach.child ([source_path]\node_modules\rollup\dist\rollup.js:5683:38) at Array.forEach (native) at keys.forEach.key ([source_path]\node_modules\rollup\dist\rollup.js:5683:11) at Array.forEach (native)

Would you have an idea what could be wrong and how could that be achieved?

Event prefixes

I'm going to start using this package, but the event names are killing my OCD.
https://angular.io/guide/styleguide#dont-prefix-output-properties.
Can you deprecate the event names and align them with the angular style guide?

onSuccess => success
onError => error

Thanks for the package! Saving me lots of time!

Switch between Front and Back camera ?

Good evening I used your module and it's really cool but i can't switch between front camera and back camera could you help me please :)

component show in delay

I put ack-webcam in modal but the ack-webcam load with delay.
Do you have a solution for it?

issue in internet explorer 11

Hello I can't make the component to work in internet explorer 11. Can you help me out? I added the reference in the index page to the polyfill getUserMedia.js. I can't even see the demo working on IE 11. Maybe I need to do things differently.
Thank you

Demo page broke in iOS

Some error about width. Look into this

Demo source available?

Hi All, is the demo source available anywhere? I'm trying to figure out how to use ack-media-devices directive properly, and would really love to see how it was used in the demo.

Both configs failed. Neither object nor string works.

I got this error after uploaded my file into server. Please help me how to fixes this

i can't open the back camera in i phone

i can't open the back camera in i phone

it return onSuccess

MException: Requested device not found

MException: Requested device not found
Is this error clear but will it be due to other factors?

when mounting it in production and uploading it to a server gives this error:
DOMException: Only secure origins are allowed (see: https://goo.gl/Y0ZkNV).

How do I return the image in jpg and not as a base 64 string?

I see the example but I do not understand the process.

I implement this:
but formData contains nothing

//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 )

Add audio

Links to self :

• audio manipulation code:
  https://mdn.github.io/webaudio-examples/stream-source-buffer/

• related audio stream extracting: https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createMediaStreamSource

Goals will be to:

• have example page with visual audio graph
• capture audio to transmit to server
• attempt to show demo server code

Reopened #26

@AckerApple Hi. About issue #26
According to github rules I cannot re-open your own issues if a repo collaborator closed them :)
So, please reopen it by yourself and delete current issue.
I've updated to 1.7.3 version , but unfortunately result is almost the same.
Almost - error object now is undefined.

Can not bind to 'ref' since it is not a known property of 'ack-webcam

Good afternoon,
I am developing an application to take a photo of a webcam using the ack-webcam plugin, however when I start the application, the following error occurs:
"Can not bind to 'ref' since it is not a known property of 'ack-webcam'."
can you help me?

Following my code
class typescript

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

@component({
selector: 'app-foto',
templateUrl: './foto.component.html',
styleUrls: ['./foto.component.css']
})
export class FotoComponent implements OnInit {

public webcam:any;//will be populated by ack-webcam [(ref)]
public base64:any;

/*private title = 'Electron with Angular2';
private subTitle = 'This app was made for Electron Angular Example';

@ViewChild('camera') video;
@ViewChild('myCanvas') canvas;
@ViewChild('photo') photo;

private ctx;
*/
private options:any;

constructor(public http:Http) { }

ngOnInit() {
}

ngAfterViewInit() {

this.options = 
{
  audio: false,
  video: true,
  width: 300,
  height: 300,
  fallbackMode: 'callback',
  fallbackSrc: 'jscam_canvas_only.swf',
  fallbackQuality: 85,
  cameraType: 'front' || 'back'
};




/*
const _video = this.video.nativeElement;

// canvas 초기화
const _canvas = this.canvas.nativeElement;

this.ctx = this.canvas.nativeElement.getContext("2d");



// ctx 좌우 반전
this.ctx.translate(this.canvas.width, 0);
this.ctx.scale(-1, 1);

navigator.getUserMedia({video: true, audio: false},
  (stream) => {
    _video.srcObject = stream;
   },
  (error) => {
    console.log('Error' + error);
  }
);

}

// btn_photo에 바인딩할 takePhoto() 함수 정의하기
takePhoto = () => {
const _video = this.video.nativeElement;
const _canvas = this.canvas.nativeElement;

// 캡쳐된 화면 그리기
this.ctx.drawImage(_video, 0, 0, _canvas.width, _canvas.height);

var data = _canvas.toDataURL('image/webp');

this.photo.src =  data;

*/
}

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(nomeCrianca){
this.webcam.captureAsFormData({fileName:nomeCrianca + '.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://localhost:4200/responsavelCrianca/salvarFoto",
body: formData
}

const request = new Request(config);

return this.http.request( request )

}

}`

template html

<ack-webcam [(ref)]="webcam" [options]="options"></ack-webcam> <button (click)="genBase64()"> generate base64 </button> <button (click)="genPostData()"> generate post data </button>

app.module.ts

`import { ResponsavelComponent } from './cad-responsavel/responsavel/responsavel.component';
import { routing } from './app.routes';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import {InputTextModule,DataTableModule,ButtonModule,DialogModule,MultiSelectModule,
CalendarModule,SelectItem,GrowlModule} from 'primeng/primeng';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { PanelModule } from "primeng/components/panel/panel";
import { AlergiaComponent } from './alergia/alergia.component';
import { CuidadoEspecialComponent } from './cuidado-especial/cuidado-especial.component';
import { MenuComponent } from './menu/menu.component';
import { MenubarModule } from 'primeng/components/menubar/menubar';
import { RelatorioPresencaCriancaComponent } from './relatorios/relatorio-presenca-crianca/relatorio-presenca-crianca.component';
import { InputMaskModule,DropdownModule } from 'primeng/primeng';
import { HomeComponent } from './home/home.component';
import { PDFExportModule } from '@progress/kendo-angular-pdf-export';
import { IntlModule } from '@progress/kendo-angular-intl';
import { GridModule } from '@progress/kendo-angular-grid';
import { FotoComponent } from './foto/foto.component';

@NgModule({
declarations: [
AppComponent,
LoginComponent,
ResponsavelComponent,
AlergiaComponent,
CuidadoEspecialComponent,
MenuComponent, RelatorioPresencaCriancaComponent, HomeComponent, FotoComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
routing,InputTextModule,DataTableModule,ButtonModule,DialogModule,BrowserAnimationsModule,
PanelModule,MultiSelectModule,CalendarModule,MenubarModule,GrowlModule,InputMaskModule,DropdownModule,
IntlModule,GridModule,PDFExportModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
`

Error closing the webcam

Failed to execute 'removeEventListener' on 'EventTarget': 2 arguments required, but only 1 present.
at proto.(anonymous function).
when am trying to exit the webcam

facingMode (rear camera) not working on Android Chrome

Hi,

We are using ack-webcam in our application. It is working brilliantly on laptop while using front-camera. However, we want to use it on mobile (Google Chrome). We are using a property [facingMode]="environment" for using mobile's rear camera. It is working fine on Mozilla Firefox (firefox asks for front-cam OR back-cam) but on Android Google Chrome still the front camera is opening.

Please provide a solution. Its very urgent.

Thanks !

Metadata version mismatch

Hello! Congratulations for the plugin looks very good!

I am trying to install it to see it but it gives me the following error:

Metadata version mismatch for module [path] /node_modules/ack-angular-webcam/index.d.ts, found version 4, expected 3, resolving symbol AppModule in [path] /src/app/app.module.ts, resolving symbol AppModule in [path] /src/app/app.module.ts

Any idea? I just make an ng new and install your library.

Here is my package.json:

"dependencies": {
    "@ angular / animations": "^ 4.2.4",
    "@ angular / common": "^ 4.2.4",
    "@ angular / compiler": "^ 4.2.4",
    "@ angular / core": "^ 4.2.4",
    "@ angular / forms": "^ 4.2.4",
    "@ angular / http": "^ 4.2.4",
    "@ angular / platform-browser": "^ 4.2.4",
    "@ angular / platform-browser-dynamic": "^ 4.2.4",
    "@ angular / router": "^ 4.2.4",
    "core-js": "^ 2.4.1",
    "rxjs": "^ 5.4.2",
    "zone.js": "^ 0.8.14"
  },
  "devDependencies": {
    "@ angular / cli": "1.4.2",
    "@ angular / compiler-cli": "^ 4.2.4",
    "@ angular / language-service": "^ 4.2.4",
    "@ types / jasmine": "~ 2.5.53",
    "@ types / jasminewd2": "~ 2.0.2",
    "@ types / node": "~ 6.0.60",
    "ack-angular-webcam": "^ 1.7.1",
    "codelyzer": "~ 3.1.1",
    "jasmine-core": "~ 2.6.2",
    "jasmine-spec-reporter": "~ 4.1.0",
    "karma": "~ 1.7.0",
    "karma-chrome-launcher": "~ 2.1.1",
    "karma-cli": "~ 1.0.1",
    "karma-coverage-istanbul-reporter": "^ 1.2.1",
    "karma-jasmine": "~ 1.1.0",
    "karma-jasmine-html-reporter": "^ 0.2.2",
    "protractor": "~ 5.1.2",
    "ts-node": "~ 3.2.0",
    "tslint": "~ 5.3.2",
    "typescript": "~ 2.3.3"
  }

Webcam component does not work correctly when used in Modal Dialog

I am using WebCam component in the bootstrap modal. It works perfect when first time opened, but captures same image after second open. And image it what is on camera just before closing dialog for the first time. Seems like something is not disposed correctly, but can't trace what.

Here I have created small app which can be used to reproduce problem:
WebCamTest.zip
Open Dialog, capture images. Works fine.
Close Dialog.
Open again. Same image is getting captured.

After refreshing page cycle can be repeated.

Set video size to 100%

The options set only allow for the image to be set in px as a numeric value

this.options = {
audio: false,
video: true,
// fallback: true,//force flash
width: 420,
height: 340,
//fallbackQuality: 200,
fallbackSrc: 'fallback/jscam_canvas_only.swf'
};

I'm using bootstrap and want to set the width to 100% and the height to auto. How can I do this?

Review to remove ref bind

The input ref and output refChange as not needed as Angular already provides a template-to-class references.

This:

<ack-webcam [(ref)]="webcam"></ack-webcam>

Should now become this:

<ack-webcam #webcam></ack-webcam>

This will cause a breaking change, removing ref. Increase minor version number

Camera options not configured correctly

Hi @AckerApple

I am using your camera and am trying to use only the back camera so have set up my options like so:

`cameraOptions: any = {audio: false, video: true, cameraType: 'back'};`

After the user gets asked for permissions, and the video stream shows, it seems to default to the front camera. Once they navigate away and come back, the back camera gets used.

Unable to remedy this situation, I then tried to add a camera flip button to change the options from 'front' to 'back' on the fly, but the camera video stream doesn't seem to respond to me changing this setting..

Can you please help

Getting a list of available MediaDevices

Thank you for your very helpful component.

As I would like to use it in a Mobile Responsive Application, is it possible to get a list of available Cameras on Mobile? What about changing the facingmode on the fly?

Thank you.

cameraType DEPRECATED?

Wonderful component. thank you very much Acker!
What does this mean:
cameraType : 'front' || 'back'//DEPRECATED
I am rewriting my cordova app with PWA and I need to take photo from both front and back camera of mobile devices. Can I use this component for that?

Camera dimension will not set properly on Mobile

Hello @AckerApple,

I have another issue regarding to setting the Camera dimension on Mobile devices while Desktop works properly. I have tested this on both iPhone (Safari) and Android Devices and both don't show the camera in compelete width (Please refer to attached Image)

Here is the code I'm using:

  options = {
    audio: false,
    video: true,
    width: 280,
    height: 210
  };

      <ack-webcam
        [(ref)]="webcam"
        [options]="options"
        (success)="onCamSuccess()"
        (catch)="onCamError($event)"
        [facingMode]="facingMode"
      ></ack-webcam>

even setting the "video" dimension in CSS could not solve the problem:

      video {
        width: 280px;
        height: 210px;
        display: inline-block;
      }

Regarding to https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia there are more Options to set the Video constraints like "min", "max", "exact" or "ideal"

Could that be the Problem?

How to change the image size

I need an example of how to change the size of the webcam image, because the actual image comes 640x480 all the time, and i need a 1280x720 base64 picture.
I´m using Angular 4 and i try a lot of methods, but doesn´t work.

how do I turn off the webcam?

hi, how do I turn off the webcam?

videoDevice input doesn't change the camera

Hello @AckerApple,
thank you for the great effort! By doing some tests with your library I saw that the input
[videoDevice]: MediaDeviceInfo is not working properly.
The component is refreshing itself but is not changing the camera; the MediaDeviceInfo passed is a valid one retrieved by the directive <ack-media-devices> -> [(videoInputs)]
However by using [videoDeviceId]: string everything is working well.

Thank you!

Camera seems to freeze when changing tabs with Angular Material

So i've installed the package without a problem, made it functioning, but due to project specifications I use the camera in one Angular Material Tab.

At first the camera works, but once I change the tabs, it freezes and cannot make it work until I refresh the whole page. Isnt a more elegant way to refresh/reinitialize the camera once the selectedIndex of the tab is the one with the camera ?

thanks