How to use WebCam.js in your Web page?
I have explained in my previous post on how to access webcam.js and how to use the library in your web page.
I have shared many useful examples here in my blog explaining how to add different elements to an HTML table dynamically for various purposes. Now lets see how we can add images, taken from a webcam, into table cells.
Example
In the HEAD section, I have the "Webcam.js CDN". I have TABLE element where the captured images will be displayed in cells.
<html>
<head>
<script type="text/javascript"
src=" https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.25/webcam.js ">
</script>
<style>
table, input {
width: auto;
font: 15px Calibri;
}
table, th, td, th {
border: solid 1px #DDD;
border-collapse: collapse;
padding: 2px 3px;
text-align: center;
font-weight: normal;
}
#camBox{
display:none;
position:fixed;
border:0;
top:0;
right:0;
left:0;
overflow-x:auto;
overflow-y:hidden;
z-index:9999;
background-color:rgba(239,239,239,.9);
width:100%;
height:100%;
padding-top:10px;
text-align:center;
cursor:pointer;
-webkit-box-align:center;-webkit-box-orient:vertical;
-webkit-box-pack:center;-webkit-transition:.2s opacity;
-webkit-perspective:1000
}
.revdivshowimg{
width:300px;
top:0;
padding:0;
position:relative;
margin:0 auto;
display:block;
background-color:#fff;
webkit-box-shadow:6px 0 10px rgba(0,0,0,.2),-6px 0 10px rgba(0,0,0,.2);
-moz-box-shadow:6px 0 10px rgba(0,0,0,.2),-6px 0 10px rgba(0,0,0,.2);
box-shadow:6px 0 10px rgba(0,0,0,.2),-6px 0 10px rgba(0,0,0,.2);
overflow:hidden;
border-radius:3px;
color:#17293c
}
</style>
</head>
<body>
<div id="camBox" style="width:100%;height:100%;">
<!--POPUP DIALOG BOX TO SHOW LIVE WEBCAM.-->
<div class="revdivshowimg" style="top:20%;text-align:center;margin:0 auto;">
<div id="camera" style="height:auto;text-align:center;margin:0 auto;"></div>
<p>
<input type="button" value="Ok" id="btAddPicture"
onclick="addCamPicture()" />
<input type="button" value="Cancel"
onclick="document.getElementById('camBox').style.display = 'none';" />
</p>
<input type="hidden" id="rowid" /><input type="hidden" id="dataurl" />
</div>
</div>
<div style="width:300px;">
<table id="myTable">
<tbody>
<tr><th>Employee Name</th><th>Picture</th></tr>
<tr>
<td>Alpha</td>
<td>
<div id="div_alpha"></div>
<input type="button" value="Take a SnapShot" id="alpha"
onclick="takeSnapshot(this)" />
</td>
</tr>
<tr>
<td>Bravo</td>
<td>
<div id="div_bravo"></div>
<input type="button" value="Take a SnapShot" id="bravo"
onclick="takeSnapshot(this)" />
</td>
</tr>
<tr>
<td>Charlie</td>
<td>
<div id="div_charlie"></div>
<input type="button" value="Take a SnapShot" id="charlie"
onclick="takeSnapshot(this)" />
</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
// CAMERA SETTINGS.
Webcam.set({
width: 220,
height: 190,
image_format: 'jpeg',
jpeg_quality: 100
});
Webcam.attach('#camera');
takeSnapshot = function (oButton) {
document.getElementById('camBox').style.display = 'block';
document.getElementById('rowid').value = oButton.id
}
addCamPicture = function () {
var rowid = document.getElementById('rowid').value;
Webcam.snap(function (data_uri) {
document.getElementById('div_' + rowid).innerHTML =
'<img src="' + data_uri + '" id="" width="70px" height="50px" />';
});
document.getElementById('rowid').value = '';
// HIDE THE POPUP DIALOG BOX.
document.getElementById('camBox').style.display = 'none';
}
</script>
</html>You can alter the above code according to your requirement. You can add the download image method that I have explained in my previous post.
Browser Compatibility
It works fine with any latest version of Chrome. I have tested the above examples with Microsoft Edge and it worked fine.
In some older versions of IE, it uses flash. I have not tested it.