jquery - ウェブカメラのキャプチャ画像

Question

Jquery WebCam Pluginを使用して、ウェブカメラから画像をキャプチャしようとしています。キャプチャした画像を見ることができません。コードに何かが欠けていると思います。画像をキャプチャして、キャンバスでユーザーに表示する必要があります。

コード：

$(document).ready(function(){


    $("#camera").webcam({
            width: 315,
            height: 240,
            useMicrophone: false,
            mode: "callback",
            swffile: "resources/swf/jscam_canvas_only.swf", 


            onLoad: function() {

                var cams = webcam.getCameraList();
                for(var i in cams) {
                    jQuery("#cams").append("<li>" + cams[i] + "</li>");
                }
            },

            debug: function (type, string) {
                $("#status").html(type + ": " + string);
            },

            onCapture: function () {

                jQuery("#flash").css("display", "block");
                jQuery("#flash").fadeOut("fast", function () {
                jQuery("#flash").css("opacity", 1);

                webcam.capture();
                 alert($.webcam.getFrameAsBase64());    
                });


            },

            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;
                }
            }





    }); 

});

<label id="status"></label>                             
                    <div id="camera"></div>
                    <div><p><canvas id="canvas" height="240" width="320"></canvas></p></div>
                     <a href="javascript:webcam.capture();changeFilter();void(0);">Take a picture instantly</a>