Hi,
Please use this example.
To close use webcam.reset()
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body { font-family: Arial; font-size: 10pt; }
table { border: 1px solid #ccc; border-collapse: collapse; }
table th { background-color: #F7F7F7; color: #333; font-weight: bold; }
table th, table td { padding: 5px; width: 300px; border: 1px solid #ccc; }
#webcam { width: 320px;height:240px }
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<th align="center"><u>Live Camera</u></th>
<th align="center"><u>Captured Picture</u></th>
</tr>
<tr>
<td>
<div id="webcam"></div>
</td>
<td>
<img id="imgCapture" /></td>
</tr>
<tr>
<td align="center">
<input type="button" id="btnStart" value="Start Camera" />
<input type="button" id="btnCapture" value="Capture" style="display:none"/>
</td>
<td align="center">
<input type="button" id="btnUpload" value="Upload" disabled="disabled" />
</td>
</tr>
</table>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.26/webcam.js"></script>
<script type="text/javascript">
$(function () {
$("#btnStart").click(function () {
Webcam.set({
width: 320,
height: 240,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach('#webcam');
$("#btnCapture").show();
$(this).hide();
});
$("#btnCapture").click(function () {
Webcam.snap(function (data_uri) {
$("#imgCapture")[0].src = data_uri;
$("#btnUpload").removeAttr("disabled");
});
});
$("#btnUpload").click(function () {
$.ajax({
type: "POST",
url: "CS.aspx/SaveCapturedImage",
data: "{data: '" + $("#imgCapture")[0].src + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
Webcam.reset();
$("#btnStart").show();
$("#btnCapture").hide();
$("#btnUpload").attr("disabled", "disabled");
}
});
});
});
</script>
</body>
</html>
