jquery webcam plugin with asp.net mvc 3

Question

has anyone gotten this http://www.xarg.org/project/jquery-webcam-plugin/, to work with aps.net mvc 3? I can\'t seem to decode the image, using the WebImage class or BitmapIm

Answer 1

You might give www.scriptcam.com a try, there is extensive documentation available on this jquery plugin.

Answer 2

The documentation contains many examples. All that's needed is to read and try out.

So here's how your Index.cshtml view might look like using the browser's HTML5 canvas element to encode the raw image data coming from the webcam into a PNG image that will be sent to the server using an AJAX request:

<script src="@Url.Content("~/Scripts/jquery.webcam.js")" type="text/javascript"></script>

<div id="webcam"></div>
<a href="#" id="upload">Capture image and send for processing</a>

<script type="text/javascript">
    var pos = 0, ctx = null, saveCB, image = [];
    var canvas = document.createElement('canvas');
    canvas.setAttribute('width', 320);
    canvas.setAttribute('height', 240);
    ctx = canvas.getContext('2d');
    image = ctx.getImageData(0, 0, 320, 240);

    var 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('@Url.Action("Upload")', { type: 'data', image: canvas.toDataURL("image/png") }, function (result) {
                if (result.success) {
                    alert('The image was successfully sent to the server for processing');
                }
            });
            pos = 0;
        }
    };

    $('#webcam').webcam({
        width: 320,
        height: 240,
        mode: 'callback',
        swffile: '@Url.Content("~/scripts/jscam_canvas_only.swf")',
        onSave: saveCB,
        onCapture: function () {
            webcam.save();
        }
    });

    $('#upload').click(function () {
        webcam.capture();
        return false;
    });
</script>

and your Home controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Upload(string image)
    {
        image = image.Substring("data:image/png;base64,".Length);
        var buffer = Convert.FromBase64String(image);
        // TODO: I am saving the image on the hard disk but
        // you could do whatever processing you want with it
        System.IO.File.WriteAllBytes(Server.MapPath("~/app_data/capture.png"), buffer);
        return Json(new { success = true });
    }
}