LongJacket PWA research - handling camera and location data

[amazingproducer]

Research the camera and location functions required for the upcoming accountability app and refine the plan to build it.

[amazingproducer]

Day 88 (74d57dd)

It's ugly, but there's rudimentary camera access and real time display of the camera's feed for the user.

Apparently, I can just use <input type="file" accept="image/*" capture="camera" /> and access the camera.

Getting location data is a little different, but comparatively easier than making push notifications.

More than I ever wanted to know about geolocation API

[amazingproducer]

Day 89 (81bfb81)

Though my users can now use the PWA to take snapshots and save them locally, they cannot focus the camera or inject the EXIF location data that we need.

[amazingproducer]

Day 90 (43841af)

Since we apparently can't easily make a decent camera app in a web browser (or expose the native camera app with flash/geotagging/focus (or can we?)), let's make the user shoot their own geotagged images and work with those.

• [x] make some kind of image submission dialog
  • [x] examine it for qualifying exif data
• can we examine an image file's EXIF data before uploading it? yes
• can we do geospatial distance calculations on the client side?

[amazingproducer]

Day 91: (c49726c)

I removed some of the unused code and tried working on the geolocation stuff. Managed to get the permission query up, but my GPS device isn't getting a lock. I'll have to learn how to give the browser false location information in the morning.

[amazingproducer]

Day 92: (a9f09bc)

Location spoofing is a lot easier than standing outside waiting for multi-sat lock:

Next, I'd like to try client-side EXIF data extraction again.

edit: I failed and couldn't figure out a way to use the console to debug my problems.

[amazingproducer]

Day 93:

Device location data:

Image location data:

After some struggle, I managed to confirm that I can read EXIF location data if it exists. Since this is an important field for the application, I'd like to account for any case in EXIF data which would invalidate the image as evidence.

I'd also like to ask the client device for its current location at the right time during this process.

Additionally, I would like to display the image loaded by the input element for use in a future confirmation dialog.

[amazingproducer]

Day 98 (025886b)

The method for uploading an image was easy to understand, but took longer than expected to get right.

The user can now submit the image captured by the camera!

• I haven't made a check to only submit if location data from both sources match.
  • [x] Add device location to form data
  • [x] Add image location data to form data
• I haven't made any filetype checks to keep someone from misusing the endpoint.
• None of this is written to the DB yet.
  • [x] Add image table
  • 1.id
  • 2.created_at
  • 3.requested_location - target coordinates
  • 4.device_location - coordinates of device at time of submission
  • 5.exif_location - coordinates embedded in image
  • 6.image_filename

[amazingproducer]

Day 100 - Database tracking for image uploads (06e0b86)

Device and Image location data is added as a hidden form field.

Database entries are created for each submitted image.

1|2019-10-30 15:39:55.130296||21.3069444,-157.8583333|44,33,26,170,29,23|20191022_224418.jpg
2|2019-10-30 15:44:51.351544||19.759,-154.9845|44,33,26,170,29,23|20191022_224418.jpg

[amazingproducer]

Judging from the original goals, enough study of these technologies has been conducted to begin developing the real project.