Code Monkey home page Code Monkey logo

cameraform's Introduction

CameraForm

Attempt at creating an open source Flash+Javascript library for webcam capture of a static image that gets submitted via a form. It should support the easy embedding of a capture frame into a HTML form with other parameters.

The idea being that developers wont have to mess around with evil Flash/AS themselves, and instead can download a handy precompiled library that they just interact with via HTML/JS land.

Obviously what would be more ideal would be browser support for <input type=camera> but that was apparently nixed from the HTML5 spec, so for now, this!

Differences from jpegcam

This project is forked from jpegcam (v1.08) by jhuckaby. The notable changes are:�

  • Adding support for getting back the JPEG as a base64 encoded string, so you can submit it via a standard HTML form after you insert the value via Javascript. This makes it much more flexible for usage in web apps, and is consistent with the goal of doing as little in Flash as possible.
  • TODO: Adding console.log calls via ExternalInterface in addition to trace(), for ease of debugging in web browser with Firebug.
  • Putting it on github, since git and github are awesome and allow for easier collaboration.

As per the parent project, it is licensed under LGPL license terms.

Usage

For now, look at the jpegcam documentation for basic setup stuff.

The main difference here is that once you freeze() the image, instead of calling upload(), you can call dump() instead, which will return a base64 encoded JPEG to the callback handler.

Once you get the return value in the callback, you can just stick it in a hidden form value:

<form onSubmit='doSomething();'>
	<!-- your other form stuff here -->
	<input type='hidden' id='img_data'>
	<input type='submit' id='submit_button' disabled='true'>
</form>
<script language="JavaScript">
	webcam.set_hook( 'onComplete', 'completion_handler' );

	function completion_handler(data) {
		document.getElementById('img_data').value = data;
		document.getElementById('submit_button').disabled = false;
	}
</script>

I'm assuming you already know what to do with a form!

You can even preview it by writing a data-uri into the src of an image. Assuming we have an image with id=preview, then:

var p = document.getElementById('preview');
p.src = 'data:image/jpeg;base64,' + data;

Fun for the whole family.

Demo

Probably easiest to just look at the source code on the demo page.

License

LGPL

cameraform's People

Contributors

mroth avatar

Watchers

James Cloos avatar Adnan Abdulhussein avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.