ionic-team / pwa-elements

Quality UI experiences for Web APIs that require custom UI (such as media/camera).
https://medium.com/@maxlynch/building-the-progressive-web-app-os-57daebcb69c1
MIT License
168 stars 50 forks source link

camera - after pressing on take picture button it takes 1-2s to output the image #108

Open GeneralA6 opened 2 years ago

GeneralA6 commented 2 years ago

Resources: Before submitting an issue, please consult our docs.

Stencil version: (run npm list @stencil/core from a terminal/cmd prompt and paste output below):

`-- @ionic/angular@6.0.1
  `-- @ionic/core@6.0.1
    +-- @stencil/core@2.11.0
    `-- ionicons@6.0.0
      `-- @stencil/core@2.10.0

I'm submitting a ... (check one with "x") [x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior: running the ionic live example or code example from ionic camera docs, in both examples it takes 1-2s for the camera component to shoot and output an image. it feels unresponsive.

Expected behavior: an instant (as much as possible) image output like native camera.

Steps to reproduce: take a photo using camera component

Related code:

code implementation:

takePhoto(): Observable<Photo> {
  const getPhotoOptions: ImageOptions = {
     resultType: CameraResultType.Base64,
     source: CameraSource.Camera,
     quality: 100
  };
  const photo: Promise<Photo> = Camera.getPhoto(getPhotoOptions);
  return from(photo);
}

note: changing CameraResultType from Base64 to Uri did not help.

Other information:

verified on several android phones.

logs:

2022-03-18 18:09:09.161 24579-24579/io.ionic.starter D/Capacitor: App resumed
2022-03-18 18:09:09.162 24579-24579/io.ionic.starter I/Choreographer: Skipped 43 frames!  The application may be doing too much work on its main thread.
2022-03-18 18:09:09.183 24579-24663/io.ionic.starter I/OpenGLRenderer: Davey! duration=743ms; Flags=1, IntendedVsync=134835931172300, Vsync=134836647838938, OldestInputEvent=9223372036854775807, NewestInputEvent=0, HandleInputStart=134836655903978, AnimationStart=134836655992207, PerformTraversalsStart=134836655993249, DrawStart=134836663121947, SyncQueued=134836664429499, SyncStart=134836664593822, IssueDrawCommandsStart=134836664655697, SwapBuffers=134836674244603, FrameCompleted=134836675017884, DequeueBufferDuration=7583000, QueueBufferDuration=548000, 
2022-03-18 18:09:09.183 24579-24579/io.ionic.starter W/Looper: Slow Looper main: doFrame is 723ms late because of 1 msg, msg 1 took 732ms (seq=861 running=687ms runnable=4ms late=15ms h=android.app.ActivityThread$H w=159)
2022-03-18 18:09:09.190 24579-25274/io.ionic.starter V/Capacitor/Plugin: To native (Capacitor plugin): callbackId: 114069787, pluginId: Filesystem, methodName: readFile
2022-03-18 18:09:09.190 24579-25274/io.ionic.starter V/Capacitor: callback: 114069787, pluginId: Filesystem, methodName: readFile, methodData: {"path":"file:\/\/\/storage\/emulated\/0\/Android\/data\/io.ionic.starter\/files\/Pictures\/JPEG_20220318_170904_8848633993521663605.jpg"}
2022-03-18 18:09:09.512 24579-24598/io.ionic.starter I/o.ionic.starte: Background young concurrent copying GC freed 1(31KB) AllocSpace objects, 1(7240KB) LOS objects, 0% free, 90MB/90MB, paused 6.591ms total 48.595ms
2022-03-18 18:09:09.816 24579-25274/io.ionic.starter V/Capacitor/Plugin: To native (Capacitor plugin): callbackId: 114069788, pluginId: Filesystem, methodName: writeFile
2022-03-18 18:09:10.024 24579-25274/io.ionic.starter V/Capacitor: callback: 114069788, pluginId: Filesystem, methodName: writeFile, methodData: {"path":"1647616149633.jpeg","data":"\/9j\/4QOdRXhpZgAATU0AKgAAAAgACwEbAAUAAAABAAAAkgEaAAUAAAABAAAAmgEAAAMAAAABD8AAAAEQAAIAAAAFAAAAogEBAAMAAAABCNwAAAEPAAIAAAAHAAAApwITAAMAAAABAAEAAIdpAAQAAAABAAAAwgESAAMAAAABAAEAAAEoAAMAAAABAAIAAAEyAAIAAAAUAAAArgAAAAAAAABIAAAAAQAAAEgAAAABTUkgOABYaWFvbWkAMjAyMjowMzoxOCAxNzowOTowNwAAH5ICAAUAAAABAAACPJAAAAIAAAAFAAACRKMBAAIAAAACPwAAAJIEAAoAAAABAAACSYgiAAMAAAABAAIAAKABAAMAAAABAAEAAJIFAAUAAAABAAACUaADAAMAAAABCNwAAJIDAAoAAAABAAACWZADAAIAAAAUAAACYaAAAAIAAAAFAAACdZKRAAIAAAAHAAACeqQDAAMAAAABAAAAAKAFAAQAAAABAAACw6QCAAMAAAABAAAAAIKaAAUAAAABAAACgZIJAAMAAAABABAAAJKQAAIAAAAHAAACiYKdAAUAAAABAAACkKACAAMAAAABD8AAAJEBAAIAAAAEPz8\/AIgnAAMAAAABAc0AAKQFAAMAAAABABUAAJKSAAIAAAAHAAACmJAEAAIAAAAUAAACn5IBAAoAAAABAAACs5IKAAUAAAABAAACu5IHAAMAAAABAAIAAKQGAAMAAAABAAAAAJIIAAMAAAABAAAAAKIXAAMAAAABAAEAAAAAAAAAAACpAAAAZDAyMjAAAAAAAAAAAAYAAACpAAAAZP\/\/\/yoAAABkMjAyMjowMzoxOCAxNzowOTowNwAwMTAwADI3NDQzNgAAAAEvAAAnEDI3NDQzNgAAAEZQAAAnEDI3NDQzNgAyMDIyOjAzOjE4IDE3OjA5OjA3AAAAE8IAAAPoAAAQeAAAA+gAAQABAAIAAAAEUjk4AAAAAAAACgEbAAUAAAABAAADUwEaAAUAAAABAAADWwEAAAMAAAABD8AAAAEQAAIAAAAFAAADYwEBAAMAAAABCNwAAAEPAAIAAAAHAAADaAITAAMAAAABAAEAAAESAAMAAAABAAEAAAEoAAMAAAABAAIAAAEyAAIAAAAUAAADbwAAAAAAAABIAAAAAQAAAEgAAAABTUkgOABYaWFvbWkAMjAyMjowMzoxOCAxNzowOTowNwAAAQA3AAMAAAABAAEAAAAAAAD\/4AAQSkZJRgABAQAAAQABAAD\/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAIQAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z3BhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLW1sdWMAAAAAAAAAAQAAAAxlblVTAAAAIAAAABwARwBvAG8AZwBsAGUAIABJAG4AYwAuACAAMgAwADEANv\/bAEMAAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf\/bAEMBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf\/AABEID8AI3AMBIgACEQEDEQH\/xAAfAAACAgIDAQEBAAAAAAAAAAADBAIFAQYABwgJCgv\/xABKEAADAAIBAwMDBAAGAQIBARkBAgMEERIFEyEABiIHFDEIIzJBCRUkM0JRYRZDUhdxgSU0YhhTkXKCoSZEY7FzChk10VTBNpLh\/8QAHgEAAgMBAQEBAQEAAAAAAAAAAAIBAwQFBgcICQr\/xABUEQABAgQDBAgFAwQBAwICABcBAhEAAyExBBJBBVFhcQYTIoGRobHwBzLB0eEUQvEIFSNSYhYzciSCF0OSoiVTY7LCGDRzNVREg5PS4vI2RSajs\/\/aAAwDAQACEQMRAD8A83rSdGoqVagSmRFWGPMU5zVMoYsaNRFJBINnZwHpvyeIBy10xzyvWMzjrKi83ZNsUZVU83CVqk3mAiT\/AJFDIFtk1FvuXK40MmoSgS65OKUx8ya2RldYcOJi70jjzLHuftNVipC8GVBrXGa\/Ola4150lfLmnN55LqHI4pPuWxTL5OWQAlg2iAo+3lILPpH53jZnst8Z40nHbcslZNXGP3HF8hD3sdQi3HHG7intivxnwYADa87C80yQFfv8ADHD\/ABCCi8fuEWTFS8aFhOzEFwT2wx5+tbA6iMlsiZVIqEDNPISmnh85FMWsXVaTdyEcUKrzfUB5b0\/S+WOSvfEq2NNViV5mbpxTghUMs0s1GXvGQ50EdAbUAAAFoItZzjOwoYLkVgcvIx0mHnTViyqBU7MS7UZaMXKjZrof2KuG1+nmL4KXnl80ycbvtgQnj9tp5IpURafYV+84C7eiOCpGzyqTfOWjdrtYyYoAnVJl8o0dHhWc1o47ep\/ssloPxDOdry84SeSQr1RBY4zLTufs3saDktJyXSnb+RRmCFdcEPy9TBG3qKU7lFTI1JEW13bjMnJnxSqbHOqO3xapXxshtBx6UqMblrLCDIrZYJiwxxaN17GPSZkywPZUPMzGqFgk0YabjuktXMLOrLW6S0EiSsZD4gIpZ24USC7mXJUeCSv49GOfnwjioJ4U0Z5KlMaNMiFoSQsuS4WvbWnCilslkKOeLICtqeiCLZVRYKsyrzZgzE\/tVxuFlDJXmGmZKJSKtzXejwBUADLMlMZxZJuuV9uWo4BFWS7OzZDqKaSm52Vu0VCu\/wCd+qZsvLmQjYlu1sSnS4VGYsxmqCDUhXgrEEV4PyVeRVmYkSXIyT96FxeRjQrJG5YkLTaEmZkqFsePN6x5MzcjMgFdkAgjYltWQZ3WmQUMZIIlHp9wwtz7aoZNSSuQvxQ8yXVh+NrU0okq3MKyK2Wd6weDcJ92WKWKo0ZvxIVQy0ZOPEsWKlJqvzuYTprstHF7XDxFIUYmCs6v3KByV4abmFbgeWgp91UJxEixCQVis2+SzJkoWm2LusOPJWxlbZ2Xb+iEWWDb3i7gdvmvNf8AVKULRmlpvONLT12RTnNlp90tZ\/MUC8in8yqsdt0Jw4pwm5he\/DICmr8nkuHNXVqLR5KrKzEEKZjb8u1TW\/u8gG6Va+6ZKw50DJXIU8VDCgKu44iaLQfwZFBUbHpf7zInTGZsO16zobToFesp5DKWlzZl5NNuPbagRyqMFXTurBkpzPVm4RVG4TnBp15pT7kon2afdPj2k0hUZSrZFUMKKaPKLTOuRcLrbAlGQpTIes1Q1njLTttZEUH7gyXU6cCzv3SzllmWn8tqOOojqff0Vw8yFZWTOc
2022-03-18 18:09:10.099 24579-24906/io.ionic.starter D/Capacitor/FilesystemPlugin: File '/data/user/0/io.ionic.starter/files/1647616149633.jpeg' saved!
2022-03-18 18:09:10.102 24579-25274/io.ionic.starter V/Capacitor/Plugin: To native (Capacitor plugin): callbackId: 114069789, pluginId: Storage, methodName: set
2022-03-18 18:09:10.102 24579-25274/io.ionic.starter V/Capacitor: callback: 114069789, pluginId: Storage, methodName: set, methodData: {"key":"photos","value":"[{\"filepath\":\"file:\/\/\/data\/user\/0\/io.ionic.starter\/files\/1647616149633.jpeg\",\"webviewPath\":\"http:\/\/192.168.50.244:8100\/_capacitor_file_\/data\/user\/0\/io.ionic.starter\/files\/1647616149633.jpeg\"},{\"filepath\":\"file:\/\/\/data\/user\/0\/io.ionic.starter\/files\/1647616077452.jpeg\",\"webviewPath\":\"http:\/\/192.168.50.244:8100\/_capacitor_file_\/data\/user\/0\/io.ionic.starter\/files\/1647616077452.jpeg\"},{\"filepath\":\"file:\/\/\/data\/user\/0\/io.ionic.starter\/files\/1647616044460.jpeg\",\"webviewPath\":\"http:\/\/192.168.50.244:8100\/_capacitor_file_\/data\/user\/0\/io.ionic.starter\/files\/1647616044460.jpeg\"},{\"filepath\":\"file:\/\/\/data\/user\/0\/io.ionic.starter\/files\/1647615596623.jpeg\",\"webviewPath\":\"http:\/\/192.168.50.244:8100\/_capacitor_file_\/data\/user\/0\/io.ionic.starter\/files\/1647615596623.jpeg\"},{\"filepath\":\"file:\/\/\/data\/user\/0\/io.ionic.starter\/files\/1647615521650.jpeg\",\"webviewPath\":\"http:\/\/192.168.50.244:8100\/_capacitor_file_\/data\/user\/0\/io.ionic.starter\/files\/1647615521650.jpeg\"}]"}
2022-03-18 18:09:10.104 24579-24579/io.ionic.starter I/Capacitor/Console: File: http://192.168.50.244:8100/ - Line 204 - Msg: undefined
wmadden commented 1 year ago

I'm experiencing this too. After pressing the button, there's approximately a 4s delay while the preview from the camera continues to show new video, and the captured image is from after the 4s delay - not the frame that's visible at the point you press the button.

This makes it almost totally unusable. You can't put something this bad in front of real-world users

frozenfrank commented 1 year ago

I also experience this issue. On my Macbook Air M1, I see the same 4 second delay after pressing the button before the image actually captures. In my case, I was trying to take a picture of my roommate, but by the time it actually captured and I realized he wasn't in the photo, he had already walked out the front door!

The following video was originally addressed to our developer who implemented the platform, but I now understand that it actually applies to this space: https://watch.oneclickapp.com/v/6J2JGR

nicolidin commented 11 months ago

I have the exact same issue, did someone found a way to fix that issue or a workaround? Friendly ping @frozenfrank maybe you found something..

abuksh commented 10 months ago

anyone has any update on this ? I am having the same issues and looking for a workaround.

gabrieldesousah commented 10 months ago

Same issue here

Valentindi commented 8 months ago

Yes, i have the issue as well.

jcham commented 7 months ago

Same here, very slow. Note that this seems to be a problem with Chrome and doesn't happen in Safari.