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