未捕获的TypeError：无法读取属性＆＃39; getBarCode＆＃39;未定义的（JavaScript）

Question

我试图在我的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&amp;height=240&amp;chatWindow=chatWindow&amp;path=&amp;zoom=1&amp;zoomChat=1&amp;rotate=0&amp;skewX=0&amp;skewY=0&amp;flip=0&amp;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&amp;onError=function%20onError(errorId%2CerrorMsg)%20%7B%0A%09%09%09%09alert(errorMsg)%3B%0A%09%09%09%7D&amp;cornerRadius=0&amp;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&amp;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中实现运气？

Answer 1

如果您尚未修改scriptcam库，那么我的猜测是肯定的，问题围绕着您的onclick处理程序或者当前作用域中未定义$的可能性。我建议不要在html标记中编写JS代码，因为你无法调试它（例如使用chrome dev工具）。

相反，在JS中定义单击处理程序，即：

$("#yourButtonId").click(function(){
    // Handle click...
});

我建议的另一件事是你打破你的函数调用并使用JS调试器来找出实际上未定义的内容。是$？，尝试使用JQuery.scriptcam ......或者像Jason提到的那样尝试将其称为函数。最后，在尝试调用给定方法之前，请确保脚本已正确加载。

Chrome开发工具（F12）是您的朋友。

Answer 2

由于出现更多问题，scriptcam被抛弃，决定使用JSQRcode代码，我感谢你们的帮助：）