mozilla

Revision 474905 of rtcamera

  • Revision slug: Web/Apps/Reference_apps/rtcamera
  • Revision title: rtcamera
  • Revision id: 474905
  • Created:
  • Creator: chrisdavidmills
  • Is current revision? No
  • Comment

Revision Content

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.

Revision Source

<div class="summary">
  <img alt="" src="https://mdn.mozillademos.org/files/6241/rtcamera1.jpg" style="width: 179px; height: 269px; float: left; padding-right: 30px; padding-bottom: 30px;" />
  <p>rtcamera is a fun camera app to process images in real time, using Web technologies. <a class="walkthrough" href="https://github.com/sole/rtcamera/blob/master/docs/Walkthrough.md">Read the full developer walkthrough</a>.</p>
  <p>Difficulty: Advanced</p>
  <p>Code Breakdown:</p>
  <ul style="position: relative; left: 30px">
    <li>1% HTML</li>
    <li>16% CSS</li>
    <li>83% JavaScript</li>
  </ul>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <div id="view-code">
    <a class="app-source button" href="https://github.com/sole/rtcamera/">View Source</a> <a class="app-source button" href="https://github.com/sole/rtcamera/archive/master.zip">Download</a></div>
</div>
<section id="sect1">
  <h2 id="Web_API_Usage">Web API Usage</h2>
  <dl>
    <dt>
      <a href="//developer.mozilla.org/docs/HTML/Using_the_application_cache">appcache</a></dt>
    <dd>
      Once loaded for the first time, it can be used offline, without a network connection.</dd>
    <dt>
      <a href="//developer.mozilla.org/docs/Web/API/Blob">Blob</a></dt>
    <dd>
      For downloading files to the browser.</dd>
    <dt>
      <a href="//developer.mozilla.org/docs/Web/API/window.URL">URL</a></dt>
    <dd>
      For downloading files to the browser.</dd>
    <dt>
      <a href="//developer.mozilla.org/docs/Web/WebGL">WebGL</a></dt>
    <dd>
      Used for fast and efficient processing of image data.</dd>
    <dt>
      <a href="//developer.mozilla.org/docs/WebRTC">WebRTC</a></dt>
    <dd>
      Used to access camera devices and get a video stream from where to capture frames.</dd>
    <dt>
      <a href="//developer.mozilla.org/docs/Web/API/Navigator.getUserMedia">getUserMedia</a></dt>
    <dd>
      Used to access camera devices and get a video stream from where to capture frames.</dd>
    <dt>
      <a href="//developer.mozilla.org/docs/IndexedDB">IndexedDB</a></dt>
    <dd>
      Stores captured images on the device and retrieve them for the gallery view.</dd>
    <dt>
      <a href="//developer.mozilla.org/docs/Web/API/Worker">Web Workers</a></dt>
    <dd>
      Generates GIF files on the background without freezing the UI.</dd>
    <dt>
      <a href="//developer.mozilla.org/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></dt>
    <dd>
      Uploading images to a different server for sharing, and getting their url.</dd>
  </dl>
</section>
<section id="sect2">
  <h2 id="Custom_Elements">Custom Elements</h2>
  <dl>
    <dt>
      <a href="http://x-tags.org">x-tags</a></dt>
    <dd>
      rtcamera uses x-appbar, x-deck, x-layout, x-modal and x-switch.</dd>
  </dl>
</section>
<h2 id="Third-party_Libraries">Third-party Libraries</h2>
<dl>
  <dt>
    <a href="https://github.com/sole/Animated_GIF" rel="external" target="_blank">Animated GIF</a></dt>
  <dd>
    Generates animated GIFs.</dd>
  <dt>
    <a href="https://github.com/mozilla-b2g/gaia/blob/master/shared/js/async_storage.js" rel="external" target="_blank">Async Storage</a></dt>
  <dd>
    A wrapper for IndexedDB.</dd>
  <dt>
    <a href="http://glmatrix.net" rel="external" target="_blank">glMatrix</a></dt>
  <dd>
    Calculates perspective transformations.</dd>
  <dt>
    <a href="http://eightmedia.github.io/hammer.js" rel="external" target="_blank">hammer.js</a></dt>
  <dd>
    Add touch events.</dd>
  <dt>
    <a href="http://requirejs.org/" rel="external" target="_blank">RequireJS</a></dt>
  <dd>
    Uses RequireJS to split JavaScript code into more easily maintainable modules.</dd>
</dl>
Revert to this revision