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 :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
#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 :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
 
    <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 :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
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.