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>
<asp:Image ID="Image" runat ="server" Height="240px" Width="320px" />
Take a picture
--HTml
--Handler.ashx
if (context.Request.Form["type"] == "pixel") {
///Do Stuff
}else{
///Do Stuff
}