rtcamera

Our volunteers haven't translated this article into ไทย yet. Join us and help get the job done!

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.

Document Tags and Contributors

Contributors to this page: burschy47, cvan, chrisdavidmills
Last updated by: burschy47,