如何解决无法弄清楚如何解决这个问题：“未捕获的类型错误webcam.snap 不是函数”<-- javascript
我有一个 JavaScript 脚本，我收到了一个我无法弄清楚的错误。我正在尝试使用 JavaScript 拍摄网络摄像头提要的照片
错误是：
未捕获的类型错误：webcam.snap 不是函数
我正在使用 webcam.js 拍摄快照。
这是我的 JavaScript 代码：
<script>
var video = document.createElement("video");
var canvasElement = document.getElementById("canvas");
var canvas = canvasElement.getContext("2d");
var loadingMessage = document.getElementById("loadingMessage");
var outputContainer = document.getElementById("output");
var outputMessage = document.getElementById("outputMessage");
var outputData = document.getElementById("outputData");
const jsQR = require("jsqr");
function drawLine(begin,end,color) {
canvas.beginPath();
canvas.moveTo(begin.x,begin.y);
canvas.lineTo(end.x,end.y);
canvas.lineWidth = 4;
canvas.strokeStyle = color;
canvas.stroke();
}
// Use facingMode: environment to attemt to get the front camera on phones
navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } }).then(function(stream) {
video.srcObject = stream;
video.setAttribute("playsinline",true); // required to tell iOS safari we don't want fullscreen
video.play();
requestAnimationFrame(tick);
});
function tick() {
loadingMessage.innerText = "⌛ Loading video..."
if (video.readyState === video.HAVE_ENOUGH_DATA) {
loadingMessage.hidden = true;
canvasElement.hidden = false;
outputContainer.hidden = false;
canvasElement.height = video.videoHeight;
canvasElement.width = video.videoWidth;
canvas.drawImage(video,canvasElement.width,canvasElement.height);
var imageData = canvas.getImageData(0,canvasElement.height);
var code = jsQR(imageData.data,imageData.width,imageData.height,{
inversionAttempts: "invertFirst",});
if (code) {
drawLine(code.location.topLeftCorner,code.location.topRightCorner,"#FF3B58");
drawLine(code.location.topRightCorner,code.location.bottomRightCorner,"#FF3B58");
drawLine(code.location.bottomRightCorner,code.location.bottomLeftCorner,"#FF3B58");
drawLine(code.location.bottomLeftCorner,code.location.topLeftCorner,"#FF3B58");
outputMessage.hidden = true;
outputData.parentElement.hidden = false;
outputData.innerText = code.data;
takeSnapShot();
}
else {
outputMessage.hidden = false;
outputData.parentElement.hidden = true;
}
}
requestAnimationFrame(tick);
}
// TAKE A SNAPSHOT.
takeSnapShot = function () {
webcam.snap(function (data_uri) {
downloadImage('video',data_uri);
});
}
// DOWNLOAD THE IMAGE.
downloadImage = function (name,datauri) {
var a = document.createElement('a');
a.setAttribute('download',name + '.png');
a.setAttribute('href',datauri);
a.click();
}
</script>
这是导致问题的第一行：
webcam.snap(function (data_uri) {
downloadImage('video',data_uri);
});
这是导致问题的第二行：
takeSnapShot();
我该如何正确纠正这个问题？
****** 更新 ******
我使用的 webcam.js 版本是 WebcamJS v1.0.26。我的应用程序是一个 Django 应用程序，它启动 main.js 中定义的 HTML 文件。
snap: function(user_callback,user_canvas) {
// use global callback and canvas if not defined as parameter
if (!user_callback) user_callback = this.params.user_callback;
if (!user_canvas) user_canvas = this.params.user_canvas;
// take snapshot and return image data uri
var self = this;
var params = this.params;
if (!this.loaded) return this.dispatch('error',new WebcamError("Webcam is not loaded yet"));
// if (!this.live) return this.dispatch('error',new WebcamError("Webcam is not live yet"));
if (!user_callback) return this.dispatch('error',new WebcamError("Please provide a callback function or canvas to snap()"));
// if we have an active preview freeze,use that
if (this.preview_active) {
this.savePreview( user_callback,user_canvas );
return null;
}
// create offscreen canvas element to hold pixels
var canvas = document.createElement('canvas');
canvas.width = this.params.dest_width;
canvas.height = this.params.dest_height;
var context = canvas.getContext('2d');
// flip canvas horizontally if desired
if (this.params.flip_horiz) {
context.translate( params.dest_width,0 );
context.scale( -1,1 );
}
// create inline function,called after image load (flash) or immediately (native)
var func = function() {
// render image if needed (flash)
if (this.src && this.width && this.height) {
context.drawImage(this,params.dest_width,params.dest_height);
}
// crop if desired
if (params.crop_width && params.crop_height) {
var crop_canvas = document.createElement('canvas');
crop_canvas.width = params.crop_width;
crop_canvas.height = params.crop_height;
var crop_context = crop_canvas.getContext('2d');
crop_context.drawImage( canvas,Math.floor( (params.dest_width / 2) - (params.crop_width / 2) ),Math.floor( (params.dest_height / 2) - (params.crop_height / 2) ),params.crop_width,params.crop_height,params.crop_height
);
// swap canvases
context = crop_context;
canvas = crop_canvas;
}
// render to user canvas if desired
if (user_canvas) {
var user_context = user_canvas.getContext('2d');
user_context.drawImage( canvas,0 );
}
// fire user callback if desired
user_callback(
user_canvas ? null : canvas.toDataURL('image/' + params.image_format,params.jpeg_quality / 100 ),canvas,context
);
};
// grab image frame from userMedia or flash movie
if (this.userMedia) {
// native implementation
context.drawImage(this.video,this.params.dest_width,this.params.dest_height);
// fire callback right away
func();
}
else if (this.iOS) {
var div = document.getElementById(this.container.id+'-ios_div');
var img = document.getElementById(this.container.id+'-ios_img');
var input = document.getElementById(this.container.id+'-ios_input');
// function for handle snapshot event (call user_callback and reset the interface)
iFunc = function(event) {
func.call(img);
img.removeEventListener('load',iFunc);
div.style.backgroundImage = 'none';
img.removeAttribute('src');
input.value = null;
};
if (!input.value) {
// No image selected yet,activate input field
img.addEventListener('load',iFunc);
input.style.display = 'block';
input.focus();
input.click();
input.style.display = 'none';
} else {
// Image already selected
iFunc(null);
}
}
else {
// flash fallback
var raw_data = this.getMovie()._snap();
// render to image,fire callback when complete
var img = new Image();
img.onload = func;
img.src = 'data:image/'+this.params.image_format+';base64,' + raw_data;
}
return null;
},解决方法
似乎是：
- 缺少网络摄像头的代码（未导入）
- 在这种情况下，您需要先从 URL 调用脚本并添加
script标记
- 在这种情况下，您需要先从 URL 调用脚本并添加
<script src="WEBCAM_JS_SOURCE">
或
- 它们是导入的，但使用时有错别字。从 the webcam source code 是 defined as：
var Webcam = {
version: '1.0.26',// globals
...
};
所以你应该使用大写的。
,您的实现不需要 Webcamjs，因为您使用的是导航媒体设备。
您可以通过首先初始化 WebcamJS 并将其附加到某个画布来使用 WebcamJS，如下面的代码
Webcam.set({
width: 320,height: 240,image_format: 'jpeg',jpeg_quality: 90
});
Webcam.attach( '#my_camera' );
或者您可以将您的 takeSnapShot 函数更新为以下内容：
takeSnapShot = function () {
downloadImage('video',canvasElement.toDataURL())
// Webcam.snap(function (data_uri) {
// downloadImage('video',data_uri);
// });
}
这是一个基于您的代码 https://codepen.io/majdsalloum/pen/RwVKBbK
的工作示例版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
