Skip to content
Camera of Last Resort - Possibly worse than no camera at all...
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
CoLR.svg
LICENSE
README.md
index.html
index.js

README.md

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.

You can’t perform that action at this time.