jquery網絡攝像頭插件TypeError：webcam.capture不是偶爾拋出的函數

Question

很多時候我得到了上面每個主題行的錯誤。

這引發的代碼片段如下所示（else節中的函數）。

if ($('#clicktosnap').is('.disabled')) 
{ 
alert ("Please enable the camera first, then press allow on the dialog above."); 
} 
else 
{ 
webcam.capture(); 
} 

我試圖在開始的腳本標記，並在年底移動代碼，以及（前，後的初始化沒有快樂）的一件事是，這不會發生的事情讓我很困惑，當我第一次訪問該頁面時，似乎會發生，然後在第一次刷新後通常會消失。

我試圖比較來源時，這工作，當它不，它是完全一樣的..

下面

整個代碼：

JS

<div id="webcam" style="display:none" > 
         <object width="218" height="240" data="assets/js/webcam/jscam_canvas_only.swf" type="application/x-shockwave-flash" id="XwebcamXobjectX"><param value="assets/js/webcam/jscam_canvas_only.swf" name="movie"><param value="mode=callback&amp;quality=85" name="FlashVars"><param value="always" name="allowScriptAccess"></object> 

          <div class="takepic"> 
           <a class="clicktosnap disabled" id="clicktosnap"> Take a picture now! </a> 
         </div> 

       <canvas width="320" height="240" id="canvas" ></canvas> 
       <img id="primaryweb" width="220" style="display: none;" height="220" src="http://127.0.0.1/ex/main//upload/copy/"> 

</div> 

JS 

<script type="text/javascript" src="assets/js/webcam/jquery.webcam.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 

var pos = 0; 
var ctx = null; 
var cam = null; 
var image = null; 

var filter_on = false; 
var filter_id = 0; 

function changeFilter() { 
    if (filter_on) { 
     filter_id = (filter_id + 1) & 7; 
    } 
} 

function toggleFilter(obj) { 
    if (filter_on =!filter_on) { 
     obj.parentNode.style.borderColor = "#c00"; 
    } else { 
     obj.parentNode.style.borderColor = "#333"; 
    } 
} 




jQuery("#webcam").webcam({ 

    width: 320, 
    height: 240, 

    mode: "callback", 
    swffile: "/assets/js/webcam/jscam_canvas_only.swf", 



    onTick: function(remain) { 

     if (0 == remain) { 
      jQuery("#status").text("Cheese!"); 
     } else { 
      jQuery("#status").text(remain + " seconds remaining..."); 
     } 
    }, 

    onSave: function(data) { 

     var col = data.split(";"); 
     var img = image; 

     if (false == filter_on) { 

      for(var i = 0; i < 320; i++) { 
       var tmp = parseInt(col[i]); 
       img.data[pos + 0] = (tmp >> 16) & 0xff; 
       img.data[pos + 1] = (tmp >> 8) & 0xff; 
       img.data[pos + 2] = tmp & 0xff; 
       img.data[pos + 3] = 0xff; 
       pos+= 4; 
      } 

     } else { 

      var id = filter_id; 
      var r,g,b; 
      var r1 = Math.floor(Math.random() * 255); 
      var r2 = Math.floor(Math.random() * 255); 
      var r3 = Math.floor(Math.random() * 255); 

      for(var i = 0; i < 320; i++) { 
       var tmp = parseInt(col[i]); 

       /* Copied some xcolor methods here to be faster than calling all methods inside of xcolor and to not serve complete library with every req */ 

       if (id == 0) { 
        r = (tmp >> 16) & 0xff; 
        g = 0xff; 
        b = 0xff; 
       } else if (id == 1) { 
        r = 0xff; 
        g = (tmp >> 8) & 0xff; 
        b = 0xff; 
       } else if (id == 2) { 
        r = 0xff; 
        g = 0xff; 
        b = tmp & 0xff; 
       } else if (id == 3) { 
        r = 0xff^((tmp >> 16) & 0xff); 
        g = 0xff^((tmp >> 8) & 0xff); 
        b = 0xff^(tmp & 0xff); 
       } else if (id == 4) { 

        r = (tmp >> 16) & 0xff; 
        g = (tmp >> 8) & 0xff; 
        b = tmp & 0xff; 
        var v = Math.min(Math.floor(.35 + 13 * (r + g + b)/60), 255); 
        r = v; 
        g = v; 
        b = v; 
       } else if (id == 5) { 
        r = (tmp >> 16) & 0xff; 
        g = (tmp >> 8) & 0xff; 
        b = tmp & 0xff; 
        if ((r+= 32) < 0) r = 0; 
        if ((g+= 32) < 0) g = 0; 
        if ((b+= 32) < 0) b = 0; 
       } else if (id == 6) { 
        r = (tmp >> 16) & 0xff; 
        g = (tmp >> 8) & 0xff; 
        b = tmp & 0xff; 
        if ((r-= 32) < 0) r = 0; 
        if ((g-= 32) < 0) g = 0; 
        if ((b-= 32) < 0) b = 0; 
       } else if (id == 7) { 
        r = (tmp >> 16) & 0xff; 
        g = (tmp >> 8) & 0xff; 
        b = tmp & 0xff; 
        r = Math.floor(r/255 * r1); 
        g = Math.floor(g/255 * r2); 
        b = Math.floor(b/255 * r3); 
       } 

       img.data[pos + 0] = r; 
       img.data[pos + 1] = g; 
       img.data[pos + 2] = b; 
       img.data[pos + 3] = 0xff; 
       pos+= 4; 
      } 
     } 

     if (pos >= 0x4B000) { 
      ctx.putImageData(img, 0, 0); 
      pos = 0; 
      document.getElementById('my_hidden').value = canvas.toDataURL('image/png'); 
      $('#primaryweb').hide(); 
      $('#canvas').show(); 
     } 
    }, 

    onCapture: function() { 
     webcam.save(); 

     jQuery("#flash").css("display", "block"); 
     jQuery("#flash").fadeOut(100, function() { 
      jQuery("#flash").css("opacity", 1); 
     }); 
    }, 

    //debug: function (type, string) { 
    // jQuery("#status").html(type + ": " + string); 
     //console.log(type + ": " + string); 
    //}, 

    onLoad: function() { 

     var cams = webcam.getCameraList(); 
     if ((cams.length)>=1) 
     { 

     //we are ok enoguh cams 
     } 
     else 
     { 

     $('#webcam').hide();  
     $('#filesystem').prop('checked', true); 
     $("#filesystem").trigger("click"); 
     $("#section-source").hide(); 


     } 

     for(var i in cams) { 
      jQuery("#cams").append("<li>" + cams[i] + "</li>"); 
      //IF NOT HERE ENABLE CAMERA OTHERWISE DISABLE 
     } 
    }, 
    debug: function(type, string) { 
    //console.log(type + ": " + string); 
     if (string === "Camera started") { 
      window.webcam.started = true; 
      if (window.webcam.onStarted) { window.webcam.onStarted(); } 
     } 
     if (string === "Camera stopped") { 
      window.webcam.started = false; 
      if (window.webcam.onStarted) { window.webcam.onStopped(); } 
     }  

    } 
}); 

function getPageSize() { 

    var xScroll, yScroll; 

    if (window.innerHeight && window.scrollMaxY) { 
     xScroll = window.innerWidth + window.scrollMaxX; 
     yScroll = window.innerHeight + window.scrollMaxY; 
    } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac 
     xScroll = document.body.scrollWidth; 
     yScroll = document.body.scrollHeight; 
    } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari 
     xScroll = document.body.offsetWidth; 
     yScroll = document.body.offsetHeight; 
    } 

    var windowWidth, windowHeight; 

    if (self.innerHeight) { // all except Explorer 
     if(document.documentElement.clientWidth){ 
      windowWidth = document.documentElement.clientWidth; 
     } else { 
      windowWidth = self.innerWidth; 
     } 
     windowHeight = self.innerHeight; 
    } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode 
     windowWidth = document.documentElement.clientWidth; 
     windowHeight = document.documentElement.clientHeight; 
    } else if (document.body) { // other Explorers 
     windowWidth = document.body.clientWidth; 
     windowHeight = document.body.clientHeight; 
    } 

    // for small pages with total height less then height of the viewport 
    if(yScroll < windowHeight){ 
     pageHeight = windowHeight; 
    } else { 
     pageHeight = yScroll; 
    } 

    // for small pages with total width less then width of the viewport 
    if(xScroll < windowWidth){ 
     pageWidth = xScroll; 
    } else { 
     pageWidth = windowWidth; 
    } 

    return [pageWidth, pageHeight]; 
} 

window.addEventListener("load", function() { 

    jQuery("body").append("<div id=\"flash\"></div>"); 

    var canvas = document.getElementById("canvas"); 

    if (canvas.getContext) { 
     ctx = document.getElementById("canvas").getContext("2d"); 
     ctx.clearRect(0, 0, 320, 240); 

     var img = new Image(); 
     img.src = "/image/logo.gif"; 
     img.onload = function() { 
      ctx.drawImage(img, 129, 89); 
     } 
     image = ctx.getImageData(0, 0, 320, 240); 
    } 

    var pageSize = getPageSize(); 
    jQuery("#flash").css({ height: pageSize[1] + "px" }); 

}, false); 

window.addEventListener("resize", function() { 

    var pageSize = getPageSize(); 
    jQuery("#flash").css({ height: pageSize[1] + "px" }); 

}, false); 

window.webcam.onStarted = function() { 
    // alert("Whey, the webcam started"); 
    $('#clicktosnap').removeClass("disabled"); 
}; 

window.webcam.onStopped = function() { 
    // alert("Whey, the webcam started"); 
     $('#webcam').hide();  
     $('#filesystem').prop('checked', true); 
     $("#filesystem").trigger("click"); 
     $("#section-source").hide();   
}; 



$('#filesystem').click(function(){ 
    var somvar = $("#pic-selector-wrapper").html(); 
    $("#pic-selector-wrapper").show(); 
    $('#webcam').hide(); 
    $('#more-pics').show(); 
    $('.addmorepics .custom-input-file').show(); 


}); 


$('#camera').click(function(){ 
    $('#more-pics').hide(); 
    $("#pic-selector-wrapper").hide(); 
    $('#webcam').show(); 
$('.addmorepics .custom-input-file').hide(); 

}); 

$('#clicktosnap').click(function(){ 
if ($('#clicktosnap').is('.disabled')) 
{ 
alert ("Please enable the camera first, then press allow on the dialog above."); 
} 
else 
{ 
webcam.capture(); 
} 

}); 


}); 
</script> 

Answer 1

我同樣的問題，我用這個解決方法：

document.getElementById('XwebcamXobjectX').capture(); 
document.getElementById('XwebcamXobjectX').save(); 

這應該有類似的效果。