0

I'm using jquery-webcam-plugin (not familiar with jQuery). I want to take picture in webcam and want to display that picture in the same web page instantly, possibly replacing some default image by image captured from webcam, without any server communication, is that possible? if possible please suggest.

If the image captured from webcam is saved locally, can I use that image path?

I'm using the following code(along with the related API/plugin):

<html>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.webcam.js" type="text/javascript"></script>
<script type="text/javascript">

// this is the interface to webcam, registers webcam
function showWebcam(){ 
$("#camera").webcam({
        width: 320,
        height: 240,
        mode: "callback",
        swffile: "jscam_canvas_only.swf",

        quality: 85,

    onCapture:  function () {
    },
    onTick:     function () {},
    onSave:     function () {},
    onLoad:     function () {},

        debug: function(type, string) {
            $('#wcStatus').append(type + ": " + string + '<br /><br />');
        }      
    }); 
}

// **** THIS IS THE FUNCTION I NEED HELP I THINK ****

//this function captures image from webcam
function capture_image(){ 
    var p = webcam.capture();
    //webcam.save();           
    alert("capture complete "+p); //getting true here

    void(0);

    var canvas = document.getElementById('canvas');
    var context = canvas.getContext("2d");
    var img = canvas.toDataURL("image/png");
    var item_image = img.replace(/^data:image\/(png|jpg);base64,/, "") ;
    //alert(item_image);

//LINE BELOW DOESN'T WORK, I want to replace default image by image of a <img> tag
//captured by WC
    document.getElementById('myImg').src=img;//<img tag>
    document.getElementById('myImg').src=item_image;
//  NOW WHAT TO DO HERE PLEASE SUGGEST
}
 </script>
 </head>


//FOLLOWING IS THE HTML SNIPPET


 <body>
    <div id="camera"></div>    
    <div id="camList"></div>
    <div id="wcStatus"></div>    
    <button onclick="showWebcam();">Use Webcam Instead</button>    
    <button onclick="javascript:capture_image();">Take a picture!</button>
    <div id="capture_images"><input id="capture_image" type="hidden" value="" name="capture[image]"></div>
    // some default image, which will be replaced by image captured by webcam
        <img id="myImg" src="face.png" border=1> 
        <p><canvas id="canvas" width="320" height="240"></canvas></p>
        </body>
        </html>

Any suggestion is appreciated. please rectify me if I'm doing wrong.

jrummell
  • 42,637
  • 17
  • 112
  • 171
user1630743
  • 1
  • 1
  • 1

1 Answers1

0

The source code explains how it works. The photo is not stored on the filesystem, but rather is stored as a base64-encoded Javascript variable.

dotancohen
  • 30,064
  • 36
  • 138
  • 197
  • But i'm not even getting the exact base64-encoded.If i decode the base64-encoded then it generates an image with black and white boxes.Kindly tell me solution how can i generate base64-encoded for the image. – Tushar Paliwal Dec 04 '13 at 11:34
  • It sounds to me that your webcam returned an image with black and white boxes! If the base64 were improperly decoded, then what you would have received would not be translated into an image. – dotancohen Dec 04 '13 at 12:24
  • Actually i got base64 which is value of item_image then i decode this base64 using one java into image.The image i got contains white and black box. – Tushar Paliwal Dec 04 '13 at 13:04