rtcamera is a fun camera app to process images in real time, using Web technologies.
Read the full developer walkthrough.
Difficulty: Advanced
Code Breakdown:
- 1% HTML
- 16% CSS
- 83% JavaScript
Web API Usage
- appcache
- Once loaded for the first time, it can be used offline, without a network connection.
- Blob
- For downloading files to the browser.
- URL
- For downloading files to the browser.
- WebGL
- Used for fast and efficient processing of image data.
- WebRTC
- Used to access camera devices and get a video stream from where to capture frames.
- getUserMedia
- Used to access camera devices and get a video stream from where to capture frames.
- IndexedDB
- Stores captured images on the device and retrieve them for the gallery view.
- Web Workers
- Generates GIF files on the background without freezing the UI.
- XMLHttpRequest
- Uploading images to a different server for sharing, and getting their url.
Custom Elements
- x-tags
- rtcamera uses x-appbar, x-deck, x-layout, x-modal and x-switch.
Third-party Libraries
- Animated GIF
- Generates animated GIFs.
- Async Storage
- A wrapper for IndexedDB.
- glMatrix
- Calculates perspective transformations.
- hammer.js
- Add touch events.
- RequireJS
- Uses RequireJS to split JavaScript code into more easily maintainable modules.