ERROR TypeError: Cannot read property 'takePicture' of undefined

[farhanrahmadi]

huy guys i got some problem using when i going to get take a picture

this my html `

<StackLayout  width="90%" height="73%" top="40" left="20" class="pic-indicator">
    <Label text="Pastikan KTP tidak terpotong dan tulisan jelas" textAlignment="center" textWrap="true" width="300" marginTop="250" rotate="90" fontSize="20" color="white"></Label>
</StackLayout>
<StackLayout orientation="horizontal" backgroundColor="black" top="550" width="100%" height="20%">
    <StackLayout verticalAlignment="middle" width="170">
        <Label fontSize="24" textAlignment="center" text="Cancel" color="white"></Label>
    </StackLayout>
    <Button width="80" height="80" borderRadius="50" (tap)="takePicFromCam()" backgroundColor="white">
    </Button>
</StackLayout>

` and this my component.ts

`import {Component, OnInit, NgZone, OnDestroy} from "@angular/core"; import { Page } from "ui/page"; import { RouterExtensions } from 'nativescript-angular/router'; import { UiService } from "../shared/service/ui.service"; import {FormBuilder} from "@angular/forms"; import { CameraPlus } from '@nstudio/nativescript-camera-plus'; import { ImageAsset } from 'tns-core-modules/image-asset'; import { ImageSource } from 'tns-core-modules/image-source'; import {registerElement} from "nativescript-angular";

registerElement("CameraPlus", () => CameraPlus);

@Component({ selector: "register-verification", moduleId: module.id, templateUrl: "./register-verification.component.html" })

export class RegisterVerificationComponent implements OnInit, OnDestroy {

private cam: CameraPlus;
public imageSource: ImageSource;

ngOnInit(): void { }

public camLoaded(e: any): void {
    console.log('***** cam loaded *****');
    this.cam = e.object as CameraPlus;

    let flashMode = this.cam.getFlashMode();

    // Turn flash on at startup
    if (flashMode == 'off') {
        this.cam.toggleFlash();
    }

    // TEST THE ICONS SHOWING/HIDING
    // this.cameraPlus.showCaptureIcon = true;
    // this.cameraPlus.showFlashIcon = true;
    // this.cameraPlus.showGalleryIcon = false;
    // this.cameraPlus.showToggleIcon = false;
}

public imagesSelectedEvent(e: any): void {
    console.log('IMAGES SELECTED EVENT!!!');
    this.loadImage((e.data as ImageAsset[])[0]);
}

public photoCapturedEvent(e: any): void {
    console.log('PHOTO CAPTURED EVENT!!!');
    this.loadImage(e.data as ImageAsset);
}

public toggleCameraEvent(e: any): void {
    console.log('camera toggled');
}

public recordDemoVideo(): void {
    try {
        console.log(`*** start recording ***`);
        this.cam.record();
    } catch (err) {
        console.log(err);
    }
}

public stopRecordingDemoVideo(): void {
    try {
        console.log(`*** stop recording ***`);
        this.cam.stop();
        console.log(`*** after this.cam.stop() ***`);
    } catch (err) {
        console.log(err);
    }
}

public toggleFlashOnCam(): void {
    this.cam.toggleFlash();
}

public toggleShowingFlashIcon(): void {
    console.log(`showFlashIcon = ${this.cam.showFlashIcon}`);
    this.cam.showFlashIcon = !this.cam.showFlashIcon;
}

public toggleTheCamera(): void {
    this.cam.toggleCamera();
}

public openCamPlusLibrary(): void {
    this.cam.chooseFromLibrary();
}

public takePicFromCam(): void {
    this.cam.takePicture({ saveToGallery: true });
}

private loadImage(imageAsset: ImageAsset): void {
    if (imageAsset) {
        this.imageSource = new ImageSource();

        this.imageSource.fromAsset(imageAsset).then(
            imgSrc => {
                if (imgSrc) {
                    this.zone.run(() => {
                        this.imageSource = imgSrc;
                    });
                } else {
                    this.imageSource = null;
                    alert('Image source is bad.');
                }
            },
            err => {
                this.imageSource = null;
                console.log('Error getting image source: ');
                console.error(err);
                alert('Error getting image source from asset');
            }
        );
    } else {
        console.log('Image Asset was null');
        alert('Image Asset was null');
        this.imageSource = null;
    }
}

constructor(
    private zone: NgZone,
    private routerExtensions: RouterExtensions,
    private formBuilder: FormBuilder,
    private _page: Page,
    private _uiService: UiService) {
    this._page.actionBarHidden = true;
    this._uiService.setBottomNavHidden(true);
}

ngOnDestroy(){
    this._uiService.setBottomNavHidden(false);
}

} `

[Guatom]

Better late than never.

I think the problem is that you're missing camLoaded inside your HTML. camLoaded is the method that passes the camera object when it's ready.