Bonjour, je travail actuellement sur le traitement des vidéos stéréoscopiques, je rajoute des effets a une vidéo stéréoscopique pour au final ajouté un effet anaglyphe, mon probléme se pose sur mes fonctions, des que je clique sur normal j'ai une vidéo parfaite, puis si je clique sur bouton noir/blanc j'ai un effet clignotant ( n/b... normal...n/b...normal....ainsi de suite) j'aimerai arangé ça vu que c'est mon seul souci, merci
<!DOCTYPE html><metacharset=utf-8/><scriptsrc="video.js"type="text/javascript"></script><linkhref="video-js.css"rel="stylesheet"type="text/css"><title>Mon projet </title><h1><marquee>Streaming </marquee></h1><center><h1> Choisir effet </h1><spanid="cvsModeLbl">Mode:</span><inputtype="button"id="cvsbtnNormal"value="Normal"/><inputtype="button"id="cvsbtnBW"value="Black & White"/><h1> Vidéo Side by side</h1><videoid=vcontrolsloopwidth="500"height="400"><sourcesrc=video2.mp4type=video/mp4><sourcesrc=video2.webmtype=video/webm><sourcesrc=video2.oggtype=video/ogg></video><canvasid=cwidth="500"height="400"></canvas><style> c {background: black;}</style><script>var v = document.getElementById('v');var canvas = document.getElementById('c');var context = canvas.getContext('2d');var back = document.createElement('canvas');var backcontext = back.getContext('2d');var back1 = document.createElement('canvas');var backcontext1 = back1.getContext('2d'); v.crossOrigin ='anonymous';var cw,ch; cw = v.width; ch = v.height; back.width=cw; back.hight=ch; back1.width=cw; back1.height=ch;var effectNormal = document.getElementById("cvsbtnNormal");var effectBw = document.getElementById("cvsbtnBW"); effectNormal.addEventListener("click", myFunction); effectBw.addEventListener("click", myFunction1);function myFunction(){ context.clearRect(0,0,500,400);// First, draw it into the backing canvas context.drawImage(v,0,0,cw,ch); setTimeout(function(){ myFunction()},0);}function myFunction1(){ context.clearRect(0,0,500,400); context.drawImage(v,0,0,cw,ch);// Grab the pixel data from the backing canvasvar idata = context.getImageData(0,0,cw,ch);var data = idata.data;// Loop through the pixels, turning them grayscalefor(var i =0; i < data.length; i+=4){var r = data[i], g = data[i+1], b = data[i+2], gray =(r+g+b)/3; data[i]= gray; data[i+1]= gray; data[i+2]= gray;} idata.data = data;// Draw the pixels onto the visible canvas context.putImageData(idata,0,0);// Start over! setTimeout(function(){ myFunction1();},0);}</script>
- Edité par Amelmaouche1 12 janvier 2018 à 13:30:16
javaScript, HTML5 , canvas
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
