feat(camera-preview): add camera-preview

[rbouleau]

Add camera-preview-plugin to ionic-native

[ihadeed]

Hey there,

Thanks for the PR.

1. The property Direction is not really needed, but it's not a big deal.
2. All the functions should have the following decorator instead, since we aren't wrapping any callback function parameters: @Cordova({ sync: true })
3. Add : void after each function to help IDE's know that they shouldn't expect anything back from invoking these functions
4. Missing the following functions: setFlashMode, setColorEffect, disable ... See https://github.com/westonganger/cordova-plugin-camera-preview/blob/master/www/CameraPreview.js

Also two more functions are missing: setOnPictureTakenHandler and setOnLogHandler .. but I think these should be wrapped differently to return back an Observable instead. Perhaps something like:

@Cordova({
  observable: true
})
static setOnPictureTakenHandler(): Observable<any> { return; }

It can be used like this:

CameraPreview.setOnPictureTakenHandler().subscribe((data) => console.log(data));

[rbouleau]

Hi,
Thanks for your feedback.

I create the PR based on the npm package already distributed (0.0.8) and not from the GitHub repository (0.0.9). That is why some functions are missing. I will add them.

setOnLogHandler, disable is neither implemented for Android nor for iOS. Should I expose them ?

[ihadeed]

If they're not implemented yet then there is no need to add wrappers for them.

Thanks again @rbouleau

[rbouleau]

Thanks for you answer @ihadeed

I push a new commit related to your remarks.

[ihadeed]

Perfect!

Thank you @rbouleau

[ranbuch]

Hi,

I'm trying to use the camera-preview plugin with ionic 2.

Right now I'm on "ionic-native": "^1.3.9" and able to:

import {CameraPreview} from 'ionic-native';

but when I'm trying t use it inside my controller like this:

this.cameraPreview.setOnPictureTakenHandler((result) => { this.onCameraPreview(result); });

I'm getting:
Error TS2339: Property 'setOnPictureTakenHandler' does not exist on type 'CameraPreview'.

On debugging the Object.keys(this.cameraPreview) is [] (empty array) meaning this.cameraPreview is an empty object.

I'm running 0.0.8 version of the plugin.

Any ideas of how to fix?

Thanks!

[ihadeed]

this.cameraPreview ? Are you injecting it?

[ihadeed]

To use setOnPictureTakenHandler you need to use code that looks like this:

CemraPreview.setOnPictureTakenHandler().subscribe((data) => {
  // do something with data
});

That method returns back an observable that you have to subscribe to and provide the callback there.

[ranbuch]

Thank you so much for your quick response!

@Component({
  templateUrl: 'build/pages/hello-ionic/hello-ionic.html',
  providers: [CameraPreview]
})


export class HelloIonicPage {
constructor(public cameraPreview: CameraPreview) {

}

onCameraPreview(result: Array<any>) {
    this.originalPicture = result[0];
    this.previewPicture = result[0];
}

startCapturing(side) {
    this.cameraPreview['setOnPictureTakenHandler']((result) => {
      this.onCameraPreview(result);
    });
}
}

[ihadeed]

import {CordovaPreview} from 'ionic-native';

@Component({
  templateUrl: 'build/pages/hello-ionic/hello-ionic.html'
})


export class HelloIonicPage {
constructor() { }

onCameraPreview(result: Array<any>) {
    this.originalPicture = result[0];
    this.previewPicture = result[0];
}

startCapturing(side) {
    CameraPreview.setOnPictureTakenHandler().subscribe((result) => {
      this.onCameraPreview(result);
    });
}
}

[ihadeed]

Ionic Native wrappers aren't Injectable at the moment. They are just static classes (some are instance based).

[ranbuch]

When I'm removing the javascript providers: [CameraPreview] I'm getting an error:
ORIGINAL EXCEPTION: No provider for CameraPreview!

[ranbuch]

Oh I see, I need to change the constructor and call CameraPreview without this . . .
Let me check :)

[ranbuch]

I'm getting: cordova_not_available.
Should I test in on a device?

[ranbuch]

On device I'm getting: plugin_not_installed

[ihadeed]

Yes you must be running on a device or an emulator to use any of the plugins.

[ranbuch]

Yes, I'm using ionic-preview app and ionic upload.
Also I've ran:
ionic plugin add cordova-plugin-camera-preview
before building and uploading the app.

[ihadeed]

I haven't used Ionic View in awhile, but AFAIK it doesn't support plugins. You need to use ionic run android or ionic emulate android to test this.

[ihadeed]

This PR is not the right place to discuss these things. If you're still experiencing issues consider one of the following options depending on what you are having trouble with:

• Open an issue at this repo
• Create a discussion at the Ionic Forums

[ranbuch]

Oh, Let me setup the environments please.

Actually I've already created a discussion at the Ionic Forums:
https://forum.ionicframework.com/t/ionic-2-camerapreview-cordova-plugin-not-in-ionic-native/58424
I'll continue asking there.

Thank you so much for your help!

[developper89]

Hello, i've installed the plugin with : ionic plugin add cordova-plugin-camera-preview
and got com.mbppower.camerapreview installed. Looking at : /plugins/com.mbppower.camerapreview/www/CameraPreview.js
the startCamera method is written like this:
CameraPreview.startCamera = function(rect, defaultCamera, tapEnabled, dragEnabled, toBack, alpha) { if (typeof(alpha) === 'undefined') alpha = 1; exec(null, null, PLUGIN_NAME, "startCamera", [rect.x, rect.y, rect.width, rect.height, defaultCamera, !!tapEnabled, !!dragEnabled, !!toBack, alpha]); };

and according to the type file camera-preview.d.ts this method is waiting an object as argument :
static startCamera(options: CameraPreviewOptions): void;
after updating ionic-native to 1.3.9 and launching the phone only the four first params : rect.x, rect.y, rect.width, rect.height are applied as expected. So actually com.mbppower.camerapreview is unusable in ionic2 Typescript without hacking the plugins js source.
Maybe i'm missing some updates , please let me know thanks..

[ranbuch]

I'm running
"cordova-plugin-camera-preview": "0.0.8"
and ionic-native 1.3.9 and I have no problems running this:

CameraPreview.takePicture({maxWidth: window.innerWidth, maxHeight: window.innerHeight});

or this:

CameraPreview.startCamera({x: 0, y: 0, width: 300, height:300, camera: "back", tapPhoto: true, previewDrag: true, toBack: false, alpha: 1});

FYI another issue:
cordova-plugin-camera-preview/cordova-plugin-camera-preview#128