webcam.js Object doesn't support property or method 'capture'

Question

I am creating web application for doctor. At patient treatment page i had used jquery wizard(jquery.steps.min.js) plugin for step by step diagnosis. In last step i had used webcam jquery plugin when i click on Capture Photo button it gives an error Object doesn't support property or method 'capture'

If i used webcam plugin without wizard on test page or first step of wizard it works fine. but if use second or third step it gives above error. below is my jquery code. Error at webcam.capture(); line

<script src="/js/jquery-2.1.1.js"></script>
 <!-- WebCam -->
<script src="/js/webcam/jquery.webcam.js"></script>
<script>
var pageUrl = "treatment.aspx";
     $(function () {
         jQuery("#webcam").webcam({
             width: 320,
             height: 240,
             mode: "save",
             swffile: "/js/webcam/jscam.swf",
             debug: function (type, status) {
                 $('#camStatus').append(type + ": " + status + '<br /><br />');
             },
             onSave: function (data) {

                 $.ajax({
                     type: "POST",
                     url: pageUrl + "/GetCapturedImage",
                     data: '',
                     contentType: "application/json; charset=utf-8",
                     dataType: "json",
                     success: function (r) {

                         $("[id*=imgCapture]").css("visibility", "visible");
                         $("[id*=imgCapture]").attr("src", r.d);
                     },
                     failure: function (response) {
                         alert(response.d);
                     }
                 });
             },
             onCapture: function () {
                 webcam.save(pageUrl);
             }
         });
     });

     function Capture() {                        
         webcam.capture();             
         return false;
     }
</script>

Answer 1

Try to put the webcam declaration(below) on pageload.

 jQuery("#webcam").webcam({ width: 320, height: 240, mode: "save", swffile: "/js/webcam/jscam.swf", debug: function (type, status) { $('#camStatus').append(type + ": " + status + '<br /><br />'); }, onSave: function (data) { $.ajax({ type: "POST", url: pageUrl + "/GetCapturedImage", data: '', contentType: "application/json; charset=utf-8", dataType: "json", success: function (r) { $("[id*=imgCapture]").css("visibility", "visible"); $("[id*=imgCapture]").attr("src", rd); }, failure: function (response) { alert(response.d); } }); }, onCapture: function () { webcam.save(pageUrl); } });