Canvas element over div：網絡攝像頭拍照

我想使用jquery和jQuery webcam plugin使下列行爲工作：單擊按鈕後，.webcam對象應附加到某個div。當我點擊另一個按鈕時，圖片被捕獲並繪製在位於div頂部的畫布中。對用戶來說，它應該看起來像圖像凍結。然後，應該有第三個按鈕可以刪除拍攝的照片並再次顯示視頻流，而無需在閃光燈opopup窗口中再次點擊accept以使用照相機。Canvas element over div：網絡攝像頭拍照

我知道如何在div的頂部放置一個畫布，它可以工作，但只要flash對象連接到div，就好像它來到前面，畫布隱藏在它的後面。當我撥打時，會顯示帶有圖片的畫布，但$("div").show()會要求再次使用相機。

解決這個問題的最佳方法是什麼（可能沒有黑客入侵這個jQuery插件）？

編輯

一種方法來解決這個問題，是設置div的大小1x1px而應該被隱藏。然而，這是imo不是最優雅的解決方案...

來源

2011-11-05 janoliver

您是否嘗試過使用z-index和不透明度的元素進行試驗？ – Shomz

我試着用z-index，一旦flash對象連接到div，它就會進入前景。我非常確定，我無法設置正在運行的Flash動畫/視頻流的不透明度。 – janoliver

你有沒有把這個添加到flash對象？ – Shomz

請參閱here並且不要忘記添加wmode參數。這與流式傳輸元素成爲靜態圖像背景的原理相同。

<param name="wmode" value="transparent">

來源

2011-11-05 15:00:47 Shomz

Hello Shomz，感謝您的幫助！不幸的是，Adobe不喜歡它：http://www.adobe.com/devnet/flashplayer/articles/fplayer10_security_changes.html#head35 – janoliver

該死的......對不起。你可能會減小流式傳輸窗口的大小並將其移動到頁面上的其他位置嗎？仍然不是一個整潔的解決方案，但比去1x1px好一點（實際上它可能看起來不錯），否則，似乎你卡在這裏。 – Shomz

這實際上是一個不錯的主意，保持一個較小的窗口。無論如何，暫時我會堅持使用1x1 px解決方案。這是hacky，但它的工作原理。 – janoliver

Canvas element over div：網絡攝像頭拍照

回答

相關問題