Here is my Asp.Net C# Web code for image capture from webcame using jquery. But when i'm going to take image webcam access but image not getting on image control please suggest me whats the issue in this code....? "server" > Crop Image "FinalJquery/jquery-1.8.3.min.js" > "FinalJquery/jquery.webcam.js" > "FinalJquery/webcam.min.js" > "form1" runat= "server" > "1" align= "center" > "2" >Croped Image Live Camera Captured Image "my_camera" > "imgCapture" runat= "server" Height= "250" Width= "200" /> "2" align= "center" > "btnCapture" runat= "server" Text= "Take Pic" OnClientClick= " return Capture()" /> "text/javascript" > var pageUrl = ' ' ; Webcam.set({ width: 400, height: 400, image_format: 'jpeg' , jpeg_quality: 100 }); Webcam.attach( '#my_camera' ); function take_snapshot() { Webcam.snap( function (data_uri) { $( ".image-tag" ).val(data_uri); document.getElementById( 'imgCaputre' ); }, { onSave: function (data) { $.ajax({ type: "POST" , url: pageUrl + "/GetCapturedImage" , data: '' , contentType: "application/json; charset=utf-8" , dataType: "json" , success: function (r) { $( "[id*=imgCaputre]" ).css( "visibility" , "visible" ); $( "[id*=imgCaputre]" ).attr( "src" , r.d); }, failure: function (response) { alert(response.d); } }); }, onCapture: function () { webcam.save(pageUrl); } }); }; function Capture() { webcam.capture(); return false ; };

this error occur while creating this page. and its not work properly. i have try many things. but still not resolved.

Hey. First check whether you are getting any client side error or not. You can check by inspect element in the browser. Thanks.

Answers

Webcam Image Capturing but image not getting...

Bhavesh Vankar

999

Here is my Asp.Net C# Web code for image capture from webcame using jquery. But when i'm going to take image webcam access but image not getting on image control please suggest me whats the issue in this code....?

<head runat="server">
<title>Crop Image</title>
<script src="FinalJquery/jquery-1.8.3.min.js"></script>
<script src="FinalJquery/jquery.webcam.js"></script>
<script src="FinalJquery/webcam.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table border="1" align="center">
<tr>
<th colspan="2">Croped Image</th>
</tr>
<tr>
<th>Live Camera</th>
<th>Captured Image</th>
</tr>
<tr>
<td id="my_camera"></td>
<td>
<asp:Image ID="imgCapture" runat="server" Height="250" Width="200" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<asp:Button ID="btnCapture" runat="server" Text="Take Pic" OnClientClick=" return Capture()" /></td>
</tr>
</table>
</div>
</form>
<script type="text/javascript">
var pageUrl = '<%=ResolveUrl("~/Default2.aspx") %>';
Webcam.set({
width: 400,
height: 400,
image_format: 'jpeg',
jpeg_quality: 100
});
Webcam.attach('#my_camera');
function take_snapshot() {
Webcam.snap(function (data_uri) {
$(".image-tag").val(data_uri);
document.getElementById('imgCaputre');
},
{
onSave: function (data) {
$.ajax({
type: "POST",
url: pageUrl + "/GetCapturedImage",
data: '',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
$("[id*=imgCaputre]").css("visibility", "visible");
$("[id*=imgCaputre]").attr("src", r.d);
},
failure: function (response) {
alert(response.d);
}
});
},
onCapture: function () {
webcam.save(pageUrl);
}
});
};
function Capture() {
webcam.capture();
return false;
};
</script>
</body>