I'm currently new to javascript and I'm attempting to learn to set my webcam and have it take a snap using js. However, only the Webcam.snap() works on my end. My Webcam.set() and Webcam.attach() won't show despite being able to take a snapshot.
Here's how it looks like when the page loads up vs after I take a snap
The empty space on the left part is where the webcam is supposed to be positioned at
Here's my webcam part in html:
<h3>Photo capture</h3>
<fieldset>
<div class="form-row">
<div class="col-md-6">
<div id="my_camera"></div>
<br/>
<input type=button value="Take Snapshot" onClick="take_snapshot()">
<input type="hidden" name="image" class="image-tag">
</div>
<div class="col-md-6">
<div id="results">Your captured image will appear here...</div>
</div>
</div>
</fieldset>
I also included webcam.js right at the beginning of my body tag
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.25/webcam.min.js"></script>
...
Lastly, I included the script tag for custom functions within the body tag:
<script language="JavaScript">
Webcam.set({
width: 300,
height: 200,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach('#my_camera');
function take_snapshot() {
Webcam.snap(function(data_uri) {
$(".image-tag").val(data_uri);
document.getElementById('results').innerHTML = '<img src="' + data_uri + '"/>';
});
}
</script>
I have tried downloading and replicating the source code from Savani H. (2018)'s article and his code seems to work well. Did I miss anything? Any help/insight would be appreciated.
Reference: Savani H. (2018)