Saving webcam image using handler

See more:

ASP.NET

Javascript

jQuery

Hi,

I am trying to integrate jquery webcam plugin in asp.net.

http://www.xarg.org/project/jquery-webcam-plugin/[^]

i want the above example to work in ie7 and above

Below is my Code

<script type="text/javascript" src="WebCamScripts/jquery-1.8.3.js"></script>
<script type="text/javascript" src="WebCamScripts/jquery.webcam.js"></script>
<script type="text/javascript">
$(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.ashx", { type: "data", image: canvas.toDataURL("image/png") }, function (data) {
LoadImage(data);
});
pos = 0;
}
};
} else {
saveCB = function (data) {
image.push(data);
pos += 4 * 320;
if (pos >= 4 * 320 * 240) {
$.post("/upload.ashx", { type: "pixel", image: image.join('|') }, function (data) {
LoadImage(data);
});
pos = 0;
}
};
}
$("#webcam").webcam({
width: 320,
height: 240,
mode: "save",
onSave: saveCB,
onCapture: function () {
webcam.save();
},
debug: function (type, string) {
console.log(type + ": " + string);
}
});
});
function LoadImage(data) {
document.getElementById('<%= Image.ClientID %>').ImageUrl = data;
}
</script>
---Html

<div id="webcam">
</div>


Take a picture
--HTml

--Handler.ashx
if (context.Request.Form["type"] == "pixel") {
///Do Stuff


}else{
///Do Stuff
}