我试图在我的MVC4项目中实现网络摄像头解码器,除了一个问题外,我还有足够的工作。在调试过程中,我注意到当我点击解码按钮时,我在javascript的google chromes调试器中出现错误,说明以下“Uncaught TypeError:无法读取未定义的属性'getBarCode'”。我认为它与onclick方法的格式有关(见下文)但是经过多次尝试格式化后我仍然得到相同的错误。我已经包含了Js文件和我的cshtml视图
QR.cshtml
@{
ViewBag.Title = "Webcam";
}
<script>
//$(document).ready(function () {
$("#webcam").scriptcam({
path:'~/Scripts/',
readBarCodes: 'QR_CODE',
onError: onError,
cornerRadius: 0,
onWebcamReady: onWebcamReady
});
//});
function onError(errorId, errorMsg) {
alert(errorMsg);
}
function changeCamera() {
$.scriptcam.changeCamera($('#cameraNames').val());
}
function onWebcamReady(cameraNames, camera, microphoneNames, microphone, volume) {
$.each(cameraNames, function (index, text) {
$('#cameraNames').append($('<option></option>').val(index).html(text))
});
$('#cameraNames').val(camera);
}
</script>
<div style="width:330px;float:left;">
<object type="application/x-shockwave-flash" data="~/Scripts/scriptcam.swf" width="320" height="240" id="webcam" style="visibility: visible;"><param name="menu" value="false"><param name="wmode" value="direct"><param name="allowScriptAccess" value="always"><param name="allowFullScreen" value="true"><param name="flashvars" value="width=320&height=240&chatWindow=chatWindow&path=&zoom=1&zoomChat=1&rotate=0&skewX=0&skewY=0&flip=0&noFlashFound=%3Cp%3EYou%20need%20%3Ca%20href%3D%22http%3A%2F%2Fwww.adobe.com%2Fgo%2Fgetflashplayer%22%3EAdobe%20Flash%20Player%2011.7%3C%2Fa%3E%20to%20use%20this%20software.%3Cbr%2F%3EPlease%20click%20on%20the%20link%20to%20download%20the%20installer.%3C%2Fp%3E&onError=function%20onError(errorId%2CerrorMsg)%20%7B%0A%09%09%09%09alert(errorMsg)%3B%0A%09%09%09%7D&cornerRadius=0&onWebcamReady=function%20onWebcamReady(cameraNames%2Ccamera%2CmicrophoneNames%2Cmicrophone%2Cvolume)%20%7B%0A%09%09%09%09%24.each(cameraNames%2C%20function(index%2C%20text)%20%7B%0A%09%09%09%09%09%24('%23cameraNames').append(%20%24('%3Coption%3E%3C%2Foption%3E').val(index).html(text)%20)%0A%09%09%09%09%7D)%3B%20%0A%09%09%09%09%24('%23cameraNames').val(camera)%3B%0A%09%09%09%7D&id=webcam"></object>
<div style="margin:5px;">
<img src="webcamlogo.png" style="vertical-align:text-top">
<select id="cameraNames" size="1" onchange="changeCamera()" style="width:245px;font-size:10px;height:25px;">
<option value="0">In Built Camera</option></select>
</div>
</div>
<div style="width:135px;float:left;">
<p><button class="btn btn-small" id="btn1" onclick="$('#decoded').text($.scriptcam.getBarCode());">Decode image</button></p>
</div>
<div style="width:200px;float:left;">
<p id="decoded"></p>
</div>
Scriptcam.js
(function($) {
$.fn.scriptcam=function(options) {
// merge passed options with default values
var opts=$.extend({}, $.fn.scriptcam.defaults, options);
// off we go
return this.each(function() {
// add flash to div
opts.id=this.id; // add id of plugin to the options structure
data=opts; // pass options to jquery internal data field to make them available to the outside world
data.path=decodeURIComponent(data.path); // convert URI back to normal string
$('#'+opts.id).html(opts.noFlashFound); // inject no flash found message
// forward incoming flash movie calls to outgoing functions
$.scriptcam.SC_promptWillShow=data.promptWillShow;
$.scriptcam.SC_fileReady=data.fileReady;
$.scriptcam.SC_fileConversionStarted=data.fileConversionStarted;
$.scriptcam.SC_onMotion=data.onMotion;
$.scriptcam.SC_onError=data.onError;
$.scriptcam.SC_onHandLeft=data.onHandLeft;
$.scriptcam.SC_onHandRight=data.onHandRight;
$.scriptcam.SC_onWebcamReady=data.onWebcamReady;
$.scriptcam.SC_connected=data.connected;
$.scriptcam.SC_onPictureAsBase64=data.onPictureAsBase64;
$.scriptcam.SC_disconnected=data.disconnected;
$.scriptcam.SC_setVolume=data.setVolume;
$.scriptcam.SC_timeLeft=data.timeLeft;
$.scriptcam.SC_userLeft=data.userLeft;
$.scriptcam.SC_userJoined=data.userJoined;
$.scriptcam.SC_addChatText=function(value) {
value = value.replace(":{", '<img src="'+data.path+'angry.gif" width="16" height="16" class="smiley"/>');
value = value.replace(":-{", '<img src="'+data.path+'angry.gif" width="16" height="16" class="smiley"/>');
value = value.replace(":)", '<img src="'+data.path+'smile.gif" width="16" height="16" class="smiley"/>');
value = value.replace(":-)", '<img src="'+data.path+'smile.gif" width="16" height="16" class="smiley"/>');
value = value.replace(":D", '<img src="'+data.path+'biggrin.gif" width="16" height="16" class="smiley"/>');
value = value.replace(":-D", '<img src="'+data.path+'biggrin.gif" width="16" height="16" class="smiley"/>');
value = value.replace(":O", '<img src="'+data.path+'ohmy.gif" width="16" height="16" class="smiley"/>');
value = value.replace(":-O", '<img src="'+data.path+'ohmy.gif" width="16" height="16" class="smiley"/>');
value = value.replace(":(", '<img src="'+data.path+'sad.gif" width="16" height="16" class="smiley"/>');
value = value.replace(":-(", '<img src="'+data.path+'sad.gif" width="16" height="16" class="smiley"/>');
value = value.replace(":p", '<img src="'+data.path+'tongue.gif" width="16" height="16" class="smiley"/>');
value = value.replace(":-p", '<img src="'+data.path+'tongue.gif" width="16" height="16" class="smiley"/>');
value = value.replace(";)", '<img src="'+data.path+'wink.gif" width="16" height="16" class="smiley"/>');
value = value.replace(";-)", '<img src="'+data.path+'wink.gif" width="16" height="16" class="smiley"/>');
$('#'+data.chatWindow).append(value+'<br/>');
$('#'+data.chatWindow).animate({ scrollTop: $('#'+data.chatWindow).prop("scrollHeight") - $('#'+data.chatWindow).height() }, 100);
}
if (opts.canvasHeight && opts.canvasHeight) {
var newWidth=opts.canvasWidth;
var newHeight=opts.canvasHeight;
}
else {
// no canvas dimensions given, make our own horizontal layout
var newWidth=opts.width*opts.zoom;
var newHeight=opts.height*opts.zoom;
if (opts.chatRoom) {
newWidth=(opts.width*opts.zoom)+(opts.width*opts.zoomChat)+5; // make room for two horizontal video windows with a margin of 5
opts.posX=(opts.width*opts.zoom)+5;
newHeight=opts.height*Math.max(opts.zoom,opts.zoomChat);
};
}
// make new dimensions are not below minimum flash size
if (newWidth < 215) {
newWidth=215;
}
if (newHeight < 138) {
newHeight=138;
}
if (opts.rotate!=0 || opts.skewX!=0 || opts.skewY!=0 || opts.flip!=0 || opts.zoom!=1 || opts.zoomChat!=1) {
// no GPU acceleration
var params = {
menu: 'false',
wmode: 'window',
allowScriptAccess: 'always',
allowFullScreen: 'true'
};
}
else {
// GPU acceleration when no filter is used
var params = {
menu: 'false',
wmode: 'direct',
allowScriptAccess: 'always',
allowFullScreen: 'true'
};
};
// Escape all values contained in the flashVars (IE needs this)
for (var key in opts) {
opts[key] = encodeURIComponent(opts[key]);
};
if (fileExists(decodeURIComponent(data.path)+'scriptcam.swf')) {
swfobject.embedSWF(decodeURIComponent(data.path)+'scriptcam.swf', opts.id, newWidth, newHeight, '11.6', false, opts, params);
}
else {
alert(decodeURIComponent(data.path)+'scriptcam.swf not found, please check the path parameter');
}
});
};
function fileExists(url) {
var http = new XMLHttpRequest();
http.open('HEAD', url, false);
http.send();
return http.status==200;
}
$.scriptcam={};
// outgoing functions (calling the flash movie)
$.scriptcam.getFrameAsBase64=function() {
return $('#'+data.id).get(0).SC_getFrameAsBase64();
}
$.scriptcam.version=function() {
return $('#'+data.id).get(0).SC_version();
}
$.scriptcam.hardwareacceleration=function() {
return $('#'+data.id).get(0).SC_hardwareacceleration();
}
$.scriptcam.getMotionParameters=function() {
$('#'+data.id).get(0).SC_getMotionParameters();
}
$.scriptcam.getBarCode=function() {
return $('#'+data.id).get(0).SC_getBarCode();
}
$.scriptcam.startRecording=function() {
$('#'+data.id).get(0).SC_startRecording();
}
$.scriptcam.pauseRecording=function() {
$('#'+data.id).get(0).SC_pauseRecording();
}
$.scriptcam.resumeRecording=function() {
$('#'+data.id).get(0).SC_resumeRecording();
}
$.scriptcam.closeCamera=function() {
$('#'+data.id).get(0).SC_closeCamera();
}
$.scriptcam.changeVolume=function(value) {
$('#'+data.id).get(0).SC_changeVolume(value);
}
$.scriptcam.sendMessage=function(value) {
$('#'+data.id).get(0).SC_sendMessage(value);
}
$.scriptcam.playMP3=function(value) {
$('#'+data.id).get(0).SC_playMP3(value);
}
$.scriptcam.changeCamera=function(value) {
$('#'+data.id).get(0).SC_changeCamera(value);
}
$.scriptcam.changeMicrophone=function(value) {
$('#'+data.id).get(0).SC_changeMicrophone(value);
}
// set javascript default values (flash default values are managed in the swf file)
$.fn.scriptcam.defaults={
width:320,
height:240,
chatWindow:'chatWindow',
path:'',
zoom:1,
zoomChat:1,
rotate:0,
skewX:0,
skewY:0,
flip:0,
noFlashFound:'<p>You need <a href="http://www.adobe.com/go/getflashplayer">Adobe Flash Player 11.7</a> to use this software.<br/>Please click on the link to download the installer.</p>'
};
})(jQuery);
// incoming functions (calls coming from flash) - must be public and forward calls to the scriptcam plugin
function SC_onError(errorId,errorMsg) {
$.scriptcam.SC_onError(errorId,errorMsg);
}
function SC_fileReady(fileName) {
$.scriptcam.SC_fileReady(fileName);
}
function SC_fileConversionStarted(fileName) {
$.scriptcam.SC_fileConversionStarted(fileName);
}
function SC_onMotion(decodedString) {
$.scriptcam.SC_onMotion(decodedString);
}
function SC_promptWillShow() {
$.scriptcam.SC_promptWillShow();
}
function SC_onHandLeft() {
$.scriptcam.SC_onHandLeft();
}
function SC_onHandRight() {
$.scriptcam.SC_onHandRight();
}
function SC_onWebcamReady(cameraNames,camera,microphoneNames,microphone) {
$.scriptcam.SC_onWebcamReady(cameraNames,camera,microphoneNames,microphone);
}
function SC_onPictureAsBase64(value) {
$.scriptcam.SC_onPictureAsBase64(value);
}
function SC_connected() {
$.scriptcam.SC_connected();
}
function SC_disconnected() {
$.scriptcam.SC_disconnected();
}
function SC_setVolume(value) {
$.scriptcam.SC_setVolume(value);
}
function SC_onMotion(motion,brightness,color,motionx,motiony) {
$.scriptcam.SC_onMotion(motion,brightness,color,motionx,motiony);
}
function SC_timeLeft(value) {
$.scriptcam.SC_timeLeft(value);
}
function SC_addChatText(value) {
$.scriptcam.SC_addChatText(value);
}
function SC_userJoined(value) {
$.scriptcam.SC_userJoined(value);
}
function SC_userLeft(value) {
$.scriptcam.SC_userLeft(value);
}
更新
基本上我试图实现https://www.scriptcam.com/demo_5.cfm
经过进一步检查,我发现这对webforms没有任何问题,但在MVC中却是一团糟。有没有人在MVC中实现运气?
答案 0 :(得分:0)
如果您尚未修改scriptcam
库,那么我的猜测是肯定的,问题围绕着您的onclick
处理程序或者当前作用域中未定义$的可能性。我建议不要在html标记中编写JS代码,因为你无法调试它(例如使用chrome dev工具)。
相反,在JS中定义单击处理程序,即:
$("#yourButtonId").click(function(){
// Handle click...
});
我建议的另一件事是你打破你的函数调用并使用JS调试器来找出实际上未定义的内容。是$?,尝试使用JQuery.scriptcam ......或者像Jason提到的那样尝试将其称为函数。最后,在尝试调用给定方法之前,请确保脚本已正确加载。
Chrome开发工具(F12)是您的朋友。
答案 1 :(得分:0)
由于出现更多问题,scriptcam被抛弃,决定使用JSQRcode代码,我感谢你们的帮助:)