Looking for help with making a responsive webcam image using webcam.js. I've defined the height and width in my JavaScript, but the captured image is not responsive.
Here's my JavaScript code:
function setwebcam()
{
//$("#set_cam").hide();
//$("#take_photo").show();
Webcam.set({
width: 320,
height: 480,
align:'center',
image_format: 'jpeg',
jpeg_quality: 100
});
Webcam.attach( '#my_camera' );
}
function setcoord()
{
$('#cropbox').Jcrop({
aspectRatio: 1,
onSelect: updateCoords
});
}
function updateCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
}
And here's my HTML code:
<div class="col-lg-12" id="cap_div" style="background-color:#f9f9f9;
box-shadow: 0 1px 4px #ccc;
margin-bottom:95px;
margin-top:20px;
display:none;" >
<div class="row">
<div class="col-sm-12">
<div class="col-md-12" id="my_camera">
</div>
</div>
</div>
<h3 class="text-center" style="font-size:36px; color:#000000;">
Click on capture to get image
</h3>
<hr>
<div class="row" style="z-index: 10; padding-bottom: 1em;">
<p class="text-center">
<a onClick="take_snapshot();" id="take_photo" class="browse_btn flat-button orange-flat-button btn btn-warning2 btn-lg" >
<i class="fa fa-camera" aria-hidden="true"></i>
Capture
</a>
<span class="visible-xs visible-sm" id="oder" style="padding:10px 0;">
- or -
</span>
</p>
</div>
</div>
Any suggestions on how to make the webcam image responsive? The webcam itself works fine, but responsiveness is a challenge. Any help would be greatly appreciated.