Databases
StackOverflow2013
Postsdbo
PODisplay pic in web page captured from webcam
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODisplay pic in web page captured from webcam
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload