javascript - jquery webcam plugin TypeError : webcam. capture is not a function 偶尔抛出

Question

我经常收到上述主题行的错误。

this被抛出的代码如下(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();

这应该有类似的效果。