jQuery webcam plugin
jQuery webcam plugin
The jQuery webcam plugin is a transparent layer to communicate with a camera directly in JavaScript.
As there is native support for webcams in modern browsers, it would be great if you could add this feature to the project and use the flash-version as a fallback for older ones. I don't have time for this project at the moment, so a pull request would be great!
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:
jQuery webcam example
Available Cameras
- HP Webcam [2 MP Fixed]: HP Webc (V4L2)
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);
}
Callback Interface
The callback mode is used to get the raw data via a callback method to write it on a canvas element for example. The example above uses the callback mode.
As for the processing, one can imagine how it works as follows: Once the user has completely loaded the entire page and has accepted the security setting of Flash, she should be able to see herself. Then, the user triggers the method window.capture(). This may optionally receive a parameter that specifies the time to wait until the image is shot. To view the passage of time, the method onTick() is called after every second. The received parameter of this method is the amount of seconds remaining. In the example above, I simply change the status message like this:
onTick: function(remain) { if (0 == remain) {
jQuery("#status").text("Cheese!");
} else {
jQuery("#status").text(remain + " seconds remaining...");
}
}
Is copying finished, the onCapture callback is called, which in the example of above immediately calls the method webcam.save() to ultimately write the image to the canvas. The sample code also contains a small gimmick to simulate a flash using a lightbox and jQuery's fadeOut() fx method.
onCapture: function () { jQuery("#flash").css("display", "block");
jQuery("#flash").fadeOut("fast", function () {
jQuery("#flash").css("opacity", 1);
}); webcam.save();
}
In callback mode, for every line the callback onSave() is invoked, which gets an integer CSV of color values (separator is the semicolon). To write the data on the canvas, I use the following method in the example above:
onSave: function(data) { var col = data.split(";");
var img = image; for(var i = 0; i < 320; i++) {
var tmp = parseInt(col[i]);
img.data[pos + 0] = (tmp >> 16) & 0xff;
img.data[pos + 1] = (tmp >> 8) & 0xff;
img.data[pos + 2] = tmp & 0xff;
img.data[pos + 3] = 0xff;
pos+= 4;
} if (pos >= 4 * 320 * 240) {
ctx.putImageData(img, 0, 0);
pos = 0;
}
}
Save Interface
From the view of processing, the save mode is almost identical to the callback mode. The only difference is that the webcam.save() method get's the file name passed as parameter. Then the shot photo is sent via HTTP_RAW_POST_DATA to the server and can be read for example with the following snippet to store or further process it in any way (Warning, input validation is not considered here!).
webcam.save('/upload.php');
And on the server side, you get the image like this:
<?php $str = file_get_contents("php://input");
file_put_contents("/tmp/upload.jpg", pack("H*", $str)); ?>
Alternative method to the upload via Flash
The Flash method has several problems. The implementation can lock the entire Flash movie and in the worst case the whole browser until the picture was uploaded sucessfully. A better approach is Ajax to upload the image asynchronously. Take a look at this example. It uploads a simple picture CSV if canvas elements are not implemented in the browser and sends a data url formatted string otherwise:
$(function() { var pos = 0, ctx = null, saveCB, image = []; var canvas = document.createElement("canvas");
canvas.setAttribute('width', 320);
canvas.setAttribute('height', 240); if (canvas.toDataURL) { ctx = canvas.getContext("2d"); image = ctx.getImageData(0, 0, 320, 240); saveCB = function(data) { var col = data.split(";");
var img = image; for(var i = 0; i < 320; i++) {
var tmp = parseInt(col[i]);
img.data[pos + 0] = (tmp >> 16) & 0xff;
img.data[pos + 1] = (tmp >> 8) & 0xff;
img.data[pos + 2] = tmp & 0xff;
img.data[pos + 3] = 0xff;
pos+= 4;
} if (pos >= 4 * 320 * 240) {
ctx.putImageData(img, 0, 0);
$.post("/upload.php", {type: "data", image: canvas.toDataURL("image/png")});
pos = 0;
}
}; } else { saveCB = function(data) {
image.push(data); pos+= 4 * 320; if (pos >= 4 * 320 * 240) {
$.post("/upload.php", {type: "pixel", image: image.join('|')});
pos = 0;
}
};
} $("#webcam").webcam({ width: 320,
height: 240,
mode: "callback",
swffile: "/download/jscam_canvas_only.swf", onSave: saveCB, onCapture: function () {
webcam.save();
}, debug: function (type, string) {
console.log(type + ": " + string);
}
}); });
The server could then do something like this:
<?php if ($_POST['type'] == "pixel") {
// input is in format 1,2,3...|1,2,3...|...
$im = imagecreatetruecolor(320, 240); foreach (explode("|", $_POST['image']) as $y => $csv) {
foreach (explode(";", $csv) as $x => $color) {
imagesetpixel($im, $x, $y, $color);
}
}
} else {
// input is in format: data:image/png;base64,...
$im = imagecreatefrompng($_POST['image']);
} // do something with $im ?>
Stream interface
The stream mode is also quite the same procedure as the callback mode, with the difference that the onSave callback is called non-stop. The streaming starts with the method webcam.capture(). The webcam.save() method has no further effect.
Recompile the Flash binary
If you've made changes to the code or did just adjust the size of the video in the XML specification file, you can easily recompile the swf file from Linux console with the provided Makefile. You are required to install the two open source projects swfmill and mtasc that can be easily installed using apt-get under Debian/Ubuntu:
apt-get install swfmill mtasc
vim src/jscam.xml
make
Hint about empty screens after recompilation
There is a bug in the current version of swfmill. Please try to downgrade swfmill to 2.0.12, which fixes the issue!
jQuery webcam plugin的更多相关文章
- jQuery Webcam Plugin jscam.swf文件反编译工具使用说明
jQuery webcam plugin是一个在ie,firefox,chrome下都可以用的摄像头摄像及拍照用的插件. (http://www.xarg.org/project/jquery-web ...
- 30个非常流行的提示信息插件(jQuery Tooltip Plugin)
在网站的设计中,提示信息是非常细微的功能,但是起着非常重要的作用.如果你的网站中提示信息做的比较好,会给浏览者留下非常深刻的印象,同时也会起到非常好的网站宣传效果,下面介绍了30个比较流行提示信息插件 ...
- JQuery多媒体插件jQuery Media Plugin使用详解
malsup jquery media plugin 该插件可以播放多种类型的多媒体文件包括:Flash, Quicktime, Windows Media Player, Real Player, ...
- jQuery DataTables Plugin Meets C#
Over the weekend, I was doing some work on the internal CMS we use over at eagleenvision.net and I w ...
- jQuery Validation Plugin学习
http://blog.csdn.net/violet_day/article/details/14109261 jQuery Validation Plugin Demo 一.默认校验规则 (1)r ...
- (转)jQuery Validation Plugin客户端表单证验插件
jQuery Validation Plugin客户端表单验证插件 官方文档:http://jqueryvalidation.org/documentation/ 官方demo:http://jque ...
- 表单验证的validate.js插件---jQuery Validation Plugin
早上在公交车上看了一个关于慕课网的教程<表单验证的validate.js插件---jQuery Validation Plugin>,正好可以用到自己近期开发简易微博的注册页面和登录页面, ...
- jQuery validator plugin 之 custom methods 案例1:multi email
1.add method jQuery.validator.addMethod( "multiemail", function (value, element) { var ema ...
- Using The jQuery Migrate Plugin
jQuery( html [, ownerDocument ] )Returns: jQuery Description: Creates DOM elements on the fly from t ...
随机推荐
- Linux vsftd配置文件
vi /etc/vsftpd.conf listen=YES userlist_deny=NO userlist_enable=YES anonymous_enable=YES local_enabl ...
- [Hive_add_2] Hive 数据类型
Hive 数据类型 正常数据类型 # 整型,4个字节 int # 大整型,8个字节 bigint # 字符串,最大长度2G String 复杂数据类型 # 数组,相同类型元素的数组 array< ...
- centos7搭建SVN+Apache+IF.svnadmin支持https实现web管理SVN
阅读目录 1. 介绍 2. 软件准备 3. 建立SVN Server仓库 4. 配置安装PHP&IF.SVNadmin 5. 启动服务 1.介绍 公司最近想把Windows server平台的 ...
- Django框架的使用教程--mysql数据库[三]
Django的数据库 1.在Django_test下的view.py里面model定义模型 from django.db import models # Create your models here ...
- Ubuntu 16.04 LTS 降级安装GCC 4.8
转载自https://www.linuxidc.com/Linux/2017-03/142299.htm Ubuntu 16.04 LTS 降级安装GCC 4.8 [日期:2017-03-28] 来源 ...
- Alpha冲刺! Day7 - 砍柴
Alpha冲刺! Day7 - 砍柴 今日已完成 晨瑶:列了各模块目前的进度情况:确定了纯多媒体流星预览页的显示方式:给工具包函数列表新增了与服务器端的交互:玩华为软件云发现刚好可以试试它的测试,于是 ...
- Nginx SSL TLS部署最佳实践
本文介绍nginx在提供HTTPS时使用的一些其他配置选项. 虽然这些功能有助于优化nginx的SSL和TLS,但这不是一个完整对加固nginx的介绍. 确保您的服务器安全的最佳方法是不仅需要正确的配 ...
- (7)Python赋值机制
- 解决eclipse中Tomcat服务器的server location选项不能修改的问题
在Eclipse菜单栏中选择window — show view — server 可以看到服务的面板,服务面板中可看到已配置的Tomcat以及Tomcat下的项目 双击tomca进入设置界面,如果看 ...
- [BJWC2011]元素
嘟嘟嘟 题中说选的数的编号亦或和不能为0,也就是在这个集合中,不能用不同的选取方案亦或出相同的值.由此联想到线性基的一个性质是,每一个数都能由线性基中特定的一些数亦或得到. 所以我们就是要求出这些数的 ...