cordova-plugin-camera-preview: Picture taking is very slow on iOS

I have implemented this wonderful plugin to my Ionic 2 iOS application but unfortunately taking a picture takes way too long. After taking the picture it takes about 5-10 seconds of time to draw it on the canvas. I have tried different picture qualities but changing this parameter doesn’t seem to change the time it takes to create the image.

Of course there is a possibility that I have done something wrong. If so, please feel free to correct me.

takePicture(e) {
    e.stopPropagation();
    this.cameraPreview.setFlashMode(this.flashMode).then(() => {
        this.cameraPreview.takePicture({ width: 3024, height: 4032, quality: 100 })
            .then((base64Data) => {
                // Draws the image on canvas
                this.drawImage(base64Data);
                this.closeCamera();
        });
    });
}

drawImage(b64Data: string) : void {
    let c = <HTMLCanvasElement> document.getElementById('temp_picture');
    let ctx = c.getContext('2d');

    let i = new Image();
    i.src = 'data:image/jpeg;base64,' + b64Data;
    i.addEventListener('load', () => {
        let cWpx = c.getAttribute('width');
        let cHpx = c.getAttribute('height');
        let canvasWidth = parseInt(cWpx.substring(0, cWpx.length - 2));
        let canvasHeight = parseInt(cHpx.substring(0, cHpx.length - 2));
        // Coef is calculated by height because width will be "cropped" away anyway
        // but height will always have to be 100%
        let coef = canvasHeight / i.height;
        let imageDrawWidth = i.width * coef;
        let imageDrawHeight = i.height * coef;
        let drawX = (canvasWidth / 2) - (imageDrawWidth / 2);
        let drawY = (canvasHeight / 2) - (imageDrawHeight / 2);
        ctx.drawImage(i, drawX, drawY, imageDrawWidth, imageDrawHeight);
    });
}

iphone 7 global packages: ionic/cli-utils : 1.4.0 Cordova CLI : 7.0.1 Ionic CLI : 3.4.0 local packages: ionic/app-scripts : 1.3.7 ionic/cli-plugin-cordova : 1.4.0 ionic/cli-plugin-ionic-angular : 1.3.1 Cordova Platforms : android 6.1.2 ios 4.3.1 Ionic Framework : ionic-angular 3.4.2 System: Node : v6.9.4 OS : macOS Sierra Xcode : Xcode 8.3.3 Build version 8E3004b ios-deploy : 1.9.1 ios-sim : 5.0.13 npm : 3.10.10

About this issue

  • Original URL
  • State: open
  • Created 7 years ago
  • Reactions: 1
  • Comments: 21 (1 by maintainers)

Most upvoted comments

@qrlt I tried the master branch and I am still getting a delay. Is there anything else I need to check for? Thanks

Hi Everyone,

I’ve done some further investigation, and I’m no longer convinced this is a real problem. I’ve been basing my measurements of the delay on the Xcode log. I was logging and entry just before calling takePicture(), and then first thing in the success callback. I always saw a 10 second gap between those two log entries.

But then I started also logging to a database on the device, as I wanted to capture this data for later analysis, while my app was in use. What I found was that the log timestamps that I captured on the device did NOT show this gap, and did not correspond with the Xcode log timestamps. The success callback was in fact called within about 1.5 seconds.

I can only guess that the Xcode log timestamps are somehow delayed. Perhaps they are only added to the log entries when the data arrives in the debugger, and they are perhaps transferred in batch when the device is not busy?

I can say this problem has been fixed. After updating the plugin from master branch there is no lag any more when taking photo.

  1. Remove current plugin $ ionic cordova plugin remove cordova-plugin-camera-preview
  2. Install plugin from repository $ ionic cordova plugin add https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git
  3. Make a new build

This ticket can be closed.

+1

Also seeing ~10 seconds delay on takePicture() on IOS

@p3v9d5ui It’s definitely not just a logging issue. On IOS (tested 10 and 11) it will block the main UI thread for up to 10 seconds, making the App unresponsive during this period. On Android it works just fine.

Oh, I see. Yes, the stopCamera() performance has been fixed, but takePicture() is still way too slow. On my iPhone 6s, it takes about 10 seconds to take a 1000px wide image.

@ogezue, what is fixed? I’m using the master branch, and takePicture() is still extremely slow.

fixed in current release