Question

我正在尝试在我的网页上的网络摄像头屏幕上放置图像。我使用jQuery网络摄像头插件将网络摄像头屏幕放在我的网页上。

链接到jQuery插件：http://www.xarg.org/project/jquery-webcam-plugin/

现在我想在屏幕上方放置一个图像，这样我就可以使网络摄像头屏幕不可见，或者在背景上放置背景，这样看起来就像是在树后面。

有谁知道如何做到这一点;我尝试将图像放在上面，但网络摄像头总是排在最前面。

Answer 1

一个简单的解决方案可能只是使用jQuery来隐藏对象......

假设它在你可以使用的<div id="webcam">内：

 $('#webcam').hide();

然后再使用：

 $('#webcam').fadeIn(); // or .show();

但对于图像解决方案，您可以尝试这样的事情：

 <div id="webcam">
    <div id="over_image"></div>
    <object id="webcam-object" type="application/x-shockwave-flash" data="/download/jscam_canvas_only.swf" width="320" height="240"><param name="movie" value="/download/jscam_canvas_only.swf"><param name="WMODE" value="transparent"> <param name="FlashVars" value="mode=callback&amp;quality=85"></object>
 </div>

让css像这样：

 #webcam { width: 320px; height: 240px; position: relative; }
 #over_image { width: 320px; height: 240px; 
               position: absolute; z-index: 100; top: 0;
               background-image: url('someimage.jpg');
 }

请注意，您需要包含：

flash对象中的

<param name="WMODE" value="transparent">，我不确定该jquery插件是如何设置flash的，所以你可能需要修改一些代码。

如果不包含此项，则z-index属性将无法正常运行。（这可能就是您尝试的背景图像无法正常工作的原因。）

jquery内置网络摄像头屏幕上的图像

1 个答案: