最近由于项目要进行人像采集，所以就涉及到在web页面调用摄像头，进行拍照来获取图片。
可以初来乍到，这技术又不是杠杠滴，所以在面对这有实现想法，但是又没有实现手段的时候，还是按照往常惯例找度娘
这个搜索过程可谓是无比艰辛，由于关键字不准确迟迟未能找到。
从最开始的“web调用摄像头”开始直到偶然间发现了“web网页控件”这几个字，才恍然大悟想到JQuery，于是乎赶紧搜关键字“jQuery摄像头插件”，这才看到“jQuery摄像头插件jquery-webcam-plugin”
看到网上有很多关于它的介绍，包括一些翻译的官方的文章，然后开始鼓捣这东东。
首先是开始jQuery的初始化
引用http://www.xarg.org/download/jquery.webcam.js
var image = new Array();
var w = 320, h = 240;
var pos = 0;
jQuery("#webcam").webcam({
width: w,
height: h,
mode: "callback",
swffile: "jscam_canvas_only.swf", // canvas only doesn't implement a jpeg encoder, so the file is much smaller
onTick: function (remain) {
if (0 == remain) {
jQuery("#status").text("Cheese!");
} else {
jQuery("#status").text(remain + " seconds remaining...");
}
},
onSave: function (data) {
image.push(data);
pos += 4 * w;
if (pos == 4 * w * h) {
$.post("UploadImage.ashx",
{ w: w, h: h, pix: image.join('|') },
function (msg) {
pos = 0;
image = new Array();
$("#img").attr("src",msg);
});
}
},
onCapture: function () {
webcam.save();
// Show a flash for example
},
debug: function (type, string) {
// Write debug information to console.log() or a div, ...
},
onLoad: function () {
// Page load
//var cams = webcam.getCameraList();
}
});
由于是要用到wsf文件，这时候初始化运行后页面会有个进行确认的框，通过后摄像头就开启，页面出现实时图像
这时候就可以用一个事件 比如按钮点击等等。。。用来触发webcam.capture();这个方法进行拍照
这个方法会触发控件内部的onSave事件，获取当前的视频流(不知道该怎么准确的称呼)
接下来就直接用了个$.Post()给传到服务器上去，毕竟我这里拍照主要是为了进行图片保存
原本以为传上去回去到的视频流是个base64编码的文本 结果干了半天都不是
仔细的把那一长串的值给弄到记事本里面去研究研究
发现基本上都是类似一下这种格式
000000;000000;000000;.........
这种格式的一串字符 我把他称为base32文本（技术问题，别嘲笑 哈哈）
然后我服务端的代码如下(.net)：
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/html";
var imageStr = context.Request["pix"];
string fileName = DateTime.Now.Ticks.ToString();
var path = "upload/" + fileName + ".jpg";
//上传至upload文件夹
uploadBase32(context, path);
context.Response.Write(path);
}
//base32解码
public void uploadBase32(HttpContext context,string txtFilePath)
{
String width = context.Request["w"];
String height = context.Request["h"];
String pix = context.Request["pix"];
int w = Convert.ToInt32(width);
int h = Convert.ToInt32(height);
try
{
Bitmap it = new Bitmap(w, h);
String[] rows = pix.Split(new string[]{"|"}, StringSplitOptions.RemoveEmptyEntries);
for (int i = 0; i < rows.Length; i++)
{
String[] col = rows[i].Split(new char[] { ';' }, StringSplitOptions.RemoveEmptyEntries);
for (int j = 0; j < col.Length; j++)
{
int data = Convert.ToInt32(col[j], 10);
it.SetPixel(j, i,Color.FromArgb(data));
}
}
it.Save(System.Web.HttpContext.Current.Server.MapPath(txtFilePath), System.Drawing.Imaging.ImageFormat.Jpeg);
}
catch (Exception e)
{
}
}
然后图片保存了 拍照实现了 再返回去想想那一串有分隔符的每串数字难道真是rgb值。。。。
想想都有点小兴奋 毕竟猜对了
以上就是这次涉及用的jquery.webcam制作demo的大概过程 第一次写这种文章 写的不好不要喷哟