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

[marvin-dent]

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

[p3v9d5ui]

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?