The official release of Ext.NET Mobile is now available. Ext.NET Mobile is an ASP.NET component framework for building Phone and Tablet specific mobile web applications. Read More

[CLOSED] Snap pic via webcam

  1. #1

    [CLOSED] Snap pic via webcam

    Support,

    how can i do this?

    I found this plugin via jquery. If I run this as a separate page, it works great. however, I want it to be within a ext:Window. That way, I can do window.show();
    I tried putting the div tag in Window's <Content> but that didn't seem to work.

    https://www.xarg.org/project/jquery-webcam-plugin/

    any ideas?
    thanks,
    /Z
    Last edited by fabricio.murta; Jun 11, 2018 at 4:32 PM.
  2. #2
    I got it. i needed a window, not panel..
    I posted the code in case someone else needs it.
    /Z

    <%@ Page Language="C#" %>  
    <!DOCTYPE html>
    <html>
        <head>
         <title> Example of usage: jQuery AS3 Webcam </title>
         <script type="text/javascript" src="/resources/js/jquery/jquery-1.9.1.js"></script>
         <script type="text/javascript" src="/resources/js/webcam/jquery.webcam.js"></script>
            <script type="text/javascript">
                var blah = function () {
                    debugger;
                    jQuery("#webcam").webcam({
                        width: 320,
                        height: 240,
                        mode: "callback",
                        swffile: "/resources/js/webcam/jscam_canvas_only.swf", // canvas only doesn't implement a jpeg encoder, so the file is much smaller
                        onTick: function (remain) {
                            if (0 == remain) {
                                jQuery("#status").text("Cheese!");
                            } else {
                                jQuery("#status").text(remain + " seconds remaining...");
                            }
                        },
                        onSave: function (data) {
                            var col = data.split(";");
                            // Work with the picture. Picture-data is encoded as an array of arrays... Not really nice, though =/
                        },
                        onCapture: function () {
                            webcam.save();
                            // Show a flash for example
                        },
                        debug: function (type, string) {
                            // Write debug information to console.log() or a div, ...
                        },
                        onLoad: function () {
                            // Page load
                            var cams = webcam.getCameraList();
                            for (var i in cams) {
                                jQuery("#cams").append("<li>" + cams[i] + "</li>");
                            }
                        }
                    });
                };
            </script>
        </head>
        <body>
            <form runat="server">
                <ext:ResourceManager ID="ResourceManager1" runat="server">
                    <Listeners>
                        <DocumentReady Handler="blah();" />
                    </Listeners>
                </ext:ResourceManager>
        
                <ext:Viewport ID="Viewport1" runat="server" Layout="VBoxLayout">          
                    <LayoutConfig>
                        <ext:VBoxLayoutConfig Align="Center" Pack="Start" />
                    </LayoutConfig>
                    <Items>
                        <ext:Label runat="server" Html="Picture" />
                        <ext:Label runat="server" Html="(click picture to upload)" />
                        <ext:Image ID="BackPic"  OverCls="hand-pointer" Height="129" Width="207" runat="server" MarginSpec ="0 20 0 0" ImageUrl = "SampleFront.png">
                            <Listeners>
                                <Click Handler="#{takePicture}.show();blah();"  />
                            </Listeners>
                        </ext:Image>
                    </Items>
                </ext:Viewport>
             <ext:Window runat="server" ID="takePicture" Title="Take TpicPicS" Hidden="true">
                    <Content>
                       <table border="1">
                            <tr>
                                <td>
                                    <div id="webcam"></div>
                                </td>
                            </tr>
                        </table>
                    </Content>
                </ext:Window>
            </form>
        </body>
    </html>
  3. #3
    Hello @Z!

    Glad you could quickly find an approach that would work for you. And also thank you very much for making available the approach that worked for you in this matter! This is very kind of you, we really appreciate it!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Photo capture using webcam
    By shaileshsakaria in forum 2.x Premium Help
    Replies: 1
    Last Post: Oct 14, 2013, 3:59 PM

Posting Permissions