The Same code works without masterpage

Question

User1052662409 posted

Hi All,

I am trying to capture images using webcam. I found some code.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src='<%=ResolveUrl("~/Webcam_Plugin/jquery.webcam.js") %>' type="text/javascript"></script>
<script type="text/javascript">
var pageUrl = '<%=ResolveUrl("~/CS.aspx") %>';
    $(function () {
     jQuery("#webcam").webcam({
        width: 320,
        height: 240,
        mode: "save",
        swffile: '<%=ResolveUrl("~/Webcam_Plugin/jscam.swf") %>',
        debug: function (type, status) {
            $('#camStatus').append(type + ": " + status + '<br /><br />');
        },
        onSave: function (data) {
        alert("2");

            $.ajax({
                type: "POST",
                url: pageUrl + "/GetCapturedImage",
                data: '',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    $("[id*=imgCapture]").css("visibility", "visible");
                    $("[id*=imgCapture]").attr("src", r.d);
                },
                failure: function (response) {
                    alert(response.d);
                }
            });
        },
        onCapture: function () {
            webcam.save(pageUrl);
        }
    });
});
function Capture() {
    webcam.capture();
    return false;
}
</script>
    <table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td align="center">
            <u>Live Camera</u>
        </td>
        <td>
        </td>
        <td align="center">
            <u>Captured Picture</u>
        </td>
    </tr>
    <tr>
        <td>
            <div id="webcam">
            </div>
        </td>
        <td>
            &nbsp;
        </td>
        <td>
            <asp:Image ID="imgCapture" runat="server" Style="visibility: hidden; width: 320px;
                height: 240px" />
        </td>
    </tr>
</table>
<br />
<asp:Button ID="btnCapture" Text="Capture" runat="server" OnClientClick="return Capture();" />
<br />
<span id="camStatus"></span>

This code works perfectly without any issue. 

But when I try this code using master page, then it doesn't work.

As far as I know, this is an issue of the path of referenced files in the code. I tried with some tricks like putting "" instead of '', removing ~ before / ('<%=ResolveUrl("~/CS.aspx") %>')

But nothing works.

Please suggest.

Answer 1

User475983607 posted

What's not working?  The JavaScript file is not loading?  You've been in these forums a long time.  Did you check Dev Tools for errors?  Anything?

Anyway, i recommend HTML 5 and modern browser APIs to capture an image.  Flash has been deprecated in Chrome.

https://developers.google.com/web/fundamentals/media/capturing-images

https://www.html5rocks.com/en/tutorials/getusermedia/intro/

Answer 2

User1052662409 posted

You've been in these forums a long time.  Did you check Dev Tools for errors?  Anything?

Yes, I tried to put a breakpoint but it runs till the path come, then it skips.

Answer 3

User1052662409 posted

What's not working? 

Only webcam opens, but not showing the live portion on webpage. (with master page)

Answer 4

User475983607 posted

Yes, I tried to put a breakpoint but it runs till the path come, then it skips.

You're response makes little sense.  Open Dev Tools (F12)!  Are there errors in the Console View?  Are there 404s in the Network View?  Are you seeing a full post back in the Network View when you click the submit button?  Do you see the AJAX POST?  What troubleshooting steps have you performed?

You have have a lot of experience on these forum and should know how to use standard debugging tools to verify basic information.  

Answer 5

User1052662409 posted

Open Dev Tools (F12)!  Are there errors in the Console View?

All requests are with 200 response (means ok).

Are there 404s in the Network View?

There is not even a single 404 error.

Are you seeing a full post back in the Network View when you click the submit button?

I am just talking about before click the submit button.

You have have a lot of experience on these forum

Sir, That is why i asked here. Because I am not seeing any error. If I get an error then I can search it

No video capture div is coming.

Answer 6

User475983607 posted

What about errors in the console?  Anyway,  if it worked in a web form page it should work with a master page too.  The most common reasons for components to stop working when a adding a mater page is an incorrect selector, bad paths to JavaScript files, even duplicate jQuery references.  Unfortunately, your screenshot is of no use because we cannot see the URLs. 

With that being said, I strongly recommend that you stop using the jquery.webcam.js which appears to be a dead project and has no commits for 6 years.  As recommended above, use a modern approach.  Follow the links in my first post.