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 :
le html :
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; }
et le javascript pour le canvas :
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>
Si vous avez une idée, je suis preneur.
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(); };
Partager