jquery內置的攝像頭屏幕上的圖像

我想通過網頁上的攝像頭屏幕放置圖像。我使用jQuery攝像頭插件將網絡攝像頭屏幕放置在我的網頁上。jquery內置的攝像頭屏幕上的圖像

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

現在我想放置在屏幕上形成圖像，這樣我可以讓攝像頭屏幕隱形，或放置一個背景了，所以它看起來像你的背後一顆樹。

有沒有人有一個想法如何做到這一點;我只是將圖像置於其上，但網絡攝像頭始終處於頂端。

來源

2012-05-19 Buit

您可以發佈一些代碼嗎？ – sirmdawg

一個簡單的解決方案可能只是使用jQuery來隱藏對象......

Assumming這是一個<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插件如何設置閃光燈，所以你可能需要修改一些代碼。

如果您不包括這個z-index屬性將無法正常工作。（這可能是您嘗試的背景圖片無法正常工作的原因。）

來源

2012-05-19 07:33:51 sirmdawg

jquery內置的攝像頭屏幕上的圖像

回答

相關問題