Canvas par dessus un objet flash

Bonjour,

J'utilise actuellement le plugin JQuery Webcam et je souhaite dessiner des éléments par dessus le retour video (ex : un ovale). J'ai décidé d'utiliser un canvas mais je n'arrive pas à le faire passer devant mon retour video. J'ai tenté de modifier le z-index mais je n'y arrive pas.

Mon css est le suivant :

 
#webcam-object{
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -180px 0 0 -240px;
    z-index: 4;
}
 
#canvas{
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -180px 0 0 -240px;
    z-index: 60;
}
 
 
#webcam a {
	background:#fff;
	font-weight:bold;
}
 
#webcam a > img {
	border:0px none;
}
 
#flash {
	position:absolute;
	top:0px;
	left:0px;
	z-index:5;
	width:100%;
	height:500px;
	background-color:#c00;
	display:none;
}
 
object {
	display:block; /* HTML5 fix */
	position:relative;
	z-index:4;
}

le html :

 
    <div id="webcam">
        <canvas id="canvas"></canvas>
        <object id="webcam-object" width="320" height="240" data="/js/jscam_canvas_only.swf" type="application/x-shockwave-flash">
            <param value="/js/jscam_canvas_only.swf" name="movie">
            <param value="mode=callback&quality=85" name="FlashVars">
        </object>
    </div>

et le javascript pour le canvas :

 
window.onload = function(){
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
 
    context.save(); // save state
    var centerX = 0;
    var centerY = 0;
    var radius = 50;
 
    context.background_color = "rgba(1,1,1,0.5)";
    context.translate(canvas.width / 2, canvas.height / 2);
    context.scale(2, 1);
 
    context.beginPath();
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
 
    context.restore(); // restore to original state
    context.fillStyle = "rgba(0,0,0,1)";
 
    context.fill();
    context.lineWidth = 5;
    context.strokeStyle = "black";
    context.stroke();
};

Si vous avez une idée, je suis preneur.

Le flash est par défaut au dessus de tout éléments.
La seule solution est de placer <param name="WMODE" value="Transparent" /> dans tes paramètres de chargement de l'application flash.

A+

WebD a écrit :
Le flash est par défaut au dessus de tout éléments.
La seule solution est de placer &lt;param name=&quot;WMODE&quot; value=&quot;Transparent&quot; /&gt; dans tes paramètres de chargement de l'application flash.

A+

... et de lui attribuer également un peu de .css

<style type="text/.css">

object{z-index:1; display:inline-block; position:relative}
#mon-element{z-index:2; display:inline-block; position:relative}

</style>
Modifié par zebulin (26 Apr 2012 - 19:26)

Merci pour votre aide. J'ai ajouté le css et le <param name="WMODE" value="Transparent" /> mais mon flash ne s'affiche pas. J'ai aussi trouvé ce code qui fonctionne bien avec le swf fourni mais pas avec celui de JQuery Webcam Plugin. J'ai le code source du swf, dois-je rajouter une option en plus ?

<div style="background-color: black;height:400px;position:relative;">
                <div style="position: absolute;z-index: 1;">
                   <object id="sfondo-flash" width="600" height="400" align="middle" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
                        <param value="always" name="allowScriptAccess">
                        <param value="false" name="allowFullScreen">
                        <param value="http://www.onsitus.it/css-tutorials/sfondo-flash/sfondo-flash.swf" name="movie">
                        <param value="high" name="quality">
                        <param value="transparent" name="wmode">
                        <param value="#333366" name="bgcolor">
                        <embed width="600" height="400" align="middle" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowfullscreen="false" allowscriptaccess="always" name="sfondo-flash" bgcolor="#333366" wmode="transparent" quality="high" src="http://www.onsitus.it/css-tutorials/sfondo-flash/sfondo-flash.swf">
                            <br>
                    </object>
                </div>
                <div style="height: 50px;position: relative;z-index: 2;background-color: #333366;top:60px;text-align:center;padding: 20px 0;margin-top:50px;">
                    <h2>HTML ELEMENT ABOVE A FLASH ELEMENT</h2>
                </div>
            </div>

Bon je pense que mon problème relève plus d'un problème sous linux suite à cette lecture.http://stackoverflow.com/questions/4861268/flex-security-panel-on-unix-with-wmode-transparent-doesnt-show-up. Le problème vient du panel securité qui demande votre accord pour pouvoir accéder à la webcam. Sauf que ce panel est invisible avec le mode transparent activé. Une personne parle de changer le WMode en cours de route mais je me demande si cela est réalisable ?

Avez-vous idée sur la manière de faire ?