jpeg_camera 1.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 64570f77a25c5034e335b4e59440007d56ceb361
+  data.tar.gz: 793cce21b60946b0f6b9e7d56d180ef900de62f1
+SHA512:
+  metadata.gz: 6b0d9f6c6d15429d8c0dae0faf16d9850912f658cd26ffe6dfd54a4f927afc8821aaf0f33e6f628fee0851c7f93ef0f3e7da4ec33413efc7f371d5637bda69ff
+  data.tar.gz: 955210d1bd55c3697eb8801e2e2b131ba068e8acb7b732e380117c312ddc31006a8013ac0bad7cba1a3feaabd912d3d0be0e2a6c6bbe5d0bbbc7588f63db73a5

data/LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2013 Adam Wróbel
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,146 @@
+## About
+
+JpegCamera is a JavaScript library that allows you display a camera stream on
+a web page and then capture, show and upload JPEG snapshots to the server. It
+uses HTML5 in Chrome, Firefox and Opera and falls back to Flash in less capable
+browsers.  The video stream is placed without any UI in a container of your
+choice and you control it through JavaScript API and your own UI elements.
+
+The idea is based on a similar
+[JpegCam](https://github.com/mattclements/jpegcam) library which was Flash only.
+Beside working without Flash and offering a cleaner, more modern API, JpegCamera
+has some nice, new features.
+
+## Features
+
+- Works natively in Chrome, Firefox, Opera and with a Flash plugin in all other
+  browsers.
+- Manage and upload multiple snapshots at once. You don't have to wait for the
+  first upload to finish before capturing the next image. This means you can
+  take a few shots in a short interval.
+- Allows you to retry failed uploads.
+- Easily read server response text and code after upload.
+- Send CSRF tokens to secure your user's session from [Cross-site request
+  forgery](http://en.wikipedia.org/wiki/Cross-site_request_forgery#Prevention)
+
+## Dependencies
+
+- [Canvas-to-Blob](https://github.com/blueimp/JavaScript-Canvas-to-Blob)
+  polyfill for the standard JavaScript `canvas.toBlob` method.
+- [SWFObject](http://code.google.com/p/swfobject/) for embedding the
+  Flash-based fallback.
+
+For convenience these scripts are packaged with JpegCamera.
+
+## Installation
+
+You can load JpegCamera directly on any web page, but if you're writing Rails
+3.1 application consider using a gem. In either case you have an option
+of loading full library that includes HTML5 implementation with Flash fallback
+or HTML5 version only.
+
+### Standalone app
+
+Copy all the files from `dist` into `jpeg_camera` directory under your server's
+root.
+
+Load JpegCamera and it's dependencies in the `HEAD` section of your page.
+
+    <script src="/jpeg_camera/swfobject.min.js" type="text/javascript"></script>
+    <script src="/jpeg_camera/canvas-to-blob.min.js" type="text/javascript"></script>
+    <script src="/jpeg_camera/jpeg_camera.min.js" type="text/javascript"></script>
+
+SWFObject and Canvas-to-Blob are stored in separate files so that you don't have
+to load them again if you already use them in your project. If you want to cut
+down on HTTP requests then there is a concatenated version you can use.
+
+    <script src="/jpeg_camera/jpeg_camera_with_dependencies.min.js" type="text/javascript"></script>
+
+If you want to use HTML5-only version you can load jpeg_camera_no_flash.min.js.
+There is no "with dependencies" version of this file, so you have to remember
+to also load Canvas-to-Blob. You don't need SWFObject for HTML5.
+
+### Ruby on Rails 3.1 applications
+
+Require the gem in your Gemfile.
+
+    gem "jpeg_camera", "~> 1.0.0"
+
+Add appropriate requires to your application.js. SWFObject and Canvas-to-Blob
+are stored in separate files so that you don't have to load them again if you
+already use them in your project. The assets pipeline will take care of
+minifying and concatenating everything into one script.
+
+    //= require jpeg_camera/swfobject
+    //= require jpeg_camera/canvas-to-blob
+    //= require jpeg_camera/jpeg_camera
+
+If you want to use HTML5-only version then use this instead:
+
+    //= require jpeg_camera/canvas-to-blob
+    //= require jpeg_camera/jpeg_camera_no_flash
+
+Minified versions of all the scripts are also included in the gem if you don't
+want to include JpegCamera in your application.js file and would rather use
+`javascript_include_tag` on select pages of your application.
+
+## Usage
+
+    var camera = new JpegCamera("#camera");
+
+    var snapshot = camera.capture();
+
+    snapshot.show(); // Display the snapshot
+
+    snapshot.upload({api_url: "/upload_image"}).done(function(response) {
+      response_container.innerHTML = response;
+      this.discard(); // discard snapshot and show video stream again
+    }).fail(function() {
+      alert("Upload failed.");
+    });
+
+A detailed documentation using in-code comments is maintained for
+[JpegCamera](http://amw.github.io/jpeg_camera/doc/classes/JpegCamera.html) and
+[Snapshot](http://amw.github.io/jpeg_camera/doc/classes/Snapshot.html)
+classes.
+
+## Caveats
+
+To use Flash fallback your camera container must be at least 215 pixels wide and
+138 pixels tall. This is the minimum to display privacy settings dialog.
+
+With Flash in some browsers it's impossible to read response body for requests
+that finish with status codes from outside the 2XX range (like 404 Not Found or
+422 Unprocessable Entity). If you're using version of JpegCamera with Flash
+fallback your application should not rely on reading body of these responses.
+The status code number is always available.
+
+## Contributing
+
+The source code is available on [Github](https://github.com/amw/jpeg_camera).
+Please send pull requests on topic branches.
+
+To build dist files from source you need `npm` — Node Package Manager.
+
+    npm install              # install required dependencies
+    npm install -g grunt-cli # install grunt command
+    grunt dist               # build js & swf files
+    grunt js                 # only builds js files
+    grunt swf                # only builds swf file
+    grunt doc                # update documentation
+    grunt                    # build dist files and update documentation
+
+To build swf file you need to have `mxmlc` available in your `$PATH`. It comes
+in the [Flex SDK](http://www.adobe.com/devnet/flex/flex-sdk-download.html).
+
+## Acknowledgements
+
+Thanks to Joseph Huckaby for creating and Matt Clements for maintaining
+Flash-based [JpegCam library](http://code.google.com/p/jpegcam/) which I have
+been using until HTML5 became a viable solution. If you're interested here's
+[Matt's repo](https://github.com/mattclements/jpegcam) and here's
+[mine](https://github.com/amw/jpegcam). Thanks to everyone else contributing to
+that project.
+
+
+Copyright [Adam Wróbel](http://adamwrobel.com), released under the MIT License.

data/lib/jpeg_camera.rb

@@ -0,0 +1,6 @@
+require 'jpeg_camera/version'
+
+module JpegCamera
+  class Engine < ::Rails::Engine
+  end
+end

data/lib/jpeg_camera/version.rb

@@ -0,0 +1,8 @@
+require "json"
+
+module JpegCamera
+  package_file = File.expand_path '../../../package.json', __FILE__
+  package_info = JSON.parse File.read(package_file)
+  VERSION = package_info["version"]
+  HOMEPAGE = package_info["homepage"]
+end

data/vendor/assets/javascripts/jpeg_camera/canvas-to-blob.js

@@ -0,0 +1,95 @@
+/*
+ * JavaScript Canvas to Blob 2.0.5
+ * https://github.com/blueimp/JavaScript-Canvas-to-Blob
+ *
+ * Copyright 2012, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ *
+ * Based on stackoverflow user Stoive's code snippet:
+ * http://stackoverflow.com/q/4998908
+ */
+
+/*jslint nomen: true, regexp: true */
+/*global window, atob, Blob, ArrayBuffer, Uint8Array, define */
+
+(function (window) {
+    'use strict';
+    var CanvasPrototype = window.HTMLCanvasElement &&
+            window.HTMLCanvasElement.prototype,
+        hasBlobConstructor = window.Blob && (function () {
+            try {
+                return Boolean(new Blob());
+            } catch (e) {
+                return false;
+            }
+        }()),
+        hasArrayBufferViewSupport = hasBlobConstructor && window.Uint8Array &&
+            (function () {
+                try {
+                    return new Blob([new Uint8Array(100)]).size === 100;
+                } catch (e) {
+                    return false;
+                }
+            }()),
+        BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder ||
+            window.MozBlobBuilder || window.MSBlobBuilder,
+        dataURLtoBlob = (hasBlobConstructor || BlobBuilder) && window.atob &&
+            window.ArrayBuffer && window.Uint8Array && function (dataURI) {
+                var byteString,
+                    arrayBuffer,
+                    intArray,
+                    i,
+                    mimeString,
+                    bb;
+                if (dataURI.split(',')[0].indexOf('base64') >= 0) {
+                    // Convert base64 to raw binary data held in a string:
+                    byteString = atob(dataURI.split(',')[1]);
+                } else {
+                    // Convert base64/URLEncoded data component to raw binary data:
+                    byteString = decodeURIComponent(dataURI.split(',')[1]);
+                }
+                // Write the bytes of the string to an ArrayBuffer:
+                arrayBuffer = new ArrayBuffer(byteString.length);
+                intArray = new Uint8Array(arrayBuffer);
+                for (i = 0; i < byteString.length; i += 1) {
+                    intArray[i] = byteString.charCodeAt(i);
+                }
+                // Separate out the mime component:
+                mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
+                // Write the ArrayBuffer (or ArrayBufferView) to a blob:
+                if (hasBlobConstructor) {
+                    return new Blob(
+                        [hasArrayBufferViewSupport ? intArray : arrayBuffer],
+                        {type: mimeString}
+                    );
+                }
+                bb = new BlobBuilder();
+                bb.append(arrayBuffer);
+                return bb.getBlob(mimeString);
+            };
+    if (window.HTMLCanvasElement && !CanvasPrototype.toBlob) {
+        if (CanvasPrototype.mozGetAsFile) {
+            CanvasPrototype.toBlob = function (callback, type, quality) {
+                if (quality && CanvasPrototype.toDataURL && dataURLtoBlob) {
+                    callback(dataURLtoBlob(this.toDataURL(type, quality)));
+                } else {
+                    callback(this.mozGetAsFile('blob', type));
+                }
+            };
+        } else if (CanvasPrototype.toDataURL && dataURLtoBlob) {
+            CanvasPrototype.toBlob = function (callback, type, quality) {
+                callback(dataURLtoBlob(this.toDataURL(type, quality)));
+            };
+        }
+    }
+    if (typeof define === 'function' && define.amd) {
+        define(function () {
+            return dataURLtoBlob;
+        });
+    } else {
+        window.dataURLtoBlob = dataURLtoBlob;
+    }
+}(this));

data/vendor/assets/javascripts/jpeg_camera/canvas-to-blob.min.js

@@ -0,0 +1 @@
+!function(t){"use strict";var e=t.HTMLCanvasElement&&t.HTMLCanvasElement.prototype,n=t.Blob&&function(){try{return Boolean(new Blob)}catch(t){return!1}}(),o=n&&t.Uint8Array&&function(){try{return 100===new Blob([new Uint8Array(100)]).size}catch(t){return!1}}(),r=t.BlobBuilder||t.WebKitBlobBuilder||t.MozBlobBuilder||t.MSBlobBuilder,i=(n||r)&&t.atob&&t.ArrayBuffer&&t.Uint8Array&&function(t){var e,i,a,l,u,B;for(e=t.split(",")[0].indexOf("base64")>=0?atob(t.split(",")[1]):decodeURIComponent(t.split(",")[1]),i=new ArrayBuffer(e.length),a=new Uint8Array(i),l=0;l<e.length;l+=1)a[l]=e.charCodeAt(l);return u=t.split(",")[0].split(":")[1].split(";")[0],n?new Blob([o?a:i],{type:u}):(B=new r,B.append(i),B.getBlob(u))};t.HTMLCanvasElement&&!e.toBlob&&(e.mozGetAsFile?e.toBlob=function(t,n,o){o&&e.toDataURL&&i?t(i(this.toDataURL(n,o))):t(this.mozGetAsFile("blob",n))}:e.toDataURL&&i&&(e.toBlob=function(t,e,n){t(i(this.toDataURL(e,n)))})),"function"==typeof define&&define.amd?define(function(){return i}):t.dataURLtoBlob=i}(this);

data/vendor/assets/javascripts/jpeg_camera/jpeg_camera.js

@@ -0,0 +1,736 @@
+/*! JpegCamera 1.0.0 | 2013-07-29
+    (c) 2013 Adam Wrobel
+    http://amw.github.io/jpeg_camera */
+(function() {
+  var JpegCamera, JpegCameraFlash, JpegCameraHtml5, Snapshot, supported_flash_version, _ref, _ref1,
+    __hasProp = {}.hasOwnProperty,
+    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
+
+  JpegCamera = (function() {
+    JpegCamera.DefaultOptions = {
+      shutter_url: "/jpeg_camera/shutter.mp3",
+      swf_url: "/jpeg_camera/jpeg_camera.swf",
+      on_debug: function(message) {
+        if (console && console.log) {
+          return console.log("JpegCamera: " + message);
+        }
+      },
+      quality: 0.9,
+      shutter: true,
+      mirror: false,
+      timeout: 0
+    };
+
+    function JpegCamera(container, options) {
+      if ("string" === typeof container) {
+        this.container = document.querySelector(container);
+      } else {
+        this.container = container;
+      }
+      if (!(this.container && this.container.offsetWidth)) {
+        throw "JpegCamera: invalid container";
+      }
+      this.container.innerHTML = "";
+      this.options = this._extend({}, this.constructor.DefaultOptions, options);
+      this._engine_init();
+    }
+
+    JpegCamera.prototype.ready = function(callback) {
+      this.options.on_ready = callback;
+      if (this.options.on_ready && this._is_ready) {
+        this.options.on_ready.call(this);
+      }
+      return this;
+    };
+
+    JpegCamera.prototype._is_ready = false;
+
+    JpegCamera.prototype.error = function(callback) {
+      this.options.on_error = callback;
+      if (this.options.on_error && this._error_occured) {
+        this.options.on_error.call(this, this._error_occured);
+      }
+      return this;
+    };
+
+    JpegCamera.prototype._error_occured = false;
+
+    JpegCamera.prototype.capture = function(options) {
+      var snapshot, _options;
+      if (options == null) {
+        options = {};
+      }
+      snapshot = new Snapshot(this, options);
+      this._snapshots[snapshot.id] = snapshot;
+      _options = snapshot._options();
+      if (_options.shutter) {
+        this._engine_play_shutter_sound();
+      }
+      this._engine_capture(snapshot, _options.mirror, _options.quality);
+      return snapshot;
+    };
+
+    JpegCamera.prototype._snapshots = {};
+
+    JpegCamera.prototype.show_stream = function() {
+      this._engine_show_stream();
+      this._displayed_snapshot = null;
+      return this;
+    };
+
+    JpegCamera.prototype.discard_all = function() {
+      var id, snapshot, _ref;
+      if (this._displayed_snapshot) {
+        this.show_stream();
+      }
+      _ref = this._snapshots;
+      for (id in _ref) {
+        snapshot = _ref[id];
+        this._engine_discard(snapshot);
+        snapshot._discarded = true;
+      }
+      this._snapshots = {};
+      return this;
+    };
+
+    JpegCamera.prototype._extend = function(object) {
+      var key, source, sources, value, _i, _len;
+      sources = Array.prototype.slice.call(arguments, 1);
+      for (_i = 0, _len = sources.length; _i < _len; _i++) {
+        source = sources[_i];
+        if (source) {
+          for (key in source) {
+            value = source[key];
+            object[key] = value;
+          }
+        }
+      }
+      return object;
+    };
+
+    JpegCamera.prototype._debug = function(message) {
+      if (this.options.on_debug) {
+        return this.options.on_debug.call(this, message);
+      }
+    };
+
+    JpegCamera.prototype._view_width = function() {
+      return parseInt(this.container.offsetWidth, 10);
+    };
+
+    JpegCamera.prototype._view_height = function() {
+      return parseInt(this.container.offsetHeight, 10);
+    };
+
+    JpegCamera.prototype._display = function(snapshot) {
+      this._engine_display(snapshot);
+      return this._displayed_snapshot = snapshot;
+    };
+
+    JpegCamera.prototype._displayed_snapshot = null;
+
+    JpegCamera.prototype._upload = function(snapshot, api_url, csrf_token, timeout) {
+      return this._engine_upload(snapshot, api_url, csrf_token, timeout);
+    };
+
+    JpegCamera.prototype._discard = function(snapshot) {
+      if (this._displayed_snapshot === snapshot) {
+        this.show_stream();
+      }
+      this._engine_discard(snapshot);
+      snapshot._discarded = true;
+      return delete this._snapshots[snapshot.id];
+    };
+
+    JpegCamera.prototype._prepared = function() {
+      this._is_ready = true;
+      if (this.options.on_ready) {
+        return this.options.on_ready.call(this);
+      }
+    };
+
+    JpegCamera.prototype._got_error = function(error) {
+      this._debug("Error - " + error);
+      this._error_occured = error;
+      if (this.options.on_error) {
+        return this.options.on_error.call(this, this._error_occured);
+      }
+    };
+
+    return JpegCamera;
+
+  })();
+
+  navigator.getUserMedia || (navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
+
+  if (navigator.getUserMedia) {
+    JpegCameraHtml5 = (function(_super) {
+      __extends(JpegCameraHtml5, _super);
+
+      function JpegCameraHtml5() {
+        _ref = JpegCameraHtml5.__super__.constructor.apply(this, arguments);
+        return _ref;
+      }
+
+      JpegCameraHtml5.prototype._engine_init = function() {
+        var get_user_media_options, horizontal_padding, that, vertical_padding;
+        this._debug("Using HTML5 engine");
+        this.internal_container = document.createElement("div");
+        this.internal_container.style.width = "100%";
+        this.internal_container.style.height = "100%";
+        this.internal_container.style.position = "relative";
+        this.container.appendChild(this.internal_container);
+        vertical_padding = Math.floor(this._view_height() * 0.2);
+        horizontal_padding = Math.floor(this._view_width() * 0.2);
+        this.message = document.createElement("div");
+        this.message["class"] = "message";
+        this.message.style.width = "100%";
+        this.message.style.height = "100%";
+        this._add_prefixed_style(this.message, "boxSizing", "border-box");
+        this.message.style.overflow = "hidden";
+        this.message.style.textAlign = "center";
+        this.message.style.paddingTop = "" + vertical_padding + "px";
+        this.message.style.paddingBottom = "" + vertical_padding + "px";
+        this.message.style.paddingLeft = "" + horizontal_padding + "px";
+        this.message.style.paddingRight = "" + horizontal_padding + "px";
+        this.message.style.position = "absolute";
+        this.message.style.zIndex = 3;
+        this.message.innerHTML = "Please allow camera access when prompted by the browser.";
+        this.internal_container.appendChild(this.message);
+        this.video_container = document.createElement("div");
+        this.video_container.style.width = "" + (this._view_width()) + "px";
+        this.video_container.style.height = "" + (this._view_height()) + "px";
+        this.video_container.style.overflow = "hidden";
+        this.video_container.style.position = "absolute";
+        this.video_container.style.zIndex = 1;
+        this.internal_container.appendChild(this.video_container);
+        this.video = document.createElement('video');
+        this.video.autoplay = true;
+        this._add_prefixed_style(this.video, "transform", "scalex(-1.0)");
+        window.AudioContext || (window.AudioContext = window.webkitAudioContext);
+        if (window.AudioContext) {
+          this._load_shutter_sound();
+        }
+        get_user_media_options = {
+          video: {
+            optional: [
+              {
+                minWidth: 1280
+              }, {
+                minWidth: 640
+              }, {
+                minWidth: 480
+              }, {
+                minWidth: 360
+              }
+            ]
+          }
+        };
+        that = this;
+        return navigator.getUserMedia(get_user_media_options, function(stream) {
+          that._remove_message();
+          if (window.URL) {
+            that.video.src = URL.createObjectURL(stream);
+          } else {
+            that.video.src = stream;
+          }
+          return that._wait_for_video_ready();
+        }, function(error) {
+          var code, key, value;
+          code = error.code;
+          for (key in error) {
+            value = error[key];
+            if (key === "code") {
+              continue;
+            }
+            that._got_error(key);
+            return;
+          }
+          return that._got_error("UNKNOWN ERROR");
+        });
+      };
+
+      JpegCameraHtml5.prototype._engine_play_shutter_sound = function() {
+        var source;
+        if (!this.shutter_buffer) {
+          return;
+        }
+        source = this.audio_context.createBufferSource();
+        source.buffer = this.shutter_buffer;
+        source.connect(this.audio_context.destination);
+        return source.start(0);
+      };
+
+      JpegCameraHtml5.prototype._engine_capture = function(snapshot, mirror, quality) {
+        var canvas, context, crop;
+        crop = this._get_capture_crop();
+        canvas = document.createElement("canvas");
+        canvas.width = crop.width;
+        canvas.height = crop.height;
+        context = canvas.getContext("2d");
+        context.drawImage(this.video, crop.x_offset, crop.y_offset, crop.width, crop.height, 0, 0, crop.width, crop.height);
+        snapshot._canvas = canvas;
+        snapshot._mirror = mirror;
+        return snapshot._quality = quality;
+      };
+
+      JpegCameraHtml5.prototype._engine_display = function(snapshot) {
+        if (this.displayed_canvas) {
+          this.internal_container.removeChild(this.displayed_canvas);
+        }
+        this.displayed_canvas = snapshot._canvas;
+        this.displayed_canvas.style.width = "" + (this._view_width()) + "px";
+        this.displayed_canvas.style.height = "" + (this._view_height()) + "px";
+        this.displayed_canvas.style.top = 0;
+        this.displayed_canvas.style.left = 0;
+        this.displayed_canvas.style.position = "absolute";
+        this.displayed_canvas.style.zIndex = 2;
+        this._add_prefixed_style(this.displayed_canvas, "transform", "scalex(-1.0)");
+        return this.internal_container.appendChild(this.displayed_canvas);
+      };
+
+      JpegCameraHtml5.prototype._engine_discard = function(snapshot) {
+        if (snapshot._xhr) {
+          snapshot._xhr.abort();
+        }
+        delete snapshot._xhr;
+        delete snapshot._canvas;
+        return delete snapshot._jpeg_blob;
+      };
+
+      JpegCameraHtml5.prototype._engine_show_stream = function() {
+        if (this.displayed_canvas) {
+          this.internal_container.removeChild(this.displayed_canvas);
+          this.displayed_canvas = null;
+        }
+        return this.video_container.style.display = "block";
+      };
+
+      JpegCameraHtml5.prototype._engine_upload = function(snapshot, api_url, csrf_token, timeout) {
+        var canvas, context, handler, that, xhr;
+        that = this;
+        if (snapshot._jpeg_blob) {
+          this._debug("Uploading the file");
+          handler = function(event) {
+            delete snapshot._xhr;
+            snapshot._status = event.target.status;
+            snapshot._response = event.target.responseText;
+            if (snapshot._status >= 200 && snapshot._status < 300) {
+              return snapshot._upload_done();
+            } else {
+              snapshot._error_message = event.target.statusText || "Unknown error";
+              return snapshot._upload_fail();
+            }
+          };
+          xhr = new XMLHttpRequest();
+          xhr.open('POST', api_url);
+          xhr.timeout = timeout;
+          if (csrf_token) {
+            xhr.setRequestHeader("X-CSRF-Token", csrf_token);
+          }
+          xhr.onload = handler;
+          xhr.onerror = handler;
+          xhr.onabort = handler;
+          xhr.send(snapshot._jpeg_blob);
+          return snapshot._xhr = xhr;
+        } else {
+          this._debug("Generating JPEG file");
+          if (snapshot._mirror) {
+            canvas = document.createElement("canvas");
+            canvas.width = snapshot._canvas.width;
+            canvas.height = snapshot._canvas.height;
+            context = canvas.getContext("2d");
+            context.setTransform(1, 0, 0, 1, 0, 0);
+            context.translate(canvas.width, 0);
+            context.scale(-1, 1);
+            context.drawImage(snapshot._canvas, 0, 0);
+          } else {
+            canvas = snapshot._canvas;
+          }
+          return canvas.toBlob(function(blob) {
+            snapshot._jpeg_blob = blob;
+            return that._engine_upload(snapshot, api_url, csrf_token, timeout);
+          }, "image/jpeg", this.quality);
+        }
+      };
+
+      JpegCameraHtml5.prototype._remove_message = function() {
+        return this.message.style.display = "none";
+      };
+
+      JpegCameraHtml5.prototype._load_shutter_sound = function() {
+        var request, that;
+        if (this.audio_context) {
+          return;
+        }
+        this.audio_context = new AudioContext();
+        request = new XMLHttpRequest();
+        request.open('GET', this.options.shutter_url, true);
+        request.responseType = 'arraybuffer';
+        that = this;
+        request.onload = function() {
+          return that.audio_context.decodeAudioData(request.response, function(buffer) {
+            return that.shutter_buffer = buffer;
+          });
+        };
+        return request.send();
+      };
+
+      JpegCameraHtml5.prototype._wait_for_video_ready = function() {
+        var crop, that, video_height, video_width;
+        video_width = parseInt(this.video.videoWidth);
+        video_height = parseInt(this.video.videoHeight);
+        if (video_width > 0 && video_height > 0) {
+          this.video_container.appendChild(this.video);
+          this.video_width = video_width;
+          this.video_height = video_height;
+          this._debug("Camera resolution " + this.video_width + "x" + this.video_height + "px");
+          crop = this._get_video_crop();
+          this.video.style.position = "relative";
+          this.video.style.width = "" + crop.width + "px";
+          this.video.style.height = "" + crop.height + "px";
+          this.video.style.left = "" + crop.x_offset + "px";
+          this.video.style.top = "" + crop.y_offset + "px";
+          return this._prepared();
+        } else if (this._status_checks_count > 100) {
+          return this._got_error("Camera failed to initialize in 10 seconds");
+        } else {
+          this._status_checks_count++;
+          that = this;
+          return setTimeout((function() {
+            return that._wait_for_video_ready();
+          }), 100);
+        }
+      };
+
+      JpegCameraHtml5.prototype._status_checks_count = 0;
+
+      JpegCameraHtml5.prototype._add_prefixed_style = function(element, style, value) {
+        var uppercase_style;
+        uppercase_style = style.charAt(0).toUpperCase() + style.slice(1);
+        element.style[style] = value;
+        element.style["Webkit" + uppercase_style] = value;
+        element.style["Moz" + uppercase_style] = value;
+        element.style["ms" + uppercase_style] = value;
+        return element.style["O" + uppercase_style] = value;
+      };
+
+      JpegCameraHtml5.prototype._get_video_crop = function() {
+        var scaled_video_height, scaled_video_width, video_ratio, video_scale, view_height, view_ratio, view_width;
+        view_width = this._view_width();
+        view_height = this._view_height();
+        video_ratio = this.video_width / this.video_height;
+        view_ratio = view_width / view_height;
+        if (video_ratio >= view_ratio) {
+          this._debug("Filling height");
+          video_scale = view_height / this.video_height;
+          scaled_video_width = Math.round(this.video_width * video_scale);
+          return {
+            width: scaled_video_width,
+            height: view_height,
+            x_offset: -Math.floor((scaled_video_width - view_width) / 2.0),
+            y_offset: 0
+          };
+        } else {
+          this._debug("Filling width");
+          video_scale = view_width / this.video_width;
+          scaled_video_height = Math.round(this.video_height * video_scale);
+          return {
+            width: view_width,
+            height: scaled_video_height,
+            x_offset: 0,
+            y_offset: -Math.floor((scaled_video_height - view_height) / 2.0)
+          };
+        }
+      };
+
+      JpegCameraHtml5.prototype._get_capture_crop = function() {
+        var snapshot_height, snapshot_width, video_ratio, view_height, view_ratio, view_width;
+        view_width = this._view_width();
+        view_height = this._view_height();
+        video_ratio = this.video_width / this.video_height;
+        view_ratio = view_width / view_height;
+        if (video_ratio >= view_ratio) {
+          snapshot_width = Math.round(this.video_height * view_ratio);
+          return {
+            width: snapshot_width,
+            height: this.video_height,
+            x_offset: Math.floor((this.video_width - snapshot_width) / 2.0),
+            y_offset: 0
+          };
+        } else {
+          snapshot_height = Math.round(this.video_width / view_ratio);
+          return {
+            width: this.video_width,
+            height: snapshot_height,
+            x_offset: 0,
+            y_offset: Math.floor((this.video_height - snapshot_height) / 2.0)
+          };
+        }
+      };
+
+      return JpegCameraHtml5;
+
+    })(JpegCamera);
+    ({
+      video_width: null,
+      video_height: null
+    });
+    window.JpegCamera = JpegCameraHtml5;
+  }
+
+  supported_flash_version = '9';
+
+  if (!window.JpegCamera && window.swfobject && swfobject.hasFlashPlayerVersion(supported_flash_version)) {
+    JpegCameraFlash = (function(_super) {
+      __extends(JpegCameraFlash, _super);
+
+      function JpegCameraFlash() {
+        _ref1 = JpegCameraFlash.__super__.constructor.apply(this, arguments);
+        return _ref1;
+      }
+
+      JpegCameraFlash._send_message = function(id, method) {
+        var args, instance;
+        instance = this._instances[parseInt(id)];
+        if (!instance) {
+          return;
+        }
+        args = Array.prototype.slice.call(arguments, 2);
+        return this.prototype[method].apply(instance, args);
+      };
+
+      JpegCameraFlash._instances = {};
+
+      JpegCameraFlash._next_id = 1;
+
+      JpegCameraFlash.prototype._engine_init = function() {
+        var attributes, callback, flash_object_id, flashvars, height, params, that, width;
+        this._debug("Using Flash engine");
+        this._id = this.constructor._next_id++;
+        this.constructor._instances[this._id] = this;
+        width = this._view_width();
+        height = this._view_height();
+        if (width < 215 || height < 138) {
+          this._got_error("camera is too small to display privacy dialog");
+          return;
+        }
+        flash_object_id = "flash_object_" + this._id;
+        params = {
+          loop: "false",
+          allowScriptAccess: "always",
+          allowFullScreen: "false",
+          quality: "best",
+          wmode: "opaque",
+          menu: "false"
+        };
+        attributes = {
+          id: flash_object_id,
+          align: "middle"
+        };
+        flashvars = {
+          id: this._id,
+          width: width,
+          height: height,
+          shutter_url: this.options.shutter_url
+        };
+        that = this;
+        callback = function(event) {
+          if (!event.success) {
+            return that._got_error("Flash loading failed.");
+          } else {
+            that._debug("Flash loaded");
+            return that._flash = document.getElementById(flash_object_id);
+          }
+        };
+        this.internal_container = document.createElement("div");
+        this.internal_container.id = "jpeg_camera_flash_" + this._id;
+        this.internal_container.style.width = "100%";
+        this.internal_container.style.height = "100%";
+        this.container.appendChild(this.internal_container);
+        return swfobject.embedSWF(this.options.swf_url, this.internal_container.id, width, height, '9', null, flashvars, params, attributes, callback);
+      };
+
+      JpegCameraFlash.prototype._engine_play_shutter_sound = function() {
+        return this._flash._play_shutter();
+      };
+
+      JpegCameraFlash.prototype._engine_capture = function(snapshot, mirror, quality) {
+        return this._flash._capture(snapshot.id, mirror, quality);
+      };
+
+      JpegCameraFlash.prototype._engine_display = function(snapshot) {
+        return this._flash._display(snapshot.id);
+      };
+
+      JpegCameraFlash.prototype._engine_discard = function(snapshot) {
+        return this._flash._discard(snapshot.id);
+      };
+
+      JpegCameraFlash.prototype._engine_show_stream = function() {
+        return this._flash._show_stream();
+      };
+
+      JpegCameraFlash.prototype._engine_upload = function(snapshot, api_url, csrf_token, timeout) {
+        return this._flash._upload(snapshot.id, api_url, csrf_token, timeout);
+      };
+
+      JpegCameraFlash.prototype._flash_prepared = function() {
+        return this._prepared();
+      };
+
+      JpegCameraFlash.prototype._flash_upload_complete = function(snapshot_id, status_code, error, response) {
+        var snapshot;
+        snapshot_id = parseInt(snapshot_id);
+        snapshot = this._snapshots[snapshot_id];
+        snapshot._status = parseInt(status_code);
+        snapshot._response = response;
+        if (snapshot._status >= 200 && snapshot._status < 300) {
+          return snapshot._upload_done();
+        } else {
+          snapshot._error_message = error;
+          return snapshot._upload_fail();
+        }
+      };
+
+      return JpegCameraFlash;
+
+    })(JpegCamera);
+    window.JpegCamera = JpegCameraFlash;
+  }
+
+  Snapshot = (function() {
+    Snapshot._next_snapshot_id = 1;
+
+    function Snapshot(camera, options) {
+      this.camera = camera;
+      this.options = options;
+      this.id = this.constructor._next_snapshot_id++;
+    }
+
+    Snapshot.prototype._discarded = false;
+
+    Snapshot.prototype.show = function() {
+      if (this._discarded) {
+        raise("discarded snapshot cannot be used");
+      }
+      this.camera._display(this);
+      return this;
+    };
+
+    Snapshot.prototype.hide = function() {
+      if (this.camera.displayed_snapshot() === this) {
+        this.camera.show_stream();
+      }
+      return this;
+    };
+
+    Snapshot.prototype.upload = function(options) {
+      var cache, csrf_token;
+      if (options == null) {
+        options = {};
+      }
+      if (this._discarded) {
+        raise("discarded snapshot cannot be used");
+      }
+      if (this._uploading) {
+        this._debug("Upload already in progress");
+        return;
+      }
+      this._uploading = true;
+      this._upload_options = options;
+      cache = this._options();
+      if (!cache.api_url) {
+        this.camera._debug("Snapshot#upload called without valid api_url");
+        throw "Snapshot#upload called without valid api_url";
+      }
+      if ("string" === typeof cache.csrf_token && cache.csrf_token.length > 0) {
+        csrf_token = cache.csrf_token;
+      } else {
+        csrf_token = null;
+      }
+      this._done = false;
+      this._response = null;
+      this._fail = false;
+      this._status = null;
+      this._error_message = null;
+      this.camera._upload(this, cache.api_url, csrf_token, cache.timeout);
+      return this;
+    };
+
+    Snapshot.prototype._upload_options = {};
+
+    Snapshot.prototype._uploading = false;
+
+    Snapshot.prototype.done = function(callback) {
+      var cache;
+      if (this._discarded) {
+        raise("discarded snapshot cannot be used");
+      }
+      this._upload_options.on_upload_done = callback;
+      cache = this._options();
+      if (cache.on_upload_done && this._done) {
+        cache.on_upload_done.call(this, this._response);
+      }
+      return this;
+    };
+
+    Snapshot.prototype._done = false;
+
+    Snapshot.prototype._response = null;
+
+    Snapshot.prototype.fail = function(callback) {
+      var cache;
+      if (this._discarded) {
+        raise("discarded snapshot cannot be used");
+      }
+      this._upload_options.on_upload_fail = callback;
+      cache = this._options();
+      if (cache.on_upload_fail && this._fail) {
+        cache.on_upload_fail.call(this, this._status, this._error_message, this._response);
+      }
+      return this;
+    };
+
+    Snapshot.prototype._fail = false;
+
+    Snapshot.prototype._status = null;
+
+    Snapshot.prototype._error_message = null;
+
+    Snapshot.prototype.discard = function() {
+      this.camera._discard(this);
+      return void 0;
+    };
+
+    Snapshot.prototype._options = function() {
+      return this.camera._extend({}, this.camera.options, this.options, this._upload_options);
+    };
+
+    Snapshot.prototype._upload_done = function() {
+      var cache;
+      this.camera._debug("Upload completed");
+      this._uploading = false;
+      this._done = true;
+      cache = this._options();
+      if (cache.on_upload_done) {
+        return cache.on_upload_done.call(this, this._response);
+      }
+    };
+
+    Snapshot.prototype._upload_fail = function() {
+      var cache;
+      this.camera._debug("Upload failed with status " + this._status);
+      this._uploading = false;
+      this._fail = true;
+      cache = this._options();
+      if (cache.on_upload_fail) {
+        return cache.on_upload_fail.call(this, this._status, this._error_message, this._response);
+      }
+    };
+
+    return Snapshot;
+
+  })();
+
+}).call(this);