nstudio / nativescript-camera-plus Goto Github PK

View Code? Open in Web Editor NEW

79.0 16.0 49.0 5.22 MB

License: MIT License

HTML 1.46% TypeScript 88.49% CSS 0.36% Ruby 0.31% JavaScript 9.37%

nativescript-camera-plus's Introduction

NativeScript Camera Plus

A NativeScript camera with all the bells and whistles which can be embedded inside a view. This plugin was sponsored by LiveShopper

Do you need assistance on your project or plugin? Contact the nStudio team anytime at [email protected] to get up to speed with the best practices in mobile and web app development.

Installation

tns plugin add @nstudio/nativescript-camera-plus

Note :- Android Please add the following to your app.gradle

android {
...
 compileOptions {
       sourceCompatibility JavaVersion.VERSION_1_8
       targetCompatibility JavaVersion.VERSION_1_8
   }
}

Sample

Yes the camera is rotated because it's a webcam to an emulator and it's just the way life works

Demo

The demo apps work best when run on a real device. You can launch them from the simulator/emulator however the camera does not work on iOS simulators. Android emulators will work with cameras if you enable your webcam.

Android Emulator Note

The camera in your webcam being used on emulators will likely be rotated sideways (incorrectly). The actual camera output will be correctly oriented, it's only the preview on emulators that present the preview incorrectly. This issue shouldn't be present on real devices due to the camera being oriented correctly on the device vs. a webcam in a computer.

Run Vanilla Demo

Plug device in then:

npm run demo.ios
// or...
npm run demo.android

Run Angular Demo

Plug device in then:

npm run demo.ng.ios
// or...
npm run demo.ng.android

Properties

Name	Type	Default	Description
debug	boolean	false	If true logs will be output in the console to help debug the Camera Plus events.
confirmPhotos	boolean	true	If true the default take picture event will present a confirmation dialog before saving.
confirmRetakeText	string	'Retake'	When confirming capture this text will be presented to the user to retake the photo.
confirmSaveText	string	'Save'	When confirming capture this text will be presented to the user to save the photo.
saveToGallery	boolean	true	If true the default take picture event will save to device gallery.
galleryPickerMode	string	'multiple'	The gallery/library selection mode. 'single' allows one image to be selected. 'multiple' allows multiple images.
showFlashIcon	boolean	true	If true the default flash toggle icon/button will show on the Camera Plus layout.
showToggleIcon	boolean	true	If true the default camera toggle (front/back) icon button will show on the Camera Plus layout.
showCaptureIcon	boolean	true	If true the default capture (take picture) icon/button will show on the Camera Plus layout.
showGalleryIcon	boolean	true	If true the choose from gallery/library icon/button will show on the Camera Plus layout.
enableVideo	boolean	fale	If true the CameraPlus instance can record video and videos are shown in the gallery.

Static Properties

Note: These properties need set before the initialization of the camera. Users should set these in a component constructor before their view creates the component if the wish to change the default values. In case of enableVideo, this will be true if either the static property or the component property is true.

Name	Type	Description
enableVideo	boolean	Video Support (off by default). Can reset it before using in different views if they want to go back/forth between photo/camera and video/camera
defaultCamera	CameraTypes	Defaults the camera correctly on launch. Default `'rear'`. `'front'` or `'rear'`

Android Only Properties

Name	Type	Description
flashOnIcon	string	Name of app_resource drawable for the native image button when flash is on (enabled).
flashOffIcon	string	Name of app_resource drawable for the native image button when flash is off (disabled).
toggleCameraIcon	string	Name of app_resource drawable for the toggle camera button.
takePicIcon	string	Name of app_resource drawable for the take picture (capture) button.
galleryIcon	string	Name of app_resource drawable for the open gallery (image library) button.
autoFocus	boolean	If true the camera will use continuous focus when the camera detects changes of the target.

iOS Only Properties

Name	Type	Description
doubleTapCameraSwitch	boolean	Enable/disable double tap gesture to switch camera. (enabled)

Cross Platform Public Methods

Method	Description
isCameraAvailable()	Returns true if the device has at least one camera.
toggleFlash()	Toggles the flash mode on the active camera.
toggleCamera()	Toggles the active camera on the device.
chooseFromLibrary(opts?: IChooseOptions)	Opens the device gallery (image library) for selecting images.
takePicture(opts?: ICaptureOptions)	Takes a picture of the current preview in the CameraPlus.
getFlashMode(): string	Android: various strings possible: https://developer.android.com/reference/android/hardware/Camera.Parameters.html#getFlashMode() iOS: either `'on'` or `'off'`
record(opts?: IVideoOptions)	Starts recording a video.
stop()	Stops the video recording, when stopped the `videoRecordingReadyEvent` event will be emitted.

Android Only Public Methods

Method	Description
requestCameraPermissions(explanationText?: string)	Prompts the user to grant runtime permission to use the device camera. Returns a Promise.
hasCameraPermission()	Returns true if the application has been granted access to the device camera.
requestStoragePermissions(explanationText?: string)	Prompts the user to grant runtime permission to use external storage for saving and opening images from device gallery. Returns a Promise.
hasStoragePermissions()	Returns true if the application has been granted access to the device storage.
getNumberOfCameras()	Returns the number of cameras on the device.
hasFlash()	Returns true if the active camera has a flash mode.

Events

Name	Description
errorEvent	Executes when an error is emitted from CameraPlus
photoCapturedEvent	Executes when a photo is taken.
toggleCameraEvent	Executes when the device camera is toggled.
imagesSelectedEvent	Executes when images are selected from the device library/gallery.
videoRecordingStartedEvent	Executes when video starts recording.
videoRecordingFinishedEvent	Executes when video stops recording but has not process yet.
videoRecordingReadyEvent	Executes when video has completed processing and is ready to be used.
confirmScreenShownEvent	Executes when the picture confirm dialog is shown..
confirmScreenDismissedEvent	Executes when the picture confirm dialog is dismissed either by Retake or Save button.

Option Interfaces

export interface ICameraOptions {
  confirm?: boolean;
  saveToGallery?: boolean;
  keepAspectRatio?: boolean;
  height?: number;
  width?: number;
  autoSquareCrop?: boolean;
  confirmRetakeText?: string;
  confirmSaveText?: string;
}

export interface IChooseOptions {
  width?: number;
  height?: number;
  keepAspectRatio?: boolean;
  showImages?:  boolean;
  showVideos?: boolean;
}

export interface IVideoOptions {
  quality?: CameraVideoQuality;
  confirm?: boolean;
  saveToGallery?: boolean;
  height?: number;
  width?: number;
  disableHEVC?: boolean;
  androidMaxVideoBitRate?: number;
  androidMaxFrameRate?: number;
  androidMaxAudioBitRate?: number;
}

Contributing

Fork and clone the repo.
Execute npm run dev.setup in the root of the repo in your clone.
Execute npm run demo.android or npm run demo.ios to start the demo app on the platform provided. If you have a device connected to your computer then it should start the app on the device. If not, an emulator/simulator should start.
Lastly, you should be able to make changes to the source files in the src directory of the plugin and changes by synced to your running demo app.

nativescript-camera-plus's People

Contributors

Stargazers

Watchers

nativescript-camera-plus's Issues

Use Android Camera2 API

Any plans to support the android.hardware.camera2 API? The older Camera implementation was deprecated in API level 21.

ios orientation issues

We are using the camera plus control in an app and are having issues when the phone changes orientation on ios. The camera looks correct when it first loads but when we change from portrait to landscape the image capture button is really low on the screen and sometimes doesn't show on the screen. Also when the camera changes orientation the image doesn't rotate with the screen. At one point the image was inverted from the orientation of the camera. Has this been reported before? Is there a setting that is missing or someway we can reorient the image?

Below is the relevant source code from our app. Any guidance would be greatly appreciated. This control was a great help addressing some needed features.

******************* camera.component.html **************
<ActionBar class="action-bar" title="Take Photo"> <NavigationButton visibility="hidden"></NavigationButton> <ActionItem (tap)="close()"> <GridLayout rows="*" columns="auto,auto"> <Label row="0" col="0" class="fa" text="" horizontalAlignment="left"></Label> <Label row="0" col="1" text="Back" horizontalAlignment="left"></Label> </GridLayout> </ActionItem> </ActionBar> <StackLayout> <CameraPlus #cameraPlus opacity="1" doubleTapCameraSwitch="false" galleryPickerMode="single" showFlashIcon="true" showToggleIcon="false" showCaptureIcon="true" showGalleryIcon="false" saveToGallery="false" (loaded)="camLoaded($event)" (photoCapturedEvent)="photoCapturedEvent($event)" confirmPhotos="false" doubleTapCameraSwitch="false"> </CameraPlus> </StackLayout>

******************* camera.component.ts
`
import { Component, OnInit, ElementRef, ViewChild } from "@angular/core";
import { RouterExtensions } from "nativescript-angular/router";
import { PhotoService } from "../shared/photo.service";
import { Logger } from "../../shared/default-logger.service";
import { Page, PercentLength } from "ui/page";
import { ImageAsset } from "tns-core-modules/image-asset";
import { CameraPlus } from "@nstudio/nativescript-camera-plus";
import { ImageProvider } from "../shared/image.provider";
import { LocationService } from "../shared/location.service";
import * as dialogs from "ui/dialogs";
import * as platformModule from "tns-core-modules/platform";
import * as app from "tns-core-modules/application";
import * as frame from "ui/frame";

@component({
selector: "camera",
moduleId: module.id,
templateUrl: "./camera.component.html",
styleUrls: ["./camera.component.css"]
})

export class CameraComponent implements OnInit {
source: string;

@ViewChild("cameraPlus") cameraElement: ElementRef;
constructor(private photoService: PhotoService,
    private logger: Logger,
    private page: Page,
    private imageProvider: ImageProvider,
    private locationService: LocationService,
    private routerExtensions: RouterExtensions) {
    app.on("orientationChanged", this.onOrientationChanged);
}

onOrientationChanged(evt: any): void {
    let cameraPage: Page = frame.topmost().currentPage;
    let handler: any = (child: any) => {
        if (child.camera) {
            // this.height = this.page.height as number;
            child.height = platformModule.screen.mainScreen.widthDIPs * .91;
            // this.width=this.page.width as number;
            child.width =  platformModule.screen.mainScreen.heightDIPs;
        } else if (child && child.eachChildView) {
            child.eachChildView(handler);
        }
        return true;
    };
    cameraPage.eachChildView(handler);
}

ngOnInit(): void {
    let cameraElement: CameraPlus = <CameraPlus>this.cameraElement.nativeElement;
    // this.height = this.page.height as number;
    cameraElement.height = platformModule.screen.mainScreen.heightDIPs * .91;
    // this.width=this.page.width as number;
    cameraElement.width = platformModule.screen.mainScreen.widthDIPs;
    this.imageProvider.current = null;
}

close(): void {
    this.imageProvider.current = null;
    app.off(app.orientationChangedEvent, this.onOrientationChanged);
    this.routerExtensions.backToPreviousPage();
}

photoCapturedEvent(e: any): void {
    this.logger.log("Photo captured.");
    this.imageProvider.imageLocation = null;
    this.imageProvider.current = e.data as ImageAsset;
    this.locationService.getLocation()
        .then(location => {
            this.imageProvider.imageLocation = location;
            app.off(app.orientationChangedEvent, this.onOrientationChanged);
            this.routerExtensions.backToPreviousPage();
        })
        .catch(error => {
            this.logger.error(JSON.stringify(error));
        });
}

camLoaded(e: any): void {
    this.logger.log("Photo loaded.");
    const cameraPlus: CameraPlus = e.object as CameraPlus;
    cameraPlus.confirmPhotos = false;
}

private alertPermissionsFailed(): void {
    dialogs.alert({
        title: "Camera Permissions Failed",
        message: "Unable to get permission to use the camera.",
        okButtonText: "OK",
    });
}

}
`

How can be worked with Nativescript-Vue

I use this nativescript-camera-plus with Nativescript-vue but get some mistakes, so i wondering is there any demes worked with nativescript-vue;

the way i used in native-script-vue:

import { CameraPlus } from "@nstudio/nativescript-camera-plus";
Vue.registerElement('CameraPlus', () => CameraPlus );
<CameraPlus height="250" debug="true"
galleryPickerMode="single"
showFlashIcon="true"
showToggleIcon="true"
showCaptureIcon="true"
showGalleryIcon="true"
@loaded="camLoaded($event)"
@toggleCameraEvent="toggleCameraEvent($event)"
@photoCapturedEvent="photoCapturedEvent($event)"
@imagesSelectedEvent="imagesSelectedEvent($event)"

and the errors are:

JS: 'NativeScript-CameraPlus ---' [ 'video enabled:', false, [length]: 2 ]
JS: 'NativeScript-CameraPlus ---' [ 'default camera:', 'rear', [length]: 2 ]
JS: 'NativeScript-CameraPlus ---' [ '*** onSurfaceTextureAvailable ***
JS: this.cameraId = 0',
JS: [length]: 1 ]
JS: 'NativeScript-CameraPlus ---' [ '*** _initCamera ***
JS: this.cameraId = 0 --- device: Google Android SDK built for x86 on SDK: 27',
JS: [length]: 1 ]
JS: 'NativeScript-CameraPlus ---' [ 'opening camera with id = 0', [length]: 1 ]
JS: 'NativeScript-CameraPlus ---' [ 'supported focus modes = [fixed] --- device: Google Android SDK built for x86 on SDK: 27',
JS: [length]: 1 ]
JS: 'NativeScript-CameraPlus ---' [ '*** _setCameraDisplayOrientation ***', [length]: 1 ]
JS: 'NativeScript-CameraPlus ---' [ 'error _initCamera',
JS: [TypeError: Cannot read property 'getWindowManager' of undefined],
JS: [length]: 2 ]
JS: 'NativeScript-CameraPlus ---' [ '_initDefaultButtons error',
JS: [Error: java.lang.NullPointerException: Attempt to invoke virtual method 'android.content.res.Resources android.content.Context.getResources()' on a null object reference
JS: android.view.ViewConfiguration.get(ViewConfiguration.java:432)
JS: android.view.View.(View.java:4573)
JS: android.view.View.(View.java:4706)
JS: android.widget.ImageView.(ImageView.java:176)
JS: android.widget.ImageButton.(ImageButton.java:86)
JS: android.widget.ImageButton.(ImageButton.java:82)
JS: android.widget.ImageButton.(ImageButton.java:78)
JS: android.widget.ImageButton.(ImageButton.java:74)
JS: com.tns.Runtime.callJSMethodNative(Native Method)
JS: com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1101)
JS: com.tns.Runtime.callJSMethodImpl(Runtime.java:983)
JS: com.tns.Runtime.callJSMethod(Runtime.java:970)
JS: com.tns.Runtime.callJSMethod(Runtime.java:954)
JS: com.tns.Runtime.callJSMethod(Run...

any help, being waiting....
tks

(Android) saveToGallery: false issue

I'm testing in an angular project (see npm versions below). And when executing the takePicture method with saveToGallery set to false like so: this.cameraPlus.takePicture({ saveToGallery: false, confirm: true }); a few things happen that are a bit wonky.

First, the confirm dialog isn't shown.
Second, the resultant photoCapturedEvent is invalid.

Here's the debug log: (Note: the console dump is of the e.data in the photo capture event)

JS: CameraPlus video enabled:,false
JS: CameraPlus default camera:,rear
JS: cam loaded
JS: CameraPlus no camera
JS: CameraPlus *** onSurfaceTextureAvailable ***
JS: this.cameraId = 0
JS: CameraPlus *** _initCamera ***
JS: this.cameraId = 0
JS: CameraPlus opening camera with id = 0
JS: cam loaded
JS: CameraPlus supported focus modes = [fixed]
JS: CameraPlus *** _setCameraDisplayOrientation ***
JS: CameraPlus DISPLAY ROTATION = 0
JS: CameraPlus --- setting rotation for back facing camera --- 
JS:  --- info.orientation = 90
JS: CameraPlus result = 90
JS: CameraPlus targetRatio = 1.4222222222222223
JS: CameraPlus targetHeight = 1536
JS: CameraPlus size.width = 640, size.height = 480
JS: CameraPlus ratio = 1.3333333333333333
JS: CameraPlus size.width = 352, size.height = 288
JS: CameraPlus ratio = 1.2222222222222223
JS: CameraPlus size.width = 320, size.height = 240
JS: CameraPlus ratio = 1.3333333333333333
JS: CameraPlus size.width = 176, size.height = 144
JS: CameraPlus ratio = 1.2222222222222223
JS: CameraPlus optimalSize = android.hardware.Camera$Size@13f7860, optimalSize.width = 640, optimalSize.height = 480
JS: CameraPlus mPreviewSize = android.hardware.Camera$Size@13f7860
JS: CameraPlus _initDefaultButtons error,Error: Cannot convert object to Landroid/view/View$OnClickListener; at index 0
JS: CameraPlus {"saveToGallery":false,"confirm":true}
JS: CameraPlus *** _initCamera ***
JS: this.cameraId = 0
JS: CameraPlus opening camera with id = 0
JS: cam loaded
JS: CameraPlus supported focus modes = [fixed]
JS: CameraPlus *** _setCameraDisplayOrientation ***
JS: CameraPlus DISPLAY ROTATION = 0
JS: CameraPlus --- setting rotation for back facing camera --- 
JS:  --- info.orientation = 90
JS: CameraPlus result = 90
JS: CameraPlus targetRatio = 1.4222222222222223
JS: CameraPlus targetHeight = 1536
JS: CameraPlus size.width = 640, size.height = 480
JS: CameraPlus ratio = 1.3333333333333333
JS: CameraPlus size.width = 352, size.height = 288
JS: CameraPlus ratio = 1.2222222222222223
JS: CameraPlus size.width = 320, size.height = 240
JS: CameraPlus ratio = 1.3333333333333333
JS: CameraPlus size.width = 176, size.height = 144
JS: CameraPlus ratio = 1.2222222222222223
JS: CameraPlus optimalSize = android.hardware.Camera$Size@13f7860, optimalSize.width = 640, optimalSize.height = 480
JS: CameraPlus mPreviewSize = android.hardware.Camera$Size@13f7860
JS: CameraPlus Orientation: ,6
JS: CameraPlus originalBmp,
JS: CameraPlus bitmapOptions.inSampleSize,1
JS: CameraPlus originalBmp,android.graphics.Bitmap@91a42cc
JS: CameraPlus finalBmp,android.graphics.Bitmap@8e8342a
JS: CameraPlus recycling originalBmp...
JS: CameraPlus compressing finalBmp...
JS: CameraPlus recycling finalBmp...
JS: CameraPlus byteArray data,[B@201e191
JS: CameraPlus closing outputStream...
JS: CameraPlus picturePath,/storage/emulated/0/Android/data/org.nativescript.camTest/files/IMG_1516747726610.jpg
JS: CameraPlus nativeFile,/storage/emulated/0/Android/data/org.nativescript.camTest/files/IMG_1516747726610.jpg
JS: === dump(): dumping members ===
JS: {
JS:     "_observers": {},
JS:     "_android": "/storage/emulated/0/Android/data/org.nativescript.camTest/files/IMG_1516747726610.jpg",
JS:     "_options": {
JS:         "width": 0,
JS:         "height": 0,
JS:         "keepAspectRatio": true
JS:     }
JS: }
JS: === dump(): dumping function and properties names ===
JS: constructor()
JS: android: /storage/emulated/0/Android/data/org.nativescript.camTest/files/IMG_1516747726610.jpg
JS: getImageAsync()
JS: nativeImage: undefined
JS: get()
JS: set()
JS: on()
JS: off()
JS: addEventListener()
JS: removeEventListener()
JS: notify()
JS: notifyPropertyChange()
JS: hasListeners()
JS: _createPropertyChangeData()
JS: _emit()
JS: _getEventList()
JS: _indexOfListener()
JS: === dump(): finished ===

├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @nstudio/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

Question: Will this Resize then SaveToGallery?

Does this plugin resize the image before saving to the gallery or is it just like the nativescript-camera plugin and it saves to gallery first and then just returns a resized image asset?

Feedback: Awesome Work.

Hi there.

Great Job on the plugin!!

Camera preview distorted

I am using the demo code to implement a camera preview in my view, and the image is distorted (skewed)

Those are meant to be squares, and you can see in the captured image it is coming out OK. This warping is visible in a real device as well.

I am capturing with default options:

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

I have tried setting the height and width myself in the CameraPlus component, but even forcing it to be a square (see example below) there is still some skewing.

<CameraPlus height="250"
    width="250"
    debug="true"
    galleryPickerMode="single"
    showFlashIcon="true"
    showToggleIcon="true"
    showCaptureIcon="true"
    showGalleryIcon="true"
    confirmSaveText="CONFIRM!"
    confirmRetakeText="RETAKE!"
    (loaded)="camLoaded($event)"
    (toggleCameraEvent)="toggleCameraEvent($event)"
    (photoCapturedEvent)="photoCapturedEvent($event)"
    (imagesSelectedEvent)="imagesSelectedEvent($event)">
</CameraPlus>

My goal is to have the preview display well at full screen width, with a set height (about 1/4 the screen)

[No camera]

I created a project with
tns create camPluss --ng
Then copy necessary parts from demo-ng

With nativescript sidekick build and run on the device and emulator. But I am getting no camera. I couldn't figure it out. Anybody has that problem before?

JS: NativeScript-CameraPlus --- [video enabled:, false]
JS: NativeScript-CameraPlus --- [default camera:, rear]
JS: ***** cam loaded *****
JS: camera permission true
JS: camera audio permission true
JS: camera isAvailable: true
JS: camera getNumberOfCameras(): 2
JS: NativeScript-CameraPlus --- [No camera]
JS: camera hasFlash(): false
JS: NativeScript-CameraPlus --- [no camera]
JS: CamLoaded flashMode: null

Option to zoom and crop camera picture.

It would be nice to have an option to zoom and crop the camera picture. Something like:

<cp:CameraPlus showGalleryIcon="false" showFlashIcon="false" zoom="1.5">
</cp:cp:CameraPlus>

Allow camera plus (and included image picker) to be used in a modal (enhancement)

Currently you can't pass a modal page reference when opening camera plus in a modal. Thus, when you try to use the image picker it attempts to attach the image picker view to the parent page of the modal you opened for camera plus.

Here is how nativescript-imagepicker plugin solved the issue.

Currently you open the image picker with:

this.cam.chooseFromLibrary();

It would be great to be able to pass the current modal page reference like this:

this.cam.chooseFromLibrary(thisPage); where thisPage is a reference to the camera plus #modal page.

(iOS) Can't Nav after image capture

This may be an issue with my project specifically, but it works fine on Android.

I have a component that I use solely for presenting the camera and capturing an image. After capturing a photo and tapping the "Save" button, I attempt to navigate back using this.routerExtensions.back() within the photoCapturedEvent. When I do so the app freezes and does not navigate.

You can see/clone my test repo here: camTest
Tap the camera icon in the top right to execute the capture method.

Here's the debug output:

CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: CameraPlus MySwifty viewdidload
CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: CameraPlus doubleTapCameraSwitch:,true
CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: CameraPlus this.cameraDelegate:,<SwiftyDelegate: 0x10a506f00>
CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: CameraPlus initNativeView.
CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: CameraPlus xml width/height:,autoxauto
CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: CameraPlus no width set, defaulting to mainScreen.widthDIPs
CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: CameraPlus no height set, defaulting to mainScreen.heightDIPs
CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: CameraPlus after modifying xml width/height:,320x568
CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: CameraPlus resizing to:,320x568
CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: CameraPlus view.bounds:,320x568
CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: CameraPlus adding buttons...
CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: CameraPlus MySwifty viewDidAppear
CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: CameraPlus CameraPlus createNativeView
CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: CameraPlus video enabled:,false
CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: CameraPlus default camera:,rear
CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: CameraPlus <UIView: 0x1089215a0; frame = (0 0; 320 568); autoresize = W+H; layer = <CALayer: 0x108921780>>
CONSOLE LOG file:///app/capture/capture.component.js:35:20: ***** cam loaded *****
CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: CameraPlus CameraPlus flash enabled:,true
CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: CameraPlus MySwifty viewDidLayoutSubviews
CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: CameraPlus MySwifty viewDidLayoutSubviews
CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: CameraPlus MySwifty viewDidLayoutSubviews
CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: CameraPlus MySwifty viewDidLayoutSubviews
CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: CameraPlus MySwifty viewDidLayoutSubviews
CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: CameraPlus MySwifty viewDidLayoutSubviews
CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: CameraPlus MySwifty viewDidLayoutSubviews
CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: CameraPlus MySwifty viewDidLayoutSubviews
CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: CameraPlus CameraPlus takePic options:,
CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: CameraPlus swiftyCamDidTake:,<UIImage: 0x10a553e00> size {1080, 1920} orientation 3 scale 1.000000
CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: CameraPlus tookPhoto!
CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: CameraPlus MySwifty viewDidLayoutSubviews
CONSOLE LOG file:///app/capture/capture.component.js:49:20: PHOTO CAPTURED EVENT!!!

Improve README documentation with current API surface

Video capability not documented

Invalid camera object in loaded event

I don't know why I have invalid object in loaded event. It doesn't have any methods, that CameraPlus should have...

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

I've got:
ERROR TypeError: this.cam.getFlashMode is not a function

this.cam object looks like a view, but it is not camera :|

It behaves the same in Genymotion emulator and real device.

(iOS) SaveToGallery doesn't work

When executing the code below, the photo is still saved to the gallery.

this.cameraPlus.takePicture({ saveToGallery: false, confirm: true });

Saved picture is extremely low res and smeary

It's 144x176 pixels and really soft.
Here you can see an example. I was using the selfie cam.

https://ibb.co/k0r0H9

(iOS) Unable to tap buttons with overlay

It appears the buttons on the camera show behind the overlay content inside the <CameraPlus></CameraPlus> tags.

The markup below produces the images below. You can see the icons are behind the GridLayout. This causes the buttons to not be "tappable".

<GridLayout>
	<CameraPlus debug="true">
		<GridLayout style="background-color: orange; opacity: 0.75;">
		</GridLayout>
	</CameraPlus>
</GridLayout>

How to catch the photoCapturedEvent event properly ?

Hey there !
Firstly, thanks for your plugin, it's pretty useful in my project :)

I have an issue though, i can't manage to trigger the photoCapturedEvent event.
Here is my code :

main-page.xml

<Page class="page" loaded="pageLoaded" actionBarHidden="true" xmlns:Cam="@nstudio/nativescript-camera-plus">
    <StackLayout id="main_layout" class="wrapper">
            <Cam:CameraPlus id="camera"
                            confirmPhotos="false"
                            saveToGallery="false"
                            showCaptureIcon="false"
                            showGalleryIcon="false"
                            showToggleIcon="false"
                            showFlashIcon="false"
                            loaded="camLoaded"
                            photoCapturedEvent="photoCapturedEvent"
                            debug="false">
            </Cam:CameraPlus>
        <Button text="Cheese" tap="takePicFromCam" row="1" col="0" class="btn btn-primary" />
    </StackLayout>
</Page>

main-page.js

var app = require("application");
var platform = require("platform");
var frameModule = require("tns-core-modules/ui/frame");
var permissions = require( "nativescript-permissions" );
var camera = require("nativescript-camera");
var imageModule = require("ui/image");
var fromAsset = require("tns-core-modules/image-source");
var CameraPlus = require("@nstudio/nativescript-camera-plus");
const createViewModel = require("./main-view-model").createViewModel;

exports.pageLoaded = function(args) {
    // using the view model as binding context for the current page
    const mainViewModel = createViewModel();
    page.bindingContext = mainViewModel;
};

exports.camLoaded = function(eventData) {
    alert('camera loaded !');
};

exports.takePicFromCam = function(eventData) {
    let page = frameModule.topmost().currentPage;
    let cam = page.getViewById("camera");
    cam.takePicture({ saveToGallery: false });
};

exports.photoCapturedEvent = function(eventData) {
    console.log('photo captured !');
};

Seems like photoCapturedEvent is never triggered in my case. Could you tell me what i'm doing wrong ?

Plus, All the photos i'm taking are stored in the gallery of my phone, even if i set the property "saveToGallery" to false in my view or in the "takePicture" method... any idea why ?

video recorder

Could you please advise,

how to save video file after recording?
how to control video quality for video?

thank you

(Android) Buttons are not displayed

When displaying the camera only the gallery icon is displayed.

I'm using this markup:

<CameraPlus debug="true"></CameraPlus>

Here's the console output:

JS: CameraPlus video enabled:,false
JS: CameraPlus default camera:,rear
JS: ***** cam loaded *****
JS: CameraPlus no camera
JS: CameraPlus *** onSurfaceTextureAvailable ***
JS: this.cameraId = 0
JS: CameraPlus *** _initCamera ***
JS: this.cameraId = 0
JS: CameraPlus opening camera with id = 0
JS: ***** cam loaded *****
JS: CameraPlus supported focus modes = [fixed]
JS: CameraPlus *** _setCameraDisplayOrientation ***
JS: CameraPlus DISPLAY ROTATION = 0
JS: CameraPlus --- setting rotation for back facing camera --- 
JS:  --- info.orientation = 90
JS: CameraPlus result = 90
JS: CameraPlus targetRatio = 1.4222222222222223
JS: CameraPlus targetHeight = 1536
JS: CameraPlus size.width = 640, size.height = 480
JS: CameraPlus ratio = 1.3333333333333333
JS: CameraPlus size.width = 352, size.height = 288
JS: CameraPlus ratio = 1.2222222222222223
JS: CameraPlus size.width = 320, size.height = 240
JS: CameraPlus ratio = 1.3333333333333333
JS: CameraPlus size.width = 176, size.height = 144
JS: CameraPlus ratio = 1.2222222222222223
JS: CameraPlus optimalSize = android.hardware.Camera$Size@13f7860, optimalSize.width = 640, optimalSize.height = 480
JS: CameraPlus mPreviewSize = android.hardware.Camera$Size@13f7860
JS: CameraPlus _initDefaultButtons error,Error: Cannot convert object to Landroid/view/View$OnClickListener; at index 0

You can see in the screenshot below that only the gallery icon is visible

ios : how to get file location of photoCapturedEvent in ios ?

I wish to get like args.data._ios (tried this but not working)

Incompatibility with typescript 3.1.6

Hi,

I am trying to use your plugin within my project and I get the following error by only importing your module

import { CameraPlus } from '@nstudio/nativescript-camera-plus';

ERROR in node_modules/@nstudio/nativescript-camera-plus/index.d.ts(58,43): error TS1039: Initializers are not allowed in ambient contexts.
node_modules/@nstudio/nativescript-camera-plus/index.d.ts(63,47): error TS1039: Initializers are not allowed in ambient contexts.

I am using the TypeScript Version 3.1.6. I guess this is the issue.
Does anyone has the same issue ? Is there a workaround ?

Thanks a lot,

<CameraPlus> always on top?

Trying to insert a <Label> above <CameraPlus> but <CameraPlus> is always on top of the view and <Label> is not visible. Is this by design?

	<StackLayout>
	   <Label text="My Camera"></Label>
	</StackLayout>
	<StackLayout>
	    <CameraPlus>
             </CameraPlus>
        </StackLayout>

Error - unable to run camera on ios 12 - AVCam "Unable to capture media"

The camera doesn't work when I upgrade from ios 11 to 12. I get the following message:

AVCam "Unable to capture media"

This is on my app as well as the demo app. On the demo app I don't see anything enlightening in the logs:

uccessfully synced application org.nativescript.demo on device E2CCB177-B0C4-48E8-965E-56F81463BA75. CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: NativeScript-CameraPlus --- MySwifty viewdidload CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: NativeScript-CameraPlus --- doubleTapCameraSwitch:,true CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: NativeScript-CameraPlus --- this.cameraDelegate:,<SwiftyDelegate: 0x6000017281e0> CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: NativeScript-CameraPlus --- initNativeView. CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: NativeScript-CameraPlus --- xml width/height:,autoxauto CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: NativeScript-CameraPlus --- no width set, defaulting to mainScreen.widthDIPs CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: NativeScript-CameraPlus --- no height set, defaulting to mainScreen.heightDIPs CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: NativeScript-CameraPlus --- after modifying xml width/height:,375x667 CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: NativeScript-CameraPlus --- resizing to:,375x667 CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: NativeScript-CameraPlus --- view.bounds:,375x667 CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: NativeScript-CameraPlus --- adding buttons... CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: NativeScript-CameraPlus --- adding toggle/switch camera button... CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: NativeScript-CameraPlus --- MySwifty viewDidAppear CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: NativeScript-CameraPlus --- CameraPlus createNativeView CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: NativeScript-CameraPlus --- video enabled:,false CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: NativeScript-CameraPlus --- default camera:,rear CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: NativeScript-CameraPlus --- <UIView: 0x7fe987c411d0; frame = (0 0; 375 667); autoresize = W+H; layer = <CALayer: 0x60000156c320>> CONSOLE LOG file:///app/main-page.js:12:16: cam loaded event CONSOLE LOG file:///app/main-page.js:15:20: flashMode in loaded event = off CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: NativeScript-CameraPlus --- MySwifty viewDidLayoutSubviews CONSOLE LOG file:///app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:17:20: NativeScript-CameraPlus --- MySwifty viewDidLayoutSubviews CONSOLE LO

How to set Static Properties such as defaultCamera on Angular apps?

Hi guys from nstudio. I'm trying to set the defaultCamera to 'front', but it doesn't work for me.

I've tried setting on the html, like so and nothing changes:

Attempt 1:

<CameraPlus defaultCamera="front"></CameraPlus>

Attempt 2:

class CaptureComponent {
    defaultCamera: string = 'front';
	// ...
}

<CameraPlus [defaultCamera]="defaultCamera"></CameraPlus>

Is there another way of doing that? Should I set while registering the Element, how to do so?

PS: For the time being, I've edited the source file, but I would like to set properly avoiding bugs while updating from npm.

node_modules/@nstudio/nativescript-camera-plus/camera-plus.common.js:63

Thanks

Android constant RESULT_CODE_PICKER_IMAGES is too high

I'm trying the demo code in a NS 5 project, and when I use the function chooseFromLibrary on Android I am getting the following error:

JS: ERROR Error: Uncaught (in promise): Error: java.lang.IllegalArgumentException: Can only use lower 16 bits for requestCode
JS: android.support.v4.app.FragmentActivity.checkForValidRequestCode(FragmentActivity.java:806)
JS: android.support.v4.app.FragmentActivity.startActivityForResult(FragmentActivity.java:751)
JS: com.tns.Runtime.callJSMethodNative(Native Method)
JS: com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1116)
JS: com.tns.Runtime.callJSMethodImpl(Runtime.java:996)
JS: com.tns.Runtime.callJSMethod(Runtime.java:983)
JS: com.tns.Runtime.callJSMethod(Runtime.java:967)
JS: com.tns.Runtime.callJSMethod(Runtime.java:959)
JS: com.tns.gen.java.lang.Object_vendor_97559_32_ClickListenerImpl.onClick(Object_vendor_97559_32_ClickListenerImpl.java:17)
JS: android.view.View.performClick(View.java:6256)
JS: android.view.View$PerformClick.run(View.java:24697)
JS: android.os.Handler.handleCallback(Handler.java:789)
JS: android.os.Handler.dispatchMessage(Handler.java:98)
JS: android.os.Looper.loop(Looper.java:1...

It is apparently a limit set in the Android support library, and this throws an exception as it is currently set to 415161.

More info: https://stackoverflow.com/a/33331459/4747587

Hw to get rid off createImageConfirmationDialog

Hello,

I'm working with this Plug and its great just onething is giving me a headache. On Android after i took a picture come this little popup with says confirm or retake. I tried a few hours now to get rid of it somehw, I coulnd't figure it out! So please help :D

camera preview size is not proper(iOS)

Above is the attached screenshot from iPad, Wanted to change the width of the preview camera....

iOS: AspectRatio is wrong on images from gallery

When I pick an image from gallery the aspect ratio is the same as the screen size (1080*1920 on an iPhone 7).

This error can be tested by running the plugin on an ios simulator and picking one of the default images from the gallery. I will see that the image is stretched in height.

Even if I use the chooseFromLibrary function with the options { width: 640, height: 640, keepAspectRatio: true } the picked image is stretched.

Event object has a different interface

Hello everyone! Thanks for your library.
I`ve tried to make the same ng-demo as in your repository but got an error (i guess).
The object from the event that in https://github.com/vasyliv/test-nativescript-camera-plus/blob/master/app/home/home.component.ts#L32 doesn't have interface CameraPlus, it has interface ProxyViewContainer (that doesn't have method "takePicture")

expose videoQuality options to CameraPlus

Hello, i'd try to use your module for video recording, could you expose next properties for swifty:

videoDevice: AVCaptureDevice;

videoDeviceInput: AVCaptureDeviceInput;

videoQuality: VideoQuality;

thank you

android: flash toggle click fail

pixel2

JS: CameraPlus setting flash mode params
JS: CameraPlus toggleFlash error,Error: java.lang.RuntimeException: setParameters failed
JS:     android.hardware.Camera.native_setParameters(Native Method)
JS:     android.hardware.Camera.setParameters(Camera.java:1945)
JS:     com.tns.Runtime.callJSMethodNative(Native Method)
JS:     com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1088)
JS:     com.tns.Runtime.callJSMethodImpl(Runtime.java:970)
JS:     com.tns.Runtime.callJSMethod(Runtime.java:957)
JS:     com.tns.Runtime.callJSMethod(Runtime.java:941)
JS:     com.tns.Runtime.callJSMethod(Runtime.java:933)
JS:     com.tns.gen.android.view.View_OnClickListener.onClick(View_OnClickListener.java:11)
JS:     android.view.View.performClick(View.java:6294)
JS:     android.view.View$PerformClick.run(View.java:24770)
JS:     android.os.Handler.handleCallback(Handler.java:790)
JS:     android.os.Handler.dispatchMessage(Handler.java:99)
JS:     android.os.Looper.loop(Looper.java:164)
JS:     android.app.ActivityThread.main(ActivityThread.java:6494)
JS:     java.lang.reflect.Method.invoke(Native Method)
JS:     com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:438)
JS:     com.android.internal.os.ZygoteInit.main(ZygoteInit.java:807)

(iPad) Unable to get camera to fill screen

Hi, great plugin. Thank you!

On an iPad (iPad pro 10.5) I am unable to fill the screen. The camera fills the entire height of the screen, but is limited in width as per this screenshot.

<StackLayout width="100%">
    <CameraPlus debug="true"
        galleryPickerMode="single" 
        showFlashIcon="true" 
        showToggleIcon="false" 
        showCaptureIcon="true" 
        showGalleryIcon="true"
        saveToGallery="false"
        confirmPhotos="true"
        (loaded)="camLoaded($event)" 
        (toggleCameraEvent)="toggleCameraEvent($event)" 
        (photoCapturedEvent)="photoCapturedEvent($event)"
        (imagesSelectedEvent)="imagesSelectedEvent($event)">
    </CameraPlus>
    </StackLayout>

Cheers...

Getting an error when run camera demo on real iPhone: "The data couldn’t be read because it isn’t in the correct format."

Hi, there!
When I run a camera demo on iOS simulator everything works fine and Sidekick doesn’t fail. But Sidekick fails when I try to run the demo on a connected iPhone. Actually, the same error appears when I run app on a simulator but it doesn’t crush the installation process.
I've tired in Sidekick two possible options to build an app: local and cloud. Both of those approaches failed.

Here is the error The data couldn’t be read because it isn’t in the correct format:

2018-07-30 12:35:23.828 xcodebuild[52398:866737] [MT] IDEDistribution: Step failed: <IDEDistributionPackagingStep: 0x7fa5288d1360>: Error Domain=NSCocoaErrorDomain Code=3840 "No value." UserInfo={NSDebugDescription=No value., NSFilePath=/var/folders/d6/spp4t8fx1470jjcpd2chbshh0000gn/T/ipatool-json-filepath-0zN6BI}
error: exportArchive: The data couldn’t be read because it isn’t in the correct format.
Error Domain=NSCocoaErrorDomain Code=3840 "No value." UserInfo={NSDebugDescription=No value., NSFilePath=/var/folders/d6/spp4t8fx1470jjcpd2chbshh0000gn/T/ipatool-json-filepath-0zN6BI}

I've checked this issue on GitHub, but the one didn’t help me NativeScript/nativescript-dev-webpack#325 (comment).

tns info

 Getting NativeScript components versions information...
✔ Component nativescript has 4.1.2 version and is up to date.
✔ Component tns-core-modules has 4.1.1 version and is up to date.
⚠ Update available for component tns-android. Your current version is 4.0.1 and the latest available version is 4.1.3.
✔ Component tns-ios has 4.1.0 version and is up to date.

xcodebuild -version

Xcode 9.2
Build version 9C40b

ruby -v

ruby 2.4.2p198 (2017-09-14 revision 59899) [x86_64-darwin16]

Are there any ideas how to fix that?
Thank you in advance!

(Android) Live preview delay on taking image

Hi, when using this on an Android device (Samsung S6 edge) I noticed there's around a 1-3 second delay on the actual preview when taking a picture. Is there anything we can to do reduce the delay?

I assumed it may have been the confirmation dialog. But it still has a few seconds delay with cam.takePicture({confirm: false});

Thanks,

Jack

[Performance] takes long time to start camera at first time init

Hi, thanks for this great lib.

nativescript-camera-plus currently takes long time to start camera at first time init on android (a low end testing devices, it takes about 3 secs to startup camera page). I put it on a Modal Page with camera only. However, if I reopen the same modal, camera will render image instantly.

It seems that nativescript-camera-plus need some time to cold start necessary framework in order to make camera work. Is there any way we can Initialize it on application startup?

Create & destroy programmatically (slow bootup)?

Because the camera has such a slow start up time (a few seconds), page transitions are very delayed.

Is there a way to create the camera object programmatically, so that way I can transition to the new page smoothly then put up a loading window while the camera is booting up?

Also, is the camera object being destroyed when it is not visible (page change)? When I return to the camera page it is already there...so it either exists already or it loads extremely fast after the first load. If the same instance is still loaded is there a way to destroy it so I don't have a memory leak in my program?

Cannot get demo to work

I've tried using Sidekick, the command line and Xcode but I just can't get it to build and run. I have gotten it to the point where I see the splash screen but that's it. Any ideas or help appreciated.
Thanks

ERROR TypeError: Cannot read property 'takePicture' of undefined

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

this my html
<AbsoluteLayout height="100%" width="100%"> <GridLayout rows="250, auto, *"> <CameraPlus height="100%" width="100%" margin="0" debug="true" galleryPickerMode="single" showFlashIcon="false" showToggleIcon="true" showCaptureIcon="false" showGalleryIcon="false" (photoCapturedEvent)="photoCapturedEvent($event)" debug="true" defaultCamera="front"> </CameraPlus> </GridLayout> <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> </AbsoluteLayout>
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);
}

}
`

Error trying the demo

Before 'npm run demo.ng.ios.device'

Installing pods...
Analyzing dependencies
Pre-downloading: SwiftyCam from https://github.com/NathanWalker/SwiftyCam.git
Downloading dependencies
Installing QBImagePickerController (3.4.0)
Installing SwiftyCam (2.3.1)
[!] Unable to determine Swift version for the following pods:

SwiftyCam does not specify a Swift version and none of the targets (demong) integrating it have the SWIFT_VERSION attribute set. Please contact the author or set the SWIFT_VERSION attribute in at least one of the targets that integrate this pod.

Taked photo has a screen resolution, is impossible to get full camera resolution

When I take a photo, the resolution of jpg is the same of the screen, I need to use the camera resolution.
I use this code:

<Page class="page" navigatingTo="onNavigatingTo" loaded="onLoaded" 
    xmlns="http://schemas.nativescript.org/tns.xsd" 
    xmlns:Cam="@nstudio/nativescript-camera-plus" actionBarHidden="true">

    <!-- <Button icon="res://menu" tap="onDrawerButtonTap"></Button> -->

    <GridLayout class="page-content">
        <Cam:CameraPlus id="camera" width="3000" height="2000" confirmPhotos="false" saveToGallery="true" showCaptureIcon="false" showGalleryIcon="false" showToggleIcon="false" showFlashIcon="false" loaded="camLoaded" debug="false">
        </Cam:CameraPlus>
        <Image id="testImagePickResult" src="{{ testImage }}" stretch="aspectFit" />
        <Image src="res://frame1" textAlignment="center" stretch="aspectFit"></Image>
        <Image src="res://camera" textAlignment="center" verticalAlignment="bottom" height="50" tap="takePicFromCam"></Image>
    </GridLayout>
</Page>

const app = require("tns-core-modules/application");
const CameraPlus = require('@nstudio/nativescript-camera-plus').CameraPlus;
const observableModule = require("tns-core-modules/data/observable");
const ImageAsset = require('tns-core-modules/image-asset');
const imageSourceModule = require("tns-core-modules/image-source");
//const screen = require('tns-core-modules/platform');
const topmost = require('tns-core-modules/ui/frame');
const Image = require('tns-core-modules/ui/image');
const Page = require('tns-core-modules/ui/page');
const platformModule = require("tns-core-modules/platform");
const statusBar = require("nativescript-status-bar");
const frameModule = require("tns-core-modules/ui/frame");
const fileSystemModule = require("tns-core-modules/file-system");
var page;

const viewModel = observableModule.fromObject({
    cameraHeight: 200,
    testImage: null
});

function onNavigatingTo(args) {
    console.log(`onNavigatingTo`);
    page = args.object;

    statusBar.hide();

    viewModel.cameraHeight = platformModule.screen.mainScreen.heightDIPs;

    page.bindingContext = viewModel;
}
exports.onNavigatingTo = onNavigatingTo;

function onLoaded(args) {
    console.log(`onLoaded`);

    let cam = page.getViewById("camera");

    cam.on(CameraPlus.photoCapturedEvent, (event) => {
        photoCapturedEvent(event);
    });
}
exports.onLoaded = onLoaded /*  */ ;

function camLoaded(args) {
    console.log(`cam loaded event`);
    const cam = args.object;

    try {
        const flashMode = args.object.getFlashMode();
        console.log(`flashMode in loaded event = ${flashMode}`);
    }
    catch (e) {
        console.log(e);
    }
}
exports.camLoaded = camLoaded;

function takePicFromCam(eventData) {
    let page = frameModule.topmost().currentPage;
    let cam = page.getViewById("camera");

    cam.takePicture({ saveToGallery: true, confirm: false, keepAspectRatio: false, width: 4160, height: 3120 });
};
exports.takePicFromCam = takePicFromCam;

function photoCapturedEvent(e) {
    console.log('photo captured !');

    console.log(e.data.android); // the path of the captured file, eg. "/storage/emulated/0/Android/data/COM.YOURAPP.NAME/files/IMG_1535045496885.jpg"

    try {
        const imageFromLocalFile = imageSourceModule.fromFile(e.data.android);
        console.log(imageFromLocalFile);

        let filePhoto = fileSystemModule.File.fromPath(e.data.android);
    }
    catch (err) {
        console.log("Error: " + err);
    }
};
exports.photoCapturedEvent = photoCapturedEvent;

(Android) Unhandled Promise rejection: Cannot read property 'ExifInterface' of undefined

(Android) When taking a pic i'm getting this error:

Unhandled Promise rejection: Cannot read property 'ExifInterface' of undefined ; Zone: <root> ; Task: null ; Value: TypeError: Cannot read property 'ExifInterface' of undefined TypeError: Cannot read property 'ExifInterface' of undefined

at Object.getOrientationFromBytes (file:///data/data/com.mypackage.pg/files/app/tns_modules/@nstudio/nativescript-camera-plus/helpers.js:157:42)

at CameraPlus.<anonymous> (file:///data/data/com.mypackage.pg/files/app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.js:1013:50)

at step (file:///data/data/com.mypackage.pg/files/app/tns_modules/@nstudio/nativescript-camera-plus/async-await.js:101:35)

at Object.next (file:///data/data/com.mypackage.pg/files/app/tns_modules/@nstudio/nativescript-camera-plus/async-await.js:48:28)

at file:///data/data/com.mypackage.pg/files/app/tns_modules/@nstudio/nativescript-camera-plus/async-await.js:29:79

at new ZoneAwarePromise (file:///data/data/com.mypackage.pg/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:902:29)

at global.__awaiter (file:///data/data/com.mypackage.pg/files/app/tns_modules/@nstudio/nativescript-camera-plus/async-await.js:5:20)

at CameraPlus._finishSavingAndConfirmingPicture (file:///data/data/com.mypackage.pg/files/app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.js:990:16)

at CameraPlus._onPictureTaken (file:///data/data/com.mypackage.pg/files/app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.js:976:18)

at CameraPlus.<anonymous> (file:///data/data/com.mypackage.pg/files/app/tns_modules/@nstudio/nativescript-camera-plus/camera-plus.js:166:30)

at step (file:///data/data/com.mypackage.pg/files/app/tns_modules/@nstudio/nativescript-camera-plus/async-await.js:101:35)

at Object.next (file:///data/data/com.mypackage.pg/files/app/tns_modules/@nstudio/nativescript-camera-plus/async-await.js:48:28)

at file:///data/data/com.mypackage.pg/files/app/tns_modules/@nstudio/nativescript-camera-plus/async-await.js:29:79

at new ZoneAwarePromise (file:///data/data/com.mypackage.pg/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:902:29)

at global.__awaiter (file:///data/data/com.mypackage.pg/files/app/tns_modules/@nstudio/nativescript-camera-plus/async-await.js:5:20)`

TNS info:
Nativescript: 5.0
Tns-core-modules: 5.0.1
Tns-android: 5.0
Android-sdk: 23

Overlar PNG frame to take photos like snapchat effects

Hi!

Can I overlay a transparent PNG and take/save the picture with the overlayed PNG?
Thanks!

Video Recoder not working

hi,
I tried to run the app from demo folder for ios and could find that video recorder is not working.

(iOS/Android) Support Multi Language

I need to be able to support multiple languages, specifically English, Spanish, and French.

I think the only place text is displayed to the user is for the the confirmation dialogs after photo capture.

How to get path of saved video?

I've used your plugin, but stick with problem:
How to get the path of the saved video?

bad base-64

Just added the plugin to my Android app and, testing with real device, as soon as I open the modal which contains the plugin, an exception is thrown:

ERROR Error: Uncaught (in promise): Error: java.lang.IllegalArgumentException: bad base-64
    android.util.Base64.decode(Base64.java:161)
    android.util.Base64.decode(Base64.java:136)
    android.util.Base64.decode(Base64.java:118)
    com.tns.Runtime.callJSMethodNative(Native Method)
    com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1088)
    com.tns.Runtime.callJSMethodImpl(Runtime.java:970)
    com.tns.Runtime.callJSMethod(Runtime.java:957)
    com.tns.Runtime.callJSMethod(Runtime.java:941)
    com.tns.Runtime.callJSMethod(Runtime.java:933)
    com.tns.gen.java.lang.Runnable.run(Runnable.java:10)
    android.os.Handler.handleCallback(Handler.java:739)
    android.os.Handler.dispatchMessage(Handler.java:95)
    android.os.Looper.loop(Looper.java:158)
    android.app.ActivityThread.main(ActivityThread.java:7230)
    java.lang.reflect.Method.invoke(Native Method)
    com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1230)
    com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1120)
Error: java.lang.IllegalArgumentException: bad base-64
    android.util.Base64.decode(Base64.java:161)
    android.util.Base64.decode(Base64.java:136)
    android.util.Base64.decode(Base64.java:118)
    com.tns.Runtime.callJSMethodNative(Native Method)
    com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1088)
    com.tns.Runtime.callJSMethodImpl(Runtime.java:970)
    com.tns.Runtime.callJSMethod(Runtime.java:957)
    com.tns.Runtime.callJSMethod(Runtime.java:941)
    com.tns.Runtime.callJSMethod(Runtime.java:933)
    com.tns.gen.java.lang.Runnable.run(Runnable.java:10)
    android.os.Handler.handleCallback(Handler.java:739)
    android.os.Handler.dispatchMessage(Handler.java:95)
    android.os.Looper.loop(Looper.java:158)
    android.app.ActivityThread.main(ActivityThread.java:7230)
    java.lang.reflect.Method.invoke(Native Method)
    com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1230)
    com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1120)
    at ImageSource.module.exports.ImageSource.loadFromBase64 (file:///data/data/br.my.app/files/app/vendor.js:22182:45)
    at file:///data/data/br.my.app/files/app/vendor.js:22190:27
    at new ZoneAwarePromise (file:///data/data/br.my.app/files/app/vendor.js:72708:29)
    at ImageSource.module.exports.ImageSource.fromBase64 (file:///data/data/br.my.app/files/app/vendor.js:22189:16)
    at Image.module.exports.ImageBase._createImageSourceFromSrc (file:///data/data/br.my.app/files/app/vendor.js:74987:34)
    at Image.module.exports.Image._createImageSourceFromSrc (file:///data/data/br.my.app/files/app/vendor.js:74841:60)
    at Image.module.exports.Image.(anonymous function) (file:///data/data/br.my.app/files/app/vendor.js:74913:14)
    at Image.Property.set [as src] (file:///data/data/br.my.app/files/app/vendor.js:19488:44)
    at ViewUtil.module.exports.ViewUtil.setPropertyInternal (file:///data/data/br.my.app/files/app/vendor.js:78489:32)
    at ViewUtil.module.exports.ViewUtil.setProperty (file:///data/data/br.my.app/files/app/vendor.js:78468:18)
    at EmulatedRenderer.module.exports.NativeScriptRenderer.setProperty (file:///data/data/br.my.app/files/app/bundle.js:51204:30)
    at DebugRenderer2.module.exports.DebugRenderer2.setProperty (file:///data/data/br.my.app/files/app/vendor.js:15424:23)
    at setElementProperty (file:///data/data/br.my.app/files/app/vendor.js:10806:19)
    at checkAndUpdateElementValue (file:///data/data/br.my.app/files/app/vendor.js:10725:13)
    at checkAndUpdateElementInline (file:///data/data/br.my.app/files/app/vendor.js:10659:24)

TNS 3.4.2

(Android) overlay showing behind camera view

I have the following markup in angular:

<CameraPlus debug="true" galleryPickerMode="single" confirmPhotos="true"
	(loaded)="camLoaded($event)" 
	(toggleCameraEvent)="toggleCameraEvent($event)" 
	(photoCapturedEvent)="photoCapturedEvent($event)"
        (imagesSelectedEvent)="imagesSelectedEvent($event)" >

	<GridLayout rows="*, auto, *" columns="*, auto, *">
		<GridLayout colSpan="3" class="bg-overlay"></GridLayout>
		<GridLayout row="1" class="bg-overlay"></GridLayout>
		<GridLayout row="1" col="2" class="bg-overlay"></GridLayout>
		<GridLayout row="2" colSpan="3" class="bg-overlay"></GridLayout>
		<Label row="1" col="1" class="overlay-label" text="📷➕"></Label>
	</GridLayout>
</CameraPlus>

Before the camera loads you can see the label, but once the camera view is loaded it appears to cover the label. ~~I am not currently able to test this on iOS.~~

problem with LG

Hi, I'm wanting to use the plugin in a LG Q6 cell phone and when I open the camera I get the following error

How could I solve this problem?

Thanks!

[IOS] galleryPickerMode not working in modal page

hello
thank you for this useful plugin, it helped me a lot.

I have one small problem when I use this camera in Modal Page the galleryPickerMode stops working.

is there any work around this problem?

regards

camera cannot take image after i use bluetooth on notify

Hi , i was going to do something like when i click on Bluetooth button, it will get the this.cam.takepicture.
but i facing the problem.

it appeared error like this.

System.err: com.tns.NativeScriptException:
System.err: Calling js method onCharacteristicChanged failed
System.err: TypeError: Cannot read property 'takePicture' of undefined
System.err: File: "file:///data/data/org.nativescript.Beacon/files/app/page/fancyCamera.page.js, line: 14, column: 21
System.err: StackTrace:
System.err: Frame: function:'FancyCameraPageComponent.onData', file:'file:///data/data/org.nativescript.Beacon/files/app/page/fancyCamera.page.js', line: 14, column: 22
System.err: Frame: function:'onCharacteristicChanged', file:'file:///data/data/org.nativescript.Beacon/files/app/tns_modules/nativescript-bluetooth/bluetooth.js', line: 348, column: 19
System.err: at com.tns.Runtime.callJSMethodNative(Native Method)
System.err: at com.tns.Runtime.access$2300(Runtime.java:34)
System.err: at com.tns.Runtime$3.run(Runtime.java:1112)
System.err: at android.os.Handler.handleCallback(Handler.java:733)
System.err: at android.os.Handler.dispatchMessage(Handler.java:95)
System.err: at android.os.Looper.loop(Looper.java:149)
System.err: at android.app.ActivityThread.main(ActivityThread.java:5061)
System.err: at java.lang.reflect.Method.invokeNative(Native Method)
System.err: at java.lang.reflect.Method.invoke(Method.java:515)
System.err: at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:794)
System.err: at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:610)
System.err: at dalvik.system.NativeStart.main(Native Method)
ActivityManager: Process org.nativescript.Beacon (pid 7745) has died.

here is my code.

startNotifyButton(){
bluetooth.startNotifying({
peripheralUUID: "FF:FF:90:01:B1:EF",
serviceUUID: "ffe0",
characteristicUUID: "ffe1",
onNotify: function (result) {
try
{
var data = new Uint8Array(result.value);
console.log('notify: '+JSON.stringify(data));
this.cam.takePicture({ saveToGallery: true });
}
catch(e)
{
alert('notify value not readable: '+e.message);
}
}).then(function() {
console.log("subscribed for notifications");
});
}