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

[ghcsantos1978]

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 { }
`

[AckerApple]

Hey there!

It appears you completely skipped this step of the Getting Started process:
https://www.npmjs.com/package/ack-angular-webcam#importing

I searched the code you copy pasted and it is completely missing the module WebCamComponent. Please play close attention to the install guide and look for the code that looks like import { WebCamComponent } from 'ack-angular-webcam'

Thank you for filling out this issue publicly so that other may learn from you

:)

[AckerApple]

Your @NgModule definition needs to import WebCamComponent

[AckerApple]

Once you have fixed. Please close this issue