$('.openCamera').click(function(){
Webcam.attach( '#camera' );
})
$('.capture').click(function(){
take_snapshot()
})
Webcam.set({
width: 320,
height: 240,
image_format: 'jpeg',
jpeg_quality: 90
});
function take_snapshot() {
Webcam.snap( function(data_uri) {
document.getElementById('my_result').innerHTML = '<img class="img-adp" src="'+data_uri+'"/>';
} );
}
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card mt-5">
<div class="card-body">
<div class="card-img">
<div id="camera"></div>
</div>
</div>
<div class="card-footer">
<button class="btn btn-success openCamera"
>Camera</button>
<button class="btn btn-success capture"
>Cature</button>
</div>
<div class="card-body">
<div id="my_result"></div>
</div>
</div>
</div>
</div>
</div>