jhuckaby / webcamjs

HTML5 Webcam Image Capture Library with Flash Fallback
MIT License
2.5k stars 1.11k forks source link

Webcam not Loading #68

Closed Syphonics closed 9 years ago

Syphonics commented 9 years ago

Hello, I am using your webcam.js library for an asp.net vb application I'm working on. Before I integrated it into my main project, I created a new one to play around with the library, and configure it to be exactly how I need it. This works great, and I am extremely happy with it. However, when I am attempting to integrate it into my main project, it fails to load (for flash in IE and getUserMedia in Chrome + Firefox) the video.

My process for integration did not change anything, and I'm sure it is not my code as it still works in it's own project. All I had done to bring it in is copy and paste code, and add the requisite references. My only conclusion is that there is something that already exists within my main project that is interfering with it loading, but I cannot for the life of me figure out where to look or what to look for. Any help you can give would be greatly appreciated.

jhuckaby commented 9 years ago

Create a plain, standalone HTML page that doesn't use any ASP or VB. Integrate WebcamJS into that page. If it still doesn't work, paste your HTML / JS code here, and I can take a look.

Note that I don't know anything about ASP or VB, so I cannot help you with your app.

Syphonics commented 9 years ago

That is practically how my code is now, I just copied your quickstart guide demo into my project (with changing a few minor things), and it worked in the standalone project but not main. Changes are adding in my own function to the snapshot code(doesn't affect it as I don't even get to that point), taking out the img element(same as above), and changing the <a href=... element into an asp:button.

Code is here:

<form id="form1" runat="server">
        <asp:ScriptManager EnablePageMethods="true" runat="server" />
        <script src="webcam.js location"></script>
    <div id="my_camera" style="width:640px; height:480px"></div>
    <script type="text/javascript">
            Webcam.attach('my_camera');
    </script>
    <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>
    </form>
jhuckaby commented 9 years ago

I don't see anything wrong with this code. I have no idea why it isn't working.

Check your browser error / debug console, to see if any errors are occurring.

Make sure that the "my_camera" DIV is 100% visible at page load time. If any parent elements are hiding or obscuring it, the attach() function won't work.

Try putting the attach() call in a window onLoad handler.

Good luck, and sorry!

Syphonics commented 9 years ago

Thanks, I don't see any errors occuring.
I just went through and hardcoded in visibility = true for the my_camera DIV and all of it's parent elements, and nothing changed.
Put the attach() call in the onload handler, and nothing has changed. Even without the handler shouldn't it run as soon as possible outside of a function anyway? I've even put it in a function, set a buttons click event to be that function, and had an alert box pop up if it successfully attached, so it's not an attaching problem.

Thinking about it, could it have something to do with the location of the webcam.js and webcam.swf files? When I put them in the project, it didn't work at first until, in the first script element ( ), I had to hard code in the location on my computer the webcam.js location. (I know that this won't work when deployed, but for development it gets the job done and I'll worry about that after I get it actually working).

Thanks for any help you can give

Syphonics commented 9 years ago

Actually, just saw an error that I must have missed before (looked in IE, but not Chrome). It says "Not allowed to load local resource: (my webcam.js location)" I'm not sure if this is causing my problem as I'm not getting it in IE, but it certainly isn't helping.

jhuckaby commented 9 years ago

It sounds very much like you are having issues outside of the library. Issues with ASP / VB, unable to load local files, etc. Sounds like it can't find webcam.js on your server. Nothing I can do to help you with this, alas. Sorry!

Syphonics commented 9 years ago

And, after a lot of troubleshooting, I managed to figure it out. Even though I explicitly stated the location of webcam.js, that is not enough. It needs to be in the same folder as the page that is using the webcam. The more you know!

jhuckaby commented 9 years ago

I'm sorry this wasn't clear. It's in the docs, but a bit buried:

Setting an Alternate SWF Location

By default WebcamJS looks for the SWF file in the same directory as the JS file. If you are hosting the SWF in a different location, please set it using the Webcam.setSWFLocation() function. It should be on the same domain as your page. Example:

    Webcam.setSWFLocation("/path/to/the/webcam.swf");

Note that this is only used if the user's browser doesn't support HTML5 getUserMedia, and WebcamJS has to fallback to using an Adobe Flash movie to capture the camera.

(I'll try to make this more clear by calling it out at the top).

Syphonics commented 9 years ago

Actually I tried using that, didn't work. I had the location of webcam.js in the script block (C:/whatever) and before I attached the camera I set the location of the swf file with that command. I had to move both the .js and the .swf file into the same folder as the page I was using the webcam on (I.E. I had the two files in my project directory ~\scripts\ folder, and even coding in the location for both it didn't work until I moved it into the same folder as my page).

jhuckaby commented 9 years ago

Oh, I see. Well thank you for letting me know. I'll do additional testing on setSWFLocation, and see if I can find where the bug is.

Thanks again!