Overlay HTML 5 input type file,camera with an image/text from HTML web page

Question

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?

Answer 1

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

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

#overlay{color:red;position:absolute}