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>