I have a page where users must grant permission for their webcam or camera. Once granted, a webmoji will move according to the user's face position.
Below is a button that will turn blue and become active once a face is detected. When clicked, I want to capture the current frame of the WebMoji/Canvas and display it in a modal using Bootstrap 4.
Here is the code snippet related to these elements, along with the JavaScript I have implemented:
<button type="button" class="btn btn-danger btn-lg" data-toggle="modal" data-target="#exampleModal" id="captureFrameBtn" disabled>Face not detected</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" role="button">×</span>
</button>
</div>
<div class="modal-body" id="frameContainer"></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- CANVAS WITH THE USER FACE : -->
<canvas class="jeefacetransferCanvas" id="jeefacetransferCanvas"></canvas>
<!-- CANVAS WITH THE WEBOJI : -->
<canvas class="webojiCanvas" id="webojiCanvas" width="600" height="600"></canvas>
<script>
// Accessing the emoji canvas by its ID
var canvas = document.getElementById("webojiCanvas");
var img = canvas.toDataURL("image/jpg");
var captureButton = document.getElementById("captureFrameBtn");
var frameContainer = document.getElementById("frameContainer");
captureButton.addEventListener("click", function() {
frameContainer.innerHTML = "<img src='" + img + "'>";
});
</script>