Vue iOS photoCapturedEvent is not fired and Photo is not saved

[philipp80]

Hi. I want to use CameraPlus in a Nativescript-Vue Project. My Problem ist that no photo is saved to the iOS Photoroll and the photoCapturedEvent is not fired. I tried to translate the Angular-Demo Project to Vue, but i don't know why the photo will not be saved. Can someone help me?

Cheers

<template>
    <Page class="page">
        <ActionBar title="Camera" class="action-bar"/>
        <GridLayout rows="250, auto, *">

            <CameraPlus row="0" ref="cam" :height="cameraHeight"
                        galleryPickerMode="single"
                        enableVideo="true"
                        confirmVideo="false"
                        saveToGallery="true"
                        showCaptureIcon="true"
                        showGalleryIcon="true"
                        showToggleIcon="true"
                        showFlashIcon="true"
                        confirmPhotos="true"
                        flashOffIcon="icon"
                        autoSquareCrop="true"
                        insetButtons="true"
                        debug="true"
                        @loaded="onCameraLoaded"
                        @photoCapturedEvent="onPhotoCapturedEvents"
                        @imagesSelectedEvent="onImagesSelectedEvent"
                        @errorEvent="onCameraError">
            </CameraPlus>

            <GridLayout row="1" rows="auto, auto" columns="*, auto, *" *ngIf="imageSource">
                <Label columnSpan="3" textWrap="true" text="Captured Image"></Label>
                <Image row="1" col="1" class="preview-image" stretch="none" :src="previewSrc"></Image>
            </GridLayout>
            <GridLayout row="2" rows="auto, auto, auto, auto" columns="*, *">
                <Button text="Capture" @tap="onButtonCapture" row="0" col="0" class="btn btn-primary"/>
                <Button text="Open Gallery" @tap="onButtonOpenGallery" row="0" col="1" class="btn btn-primary"/>
                <Button text="Start Recording" @tap="onButtonRecordStart" row="1" col="0" class="btn btn-primary"/>
                <Button text="Stop Recording" @tap="onButtonRecordStop" row="1" col="1" class="btn btn-primary"/>
            </GridLayout>
        </GridLayout>
    </Page>
</template>

<script>
    import Vue from 'nativescript-vue'

    import {isAndroid, isIOS, device, screen} from "tns-core-modules/platform";
    import {CameraPlus, Helpers} from "@nstudio/nativescript-camera-plus";

    Vue.registerElement("CameraPlus", () => require("@nstudio/nativescript-camera-plus").CameraPlus);

    export default {
        data() {
            return {
                previewSrc: "",
                cameraWidth: 300,
                cameraHeight: 300,
                cam: null
            };
        },

        methods: {
            onCameraLoaded(result) {
                this.cam = result.object;

                console.log("Camera loaded...");

                let flashMode = this.cam.getFlashMode();

                // Turn flash on at startup
                if (flashMode == 'off') {
                     this.cam.toggleFlash();
                }
            },
            onCameraError(result) {
                console.log('CAMERA ERRROR EVENT');
                console.log(result);
            },

            onPhotoCapturedEvents(result) {
                console.log('PHOTO CAPTURED EVENT');
                console.log(result);
            },
            onImagesSelectedEvent(result) {
                console.log('IMAGES SELECTED EVENT');
                console.log(result);
            },
            onButtonCapture() {
                console.log('Take Picture');
                this.cam.takePicture({saveToGallery: true});
                console.log('Picture taken');
            },
            onButtonOpenGallery() {
                this.cam.chooseFromLibrary({showVideos: true});
            },
            onButtonRecordStart() {
                try {
                    console.log('*** start recording ***');
                    this.cam.record();
                } catch (err) {
                    console.log(err);
                }
            },
            onButtonRecordStop() {
                try {
                    console.log('*** stop recording ***');
                    this.cam.stop();
                    console.log('*** after this.cam.stop() ***');
                } catch (err) {
                    console.log(err);
                }
            }
        }
    };
</script>

<style scoped>

</style>

[matty0005]

Hi, Is there any movement on the issue? I am facing the same problem. I wonder if the error has something to do with the use of an emulator, rather than a physical device?

[RosilBelli]

Same here with me too (using version 3.0.2)

[andrew-bierman]

Thanks for this example I was struggling with same thing, converting the demo angular code to vue.

I think the issue described above is with the simulator, at least on iOS. For what its worth, when using a physical device this worked nearly out of the box. But i experienced same issue as above with the simulator.

Tested on latest NS version with a few minor changes. Updating tns import: import {isAndroid, isIOS, device, screen} from "tns-core-modules/platform"; to import {isAndroid, isIOS, device, screen} from "@nativescript/core";

I also had to disable the flash toggle logic in the onCameraLoaded function as I was using an older gen iPad.

Appreciate the example this was quite helpful for me!