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?
- Open https://dlaa.me/CoLR/
- Allow the website access to the camera
- Find something interesting to capture
- Tap the live camera view to take a picture
- Tap a thumbnail to view a saved picture
- Tap the red 'X' to delete a saved picture
- Tap the live camera view to take more pictures
Where can I run it?
I've used the following browser/platform configurations:
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-streamis 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
- Verdict: It's not quite a WPF Grid Panel, but it feels very similar
- 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
- Verdict: Easy to use, even for someone with no prior IndexedDB experience
Where can I learn more?
- The article Taking still photos with WebRTC covers the all the basics. I'd read it a long time back, forgot about it for this project, then rediscovered it for this write-up.
- The WebRTC samples page has lots of examples and complete code for each of them.
- The GitHub repository for this project may also be of interest.
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.