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属性将无法正常运行。 (这可能就是您尝试使用的背景图片无法正常工作的原因。)