jQuery网络摄像头插件TypeError:webcam.capture不是偶尔抛出的函数 [英] jquery webcam plugin TypeError: webcam.capture is not a function thrown occasionally
本文介绍了jQuery网络摄像头插件TypeError:webcam.capture不是偶尔抛出的函数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我经常在每个主题行中都遇到上述错误.
Quite often I am getting the error above per the subject line.
抛出该错误的代码如下(else部分中的函数).
The piece of code that this is thrown at is as follows (the function in the else section).
if ($('#clicktosnap').is('.disabled'))
{
alert ("Please enable the camera first, then press allow on the dialog above.");
}
else
{
webcam.capture();
}
我尝试将代码移动到开始脚本标记中，最后也进行了移动(没有高兴地进行初始化之前和之后)，结果是这种情况不会一直发生，所以我很困惑，这似乎是发生在我第一次访问该页面时，通常在第一次刷新后消失了.
I have tried moving the code in a beginning script tag and at in the end as well (pre and post initialization with no joy) the things is that this doesn't happen all the time so I am confused, it seems to happen when I first visit the page and then it normally goes away after the first refresh.
我曾尝试比较可正常工作的源代码和无法正常工作的源代码.
I have tried to compare the source when this works and when it doesn't and it is exactly the same..
下面的整个代码:
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&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>
推荐答案
我遇到了同样的问题，并且使用了以下解决方法:
I had the same issue and I used this workaround:
document.getElementById('XwebcamXobjectX').capture();
document.getElementById('XwebcamXobjectX').save();
那应该有类似的效果.
这篇关于jQuery网络摄像头插件TypeError:webcam.capture不是偶尔抛出的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
