How to add an Overlay Image to camera before take a picture in JavaScript

Question

I would like to add a semi-transparent image as an overlay to the camera in JavaScript, so users are guided what they need to photograph, but I am struggling.

I currently access the smartphone's native camera as follows:

<input type="file" accept="image/*" capture="camera" id="camera" style="display: none;">
<input type="button" value="Take pic" onclick="document.getElementById('camera').click();" class="btn btn-primary" />

But I can't manipulate this native camera via JS to add a semi-transparent image as an overlay. Is it possible?

Is there a way to add an image as an overlay (similar to qr-code readers or credit card scanners) via javascript (Jquery or some lib) to the camera?