Possibly worse than no camera at all...
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.
- 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
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-streamis helpful. More info on relevant WebRTC flags can be found here.
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
- 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
- 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.
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!
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.