Display pic in web page captured from webcam

问题

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.

回答1:

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.

来源：https://stackoverflow.com/questions/12163537/display-pic-in-web-page-captured-from-webcam

标签

jquery

plugins

webcam