div 上的画布元素：网络摄像头照片捕获答案

【问题标题】：Canvas element over div: Webcam photo capturingdiv 上的画布元素：网络摄像头照片捕获
【发布时间】：2011-12-22 15:38:30
【问题描述】：

我想使用 jquery 和jQuery webcam plugin 实现以下行为：单击按钮后，.webcam 对象应附加到某个 div。当我单击另一个按钮时，会在画布中捕获并绘制一张图片，该画布位于 div 的顶部。对用户来说，它应该看起来像图像冻结。然后，应该有第三个按钮，可以删除拍摄的照片并再次显示视频流，无需在闪光灯弹出窗口中单击accept再次使用相机。

我知道如何在 div 上放置一个画布，并且它可以工作，但是一旦将 flash 对象附加到 div，它就好像它来到了前面，而画布隐藏在它后面。当我调用$("div").hide() 时，会显示带有图片的画布，但$("div").show() 然后会请求再次使用相机的权限。

解决这个问题的最佳方法是什么（可能不需要破解这个 jQuery 插件）？

编辑

解决它的一种方法是将 div 的大小设置为 1x1px，而它应该被隐藏。然而，这并不是 imo 最优雅的解决方案......

【问题讨论】：

您是否尝试过使用元素的 z-index 和不透明度？
我尝试使用 z-index，一旦 flash 对象附加到 div 上，它就会出现在前台。我很确定我无法设置正在运行的 Flash 动画/视频流的不透明度。
你有没有把它添加到 flash 对象中？

标签： jquery webcam html5-canvas

【解决方案1】：

请参阅here，不要忘记添加 wmode 参数。这与您的流媒体元素成为被静态图像覆盖的背景的原理相同。

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

【讨论】：

您好 Shomz，感谢您的帮助！不幸的是，Adobe 不喜欢它：adobe.com/devnet/flashplayer/articles/…
该死的......对不起。您是否可以减小流媒体窗口的大小并将其移动到页面上的其他位置？仍然不是一个简洁的解决方案，但比 1x1px 好一点（实际上它看起来不错）......否则，你似乎被困在这里了。
这实际上是一个好主意，保持一个较小的窗口。无论如何，目前我将坚持使用 1x1 px 解决方案。这是 hacky，但它有效。