Ionic-native: camera-preview plugin - plugin_not_installed

[ranbuch]

I've installed this plugin:
http://ionicframework.com/docs/v2/native/camerapreview/

ionic plugin add cordova-plugin-camera-preview

and written this code:

import { Component } from '@angular/core';
import { CameraPreview, CameraPreviewRect } from 'ionic-native';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  logs: Array<string>;
  isCamOn: boolean

  constructor(public navCtrl: NavController) {
    this.logs = [];
    this.isCamOn = false;

    try {
      CameraPreview.setOnPictureTakenHandler().subscribe((result) => {
        this.logs.push('setOnPictureTakenHandler');
        this.onCameraPreview(result);
      });
    }
    catch (e) { 
      // exception is thrown and e is equal to "plugin_not_installed"
      this.logs.push('error: ' + e);
    }
  }
  onCameraPreview(result: Array<any>) {
    this.logs.push('results!');
    let self = this;
    let img1 = new Image();
    img1.onload = () => {
      self.logs.push('img1: ' + this['width'] + 'x' + this['height']);
    }
    img1.src = result[0];
    this.logs.push('startCapturing init');
  }

  takePicture() {
    this.logs.push('takePicture 1');
    CameraPreview.takePicture({ maxWidth: 4000, maxHeight: 4000 });
    this.logs.push('takePicture 2');
  }

  toggleCamera() {
    if (this.isCamOn) {
      document.body.classList.remove('camera-on');
      CameraPreview.stopCamera();
    }
    else {
      document.body.classList.add('camera-on');
      let cameraRect: CameraPreviewRect = {
        x: 0,
        y: 0,
        width: window.innerWidth,
        height: window.innerHeight
      };


      // start camera
      CameraPreview.startCamera(
        cameraRect,
        'back',
        false,
        false,
        true,
        1
      );
    }
    this.isCamOn = !this.isCamOn;
  }
}

The toggleCamera() function is working fine, I can actually see the camera preview in the background but can't subscribe to the setOnPictureTakenHandler event due to this error:

This is the line of code that throws the error:

try {
      CameraPreview.setOnPictureTakenHandler().subscribe((result) => {
        this.logs.push('setOnPictureTakenHandler');
        this.onCameraPreview(result);
      });
    }
    catch (e) { 
      // exception is thrown and e is equal to "plugin_not_installed"
      this.logs.push('error: ' + e);
    }

[ranbuch]

If I'm delaying the subscribe action in 3 seconds there's no problem.
Just use setTimeout with 3000 or something like that.
Anyway I still think it's a bug . . .

[biko8]

Hello ranbuch, good to read somebody talking about this plugin.

I'm trying to install but it doesn't works.

From where you read how to implement on ionic v2? Oficial docs are very confusing.

In what platforms you are developing? For me on ios it crashes, and for android I can't see preview of camera.

Can you show me part of html that loads element? for load preview? or it is loading on background, I don't understand this part.

Thank you!

[ranbuch]

Hi @biko8 ,
Honestly I haven't tried it on IOS yet.
On android it is working for me so far.
for the background option to work put this on the app.scss file and add the CSS class camera-on to the body element when the camera preview is on.

body.camera-on {
    background-color: transparent !important;
    ion-app.md {
        background-color: transparent;
    }

    ion-content {
        background-color: transparent;
    }

    ion-tabs {
        .tabbar.show-tabbar {
        display: none;
        }
    }
}

Works for me in ionic v2, tabs template, Android.

There's no HTML element for the preview, it's actually opens another native view and placing it behind the cordova Webview.

Best of luck.

[amuramoto]

It looks like you may have a race condition happening. Since you are calling CameraPreview.setOnPictureTakenHandler() in the constructor, it's possible that Cordova hasn't been completely loaded by the Ionic. Try wrapping your try block in a call to Platform.ready() to ensure it isn't called until the full framework has loaded:

```
import { Platform } from 'ionic-angular'

...

//instantiate Platform
constructor(public navCtrl: NavController, public platform: Platform) {
this.logs = [];
this.isCamOn = false;

//do the try/catch after platform.ready() resolves
this.platform.ready().then(
    () => { 
        try {
          CameraPreview.setOnPictureTakenHandler().subscribe((result) => {
            this.logs.push('setOnPictureTakenHandler');
            this.onCameraPreview(result);
          });
        }
        catch (e) { 
          // exception is thrown and e is equal to "plugin_not_installed"
          this.logs.push('error: ' + e);
        }
      }
)

}

[ranbuch]

Interesting, I'll be sure to try this solution out.

Thank you!

[janpio]

Did it work? Can this be closed?