Vue Integration

[nnuvo]

Looking for Nativescript-vue integration. This appears to be the best camera implementation out there. Any help would be appreciated. Unsuccessfully attempted to use this plugin after install via the following:

main.js Vue.registerElement('CameraView', () => require('nativescript-fancy-camera').CameraView)

&

Camera.vue <CameraView id="cameraView"/>

[nnuvo]

Update. Crash reported after changing the integration to:

Vue.registerElement('CameraView', () => require('nativescript-fancy-camera/view').CameraView)

&

Camera.vue <CameraView id="cameraView"/>

Attempted with Nativescript 4.1.2 & 5.2.0

[dottodot]

I don't think CameraView is exported. I'm trying to add in Angular

import { FancyCamera } from 'nativescript-fancy-camera';
import { registerElement } from 'nativescript-angular/element-registry';
registerElement('CameraView', () => FancyCamera.CameraView);

and I get a warning of Property 'CameraView' does not exist on type 'typeof FancyCamera'

[dottodot]

Ok I worked it out. The following works in Angular

import { registerElement } from 'nativescript-angular/element-registry';
registerElement(
  'CameraView',
  () => require('nativescript-fancy-camera/view/').CameraView
);

  <CameraView quality="highest" cameraPosition="front" #camera></CameraView>

  @ViewChild('camera') cameraView: ElementRef;
  toggleCamera() {
    this.cameraView.nativeElement.toggleCamera();
  }

I know the second parts aren't probably relevant to Vue but the import should be the same.

[triniwiz]

I'll try to finish up the basic camera classes also add some framework specific imports to make things like this easier :) ... so please lmk how things are working

[dottodot]

The only thing I found not to work so far is saveToGallery

  <CameraView  quality="highest" saveToGallery="true" cameraPosition="front" #camera (finished)="photoFinished($event)"></CameraView>

[triniwiz]

It’s not implemented yet 🙂

[frawgy]

Update. Crash reported after changing the integration to:

Vue.registerElement('CameraView', () => require('nativescript-fancy-camera/view').CameraView)

&

Camera.vue <CameraView id="cameraView"/>

Attempted with Nativescript 4.1.2 & 5.2.0

Did you get any of the camera functions to work in Nativescript-vue? I've only managed to get CameraView element and toggleCamera function to work so far.

[dottodot]

I know saveToGallery hasn't been implemented and toggle flash doesn't work either.

[frawgy]

Yeah, I noticed the toggle flash didn’t seem to work. I think I got the stopRecording to work as it gives a camera shutter response, but I’m having troubles with takePhoto and startRecording functions.

[frawgy]

How do you get the icons to appear on the camera element? I have toggleCamera, takePhoto, recordVideo, and stopRecord all working as normal UI buttons, but I can't figure out how to get the native icons to appear on the camera element to accomplish the same tasks.

[reynoldspaul]

Trying Nativescript-vue integration. Getting ReferenceError: co is not defined

I am registering the CameraView as per Vue.registerElement('CameraView', () => require('nativescript-fancy-camera/view').CameraView );

[frawgy]

Trying Nativescript-vue integration. Getting ReferenceError: co is not defined

I am registering the CameraView as per Vue.registerElement('CameraView', () => require('nativescript-fancy-camera/view').CameraView );

I never received that error doing what you did, how are you referencing it in the .vue file? Here's how I have mine with an example function.

<CameraView id="cameraView" ref="page" v-show="!hasVideo && !hasImage" />

toggleCamera() { let page = this.$refs.page.nativeView const cameraView = page.getViewById('cameraView') cameraView.toggleCamera() }

[reynoldspaul]

Thanks @frawgy

If I use v-if instead of v-show I do not get the 'co is not defined error'.

However, I now get 'cannot read property toggleCamera of undefined.

I can console log const cameraView to see it is defined.

[frawgy]

Thanks @frawgy

If I use v-if instead of v-show I do not get the 'co is not defined error'.

However, I now get 'cannot read property toggleCamera of undefined.

I can console log const cameraView to see it is defined.

That's odd, so cameraView is defined yet the toggleCamera function doesn't work? One thing I noticed going between different demos was that there were these imports present. I'm not sure if including them actually makes a difference or not, but I have them.

import * as observable from 'tns-core-modules/data/observable' import * as pages from 'tns-core-modules/ui/page' import view from 'tns-core-modules/ui/core/view'

[luiguild]

My successful implementation in NativeScript-Vue

<template>
  <Page actionBarHidden="true">
    <FancyCamera
      quality="highest"
      cameraPosition="front"
    ></FancyCamera>
  </Page>
</template>

<script >
import Vue from 'vue'
import { FancyCamera } from 'nativescript-fancy-camera'

Vue.registerElement(
  'FancyCamera',
  () =>
    require('nativescript-fancy-camera/view')
      .CameraView
)

export default {}
</script>