CODEWITHSUNDEEP
jquerywebcamhtml5-canvas
janoliver
janoliver

Reputation: 7824

Canvas element over div: Webcam photo capturing

I want to make work the following behaviour, using jquery and the jQuery webcam plugin: After clicking a button, the .webcam object should be attached to some div. When I click another button, a picture is captured and drawn in a canvas, that lies on top of the div. To the user, it should seem like the image froze. Then, there should be a third button that removes the picture taken and the video stream is shown again, without the need to click accept in the flash opopup window for camera usage again.

I know how to place a canvas on top of the div, and it works, but as soon as the flash object is attached to the div, it seems like it comes to the front and the canvas is hidden behind it. When I call $("div").hide(), the canvas with the picture is shown, but $("div").show() then asks for permission to use the camera again.

What is the best way to solve this (possibly without hacking this jQuery plugin)?

Edit

One way to solve it, is setting the div's size to 1x1px while it should be hidden. This, however, is imo not the most elegant solution...

Upvotes: 0

Views: 1089

Answers (1)

Shomz
Shomz

Reputation: 37701

See here and don't forget to add the wmode parameter. It's the same principle as your streaming element becomes a background covered with a static image.

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

Upvotes: 1

Related Questions