jquery - 在 jquery 构建的网络摄像头屏幕上的图像

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');
 }

请注意，您需要包括：

<param name="WMODE" value="transparent">在 flash 对象中，我不确定该 jquery 插件如何设置 flash，因此您可能需要修改一些代码。

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