The jQuery webcam plugin is a transparent layer to communicate with a camera directly in JavaScript.
Overview
This plugin provides three different modes to access a webcam through a small API directly with JavaScript – or more precisely jQuery. Thus, it is possible to bring the image on a Canvas (callback mode), to store the image on the server (save mode) and to stream the live image of the Flash element on a Canvas (stream mode). If you just want to download the plugin, click here:
http://www.xarg.org/project/jquery-webcam-plugin/
© 2008-2010 Robert Eisele | http://www.xarg.org/
The jQuery webcam plugin is a transparent layer to communicate with a camera directly in JavaScript.
Overview
This plugin provides three different modes to access a webcam through a small API directly with JavaScript – or more precisely jQuery. Thus, it is possible to bring the image on a Canvas (callback mode), to store the image on the server (save mode) and to stream the live image of the Flash element on a Canvas (stream mode). If you just want to download the plugin, click here:
Download the jQuery webcam plugin
jQuery webcam example
Take a picture after 3 seconds | Take a picture instantly
Available Cameras
- Laptop Integrated Webcam
- Google Camera Adapter 0
- Google Camera Adapter 1
If you activate the filter with the button on the right side of the picture, methods of my already published jQuery plugin xcolor will be used to distort the colors of the Canvas.
General information about the interface
The following snippet describes the interface of the webcam API:
$("#camera").webcam({
width: 320,
height: 240,
mode: "callback",
swffile: "/download/jscam_canvas_only.swf",
onTick: function() {},
onSave: function() {},
onCapture: function() {},
debug: function() {},
onLoad: function() {}
});
Config Parameter
width
The width of the flash movie.
height
The height of the flash movie. Both parameters have to be changed in the Flash file as well. Follow the instructions below to recompile the swf after the size change.
mode
The storage mode can be one of the following: callback, save, stream. Details about the usage of each parameter can be found under the according heading below.
swffile
Points to the swf file of the Flash movie, which provides the webcam API. There are two swf files provided via the download archive: jscam.swf, which provides the full API and jscam_canvas_only.swf which have no embedded JPEG library (I embedded an adjusted JPGEncoder of the AS 3 corelib). Thereby, the file is only one third as large as the original.
onTick, onSave, onCapture
These callbacks are described in detail below, since they change with each mode.
onLoad
The onLoad callback is called as soon as the registration of the interface is done. In the example above, I use the callback to get a list of all cameras available:
onLoad: function() {
var cams = webcam.getCameraList();
for(var i in cams) {
jQuery("#cams").append("<li>" + cams[i] + "</li>");
}
}
Once the onLoad callback is called, a global object window.webcam is available, which provides the following methods:
- capture([delay])
Captures an image internally.
- save([file])
Saves the captured image accordingly to the storage mode.
- getCameraList()
Get’s an array of available cameras. If no camera is installed, an error is thrown and an empty array is returned.
- setCamera([index])
Switches to a different camera. The parameter is the index of the element in the resulting array of getCameraList()
debug
The debug callback is called whenever there is a note or an error you should be notified. In the example above, I just replace the html content of the output container:
debug: function (type, string) {
$("#status").html(type + ": " + string);
}
-34.500808
-58.644458
Me gusta esto:
Me gusta Cargando...
Leer más “Showcase: Beautiful Jewelry Websites Created with Wix”
The nature of the 
Much has been written about the next wave of web technologies, namely 
