I am using HTML 5 input type controls to take capture:

<input type="file" id="take-picture" accept="image/*"
style="position:absolute;top:-50;left:-50;"  />

Using this I am able to see the camera and able to take the capture, but I want to show text or an image on top of the camera live feed. ?

1. How to do that
2. Is it possible to show the camera live in a div control area in HTML page?

I am using HTML 5 input type controls to take capture:

<input type="file" id="take-picture" accept="image/*"
style="position:absolute;top:-50;left:-50;"  />

Using this I am able to see the camera and able to take the capture, but I want to show text or an image on top of the camera live feed. ?

1. How to do that
2. Is it possible to show the camera live in a div control area in HTML page?

• javascript
• jquery
• css
• html

• any updates on this??? – ismaestro Commented Dec 13, 2017 at 12:12

2 Answers 2

You just have to add an overlaying div like in this sample:

http://jsfiddle/XbZMX/ {click on 'iniciar' button}

#overlay{color:red;position:absolute}

You can show the live camera with the getusermedia function of HTML5. You should check this : http://www.html5rocks./en/tutorials/getusermedia/intro/

Once you get it working, you can add some hover text with CSS. Like you do with images