覆盖 HTML 5 输入类型文件，带有来自 HTML 网页的图像/文本的相机

Question

我正在使用 HTML 5 输入类型控件进行捕获：

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

使用它我可以看到摄像头并进行拍摄，但我想在摄像头实时提要上显示文本或图像。 ?

1. 怎么做
2. 是否可以在 HTML 页面的 div 控制区域中实时显示摄像头？

Answer 1

你只需要像这个示例一样添加一个覆盖的 div：

http://jsfiddle.net/XbZMX/ {点击“iniciar”按钮}

#overlay{color:red;position:absolute}

Answer 2

您可以使用 HTML5 的getusermedia 功能显示实时摄像头。你应该检查这个：http://www.html5rocks.com/en/tutorials/getusermedia/intro/

一旦你得到它的工作，你可以用 CSS 添加一些悬停文本。就像你处理图片一样