ASP.NET Webcam Display

Question

I'm writing an asp.net site in VB, and am trying to integrate in webcam functionality via javascript. I'm using webcam.js (found here: https://github.com/jhuckaby/webcamjs). When I created a new project for testing this out and working out the kinks, it worked fine. However, when I attempted to integrate it into my main project, the video does not load and I'm left with a blank screen. I can confirm that it does work in the side project in IE, firefox, and chrome, yet works in none of them after integrating it in my main project. The integration process was not complicated, it was mainly just copy and paste and adding the requisite references. I at first was getting problems of it not recognizing 'Webcam' but that went away after I coded in the exact location of the webcam.js file (I understand that this will be a problem later, but I'm more worried about getting it working in debug mode for now so it's fine). My code is as follows:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebcamPart.aspx.vb" Inherits="IMHmfgb_VerJon.WebCamPart" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager EnablePageMethods="true" runat="server" />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
        <script src="location of webcam.js"></script>
    <div id="my_camera" style="width:640px; height:480px"></div>
    <asp:Label ID="Label1" runat="server" Font-Size="12"></asp:Label>
    <script type="text/javascript">
        function showCam() {
            Webcam.attach('my_camera');
        }
    </script>
    <asp:Button ID="Button2" runat="server" OnClientClick="showCam();return false" Text="Show Cam" /><asp:Button ID="Button1" runat="server" OnClientClick="take_snapshot();return false" Text="Scan" />
    <script type="text/javascript">
        function take_snapshot() {
            Webcam.snap(function (data_uri) {
                PageMethods.BarcodeScan(data_uri, onSuccess, onFailure);
            })
        };
        function onSuccess(result) {
            document.getElementById('<%=Label1.ClientID%>').innerHTML = result;
        };
        function onFailure(result) {
        document.getElementById('<%=Label1.ClientID%>').innerHTML = result;
        };
    </script>
            </ContentTemplate>
            </asp:UpdatePanel>
            <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="500">
        <ProgressTemplate>
            <asp:Image ImageUrl="~\Pictures\Loading.gif" runat="server" ImageAlign="Middle" />
        </ProgressTemplate>
    </asp:UpdateProgress>
    </form>
</body>
</html>

I don't believe that the code above is the problem because, as stated above, it all works fine by itself. This leads me to believe that there is some setting or piece of code somewhere in my main project that is interfering with loading the video, but I have no idea where to look or what to look for.

@goldeneye Not that I can see, all that is displayed is my two buttons. I activate the showCam button, then attempt to right click on where the webcam video should be and the only two things displayed are "Movie not loaded..." greyed out and "About Adobe Flash Player 17.0.0.134...". If I click the snapshot button a messagebox will pop up that says "Webcam.js Error: Webcam is not loaded yet". — JonW, Apr 08 '15 at 19:55
it sounds like the files might be in the wrong order? i remember having that same kind of error with mine and it ended up being the wrong order of the scripts being called. — Matchbox2093, Apr 08 '15 at 19:59
@goldeneye Can you go into more detail please? What do you mean the files might be in the wrong order? — JonW, Apr 08 '15 at 20:00
looking at your snippet of code that doesnt seem to the issue..im gonna try replicate it here on my own IDE — Matchbox2093, Apr 08 '15 at 20:04
@goldeneye Alright, that sounds great, thanks. It might throw up an error if you try to hit the Scan button due to not having the BarcodeScan function in your code behind, but if you get that far at least we'll know definitely that it's not the code that's the problem (although I'm pretty sure of that already) and that it works. Edit: Yes, I have the location of webcam.js on my computer in that spot, I just didn't want to include my file system path on here. 99% sure that's not the problem. — JonW, Apr 08 '15 at 20:07
dead on :) ill let you know how i get on :) by the way, when you mention barcode scanning, have you looked at this question? http://stackoverflow.com/questions/22777854/barcode-scanner-for-html5-and-jquery-application — Matchbox2093, Apr 08 '15 at 20:12
@goldeneye No, I haven't seen that, thanks. However, I'm fine with the way I'm doing the barcode scanning now, spent most of this week configuring it to work the way I want it to and now that it does I don't want to mess around with any other way. (Using Bytescout trial version - http://bytescout.com/download/download.html) — JonW, Apr 08 '15 at 20:16
@goldeneye So, any update on testing it out in your own IDE? — JonW, Apr 09 '15 at 12:18
i tried it last night, getting errors relating to no webcam as well, ill take a look at it again tonight — Matchbox2093, Apr 09 '15 at 12:31

score 1 · Answer 1 · answered Apr 10 '15 at 12:18

And, after a lot of troubleshooting, I fixed my own problem. Apparently it's not enough to simply state the location of the webcam.js file in the following code block:

<script src="location of webcam.js"></script>

You need to have the webcam.js and webcam.swf files located in the same folder as the page that is using them. I found this out by looking at the error console in chrome. I figured the errors would be the same in IE, and as my site is built to run in IE, I checked there first.

ASP.NET Webcam Display

1 Answers1