title: Display pic in web page captured from webcam
body: <p>I'm using <a href="http://www.xarg.org/project/jquery-webcam-plugin/" rel="nofollow">jquery-webcam-plugin</a> (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.</p>
  
  <p>If the image captured from webcam is saved locally, can I use that image path?</p>
  
  <p>I'm using the following code(along with the related API/plugin):</p>
  
  <pre><code>&lt;html&gt;
  &lt;script src="jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="jquery.webcam.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  // 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 + '&lt;br /&gt;&lt;br /&gt;');
          }      
      }); 
  }
  
  // **** 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 &lt;img&gt; tag
  //captured by WC
      document.getElementById('myImg').src=img;//&lt;img tag&gt;
      document.getElementById('myImg').src=item_image;
  //  NOW WHAT TO DO HERE PLEASE SUGGEST
  }
   &lt;/script&gt;
   &lt;/head&gt;
  
  
  //FOLLOWING IS THE HTML SNIPPET
  
  
   &lt;body&gt;
      &lt;div id="camera"&gt;&lt;/div&gt;    
      &lt;div id="camList"&gt;&lt;/div&gt;
      &lt;div id="wcStatus"&gt;&lt;/div&gt;    
      &lt;button onclick="showWebcam();"&gt;Use Webcam Instead&lt;/button&gt;    
      &lt;button onclick="javascript:capture_image();"&gt;Take a picture!&lt;/button&gt;
      &lt;div id="capture_images"&gt;&lt;input id="capture_image" type="hidden" value="" name="capture[image]"&gt;&lt;/div&gt;
      // some default image, which will be replaced by image captured by webcam
          &lt;img id="myImg" src="face.png" border=1&gt; 
          &lt;p&gt;&lt;canvas id="canvas" width="320" height="240"&gt;&lt;/canvas&gt;&lt;/p&gt;
          &lt;/body&gt;
          &lt;/html&gt;
  </code></pre>
  
  <p>Any suggestion is appreciated. please rectify me if I'm doing wrong. </p>