Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 

CoLR, the Camera of Last Resort

Possibly worse than no camera at all...

What is it?

An absurdly simple photo app for devices with a camera and a web browser that supports ECMAScript 2015. It doesn't do much, and it doesn't do it well, but at least it's free.

Good, cheap, fast: you only get one and you don't get to pick.

How do I use it?

  1. Open https://dlaa.me/CoLR/
  2. Allow the website access to the camera
  3. Find something interesting to capture
  4. Tap the live camera view to take a picture
  5. Tap a thumbnail to view a saved picture
  6. Tap the red 'X' to delete a saved picture
  7. Tap the live camera view to take more pictures

Where can I run it?

I've used the following browser/platform configurations:

  • iOS/Safari
  • Android/Chrome
  • Chromebook/Chrome
  • Windows/Chrome

It should work in other modern browsers/platforms as well.

To experiment on a machine without a camera, the command line chrome.exe --use-fake-device-for-media-stream --use-fake-ui-for-media-stream is helpful. More info on relevant WebRTC flags can be found here.

Why did you make this?

To learn more about the following technologies and get experience using them:

  • CSS Grid Layout - A modern layout system based on grid cells with the great working reference A Complete Guide to Grid
  • MediaDevices.getUserMedia() API - The part of the WebRTC Media Streams API that allows websites to access the device camera for video and image capture
    • Verdict: A somewhat cumbersome API that's nonetheless quite powerful
  • Preact - Exactly what it says on the box, a "Fast 3kB alternative to React with the same modern API."
    • Verdict: Works like a charm, easy for someone with React.js experience
  • Dexie.js - More truth in advertising, a "Minimalistic Wrapper for IndexedDB", where IndexedDB is "a JavaScript-based object-oriented database" that runs in the browser
    • Verdict: Easy to use, even for someone with no prior IndexedDB experience

Where can I learn more?

Why are some photos blurry?

The most likely culprit is (too long) shutter speed. Grabbing a frame from a video is not the same as taking a single photo (and post-processing it). A good explanation seems to be the second answer in the post Can I get high resolution photo from video?. If you want to do better, maybe start with Generating Sharp Panoramas from Motion-blurred Videos or Video Snapshots: Creating High-Quality Images from Video Clips). Shout out to Professor Huttenlocher!

Why not use blobs?

Captured images are encoded to JPEG using methods on the HTMLCanvasElement interface. Both Data URL and Blob formats are supported - and have limitations - but data URL is used because the string-based format is easier to work with and debug against.

About

Camera of Last Resort - Possibly worse than no camera at all...

Resources

License

Releases

No releases published

Packages

No packages published